Merge pull request #111 from gridaco/staging

Fix autolayout stretch interpreter

Author: softmarshmallow

editor/core/states/workspace-initial-state.ts

@@ -5,6 +5,7 @@ import {
   createPendingHistoryState,
 } from "./history-initial-state";
 import { react_presets, vanilla_presets } from "@grida/builder-config-preset";
+import { WorkspacePreferenceStore } from "store/workspace-preference-store";
 
 const _IS_DEV = process.env.NODE_ENV === "development";
 
@@ -21,15 +22,20 @@ const _ENABLE_PREVIEW_FEATURE_COMPONENTS_SUPPORT =
 export function createInitialWorkspaceState(
   editor: EditorSnapshot
 ): WorkspaceState {
+  const pref_store = new WorkspacePreferenceStore();
+  const saved_pref = pref_store.load();
+  const default_pref = {
+    debug_mode: _IS_DEV,
+    enable_preview_feature_components_support:
+      _ENABLE_PREVIEW_FEATURE_COMPONENTS_SUPPORT,
+    preview_runner_framework_config: vanilla_presets.vanilla_default,
+    framework_config: react_presets.react_default,
+  };
+  if (!saved_pref) pref_store.set(default_pref);
+
   return {
     history: createInitialHistoryState(editor),
-    preferences: {
-      debug_mode: _IS_DEV,
-      enable_preview_feature_components_support:
-        _ENABLE_PREVIEW_FEATURE_COMPONENTS_SUPPORT,
-      preview_runner_framework_config: vanilla_presets.vanilla_default,
-      framework_config: react_presets.react_default,
-    },
+    preferences: saved_pref ?? default_pref,
   };
 }
 

editor/core/states/workspace-state.ts

@@ -3,10 +3,12 @@ import { HistoryState } from "core/states/history-state";
 
 export interface WorkspaceState {
   history: HistoryState;
-  preferences: {
-    debug_mode: boolean;
-    framework_config: config.FrameworkConfig;
-    preview_runner_framework_config: config.FrameworkConfig;
-    enable_preview_feature_components_support: boolean;
-  };
+  preferences: WorkspacePreferences;
+}
+
+export interface WorkspacePreferences {
+  debug_mode: boolean;
+  framework_config: config.FrameworkConfig;
+  preview_runner_framework_config: config.FrameworkConfig;
+  enable_preview_feature_components_support: boolean;
 }

editor/pages/preferences/index.tsx

@@ -1,12 +1,53 @@
 import React from "react";
 import Link from "next/link";
 import styled from "@emotion/styled";
+
+import FormGroup from "@material-ui/core/FormGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Checkbox from "@material-ui/core/Checkbox";
+import { WorkspacePreferenceStore } from "store/workspace-preference-store";
+
 export default function PreferencesHomePage() {
+  const wsprefef = new WorkspacePreferenceStore();
+
   return (
     <_Root>
       <Link href="/preferences/access-tokens">
         Set Personal Access token for figma
       </Link>
+      <br />
+      <br />
+      <br />
+      <br />
+      <h5>Workspace preferences</h5>
+      <FormGroup>
+        <FormControlLabel
+          control={
+            <Checkbox
+              defaultChecked={wsprefef.load()?.debug_mode}
+              onChange={(e) => {
+                wsprefef.debug_mode(e.target.checked);
+              }}
+            />
+          }
+          label="debug_mode"
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              defaultChecked={
+                wsprefef.load()?.enable_preview_feature_components_support
+              }
+              onChange={(e) => {
+                wsprefef.enable_preview_feature_components_support(
+                  e.target.checked
+                );
+              }}
+            />
+          }
+          label="enable_preview_feature_components_support"
+        />
+      </FormGroup>
     </_Root>
   );
 }

editor/store/workspace-preference-store/index.ts

@@ -0,0 +1 @@
+export { WorkspacePreferenceStore } from "./workspace-preference-store";

editor/store/workspace-preference-store/workspace-preference-store.ts

