theme picker

* select box improvement [requires 0.13.2]

* p0.13.2

* dev

* Update selection.lua

* Update main.lua

* Colour picker!

workshop/controllers/core/selection.lua

@@ -192,4 +192,4 @@ keybinder:bind({
 
 controller.box = boundingBox
 
-return controller
+return controller

workshop/controllers/environment/main.lua

@@ -32,11 +32,10 @@ return {
 			colour         = colour(0, 1, 0),
 			size           = vector3(1, 1, 1),
 			position       = vector3(1, 0, 0),
-			mesh		   = "primitive:wedge",
+			mesh	       = "primitive:wedge",
 			rotation       = quaternion:setEuler(0, math.rad(90), 0)
 		})
 
-
 		local block = engine.construct("block", workspace, {
 			name           = "blueBlock",
 			colour         = colour(0, 0, 1),
@@ -68,4 +67,4 @@ return {
 			end
 		end
 	end
-}
+}

workshop/controllers/sidetools/move.lua

@@ -117,7 +117,7 @@ return {
                     doNotSerialise  = true,
                     size            = vector3(0.1, 0.1, 0.1),
                     colour          = colour(axisNumber == 1 and 1 or 0, axisNumber == 2 and 1 or 0, axisNumber == 3 and 1 or 0),
-                    emissiveColour  = colour(axisNumber == 1 and 1 or 0, axisNumber == 2 and 1 or 0, axisNumber == 3 and 1 or 0), 
+                    --emissiveColour  = colour(axisNumber == 1 and 1 or 0, axisNumber == 2 and 1 or 0, axisNumber == 3 and 1 or 0), 
                     workshopLocked  = true,
                     mesh            = "primitive:cone"
                 })

workshop/controllers/sidetools/rotate.lua

@@ -95,7 +95,7 @@ return {
                 doNotSerialise=true,
                 size = vector3(.4, 0.1, .4),
                 colour = colour(axis == 1 and 1 or 0, axis == 2 and 1 or 0, axis == 3 and 1 or 0),
-                emissiveColour = colour(axis == 1 and 0.5 or 0, axis == 2 and 0.5 or 0, axis == 3 and 0.5 or 0),
+                --emissiveColour = colour(axis == 1 and 0.5 or 0, axis == 2 and 0.5 or 0, axis == 3 and 0.5 or 0),
                 workshopLocked = true,
                 mesh = "tevurl:3d/arrowCurved.glb"
             })

workshop/controllers/sidetools/scale.lua

@@ -125,7 +125,7 @@ return {
                     doNotSerialise  = true,
                     size            = vector3(0.1, 0.1, 0.1),
                     colour          = colour(axisNumber == 1 and 1 or 0, axisNumber == 2 and 1 or 0, axisNumber == 3 and 1 or 0),
-                    emissiveColour  = colour(axisNumber == 1 and 1 or 0, axisNumber == 2 and 1 or 0, axisNumber == 3 and 1 or 0), 
+                    --emissiveColour  = colour(axisNumber == 1 and 1 or 0, axisNumber == 2 and 1 or 0, axisNumber == 3 and 1 or 0), 
                     workshopLocked  = true
                 })
 

workshop/controllers/ui/components/colourPicker.lua

