Merge pull request #8 from MiaGobble/dev-beta

Settings and shadow support

App/Roblox Figma Importer Assistant/code.js

@@ -33,6 +33,7 @@ figma.ui.onmessage = msg => {
                 clipsContent: node.clipsContent,
                 fills: node.fills,
                 cornerRadius: node.cornerRadius,
+                effects: node.effects,
                 // strokes: node.strokes,
 
                 children: []

Packages/_Index/elttob_fusion@0.2.0/fusion/src/State/Computed.lua

@@ -53,7 +53,7 @@ function class:update(): boolean
 
 	if ok then
 		if self._destructor == nil and needsDestruction(newValue) then
-			logWarn("destructorNeededComputed")
+			--logWarn("destructorNeededComputed")
 		end
 
 		if newMetaValue ~= nil then

src/FigmaImportAssistant/Main/CorrectionHandler/AppImportInterpreter.lua

@@ -11,12 +11,77 @@ local TAG_ACTIONS = {
 
 local HttpService = game:GetService("HttpService")
 
+local function GetOpacityAndColor(Child)
+    local Opacity = Child.opacity or 1
+    local Color = Color3.fromRGB(255, 255, 255)
+
+    if Child.fills then
+        Opacity = 0
+
+        for _, Fill in ipairs(Child.fills) do
+            if Fill.type == "SOLID" then
+                Color = Color3.fromRGB(Fill.color.r * 255, Fill.color.g * 255, Fill.color.b * 255)
+            end
+
+            Opacity += Fill.opacity
+        end
+    end
+
+    return Opacity, Color
+end
+
+local function CompileShadowData(Child)
+    local ShadowData = {}
+
+    if Child.effects then
+        for _, Effect in ipairs(Child.effects) do
+            if Effect.type == "DROP_SHADOW" then
+                if Effect.visible == false then
+                    continue
+                end
+
+                table.insert(ShadowData, {
+                    Offset = Vector2.new(Effect.offset.x, Effect.offset.y),
+                    Radius = Effect.radius,
+                    Spread = Effect.spread,
+                })
+            end
+        end
+    end
+
+    local MaxOffset = Vector2.new(0, 0)
+    local MaxRadius = 0
+    local MaxSpread = 0
+
+    for _, Shadow in ipairs(ShadowData) do
+        if Shadow.Offset.Magnitude > MaxOffset.Magnitude then
+            MaxOffset = Shadow.Offset
+        end
+
+        if Shadow.Radius > MaxRadius then
+            MaxRadius = Shadow.Radius
+        end
+
+        if Shadow.Spread > MaxSpread then
+            MaxSpread = Shadow.Spread
+        end
+    end
+
+    return {
+        Offset = MaxOffset,
+        Radius = MaxRadius,
+        Spread = MaxSpread,
+    }
+end
+
 local function ReadRecursive(ParentTable)
     local ChildTable = {
         Root = {},
     }
 
     for _, Child in ipairs(ParentTable) do
+        local Opacity, Color = GetOpacityAndColor(Child)
+
         local Interpretation = {
             Size = {
                 X = Child.width,
@@ -38,6 +103,14 @@ local function ReadRecursive(ParentTable)
             Stroke = Child.strokeWeight or 0,
             Oblique = 0,
             IsGroup = Child.type == "GROUP",
+            Settings = {
+                IsAspectRatioConstrained = true,
+                ClipDescendants = true,
+            },
+            Opacity = Opacity or 1,
+            Color = Color or Color3.fromRGB(255, 255, 255),
+            CornerRadius = Child.cornerRadius or 0,
+            Shadow = CompileShadowData(Child),
 
             -- Unique data from import
             Type = if Child.type == "GROUP" then "Frame" elseif Child.opacity == 0 and Child.strokeWeight == 0 then "Frame" else "ImageLabel"

src/FigmaImportAssistant/Main/CorrectionHandler/Applicator.lua

@@ -7,12 +7,25 @@ local New = Fusion.New
 local Hydrate = Fusion.Hydrate
 local Children = Fusion.Children
 
-function Applicator:ApplyChangesFromData(SelectedInstance : Instance, Data : {})
+local function GetOffsettedSizeAndPositionFromShadow(Shadow)
+    local Offset = Shadow.Offset
+    local Radius = Shadow.Radius
+    local Spread = Shadow.Spread
+    local OffsettedSize = Vector2.new(Radius, Radius) + Vector2.new(Spread, Spread)
+
+    return OffsettedSize, Offset
+end
+
+function Applicator:ApplyChangesFromData(SelectedInstance : Instance, Data : {[string] : any})
     local Size = Vector2.new(Data.Size.X, Data.Size.Y)
     local Position = Vector2.new(Data.Position.X, Data.Position.Y)
 
     Utility.CreateUndoMarkerStart()
 
+    for SettingName, SettingValue in Data.Settings do
+        SelectedInstance:SetAttribute(`FigmaSetting_{SettingName}`, SettingValue)
+    end
+
     if SelectedInstance:IsA("ScreenGui") then
         SelectedInstance:SetAttribute("FigmaSize", Size)
         SelectedInstance:SetAttribute("FigmaPosition", Position)
@@ -23,25 +36,30 @@ function Applicator:ApplyChangesFromData(SelectedInstance : Instance, Data : {})
 
     local AnchorPoint = Vector2.new(Data.AnchorPoint.X or 0, Data.AnchorPoint.Y or 0)
     local Stroke = Data.Stroke
-    local Oblique = Data.Oblique
-    local CorrectedSize = Size + Vector2.new(Stroke * 2, Stroke * 2) + Vector2.new(0, Oblique)
-    local CorrectedPosition = Position - Vector2.new(Stroke, Stroke) - Vector2.new(0, Oblique)
+    local ShadowOffsettedSize, ShadowOffset = GetOffsettedSizeAndPositionFromShadow(Data.Shadow)
+    local ShadowOffsetFinal = ShadowOffsettedSize--ShadowOffset / 2 + ShadowOffsettedSize
+    local CorrectedSize = Size + Vector2.new(Stroke * 2, Stroke * 2) + ShadowOffsettedSize * 2 + ShadowOffset
+    local CorrectedPosition = Position - Vector2.new(Stroke, Stroke) - ShadowOffsetFinal + ShadowOffset / 2
     local FinalSize = CorrectedSize
     local FinalPosition = CorrectedPosition
+
 
     SelectedInstance:SetAttribute("FigmaSize", Size)
     SelectedInstance:SetAttribute("FigmaPosition", Position)
+    SelectedInstance:SetAttribute("FigmaShadowOffset", ShadowOffset)
+    SelectedInstance:SetAttribute("FigmaShadowRadius", Data.Shadow.Radius)
+    SelectedInstance:SetAttribute("FigmaShadowSpread", Data.Shadow.Spread)
 
     if SelectedInstance.Parent:GetAttribute("FigmaStrokeThickness") then
         local Stroke = SelectedInstance.Parent:GetAttribute("FigmaStrokeThickness") - Stroke
         FinalSize -= Vector2.new(Stroke, Stroke) * 2
         FinalPosition += Vector2.new(Stroke, Stroke)
     end
 
-    if SelectedInstance.Parent:GetAttribute("FigmaObliqueSize") then
-        local Oblique = SelectedInstance.Parent:GetAttribute("FigmaObliqueSize") - Oblique
-        FinalSize -= Vector2.new(0, Oblique)
-    end
+    -- if SelectedInstance.Parent:GetAttribute("FigmaObliqueSize") then
+    --     local Oblique = SelectedInstance.Parent:GetAttribute("FigmaObliqueSize") - Oblique
+    --     FinalSize -= Vector2.new(0, Oblique)
+    -- end
 
     if SelectedInstance.Parent:GetAttribute("IsFigmaImportGroup") then
         FinalPosition -= SelectedInstance.Parent:GetAttribute("FigmaPosition")
@@ -56,20 +74,28 @@ function Applicator:ApplyChangesFromData(SelectedInstance : Instance, Data : {})
         SelectedInstance:FindFirstChildOfClass("UIAspectRatioConstraint"):Destroy()
     end
 
+    SelectedInstance.ClipsDescendants = Data.Settings.ClipsDescendants
+
+    local InstanceChildren = {}
+
+    if Data.Settings.IsAspectRatioConstrained then
+        table.insert(InstanceChildren, New "UIAspectRatioConstraint" {
+            AspectRatio = CorrectedSize.X / CorrectedSize.Y,
+        })
+    end
+
     Hydrate(SelectedInstance) {
         Size = ScaledSize,
         Position = ScaledPosition,
         Name = Data.Name,
         AnchorPoint = AnchorPoint,
-        [Children] = New "UIAspectRatioConstraint" {
-            AspectRatio = CorrectedSize.X / CorrectedSize.Y,
-        }
+        [Children] = InstanceChildren
     }
 
     Utility.ApplyImage(SelectedInstance, Data.Image)
 
     SelectedInstance:SetAttribute("FigmaStrokeThickness", Stroke)
-    SelectedInstance:SetAttribute("FigmaObliqueSize", Oblique)
+    --SelectedInstance:SetAttribute("FigmaObliqueSize", Oblique)
 
     Utility.CreateUndoMarkerEnd()
 end

src/FigmaImportAssistant/Main/CorrectionHandler/Creator.lua

@@ -1,5 +1,7 @@
 local Creator = {}
 
+local SIZE_DERITIVATIVE_REF = Vector2.new(1920, 1080)
+
 local Applicator = require(script.Parent.Applicator)
 local AppImportInterpreter = require(script.Parent.AppImportInterpreter)
 
@@ -9,7 +11,22 @@ local function InterpretActions(Name : string)
     return Actions, NewName
 end
 
+local function GetGuiSizeDerivative(Gui : ScreenGui)
+    local Size = Gui:GetAttribute("FigmaSize") or SIZE_DERITIVATIVE_REF
+    local Magnitude = (Size / SIZE_DERITIVATIVE_REF).Magnitude
+
+    return Magnitude
+end
+
 local function CreateRecursive(Parent, Data : {})
+    local Gui = nil
+
+    if Parent:IsA("ScreenGui") then
+        Gui = Parent
+    else
+        Gui = Parent:FindFirstAncestorWhichIsA("ScreenGui")
+    end
+
     for _, Child in Data.Root do
         local Actions, Name = InterpretActions(Child.Name)
 
@@ -32,7 +49,20 @@ local function CreateRecursive(Parent, Data : {})
         end
 
         Object.ClipsDescendants = if Child.clipsContent ~= nil then Child.clipsContent else true
-        Object.BackgroundTransparency = 1
+
+        if Object:IsA("Frame") and Gui:GetAttribute("FigmaSetting_RespectAutoImportFrameOpacity") then
+            Object.BackgroundTransparency = 1 - Child.Opacity
+            Object.BorderSizePixel = 0
+            Object.BackgroundColor3 = Child.Color
+        else
+            Object.BackgroundTransparency = 1
+        end
+
+        if Child.CornerRadius > 0 and Gui:GetAttribute("FigmaSetting_RespectAutoImportCornerRadius") then
+            local CornerRadius = Instance.new("UICorner", Object)
+            CornerRadius.CornerRadius = UDim.new(0, Child.CornerRadius * GetGuiSizeDerivative(Gui))
+        end
+
         Object.Parent = Parent
         Object:SetAttribute("IsFigmaImportGroup", Child.IsGroup)
         Child.Name = Name

src/FigmaImportAssistant/Main/Interface/BooleanSettingInput.lua

@@ -0,0 +1,43 @@
+local Packages = script.Parent.Parent.Parent.Packages
+local Component = require(script.Parent.Parent.Component)
+local Fusion = require(Packages.Fusion)
+local Value = Fusion.Value
+local Computed = Fusion.Computed
+
+return function(MainContentList, IsItemSelected, Inputs, SelectedItem, Data)
+    local EnabledValue = Value(Data.DefaultValue)
+    local IsEnabled = Computed(function()
+        local IsSelected = IsItemSelected:get()
+
+        if not IsSelected then
+            return false
+        end
+
+        local Selected = SelectedItem:get()
+
+        if not Selected then
+            return false
+        end
+
+        if Data.Context == "ScreenGui" then
+            return Selected:IsA("ScreenGui")
+        elseif Data.Context == "Default" then
+            return not Selected:IsA("ScreenGui")
+        end
+    end)
+
+    local This = Component "Checkbox" {
+        Enabled = IsEnabled,
+        Visible = IsEnabled,
+        Name = `Setting_{Data.Name}`,
+        Text = Data.Text,
+        LayoutOrder = 6,
+        Size = UDim2.new(1, 0, 0, 30),
+        Parent = MainContentList,
+        Value = EnabledValue,
+    }
+
+    Inputs[`Setting_{Data.Name}`] = {EnabledValue, Data.DefaultValue}
+
+    return This
+end

src/FigmaImportAssistant/Main/Interface/Build/BooleanSettingInputs.json

@@ -0,0 +1,33 @@
+{
+    "IsAspectRatioConstrained" : {
+        "Text": "Keep Aspect Ratio",
+        "Name": "IsAspectRatioConstrained",
+        "Type": "Boolean",
+        "Context": "Default",
+        "DefaultValue": true
+    },
+
+    "ClipDescendants" : {
+        "Text": "Clip Descendants",
+        "Name": "ClipDescendants",
+        "Type": "Boolean",
+        "Context": "Default",
+        "DefaultValue": true
+    },
+
+    "RespectAutoImportFrameOpacity" : {
+        "Text": "Respect Auto-Import Frame Opacity",
+        "Name": "RespectAutoImportFrameOpacity",
+        "Type": "Boolean",
+        "Context": "ScreenGui",
+        "DefaultValue": false
+    },
+
+    "RespectAutoImportCornerRadius" : {
+        "Text": "Respect Auto-Import Corner Radius",
+        "Name": "RespectAutoImportCornerRadius",
+        "Type": "Boolean",
+        "Context": "ScreenGui",
+        "DefaultValue": false
+    }
+}

src/FigmaImportAssistant/Main/Interface/Build/Sections.json

@@ -5,6 +5,12 @@
         "Collapsed" : false
     },
 
+    {
+        "Name" : "Settings",
+        "Build" : ["BooleanSettingInputs"],
+        "Collapsed" : false
+    },
+
     {
         "Name" : "Instance Building",
         "Build" : ["CreationButtons"],

src/FigmaImportAssistant/Main/Interface/Build/TextInputBuildData.json

@@ -22,15 +22,34 @@
             "Type": "number"
         }
     },
-    
+
     {
-        "StrokeThickness" : {
-            "PlaceholderText": "Stroke",
+        "ShadowX" : {
+            "PlaceholderText": "Shadow X",
+            "Type": "number"
+        },
+
+        "ShadowY" : {
+            "PlaceholderText": "Shadow Y",
+            "Type": "number"
+        }
+    },
+
+    {
+        "ShadowSpread" : {
+            "PlaceholderText": "Shadow Spread",
             "Type": "number"
         },
 
-        "ObliqueShadowSize" : {
-            "PlaceholderText": "Oblique Size",
+        "ShadowRadius" : {
+            "PlaceholderText": "Shadow Radius",
+            "Type": "number"
+        }
+    },
+
+    {
+        "StrokeThickness" : {
+            "PlaceholderText": "Stroke",
             "Type": "number"
         }
     },