@@ -0,0 +1,37 @@
+import { WorkspacePreferences } from "core/states";
+export class WorkspacePreferenceStore {
+  readonly key: string;
+  constructor(ws?: string) {
+    this.key = "workspace-preferences-" + ws ?? "default";
+  }
+
+  enable_preview_feature_components_support(b: boolean) {
+    const pf = this.load();
+    pf.enable_preview_feature_components_support = b;
+    this.set(pf);
+    return pf;
+  }
+
+  debug_mode(b: boolean) {
+    const pf = this.load();
+    pf.debug_mode = b;
+    this.set(pf);
+    return pf;
+  }
+
+  set(pf: WorkspacePreferences) {
+    window.localStorage.setItem(this.key, JSON.stringify(pf));
+  }
+
+  load(): WorkspacePreferences {
+    try {
+      const pl = window.localStorage.getItem(this.key);
+      if (!pl) {
+        return;
+      }
+      return JSON.parse(pl) as WorkspacePreferences;
+    } catch (e) {
+      return;
+    }
+  }
+}

packages/builder-css-styles/index.ts

@@ -11,6 +11,7 @@ export * from "./text-decoration";
 export * from "./text-shadow";
 export * from "./gradient";
 export * from "./padding";
+export * from "./margin";
 export * from "./position";
 export * from "./justify-content";
 export * from "./min-height";

packages/builder-css-styles/margin/index.ts

@@ -0,0 +1,56 @@
+import { CSSProperties } from "@coli.codes/css";
+import { EdgeInsets } from "@reflect-ui/core";
+import { px } from "../dimensions";
+
+type MarginValue = number | "auto";
+
+export function margin(m: EdgeInsets): CSSProperties {
+  if (!m) {
+    return {};
+  }
+  if (m.top === 0 && m.right === 0 && m.bottom === 0 && m.left === 0) {
+    return {};
+  }
+  if (m.top === m.bottom && m.left === m.right) {
+    return {
+      margin: `${_mv(m.top)} ${_mv(m.left)}`,
+    };
+  } else if (m.left === m.right) {
+    return {
+      margin: `${_mv(m.top)} ${_mv(m.left)} ${_mv(m.bottom)}`,
+    };
+  }
+  return {
+    "margin-bottom": _makeifRequired(m?.bottom),
+    "margin-top": _makeifRequired(m?.top),
+    "margin-left": _makeifRequired(m?.left),
+    "margin-right": _makeifRequired(m?.right),
+  };
+}
+
+/**
+ * Margin Value - mv
+ * @param mv
+ * @returns
+ */
+function _mv(mv: MarginValue) {
+  if (mv === undefined) {
+    return;
+  }
+  if (mv === "auto") {
+    return "auto";
+  }
+  return px(mv);
+}
+
+function _makeifRequired(val: MarginValue): string | undefined {
+  if (val === undefined) {
+    return;
+  }
+  if (val === "auto") {
+    return "auto";
+  }
+  if (val && val > 0) {
+    return px(val);
+  }
+}

packages/builder-web-core/widgets-native/container/index.ts

@@ -5,6 +5,7 @@ import {
   BorderRadiusManifest,
   BoxShadowManifest,
   DimensionLength,
+  EdgeInsets,
 } from "@reflect-ui/core";
 import { Background } from "@reflect-ui/core/lib/background";
 import * as css from "@web-builder/styles";
