diff --git a/examples/demo/demo.nim b/examples/demo/demo.nim index ccbe3871..258da43a 100644 --- a/examples/demo/demo.nim +++ b/examples/demo/demo.nim @@ -18,7 +18,7 @@ var proc basicText() = frame "autoLayoutText": - box 130, 0, root.box.w - 130, 491 + box 130, 0, root.getScaled(box).w - 130, 491 fill "#ffffff" layout lmVertical counterAxisSizingMode csFixed @@ -122,7 +122,7 @@ proc basicControls() = strokeWeight 1 rectangle "fill": progress = selectedButton.len / 5 * 100 - box 2, 2, int((parent.box.w - 4) * (progress/100)), 8 + box 2, 2, clamp(int((parent.getScaled(box).w - 4) * (progress/100)), 1, parent.getScaled(box).w.int), 8 fill "#9fe7f8" cornerRadius 5 @@ -173,8 +173,8 @@ proc basicControls() = onClick: pipDrag = true if pipDrag: - pipPos = int(mouse.pos.x - current.screenBox.x) - pipPos = clamp(pipPos, 0, 240) + pipPos = int(mouse.getScaled(pos).x - current.getScaled(screenBox).x) + pipPos = clamp(pipPos, 1, 240) pipDrag = buttonDown[MOUSE_LEFT] rectangle "pip": box pipPos, 0, 10, 10 @@ -303,7 +303,7 @@ proc basicConstraints() = # Got to specify orgBox for constraints to work. orgBox 0, 0, 400, 400 # Then grow the normal box. - box 130, 0, root.box.w - 130, root.box.h + box 130, 0, root.getScaled(box).w - 130, root.getScaled(box).h # Constraints will work on the difference between orgBox and box. fill "#ffffff" rectangle "Center": @@ -340,12 +340,12 @@ proc drawMain() = component "iceUI": orgBox 0, 0, 530, 185 - box root.box + box root.getScaled(box) fill "#ffffff" group "shadow": orgBox 0, 0, 530, 3 - box 0, 0, root.box.w, 3 + box 0, 0, root.getScaled(box).w, 3 rectangle "l1": box 0, 0, 530, 1 constraints cStretch, cMin @@ -401,4 +401,4 @@ proc drawMain() = of "Constraints": basicConstraints() -startFidget(drawMain, w = 530, h = 300) +startFidget(drawMain, w = 3*530, h = 3*300, uiScale=3.0) diff --git a/examples/padoftext/padoftext.nim b/examples/padoftext/padoftext.nim index 5d5a8efb..9714769e 100644 --- a/examples/padoftext/padoftext.nim +++ b/examples/padoftext/padoftext.nim @@ -22,15 +22,15 @@ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac tu proc drawMain() = group "pad": - box 100, 100, parent.box.w - 200, parent.box.h - 200 + box 100, 100, parent.getScaled(box).w - 200, parent.getScaled(box).h - 200 font "IBM Plex Sans Regular", 20.0, 400.0, 25, hLeft, vTop fill "#F7F7F9" clipContent true text "input": - box 0, 0, parent.box.w, parent.box.h + box 0, 0, parent.getScaled(box).w, parent.getScaled(box).h fill "#000000" multiline true binding textValue -startFidget(drawMain) +startFidget(drawMain, uiScale=2) diff --git a/src/fidget.nim b/src/fidget.nim index 4c439815..d5650798 100644 --- a/src/fidget.nim +++ b/src/fidget.nim @@ -222,9 +222,9 @@ proc font*( ) = ## Sets the font. current.textStyle.fontFamily = fontFamily - current.textStyle.fontSize = fontSize - current.textStyle.fontWeight = fontWeight - current.textStyle.lineHeight = lineHeight + current.textStyle.fontSize = common.uiScale*fontSize + current.textStyle.fontWeight = common.uiScale*fontWeight + current.textStyle.lineHeight = if lineHeight != 0.0: common.uiScale*lineHeight else: common.uiScale*fontSize current.textStyle.textAlignHorizontal = textAlignHorizontal current.textStyle.textAlignVertical = textAlignVertical @@ -234,15 +234,15 @@ proc fontFamily*(fontFamily: string) = proc fontSize*(fontSize: float32) = ## Sets the font size in pixels. - current.textStyle.fontSize = fontSize + current.textStyle.fontSize = fontSize*3.0 proc fontWeight*(fontWeight: float32) = ## Sets the font weight. - current.textStyle.fontWeight = fontWeight + current.textStyle.fontWeight = 3*fontWeight proc lineHeight*(lineHeight: float32) = ## Sets the font size. - current.textStyle.lineHeight = lineHeight + current.textStyle.lineHeight = 3*lineHeight proc textAlign*(textAlignHorizontal: HAlign, textAlignVertical: VAlign) = ## Sets the horizontal and vertical alignment. @@ -268,17 +268,17 @@ proc image*(imageName: string) = proc orgBox*(x, y, w, h: int|float32|float32) = ## Sets the box dimensions of the original element for constraints. - current.orgBox.x = float32 x - current.orgBox.y = float32 y - current.orgBox.w = float32 w - current.orgBox.h = float32 h + current.orgBox.x = common.uiScale * float32 x + current.orgBox.y = common.uiScale * float32 y + current.orgBox.w = common.uiScale * float32 w + current.orgBox.h = common.uiScale * float32 h proc box*(x, y, w, h: float32) = ## Sets the box dimensions. - current.box.x = x - current.box.y = y - current.box.w = w - current.box.h = h + current.box.x = common.uiScale*x + current.box.y = common.uiScale*y + current.box.w = common.uiScale*w + current.box.h = common.uiScale*h proc box*( x: int|float32|float64, @@ -341,7 +341,7 @@ proc zLevel*(zLevel: int) = proc cornerRadius*(a, b, c, d: float32) = ## Sets all radius of all 4 corners. - current.cornerRadius = (a, b, c, d) + current.cornerRadius = (3*a, 3*b, 3*c, 3*d) proc cornerRadius*(radius: float32) = ## Sets all radius of all 4 corners. diff --git a/src/fidget/common.nim b/src/fidget/common.nim index 5c70be59..0002a99a 100644 --- a/src/fidget/common.nim +++ b/src/fidget/common.nim @@ -229,6 +229,9 @@ var ## Used for HttpCalls httpCalls*: Table[string, HttpCall] + # UI Scale + uiScale*: float32 = 1.0 + proc newUId*(): string = # Returns next numerical unique id. inc lastUId @@ -491,3 +494,8 @@ proc computeScreenBox*(parent, node: Node) = node.screenBox = node.box + parent.screenBox for n in node.nodes: computeScreenBox(node, n) + +template getScaled*(node, box: untyped): untyped = + node.`box`/uiScale + + diff --git a/src/fidget/opengl/base.nim b/src/fidget/opengl/base.nim index 70c186ca..3ee4ee79 100644 --- a/src/fidget/opengl/base.nim +++ b/src/fidget/opengl/base.nim @@ -271,8 +271,9 @@ proc onSetKey( proc onScroll(window: staticglfw.Window, xoffset, yoffset: float64) {.cdecl.} = requestedFrame = true + let yoffset = yoffset * common.uiScale if keyboard.focusNode != nil: - textBox.scrollBy(-yoffset * 50) + textBox.scrollBy(-yoffset * 1) else: mouse.wheelDelta += yoffset diff --git a/src/fidget/openglbackend.nim b/src/fidget/openglbackend.nim index e4c7c481..e8b6d7db 100644 --- a/src/fidget/openglbackend.nim +++ b/src/fidget/openglbackend.nim @@ -58,6 +58,8 @@ proc focus*(keyboard: Keyboard, node: Node) = var font = fonts[node.textStyle.fontFamily] font.size = node.textStyle.fontSize font.lineHeight = node.textStyle.lineHeight + # if font.lineHeight == 0: + # font.lineHeight = font.size keyboard.input = node.text textBox = newTextBox( font, @@ -92,7 +94,9 @@ proc drawText(node: Node) = let mousePos = mouse.pos - node.screenBox.xy - if node.selectable and mouse.down and mouse.pos.overlaps(node.screenBox): + if node.selectable and mouse.wheelDelta != 0: + keyboard.focus(node) + elif node.selectable and mouse.down and mouse.pos.overlaps(node.screenBox): # mouse actions click, drag, double clicking keyboard.focus(node) if mouse.click: @@ -388,10 +392,12 @@ proc startFidget*( msaa = msaaDisabled, mainLoopMode: MainLoopMode = RepaintOnEvent, pixelate = false, - pixelScale = 1.0 + pixelScale = 1.0, + uiScale = 1.0 ) = ## Starts Fidget UI library common.fullscreen = fullscreen + common.uiScale = uiScale if not fullscreen: windowSize = vec2(w.float32, h.float32) drawMain = draw