Small cleanup and gradient fix.

zdr4k · May 31, 2023 · b6c4055 · b6c4055
1 parent 5e0b160
commit b6c4055
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 20 deletions.
diff --git a/turbo-test/basic/packages/backend/src/flutter/builderImpl/flutterShadow.ts b/turbo-test/basic/packages/backend/src/flutter/builderImpl/flutterShadow.ts
@@ -12,7 +12,8 @@ export const flutterShadow = (node: SceneNode): string => {
       let boxShadow = "";
 
       visibleEffects.forEach((effect: Effect) => {
-        if (effect.type === "DROP_SHADOW" || effect.type === "INNER_SHADOW") {
+        if (effect.type === "DROP_SHADOW") {
+          //|| effect.type === "INNER_SHADOW"
           boxShadow += generateWidgetCode("BoxShadow", {
             color: `Color(0x${rgbTo8hex(
               effect.color,
@@ -27,7 +28,9 @@ export const flutterShadow = (node: SceneNode): string => {
         }
       });
 
-      propBoxShadow = `[\n${indentStringFlutter(boxShadow)}\n]`;
+      if (boxShadow) {
+        propBoxShadow = `[\n${indentStringFlutter(boxShadow)}\n]`;
+      }
     }
   }
   return propBoxShadow;

diff --git a/turbo-test/basic/packages/backend/src/html/builderImpl/htmlColor.ts b/turbo-test/basic/packages/backend/src/html/builderImpl/htmlColor.ts
@@ -40,7 +40,7 @@ export const htmlColor = (color: RGB, alpha: number = 1): string => {
   const r = sliceNum(color.r * 255);
   const g = sliceNum(color.g * 255);
   const b = sliceNum(color.b * 255);
-  const a = sliceNum(alpha ?? 1);
+  const a = sliceNum(alpha);
 
   return `rgba(${r}, ${g}, ${b}, ${a})`;
 };
@@ -57,18 +57,25 @@ export const htmlGradientFromFills = (
 
 // This was separated from htmlGradient because it is going to be used in the plugin UI and it wants all gradients, not only the top one.
 export const htmlGradient = (fill: GradientPaint): string => {
-  // add 90 to be correct in HTML.
+  // Adjust angle for HTML.
   const angle = (gradientAngle(fill) + 90).toFixed(0);
 
   const mappedFill = fill.gradientStops
-    .map((d) => {
-      // only add position to fractional
+    .map((stop, index, stops) => {
+      const alpha = (stop.color.a * (fill.opacity ?? 1)).toFixed(2);
+      const color = `rgba(${Math.round(stop.color.r * 255)}, ${Math.round(
+        stop.color.g * 255
+      )}, ${Math.round(stop.color.b * 255)}, ${alpha})`;
+
+      // Calculate position for all stops except the first and last ones.
       const position =
-        d.position > 0 && d.position < 1
-          ? ` ${(100 * d.position).toFixed(0)}%`
-          : "";
+        index > 0 && index < stops.length - 1
+          ? ` ${(stop.position * 100).toFixed(0)}%`
+          : index === 0
+          ? " 0%"
+          : " 100%";
 
-      return `${htmlColor(d.color, d.color.a)}${position}`;
+      return `${color}${position}`;
     })
     .join(", ");
 

diff --git a/turbo-test/basic/packages/backend/src/tailwind/builderImpl/tailwindShadow.ts b/turbo-test/basic/packages/backend/src/tailwind/builderImpl/tailwindShadow.ts
@@ -2,7 +2,7 @@
  * https://tailwindcss.com/docs/box-shadow/
  * example: shadow
  */
-export const tailwindShadow = (node: BlendMixin): string => {
+export const tailwindShadow = (node: BlendMixin): string[] => {
   // [when testing] node.effects can be undefined
   if (node.effects && node.effects.length > 0) {
     const dropShadow = node.effects.filter(
@@ -11,18 +11,18 @@ export const tailwindShadow = (node: BlendMixin): string => {
     let boxShadow = "";
     // simple shadow from tailwind
     if (dropShadow.length > 0) {
-      boxShadow = "shadow ";
+      boxShadow = "shadow";
     }
 
     const innerShadow =
       node.effects.filter((d) => d.type === "INNER_SHADOW").length > 0
-        ? "shadow-inner "
+        ? "shadow-inner"
         : "";
 
-    return boxShadow + innerShadow;
+    return [boxShadow, innerShadow];
 
     // todo customize the shadow
     // TODO layer blur, shadow-outline
   }
-  return "";
+  return [];
 };
diff --git a/turbo-test/basic/packages/backend/src/tailwind/retrieveUI/retrieveTexts.ts b/turbo-test/basic/packages/backend/src/tailwind/retrieveUI/retrieveTexts.ts
@@ -16,7 +16,7 @@ export const retrieveTailwindText = (
     if (node.type === "TEXT") {
       const attr = new TailwindTextBuilder(node, false, false)
         .blend(node)
-        .position(node, node.parent?.id ?? "")
+        .position(node, true)
         .textShapeSize(node)
         .fontSize(node)
         .fontStyle(node)

diff --git a/turbo-test/basic/packages/backend/src/tailwind/tailwindDefaultBuilder.ts b/turbo-test/basic/packages/backend/src/tailwind/tailwindDefaultBuilder.ts
@@ -142,7 +142,7 @@ export class TailwindDefaultBuilder {
    * example: shadow
    */
   shadow(node: BlendMixin): this {
-    this.addAttributes(tailwindShadow(node));
+    this.addAttributes(...tailwindShadow(node));
     return this;
   }
 

diff --git a/turbo-test/basic/packages/plugin-ui/src/PluginUI.tsx b/turbo-test/basic/packages/plugin-ui/src/PluginUI.tsx
@@ -71,12 +71,14 @@ export const PluginUI = (props: PluginUIProps) => {
           </button>
         </div> */}
           {/* Code View */}
-          <CodeWindow
+          <CodePanel
             code={props.code}
             selectedFramework={props.selectedFramework}
             preferences={props.preferences}
             onPreferenceChange={props.onPreferenceChange}
           />
+
+          <ColorsPanel />
           <div className="text-xs">
             Other things go here, such as color, tokens, etc.
           </div>
@@ -172,12 +174,12 @@ export const preferenceOptions: LocalCodegenPreference[] = [
     propertyName: "layerName",
     label: "Layer Names",
     isDefault: false,
-    includedLanguages: ["HTML", "Tailwind", "Flutter", "SwiftUI"],
+    includedLanguages: ["HTML", "Tailwind", "SwiftUI"],
   },
   // Add your preferences data here
 ];
 
-export const CodeWindow = (props: {
+export const CodePanel = (props: {
   code: string;
   selectedFramework: FrameworkTypes;
   preferences: PluginSettings | null;
@@ -274,6 +276,47 @@ export const CodeWindow = (props: {
   }
 };
 
+export const ColorsPanel = (props: {
+  // colors: string;
+  // onColorClick: (color: string) => void;
+}) => {
+  return (
+    <div className="min-h-screen bg-gray-100 dark:bg-gray-900">
+      <div className="container mx-auto p-4">
+        <div className="flex flex-wrap items-start justify-between max-w-[200px]">
+          <div className="flex-1 min-w-0">
+            <h2 className="text-gray-800 dark:text-gray-200 mb-2">Text</h2>
+            {["Button1", "Button2", "Button3"].map((button, idx) => (
+              <button
+                key={idx}
+                className="bg-white dark:bg-gray-800 p-2 mb-1 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 w-full transition"
+              >
+                <div className="flex flex-col">
+                  <span className="text-sm font-semibold text-gray-700 dark:text-gray-200">
+                    Tt
+                  </span>
+                  <span className="text-xs text-gray-500 dark:text-gray-400">
+                    {button}
+                  </span>
+                </div>
+              </button>
+            ))}
+          </div>
+          <div className="flex-none w-24">
+            <h2 className="text-gray-800 dark:text-gray-200 mb-2">Colors</h2>
+            {["Color1", "Color2", "Color3"].map((color, idx) => (
+              <div
+                key={idx}
+                className={`bg-${color.toLowerCase()} w-6 h-6 mb-2 rounded-full`}
+              ></div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 type SelectableToggleProps = {
   onSelect: (isSelected: boolean) => void;
   isSelected?: boolean;