@@ -17,6 +18,7 @@ export class Container extends StylableJsxWidget {
   children?: StylableJsxWidget[];
   borderRadius?: BorderRadiusManifest;
   border?: Border;
+  margin?: EdgeInsets;
 
   constructor(p: {
     key: WidgetKey;
@@ -30,6 +32,8 @@ export class Container extends StylableJsxWidget {
     minHeight?: DimensionLength;
     maxHeight?: DimensionLength;
 
+    margin?: EdgeInsets;
+
     background?: Background;
     borderRadius?: BorderRadiusManifest;
     boxShadow?: BoxShadowManifest[];
@@ -44,6 +48,8 @@ export class Container extends StylableJsxWidget {
     this.minHeight = p.minHeight;
     this.maxHeight = p.maxHeight;
 
+    this.margin = p.margin;
+
     this.x = p.x;
     this.y = p.y;
     this.background = p.background;
@@ -60,7 +66,7 @@ export class Container extends StylableJsxWidget {
       "max-width": css.length(this.maxWidth),
       "min-height": css.length(this.minHeight),
       "max-height": css.length(this.maxHeight),
-
+      ...css.margin(this.margin),
       "box-shadow": css.boxshadow(...(this.boxShadow ?? [])),
       ...css.background(this.background),
       ...css.border(this.border),

packages/designto-token/support-flags/token-wh/index.ts

@@ -1,7 +1,9 @@
 import { WHDeclarationFlag } from "@code-features/flags";
 import { ReflectSceneNode } from "@design-sdk/figma-node";
 import {
+  Container,
   DimensionLength,
+  EdgeInsets,
   isPossibleDimensionLength,
   IWHStyleWidget,
   Widget,
@@ -58,12 +60,39 @@ export function tokenize_flagged_wh_declaration(
 
   const flag_target = unwrappedChild(widget) as IWHStyleWidget;
 
+  // set wh preference
   merged.width && (flag_target.width = merged.width);
   merged.minWidth && (flag_target.minWidth = merged.minWidth);
   merged.maxWidth && (flag_target.maxWidth = merged.maxWidth);
   merged.height && (flag_target.height = merged.height);
   merged.minHeight && (flag_target.minHeight = merged.minHeight);
   merged.maxHeight && (flag_target.maxHeight = merged.maxHeight);
 
+  // if the constraints are set to left & right or top & bottom, we have to add `margin-(?): auto;` to make align the item to center as it is on origin design.
+  // Learn more about this transformation - https://stackoverflow.com/questions/17993471/css-wont-center-div-with-max-width
+  // TODO: the margin's value to "auto" is not acceptable. this is a abberation, needs to fixed.
+  const container = widget as Container;
+  const _provide_initial_margin_if_none = () => {
+    if (!container.margin) {
+      container.margin = new EdgeInsets({
+        top: undefined,
+        right: undefined,
+        bottom: undefined,
+        left: undefined,
+      });
+    }
+  };
+  if (node.constraints.horizontal == "STRETCH") {
+    _provide_initial_margin_if_none();
+    container.margin.left = "auto" as any;
+    container.margin.right = "auto" as any;
+  }
+
+  if (node.constraints.vertical == "STRETCH") {
+    _provide_initial_margin_if_none();
+    container.margin.top = "auto" as any;
+    container.margin.bottom = "auto" as any;
+  }
+
   return widget;
 }

packages/designto-token/token-layout/index.ts

@@ -127,10 +127,31 @@ function flex_or_stack_from_frame(
   };
 
   if (frame.isAutoLayout) {
+    // TODO: inspect me. We're not 100% sure this is the correct behaviour.
     switch (frame.layoutMode) {
       case Axis.horizontal:
+        if (frame.primaryAxisSizingMode === "AUTO") {
+          // when horizontal, primaryAxisSizingMode is x axis
+          // don't specify width
+          initializer.width = undefined;
+        }
+        if (frame.counterAxisSizingMode === "AUTO") {
+          // when horizontal, counterAxisSizingMode is y axis
+          // don't specify height
+          initializer.height = undefined;
+        }
         return new Row(initializer);
       case Axis.vertical:
+        if (frame.counterAxisSizingMode === "AUTO") {
+          // when vertical, counterAxisSizingMode is x axis
+          // don't specify width
+          initializer.width = undefined;
+        }
+        if (frame.primaryAxisSizingMode === "AUTO") {
+          // when vertical, primaryAxisSizingMode is y axis
+          // don't specify height
+          initializer.height = undefined;
+        }
         return new Column(initializer);
       default:
         console.info(`Frame: "${frame.name}" fallback to flex`);