@@ -0,0 +1,299 @@
+--[[
+    Requires refactoring
+]]
+
+local controller = {}
+
+local ui = require("tevgit:workshop/controllers/ui/core/ui.lua")
+local shared = require("tevgit:workshop/controllers/shared.lua")
+
+local hues = {
+	colour(1,0,0),
+	colour(1,0,1),
+	colour(0,0,1),
+	colour(0,1,1),
+	colour(0,1,0),
+	colour(1,1,0),
+	colour(1,0,0),
+}
+
+local window = ui.window(shared.workshop.interface, 
+                                        "Colour Picker",
+                                        guiCoord(0, 300, 0, 186), 
+                                        guiCoord(0.5, -150, 0.5, -93), 
+                                        false,
+                                        true)
+window.zIndex = 10
+window.visible = false
+local callback = nil
+
+local startColour = colour(1,0,0)
+local currentColour = colour(1,0,0)
+
+local colourPickerGradient = engine.construct("guiFrameMultiColour", window.content, {
+    name = "square",
+    size = guiCoord(0, 150, 0, 150),
+    position = guiCoord(0, 5, 0, 5),
+    topLeftColour = colour(1,1,1),
+    topRightColour = startColour,
+    bottomLeftColour = colour(1,1,1),
+    bottomRightColour = startColour
+})
+
+-- To have black on the bottom we need to overlay this...
+engine.construct("guiFrameMultiColour", colourPickerGradient, {
+    name = "overlay",
+    size = guiCoord(1,0,1,0),
+    position = guiCoord(0, 0, 0, 0),
+
+    topLeftColour = colour(0,0,0),
+    topLeftAlpha  = 0,
+
+    topRightColour = colour(0,0,0),
+    topRightAlpha  = 0,
+
+    bottomLeftColour = colour(0,0,0),
+    bottomLeftAlpha  = 1,
+
+    bottomRightColour = colour(0,0,0),
+    bottomRightAlpha  = 1,
+
+    handleEvents = false
+})
+
+local marker = engine.construct("guiFrame", colourPickerGradient, {
+    name = "marker",
+    size = guiCoord(0, 6, 0, 6),
+    position = guiCoord(0, 0, 0, 0),
+    handleEvents=false,
+    backgroundColour = colour(1,1,1),
+    borderColour = colour(0,0,0),
+    zIndex = 10,
+    borderWidth = 1,
+    borderRadius = 6,
+    borderAlpha = 1
+})
+
+local hueBar = engine.construct("guiFrame", window.content, {
+    name = "hueBar",
+    size = guiCoord(0, 30, 1, -10),
+    position = guiCoord(0, 160, 0, 5),
+    backgroundAlpha = 0
+})
+
+local hueBarMARKER = engine.construct("guiFrame", hueBar, {
+    name = "hueBarMARKER",
+    size = guiCoord(1, 0, 0, 1),
+    position = guiCoord(0, 0, 0, 0),
+    handleEvents=false,
+    backgroundAlpha = 0,
+    borderColour = colour(0,0,0),
+    zIndex = 10,
+    borderWidth = 2,
+    borderAlpha = 1
+})
+
+for i = 1, 6 do
+    local colourPickerGradient = engine.construct("guiFrameMultiColour", hueBar, {
+        handleEvents = false,
+        size = guiCoord(1, 0, 1/6, 1),
+        position = guiCoord(0, 0, (i-1)*(1/6), 0),
+        topLeftColour = hues[i],
+        topRightColour = hues[i],
+        bottomLeftColour = hues[i+1],
+        bottomRightColour = hues[i+1],
+        handleEvents = false
+    })
+end
+
+local rLabel = ui.create("guiTextBox", window.content, {
+    name = "labelR",
+    size = guiCoord(0, 20, 0, 16),
+    position = guiCoord(0,200,0,5),
+    fontSize = 16,
+    textAlpha = 0.6,
+    text = "R",
+    align = enums.align.topLeft
+}, "primaryText")
+
+local rInput = ui.create("guiTextBox", window.content, {
+    backgroundAlpha = 0.25,
+    readOnly = false,
+    multiline = false,
+    fontSize = 18,
+    name = "r",
+    size = guiCoord(1, -220, 0,16),
+    position = guiCoord(0, 220, 0, 5),
+    text = "1",
+    align = enums.align.middle
+}, "primary")
+
+local gLabel = rLabel:clone()
+gLabel.name = "gLabel"
+gLabel.text = "G"
+gLabel.parent = window.content
+gLabel.position = guiCoord(0, 200, 0, 22)
+--themeController.add(gLabel, "primaryText")
+
+local g = rInput:clone()
+g.name = "g"
+g.parent = window.content
+g.position = guiCoord(0, 220, 0, 22)
+-- themeController.add(g, "primary")
+
+local bLabel = rLabel:clone()
+bLabel.name = "bLabel"
+bLabel.text = "B"
+bLabel.parent = window.content
+bLabel.position = guiCoord(0, 200, 0, 39)
+--themeController.add(bLabel, "primaryText")
+
+local b = rInput:clone()
+b.name = "b"
+b.parent = window.content
+b.position = guiCoord(0, 220, 0, 39)
+
+
+local hexLabel = rLabel:clone()
+hexLabel.name = "hexLabel"
+hexLabel.text = "#"
+hexLabel.parent = window.content
+hexLabel.position = guiCoord(0, 200, 0, 56)
+--themeController.add(bLabel, "primaryText")
+
+local HEX = rInput:clone()
+HEX.name = "FFFFFF"
+HEX.parent = window.content
+HEX.position = guiCoord(0, 220, 0, 56)
+--  themeController.add(b, "primary")
+
+local preview = engine.construct("guiFrame", window.content, {
+    position = guiCoord(0, 220, 0, 73),
+    size = guiCoord(1, -220, 0, 16)
+})
+
+local function handler()
+    local newR = tonumber(rInput.text)
+    local newG = tonumber(g.text)
+    local newB = tonumber(b.text)
+    if not newR or not newG or not newB then return end
+
+    controller.setColour(colour:fromRGB(newR, newG, newB))
+end
+
+rInput:textInput(handler)
+g:textInput(handler)
+b:textInput(handler)
+HEX:textInput(function()
+    controller.setColour(colour:fromHex(HEX.text), true)
+end)
+
+hueBar:mouseLeftPressed(function ()
+    while engine.input:isMouseButtonDown(enums.mouseButton.left) do
+        local pos = engine.input.mousePosition - hueBar.absolutePosition
+        local size = hueBar.absoluteSize
+
+        local y = pos.y/hueBar.absoluteSize.y
+
+        local sector = math.ceil(pos.y/(size.y * (1/6)))
+        local hue = hues[sector]
+        if hue and hues[sector+1] then 
+
+            hueBarMARKER.position = guiCoord(0,0,y,0)
+
+            local selected = hue:lerp(hues[sector+1], (y - ((size.y * ((sector-1)/6))/hueBar.absoluteSize.y)) / (1/6))
+            startColour = selected
+            colourPickerGradient.topRightColour = startColour
+            colourPickerGradient.bottomRightColour = startColour
+
+            local x = (marker.position.offsetX)/colourPickerGradient.absoluteSize.x
+            local y = (marker.position.offsetY)/colourPickerGradient.absoluteSize.y
+
+            local selectedColour = startColour:lerp(colour(1,1,1), 1-x)
+            selectedColour = selectedColour:lerp(colour(0,0,0), y)
+            preview.backgroundColour = selectedColour
+
+            rInput.text = tostring(math.floor(selectedColour.r*255))
+            g.text = tostring(math.floor(selectedColour.g*255))
+            b.text = tostring(math.floor(selectedColour.b*255))
+            HEX.text = selectedColour:getHex()
+        end
+
+        wait()
+    end
+
+    if callback then
+        callback(preview.backgroundColour)
+    end
+end)
+
+colourPickerGradient:mouseLeftPressed(function ()
+    while engine.input:isMouseButtonDown(enums.mouseButton.left) do
+        local pos = engine.input.mousePosition - colourPickerGradient.absolutePosition
+        marker.position = guiCoord(0, pos.x-2, 0, pos.y-2)
+
+        local x = pos.x/colourPickerGradient.absoluteSize.x
+        local y = pos.y/colourPickerGradient.absoluteSize.y
+
+        local selectedColour = startColour:lerp(colour(1,1,1), 1-x)
+        selectedColour = selectedColour:lerp(colour(0,0,0), y)
+        preview.backgroundColour = selectedColour
+
+        rInput.text = tostring(math.floor(selectedColour.r*255))
+        g.text = tostring(math.floor(selectedColour.g*255))
+        b.text = tostring(math.floor(selectedColour.b*255))
+        HEX.text = selectedColour:getHex()
+        wait()
+    end
+
+    if callback then
+        callback(preview.backgroundColour)
+    end
+end)
+
+controller.setColour = function(c, dontUpdateHex)
+    local h,s,l = c:getHSV()
+    h=(1-h)*360
+    local markerh = math.ceil(h / 60)
+    if markerh <= 0 then markerh = 1 end
+
+    local pos = hueBar.absolutePosition
+    local size = hueBar.absoluteSize
+
+    local hue = hues[markerh]
+
+    local selected = hue:lerp(hues[markerh+1], ((h - (60*(markerh-1)))/60))
+
+    startColour = selected
+    colourPickerGradient.topRightColour = startColour
+    colourPickerGradient.bottomRightColour = startColour
+
+    preview.backgroundColour = c
+
+    rInput.text = tostring(math.floor(c.r*255))
+    g.text = tostring(math.floor(c.g*255))
+    b.text = tostring(math.floor(c.b*255))
+    if not dontUpdateHex then
+        HEX.text = c:getHex()
+    end
+
+    marker.position = guiCoord(0, (s) * colourPickerGradient.absoluteSize.x, 0, (1-l) * colourPickerGradient.absoluteSize.y)
+    marker.position = marker.position + guiCoord(0, -2, 0, -2)
+
+    hueBarMARKER.position = guiCoord(0,0,h/360,0)
+
+    if callback then
+        callback(preview.backgroundColour)
+    end
+end
+
+controller.window = window
+
+controller.prompt = function(startColour, cb)
+    callback = nil
+    controller.setColour(startColour)
+    callback = cb
+    controller.window.visible = true
+end
+
+return controller

