Merge pull request #69 from Sanjay-B/rewrite-tevx

Rewrote base components of Workshop

workshop/library/globals.lua

@@ -0,0 +1,22 @@
+-- Copyright 2020- Teverse.com
+-- Used to share variables between scripts
+
+return {
+    workshop = nil, -- Holds workshop instance and is set in main.lua
+    user = nil, -- Holds user instance and is set in main.lua
+    developerMode = false, -- Holds the developer_mode boolean and is set in main.lua
+    sideBarPageDefault = nil, -- Holds the default sidebar page (view) as a string and is set in topbarInterface.lua
+    sideBarPageActive = nil, -- Holds the current active sidebar page (view) as a string and is set in topbarInterface.lua
+    defaultColours = { -- Default colors used for theming UI components (~\library\ui\components)
+        primary = colour:fromRGB(112, 112, 112),
+        secondary = colour:fromRGB(239, 239, 239),
+        background = colour:fromRGB(33, 33, 33),
+        red = colour:fromRGB(255, 82, 82),
+        green = colour:fromRGB(105, 240, 174),
+        yellow = colour:fromRGB(255, 215, 64),
+        blue = colour:fromRGB(68, 138, 255),
+        orange = colour:fromRGB(255, 171, 64),
+        purple = colour:fromRGB(124, 77, 255),
+        white = colour:fromRGB(255, 255, 255)
+    }
+}

workshop/library/ui/components/toolTip.lua

@@ -0,0 +1,133 @@
+-- Copyright 2020- Teverse
+-- This script constructs (or builds) the tooltip component
+
+local globals = require("tevgit:workshop/library/globals.lua") -- globals; variables or instances that can be shared between files
+
+return {
+    construct = function(orientation, element, text, ...)
+        --[[
+            @Description
+                Constructor method that initializes the tooltip instance.
+
+            @Params
+                String, orientation
+                UiBase, element  
+                String, text
+                {...}, overrides
+            
+            @Returns
+                Instance, tooltip
+        ]]--
+
+        local data = {} 
+        self = data
+
+        -- Only for horizontal orientation
+        local args = {...} -- Hold overrides
+        local positionOverride = args[1] or guiCoord(0, 0, 0, 0) -- If not specified, default to guiCoord(0, 0, 0, 0)
+
+        if orientation == "vertical" then -- If orientation is specified to "vertical"
+            local container = engine.construct("guiFrame", globals.workshop.interface, {
+                size = guiCoord(0.1, 0, 0.1, 0),
+                position = element.position+guiCoord(-0.02, 0, -0.01, 0),
+                backgroundColour = globals.defaultColours.red,
+                visible = false,
+                zIndex = 200,
+                backgroundAlpha = 0
+            })
+
+            engine.construct("guiImage", container, {
+                size = guiCoord(0, 48, 0, 48),
+                position = guiCoord(0.33, 0, -0.15, 0),
+                texture = "fa:s-caret-up",
+                imageColour = globals.defaultColours.secondary,
+                backgroundColour = globals.defaultColours.red,
+                backgroundAlpha = 0
+            })
+
+            local bodyContainer = engine.construct("guiFrame", container, {
+                size = guiCoord(0.95, 0, 0.4, 0),
+                position = guiCoord(0.025, 0, 0.23, 0),
+                backgroundColour = globals.defaultColours.white,
+                borderAlpha = 1,
+                borderRadius = 5,
+                borderWidth = 3,
+                borderColour = globals.defaultColours.secondary
+            })
+
+            engine.construct("guiImage", bodyContainer, {
+                size = guiCoord(0, 16, 0, 16),
+                position = guiCoord(0.04, 0, 0.25, 0),
+                texture = "fa:s-info-circle",
+                imageColour = globals.defaultColours.primary,
+                backgroundColour = globals.defaultColours.white,
+            })
+
+            engine.construct("guiTextBox", bodyContainer, {
+                size = guiCoord(0.82, 0, 1, 0),
+                position = guiCoord(0.15, 0, 0, 0),
+                text = text,
+                fontSize = 16,
+                textColour = globals.defaultColours.primary,
+                backgroundColour = globals.defaultColours.white,
+                align = enums.align.middle,
+                wrap = true
+            })
+
+            self.display = function() container.visible = true end -- Display tooltip method
+            self.hide = function() container.visible = false end -- Hide tooltip method
+        
+        elseif orientation == "horizontal" then -- If orientation is specified to "horizontal"
+            local container = engine.construct("guiFrame", globals.workshop.interface, {
+                size = guiCoord(0.13, 0, 0.05, 0),
+                position = (element.position+guiCoord(-0.22, 0, 0.24, 0))+positionOverride, -- Shorthand positioning
+                backgroundColour = globals.defaultColours.red,
+                visible = false,
+                zIndex = 200,
+                backgroundAlpha = 0
+            })
+
+            engine.construct("guiImage", container, {
+                size = guiCoord(0, 48, 0, 48),
+                position = guiCoord(-0.03, 0, -0.06, 0),
+                texture = "fa:s-caret-left",
+                imageColour = globals.defaultColours.primary,
+                backgroundColour = globals.defaultColours.red,
+                backgroundAlpha = 0
+            })
+
+            local bodyContainer = engine.construct("guiFrame", container, {
+                size = guiCoord(0.8, 0, 0.9, 0),
+                position = guiCoord(0.133, 0, 0.05, 0),
+                backgroundColour = globals.defaultColours.white,
+                borderAlpha = 1,
+                borderRadius = 5,
+                borderWidth = 3,
+                borderColour = globals.defaultColours.primary
+            })
+
+            engine.construct("guiImage", bodyContainer, {
+                size = guiCoord(0, 16, 0, 16),
+                position = guiCoord(0.05, 0, 0.3, 0),
+                texture = "fa:s-info-circle",
+                imageColour = globals.defaultColours.primary,
+                backgroundColour = globals.defaultColours.white,
+            })
+
+            engine.construct("guiTextBox", bodyContainer, {
+                size = guiCoord(0.82, 0, 1, 0),
+                position = guiCoord(0.15, 0, 0, 0),
+                text = text,
+                fontSize = 16,
+                textColour = globals.defaultColours.primary,
+                backgroundColour = globals.defaultColours.white,
+                align = enums.align.middle,
+                wrap = true
+            })
+
+            self.display = function() container.visible = true end -- Display tooltip method
+            self.hide = function() container.visible = false end -- Hide tooltip method
+        end
+        return data
+    end
+}