workshop/controllers/ui/components/propertyEditor/createInputs.lua

@@ -4,6 +4,7 @@ local modulePrefix = "tevgit:workshop/controllers/ui/components/propertyEditor/"
 
 local ui = require("tevgit:workshop/controllers/ui/core/ui.lua")
 local themer = require("tevgit:workshop/controllers/ui/core/themer.lua")
+local colourPicker = require("tevgit:workshop/controllers/ui/components/colourPicker.lua")
 
 local parseInputs = require(modulePrefix .. "parseInputs.lua")
 local meshShortcuts = require(modulePrefix .. "meshShortcuts.lua")
@@ -15,8 +16,8 @@ createInputs = {
     return ui.create("guiFrame", nil, {
       backgroundAlpha = 0.25,
       name = "inputContainer",
-      size = guiCoord(0.4, 0, 0, 20),
-      position = guiCoord(0.6,0,0,0),
+      size = guiCoord(0.45, 0, 0, 20),
+      position = guiCoord(0.55,0,0,0),
       cropChildren = false
     }, "secondary")
   end,
@@ -218,7 +219,7 @@ createInputs = {
     if property == "mesh" then
       container.zIndex = 30 -- important because child elements need to be rendered above other properties!
       container.size = container.size + guiCoord(0,0,0,20)
-
+      x.fontSize = 14
 
       local presetSelect = ui.create("guiTextBox", container, {
           size = guiCoord(1, -4, 0, 16),
@@ -629,18 +630,11 @@ createInputs = {
       borderRadius = 2,
     })
 
-    -- col:mouseLeftReleased(function ()
-    --   controller.colourPicker.window.visible  = not controller.colourPicker.window.visible 
-    --   if controller.colourPicker.window.visible and instanceEditing and instanceEditing[property] then
-    --     controller.colourPicker.setColour(instanceEditing[property])
-    --     controller.colourPicker.setCallback(function (c)
-    --       x.text = tostring(c.r)
-    --       g.text = tostring(c.g)
-    --       b.text = tostring(c.b)
-    --       parseInputs[type(value)](property, container)
-    --     end)
-    --   end
-    -- end)
+    col:mouseLeftReleased(function ()
+      colourPicker.prompt(value, function(c)
+        instance[property] = c
+      end)
+    end)
 
     return container
   end,

workshop/controllers/ui/components/propertyEditor/parseInputs.lua

@@ -52,7 +52,7 @@ return {
 	colour = function(property, gui)
 		local r,g,b = tonumber(gui.r.text),tonumber(gui.g.text),tonumber(gui.b.text)
 		if r and g and b then
-			callbackInput(property, colour(r,g,b))
+			callbackInput(property, colour:fromRGB(r,g,b))
 		end
 	end,
 	

workshop/controllers/ui/components/propertyEditor/parseUpdates.lua

@@ -8,31 +8,45 @@ return {
 
   end,
   boolean = function (instance, gui, value)
+    if engine.input.keyFocusedGui == gui.input then return end
+
     gui.input.texture = value and "fa:s-toggle-on" or "fa:s-toggle-off"
     themer.registerGui(gui.input, value and "successImage" or "errorImage")
   end,
   number = function (instance, gui, value)
-    gui.input.text = tostring(value)
+    if engine.input.keyFocusedGui == gui.input then return end
+
+    gui.input.text = string.format("%.3f", value)
   end,
   string = function (instance, gui, value)
+    if engine.input.keyFocusedGui == gui.input then return end
+
     gui.input.text = value
   end,
   vector3 = function(instance, gui, value)
+    if engine.input.keyFocusedGui == gui.x or engine.input.keyFocusedGui == gui.y or engine.input.keyFocusedGui == gui.z then return end
+
     gui.x.text = string.format("%.3f", value.x)
     gui.y.text = string.format("%.3f", value.y)
     gui.z.text = string.format("%.3f", value.z)
   end,
   vector2 = function(instance, gui, value)
+    if engine.input.keyFocusedGui == gui.x or engine.input.keyFocusedGui == gui.y then return end
+
     gui.x.text = string.format("%.3f", value.x)
     gui.y.text = string.format("%.3f", value.y)
   end,
   colour = function(instance, gui, value)
-    gui.r.text = string.format("%.5f", value.r)
-    gui.g.text = string.format("%.5f", value.g)
-    gui.b.text = string.format("%.5f", value.b)
+    if engine.input.keyFocusedGui == gui.r or engine.input.keyFocusedGui == gui.g or engine.input.keyFocusedGui == gui.b then return end
+
+    gui.r.text = string.format("%.0f", value.r * 255)
+    gui.g.text = string.format("%.0f", value.g * 255)
+    gui.b.text = string.format("%.0f", value.b * 255)
     gui.col.backgroundColour = value
   end,
   quaternion = function(instance, gui, value)
+    if engine.input.keyFocusedGui == gui.x or engine.input.keyFocusedGui == gui.y or engine.input.keyFocusedGui == gui.z or engine.input.keyFocusedGui == gui.w then return end
+
     local euler = value:getEuler()
     gui.x.text = string.format("%.3f", math.deg(euler.x))
     gui.y.text = string.format("%.3f", math.deg(euler.y))
@@ -40,6 +54,8 @@ return {
     --gui.w.text = tostring(value.w)
   end,
   guiCoord = function(instance, gui, value)
+    if engine.input.keyFocusedGui == gui.scaleX or engine.input.keyFocusedGui == gui.offsetX or engine.input.keyFocusedGui == gui.scaleY or engine.input.keyFocusedGui == gui.offsetY then return end
+    
     gui.scaleX.text = tostring(value.scaleX)
     gui.offsetX.text = tostring(value.offsetX)
     gui.scaleY.text = tostring(value.scaleY)

workshop/controllers/ui/components/propertyEditor/window.lua

@@ -76,7 +76,7 @@ function controller.generateProperties()
 
                 local label = ui.create("guiTextBox", container, {
                     name = "label",
-                    size = guiCoord(0.6, -15, 1, 0),
+                    size = guiCoord(0.55, -15, 1, 0),
                     position = guiCoord(0, 0, 0, 0),
                     fontSize = 18,
                     text = v.property,

workshop/controllers/ui/components/themePreviewer.lua

@@ -3,46 +3,67 @@
 
 local ui = require("tevgit:workshop/controllers/ui/core/ui.lua")
 local shared = require("tevgit:workshop/controllers/shared.lua")
+local themer = require("tevgit:workshop/controllers/ui/core/themer.lua")
+local colourPicker = require("tevgit:workshop/controllers/ui/components/colourPicker.lua")
 
 local container = ui.create("guiFrame", shared.workshop.interface, {
-   size = guiCoord(1, -20, 1, 0),
+   size = guiCoord(1, -10, 1, 0),
    position = guiCoord(0, 10, 0, 10)
 }, "background")
 
-ui.create("guiTextBox", container, {
-   size = guiCoord(0.25, -10, 0.5, -10),
-   position = guiCoord(0, 5, 0, 5),
-   text = "Primary"
-}, "primary")
+local theme = themer.getTheme()
+local y = 0
+for _,prop in pairs(themer.types) do
+   local themeProperty = engine.construct("guiFrame", container, {
+      size = guiCoord(1, 0, 0, 40),
+      position = guiCoord(0, 0, 0, y),
+      backgroundAlpha = 0
+   })
+   
+   ui.create("guiTextBox", themeProperty, {
+      size = guiCoord(1, -10, 0, 16),
+      position = guiCoord(0, 6, 0, 2),
+      text = prop,
+      fontSize = 16,
+      align = enums.align.middleLeft,
+      fontFile = "local:OpenSans-SemiBold.ttf"
+   }, "backgroundText")
 
-ui.create("guiTextBox", container, {
-   size = guiCoord(0.25, -10, 0.5, -10),
-   position = guiCoord(0.25, 5, 0, 5),
-   text = "Primary\nVariant"
-}, "primaryVariant")
+   local count = 0
+   for _,v in pairs(theme[prop]) do if type(v) == "colour" then count = count + 1 end end
 
-ui.create("guiTextBox", container, {
-   size = guiCoord(0.25, -10, 0.5, -10),
-   position = guiCoord(0.5, 5, 0, 5),
-   text = "Secondary"
-}, "secondary")
+   local size = 1/count
+   local i = 0
 
-ui.create("guiTextBox", container, {
-   size = guiCoord(0.25, -10, 0.5, -10),
-   position = guiCoord(0.75, 5, 0, 5),
-   text = "Secondary\nVariant"
-}, "secondaryVariant")
+   for k,v in pairs(theme[prop]) do
+      if type(v) == "colour" then
+         local ch,cs,cv = v:getHSV()
+         local btn = ui.create("guiTextBox", themeProperty, {
+            size = guiCoord(size, -10, 0, 20),
+            position = guiCoord(size*i, 5, 0, 20),
+            text = k,
+            fontSize = 16,
+            align = enums.align.middle,
+            backgroundColour = v,
+            textColour = cv > 0.5 and colour:black() or colour:white(),
+            borderRadius = 4,
+            borderColour = colour:black(),
+            borderAlpha = 0.3
+         }, prop)
 
-ui.create("guiTextBox", container, {
-   size = guiCoord(0.5, -10, 0.5, -10),
-   position = guiCoord(0, 5, 0.5, 5),
-   text = "Error"
-}, "error")
+         btn:mouseLeftReleased(function()
+            print(theme, prop, k)
+            colourPicker.prompt(theme[prop][k], function(c)
+               theme[prop][k] = c
+               themer.setTheme(theme)
+            end)
+         end)
+         i = i + 1 
+      end
+   end
+
+   y = y + 44
+end
 
-ui.create("guiTextBox", container, {
-   size = guiCoord(0.5, -10, 0.5, -10),
-   position = guiCoord(0.5, 5, 0.5, 5),
-   text = "background"
-}, "background")
 
 return container

workshop/controllers/ui/core/dock.lua

@@ -63,8 +63,8 @@ controller.setupDocks = function ()
 		}),
 		engine.construct("guiFrame", shared.workshop.interface, {
 			name = "_dockRight",
-			size = guiCoord(0, 250, 1, -76),
-			position = guiCoord(1, -250, 0, 76),
+			size = guiCoord(0, 265, 1, -76),
+			position = guiCoord(1, -265, 0, 76),
 			backgroundAlpha = 0,
 			handleEvents = false,
 			cropChildren = false,

workshop/controllers/ui/core/themer.lua

@@ -53,6 +53,10 @@ return {
     	for gui,v in pairs(registeredGuis) do
     		themeriseGui(gui)
     	end
+    end,
+
+    getTheme = function()
+        return currentTheme
     end
     
 }

workshop/main.lua

@@ -86,6 +86,8 @@ local function beginLoad(workshop)
     	loadingScreen = nil
     end
 
+	local colourPicker = require("tevgit:workshop/controllers/ui/components/colourPicker.lua")
+
 	--print("Workshop Loaded. ", #engine.workspace.children) Lets not spam the console
 end