workshop/library/ui/controllers/sidebarInterface.lua

@@ -0,0 +1,158 @@
+-- Copyright 2020- Teverse
+-- This script constructs (or builds) the sidebar controller
+
+local globals = require("tevgit:workshop/library/globals.lua") -- globals; variables or instances that can be shared between files
+local toolTip = require("tevgit:workshop/library/ui/components/toolTip.lua") -- UI component
+
+return {
+    construct = function(idValue)
+        --[[
+            @Description
+                Constructor method that initializes the sidebar instance.
+
+            @Params
+                String, idValue
+
+            @Returns
+                Instance, sidebar
+        ]]--
+
+        local data = {} 
+        self = data
+        self.id = idValue -- Unique Indentifier
+        self.pages = {} -- Where we store our pages for sidebar
+
+        engine.construct("guiFrame", globals.workshop.interface, {
+            size = guiCoord(0.04, 0, 0.015, 0),
+            position = guiCoord(0, 0, 0.05, 0),
+            backgroundColour = globals.defaultColours.secondary,
+        })
+
+        engine.construct("guiFrame", globals.workshop.interface, {
+            size = guiCoord(0.04, 0, 0.015, 0),
+            position = guiCoord(0, 0, 0.24, 0),
+            backgroundColour = globals.defaultColours.secondary,
+        })
+        
+        local toolsContainer = engine.construct("guiFrame", globals.workshop.interface, {
+            size = guiCoord(0.04, 0, 0.18, 0),
+            position = guiCoord(0, 0, 0.065, 0),
+            backgroundColour = globals.defaultColours.white,
+        })
+
+        local selectTool = engine.construct("guiImage", toolsContainer, {
+            size = guiCoord(0, 20, 0, 20),
+            position = guiCoord(0.25, 0, 0.1, 0),
+            texture = "fa:s-location-arrow",
+            imageColour = globals.defaultColours.primary,
+            backgroundColour = globals.defaultColours.white,
+        })
+
+        local moveTool = engine.construct("guiImage", toolsContainer, {
+            size = guiCoord(0, 20, 0, 20),
+            position = guiCoord(0.25, 0, 0.32, 0),
+            texture = "fa:s-arrows-alt-h",
+            imageColour = globals.defaultColours.primary,
+            backgroundColour = globals.defaultColours.white,
+        })
+
+        local rotateTool = engine.construct("guiImage", toolsContainer, {
+            size = guiCoord(0, 20, 0, 20),
+            position = guiCoord(0.25, 0, 0.54, 0),
+            texture = "fa:s-sync",
+            imageColour = globals.defaultColours.primary,
+            backgroundColour = globals.defaultColours.white,
+        })
+
+        local sizeTool = engine.construct("guiImage", toolsContainer, {
+            size = guiCoord(0, 20, 0, 20),
+            position = guiCoord(0.25, 0, 0.76, 0),
+            texture = "fa:s-expand",
+            imageColour = globals.defaultColours.primary,
+            backgroundColour = globals.defaultColours.white,
+        })
+
+        local moreToolsContainer = engine.construct("guiFrame", globals.workshop.interface, {
+            name = "moreToolsContainer",
+            size = guiCoord(0.04, 0, 1, 0),
+            position = guiCoord(0, 0, 0.255, 0),
+            backgroundColour = globals.defaultColours.white,
+        })
+
+        self.registerPage = function(pageName)
+            --[[
+                @Description
+                    Registers page to sidebar instance. 
+
+                @Params
+                    String, pageName
+
+                @Returns
+                   guiFrame, page
+            ]]--
+
+            local zIndexRange
+            if pageName == "Default" then -- Default page zIndex is set lower than other pages
+                zIndexRange = 100
+            else
+                zIndexRange = 101
+            end
+
+            local iconContainer = engine.construct("guiFrame", moreToolsContainer, {
+                name = pageName,
+                size = guiCoord(1, 0, 1, 0),
+                position = guiCoord(0, 0, 0, 0),
+                backgroundColour = globals.defaultColours.white,
+                zIndex = zIndexRange,
+                visible = false
+            })
+            return iconContainer
+        end
+
+        self.registerIcon = function(page, name, icon, tooltip, callback, ...)
+            --[[
+                @Description
+                    Registers icon to page instance. 
+
+                @Params
+                    Instance, page
+                    String, name
+                    String, icon
+                    String, tooltip
+                    Method, callback
+                    {...}, overrides 
+
+                @Returns
+                   Void, null, nil
+            ]]--
+
+            local args = {...} -- Holds overrides
+            local xPositionOverride = args[1] or 0 -- Override if specified, else 0
+            local positionToolTipOverride = args[2] or guiCoord(0, 0, 0, 0) -- Override if specified, else guiCoord(0, 0, 0, 0)
+            local iconImage = engine.construct("guiImage", page, {
+                name = name,
+                size = guiCoord(0, 20, 0, 20),
+                position = guiCoord((0.25+xPositionOverride), 0, 0.02+(#page.children*0.04), 0), -- Shorthand positioning w/o a for-loop
+                texture = icon,
+                imageColour = globals.defaultColours.primary,
+                backgroundColour = globals.defaultColours.white,
+            })
+
+            local _tooltip = toolTip.construct("horizontal", iconImage, tooltip, positionToolTipOverride) -- Initialize tooltip instance
+
+            --button:mouseLeftPressed(callback) -- When button is clicked, perform callback action
+
+            -- When mouse hovers over button, display tooltip
+            iconImage:on("mouseFocused", function() 
+                _tooltip.display()
+            end)
+
+            -- When mouse leaves from button, hide tooltip
+            iconImage:on("mouseUnfocused", function() 
+                _tooltip.hide()
+            end)
+        end
+
+        return data
+    end
+}

workshop/library/ui/controllers/topbarInterface.lua

@@ -0,0 +1,155 @@
+-- Copyright 2020- Teverse
+-- This script constructs (or builds) the topbar controller
+
+local globals = require("tevgit:workshop/library/globals.lua") -- globals; variables or instances that can be shared between files
+local toolTip = require("tevgit:workshop/library/ui/components/toolTip.lua") -- UI component
+
+return {
+    construct = function(idValue, titleIconValue, titleValue)
+        --[[
+            @Description
+                Constructor method that initializes the topbar instance.
+
+            @Params
+                String, idValue
+                String, titleIconValue
+                String, titleValue
+            
+            @Returns
+                Instance, topbar
+        ]]--
+
+        local data = {} 
+        self = data -- Ease of use
+        self.id = idValue
+        self.title = titleValue
+        self.titleIcon = titleIconValue
+        self.keys = {} -- Where item keys are stored
+
+        local container = engine.construct("guiFrame", globals.workshop.interface, {
+            size = guiCoord(1, 0, 0.05, 0),
+            position = guiCoord(0, 0, 0, 0),
+            backgroundColour = globals.defaultColours.white,
+        })
+
+        engine.construct("guiImage", container, {
+            size = guiCoord(0, 28, 0, 28),
+            position = guiCoord(0.01, 0, 0.1, 0),
+            texture = titleIconValue,
+            imageColour = globals.defaultColours.primary,
+            backgroundColour = globals.defaultColours.white,
+            handleEvents = false,
+        })
+
+        engine.construct("guiTextBox", container, {
+            size = guiCoord(0.5, 0, 0.1, 0),
+            position = guiCoord(0.04, 0, 0.05, 0),
+            text = titleValue,
+            textColour = globals.defaultColours.primary,
+            fontFile = "local:OpenSans-Bold.ttf",
+            fontSize = 30,
+            readOnly = true
+        })
+
+        engine.construct("guiTextBox", container, {
+            size = guiCoord(0.48, 0, 0.1, 0),
+            position = guiCoord(0.86, 0, 0.1, 0),
+            text = globals.user[2],
+            textColour = globals.defaultColours.primary,
+            fontSize = 25,
+            readOnly = true
+        })
+
+        local userIcon = engine.construct("guiFrame", container, {
+            size = guiCoord(0, 32, 0, 32),
+            position = guiCoord(0.82, 0, 0, 0),
+            backgroundColour = globals.defaultColours.primary,
+            borderRadius = 100
+        })
+
+        local statusIcon = engine.construct("guiFrame", container, {
+            size = guiCoord(0, 16, 0, 16),
+            position = guiCoord(0.836, 0, 0.5, 0),
+            backgroundColour = globals.defaultColours.green,
+            borderWidth = 2,
+            borderColour = globals.defaultColours.white,
+            borderAlpha = 1,
+            borderRadius = 32,
+            zIndex = 100
+        })
+
+        local undoButton = engine.construct("guiImage", container, {
+            size = guiCoord(0, 20, 0, 20),
+            position = guiCoord(0.92, 0, 0.2, 0),
+            texture = "fa:s-arrow-left",
+            imageColour = globals.defaultColours.primary,
+            backgroundColour = globals.defaultColours.white,
+        })
+
+        local redoButton = engine.construct("guiImage", container, {
+            size = guiCoord(0, 20, 0, 20),
+            position = guiCoord(0.94, 0, 0.2, 0),
+            texture = "fa:s-arrow-right",
+            imageColour = globals.defaultColours.primary,
+            backgroundColour = globals.defaultColours.white,
+        })
+
+        local settingsButton = engine.construct("guiImage", container, {
+            size = guiCoord(0, 20, 0, 20),
+            position = guiCoord(0.97, 0, 0.2, 0),
+            texture = "fa:s-sliders-h",
+            imageColour = globals.defaultColours.primary,
+            backgroundColour = globals.defaultColours.white,
+        })
+
+        self.register = function(name, tooltip, page)
+            --[[
+                @Description
+                    Register method that appends to the topbar instance.
+
+                @Params
+                    String, name
+                    String, tooltip
+                    Instance, page
+                
+                @Returns
+                    Void, null, nil
+            ]]--
+
+            table.insert(self.keys, {name})
+            local button = engine.construct("guiButton", container, {
+                size = guiCoord(0.056, 0, 0.9, 0),
+                position = guiCoord(0.2+(#self.keys*0.07), 0, 0.05, 0),
+                text = name,
+                textColour = globals.defaultColours.primary,
+                fontSize = 30,
+                align = enums.align.middle,
+                zIndex = 100
+            })
+
+            local _tooltip = toolTip.construct("vertical", button, tooltip) -- Initialize tooltip instance
+
+            button:mouseLeftPressed(function()
+                globals.sideBarPageActive.visible = (not globals.sideBarPageActive.visible) -- Unlist active page from view
+                if globals.sideBarPageActive == page then -- If the same page is clicked twice, unlist and replace with default page
+                    globals.sideBarPageActive = globals.sideBarPageDefault
+                    globals.sideBarPageDefault.visible = true
+                    return -- Acts as a break
+                end
+                globals.sideBarPageActive = page
+                page.visible = (not page.visible)
+            end)
+
+            -- When mouse hovers over button, display tooltip
+            button:on("mouseFocused", function() 
+                _tooltip.display()
+            end)
+
+            -- When mouse leaves from button, hide tooltip
+            button:on("mouseUnfocused", function() 
+                _tooltip.hide()
+            end)
+        end
+        return data
+    end
+}

workshop/library/ui/controllers/workshopInterface.lua

@@ -0,0 +1,55 @@
+-- Copyright 2020- Teverse
+-- This script is responsible for creating the workshop interface
+
+local globals = require("tevgit:workshop/library/globals.lua") -- globals; variables or instances that can be shared between files
+local prompt = require("tevgit:workshop/library/ui/components/prompt.lua") -- UI Component
+local topbarInterface = require("tevgit:workshop/library/ui/controllers/topbarInterface.lua") -- UI Controller
+local sidebarInterface = require("tevgit:workshop/library/ui/controllers/sidebarInterface.lua") -- UI Controller
+
+local topBar = topbarInterface.construct("horizontalNavbar", "fa:s-cloud", "Test Place 1") -- Create initial topbar instance
+local sideBar = sidebarInterface.construct("verticalNavbar") -- Create initial sidebar instance
+
+local defaultPage = sideBar.registerPage("Default") -- Register default page to sidebar instance
+sideBar.registerIcon(defaultPage, "openFolderIcon", "fa:s-folder-open", "Open Folder", nil) 
+sideBar.registerIcon(defaultPage, "newFileIcon", "fa:s-file", "Create new file", nil)
+sideBar.registerIcon(defaultPage, "uploadFileIcon", "fa:s-file-upload", "Upload current file", nil)
+sideBar.registerIcon(defaultPage, "downloadFileIcon", "fa:s-file-download", "Download current file", nil)
+sideBar.registerIcon(defaultPage, "importFileIcon", "fa:s-file-import", "Import a file", nil, -0.048, guiCoord(0.048, 0, 0, 0))
+sideBar.registerIcon(defaultPage, "exportFileIcon", "fa:s-file-export", "Export current file", nil, 0.048, guiCoord(-0.048, 0, 0, 0))
+defaultPage.visible = true -- Set default sidebar page to visible
+globals.sideBarPageDefault = defaultPage -- Set default sidebar page to default
+globals.sideBarPageActive = defaultPage -- Set default sidebar page as active
+
+
+local designPage = sideBar.registerPage("Design") -- Design default page to sidebar instance
+sideBar.registerIcon(designPage, "screenContainerIcon", "fa:s-tv", "Create a container instance", nil)
+sideBar.registerIcon(designPage, "guiFrameIcon", "fa:s-square-full", "Create a guiFrame instance", nil)
+sideBar.registerIcon(designPage, "guiTextBoxIcon", "fa:s-i-cursor", "Create a guiTextBox instance", nil)
+sideBar.registerIcon(designPage, "guiImageIcon", "fa:s-image", "Create a guiImage instance", nil)
+
+
+local modelPage = sideBar.registerPage("Model") -- Register model page to sidebar instance
+sideBar.registerIcon(modelPage, "modelIcon", "fa:s-shapes", "Group instance(s) together", nil)
+
+
+local insertPage = sideBar.registerPage("Insert") -- Register insert page to sidebar instance
+sideBar.registerIcon(insertPage, "blockIcon", "fa:s-cube", "Create a cube instance", nil)
+sideBar.registerIcon(insertPage, "circleIcon", "fa:s-circle", "Create a cylinder instance", nil)
+--sideBar.registerIcon(designPage, "triangleIcon", "fa:s-i-cursor", nil, nil) -- Triangle / Wedge Icon doesn't exist
+sideBar.registerIcon(insertPage, "scriptIcon", "fa:s-code", "Create a script instance", nil)
+sideBar.registerIcon(insertPage, "lightIcon", "fa:s-lightbulb", "Create a light instance", nil)
+
+
+local testPage = sideBar.registerPage("Test") -- Register test page to sidebar instance
+sideBar.registerIcon(testPage, "consoleIcon", "fa:s-terminal", " Open console window", nil)
+sideBar.registerIcon(testPage, "playIcon", "fa:s-play", "Play scene", nil)
+sideBar.registerIcon(testPage, "serverIcon", "fa:s-server", "Configure server", nil)
+sideBar.registerIcon(testPage, "fullScreenIcon", "fa:s-fullscreen", "Toggle full screen", nil)
+
+
+
+-- Register topbar button (name labels) to topbar instance
+topBar.register("Design", "Design your guis", designPage)
+topBar.register("Model", "Model your scene", modelPage)
+topBar.register("Insert", "Insert an instance to your scene", insertPage)
+topBar.register("Test", "Test your scene", testPage)

workshop/main.lua

@@ -0,0 +1,93 @@
+-- Copyright 2020- Teverse
+-- This script is required when workshop is loaded.
+
+local globals = require("tevgit:workshop/library/globals.lua") -- globals; variables or instances that can be shared between files
+
+local function init(workshop)
+    --[[
+        @Description
+            The initializer method that comes first when a new scene is open. 
+
+        @Params
+            Instance, workshop
+        
+        @Returns
+            void, null, nil
+    ]]--
+
+    globals.workshop = workshop -- Set workshop instance as a global
+    globals.user = engine:isAuthenticated() -- Set & Streamline user instance as a global
+    globals.developerMode = (not globals.workshop.hasLocalTevGit) or (globals.workshop:hasLocalTevGit()) -- Set developmode boolean as a global
+
+    local loadingScreen = engine.construct("guiFrame", workshop.interface, {
+        size = guiCoord(1, 0, 1, 0),
+        backgroundColour = globals.defaultColours.background,
+        zIndex = 1000
+    })
+
+    engine.construct("guiTextBox", loadingScreen, {
+        size = guiCoord(0.5, 0, 0.5, 0),
+        position = guiCoord(0.25, 0, 0.25, 0),
+        align = enums.align.middle,
+        backgroundAlpha = 0,
+        text = "Downloading the latest workshop...\nThis takes longer than a moment during beta."
+    })
+
+    -- Load stuff before initial load in
+    require("tevgit:workshop/library/ui/controllers/workshopInterface.lua")
+
+    -- Loading is no longer needed by this phase, remove if still valid
+    if loadingScreen then
+    	loadingScreen:destroy()
+    end
+end
+
+return function(workshop)
+    --[[
+        @Description
+            The main method that comes when a new scene is opened. 
+
+        @Params
+            Instance, workshop
+        
+        @Returns
+            function, method
+    ]]--
+    
+    local success, message = pcall(init, workshop)
+
+    -- If initialize phase fails, prompt to the error screen
+    if (not success) then
+        workshop.interface:destroyAllChildren()
+
+        local errorScreen = engine.construct("guiFrame", workshop.interface, {
+            size = guiCoord(1, 0, 1, 0),
+            backgroundColour = globals.defaultColours.background,
+            zIndex = 10000
+        })
+
+        engine.construct("guiTextBox", errorScreen, {
+            size = guiCoord(0.8, 0, 0.8, 0),
+            position = guiCoord(0.1, 0, 0.1, 0),
+            backgroundColour = globals.defaultColours.background,
+            textColour = globals.defaultColours.red,
+            align = enums.align.topLeft,
+            text = "Error loading Workshop\nIf this isn't your fault, please take a screenshot and report this as a bug. \n\n" .. message .." \n\nPlease press 'ENTER' on your keyboard to restart Teverse.",
+            wrap = true,
+        })
+
+        -- Bind the "return" key on the keyboard as temporary fast-reload keybind
+        engine.input:on("keyPressed", function(keyboard)
+            if keyboard.key == enums.key["return"] then
+                workshop:reloadCreate()
+            end
+        end)
+    end
+
+    -- Bind the "f12" key on the keyboard as fast-reload keybind if initialize phase is successful
+    engine.input:on("keyPressed", function(keyboard)
+        if keyboard.key == enums.key["f12"] then
+            workshop:reloadCreate()
+        end
+    end)
+end