turn off resizer

libs/core/src/proto/ast/serialize.ts

@@ -66,8 +66,9 @@ export const serializeDeclaration = memoize((expr: DeclarationValue) => {
 export const serializeComputedStyle = memoize(
   (style: ComputedStyleMap): Record<string, string> => {
     const comp = {};
+
     for (const key in style.map) {
-      comp[key] = serializeDeclaration(style[key]);
+      comp[key] = serializeDeclaration(style.map[key].value);
     }
     return comp;
   }

libs/designer/src/domains/api/engine.ts

@@ -4,7 +4,6 @@ import {
   FileChanged,
   FileChangedKind,
   ResourceKind,
-  Resource,
 } from "@paperclip-ui/proto/lib/generated/service/designer";
 import { Engine, Dispatch, isPaperclipFile } from "@paperclip-ui/common";
 import { Point } from "../../state/geom";
@@ -145,7 +144,6 @@ const createEventHandler = (actions: APIActions) => {
                  [InsertMode.Element]: `div {
                  style {
                    position: relative
-                   background: blue
                  }
                }`,
                  [InsertMode.Text]: `text ""`,

libs/designer/src/hooks/useFrame/index.ts

@@ -1,5 +1,5 @@
 import { noop } from "lodash";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import { useFrameContainer } from "../useFrameContainer";
 import { useFrameMount } from "../useFrameMount";
 import { PCModule } from "@paperclip-ui/proto/lib/generated/virt/module";

libs/designer/src/ui-testing/test.pc

@@ -39,6 +39,10 @@ div {
     style {
         position: relative
     }
-    module1.Button
+    module1.Button {
+        style {
+            position: relative
+        }
+    }
 }
 

libs/designer/src/ui/logic/Editor/Canvas/Frames/index.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback } from "react";
-import { computeAllStyles, getFrameRects } from "@paperclip-ui/web-renderer";
+import React, { useCallback, useEffect, useState } from "react";
+import { getNodeMap, getFrameRects } from "@paperclip-ui/web-renderer";
 import { memo } from "react";
 import { Frame } from "./Frame";
 import { useDispatch, useSelector } from "@paperclip-ui/common";
@@ -10,6 +10,7 @@ import {
   StyleOverrides,
   getGraph,
   AtomOverrides,
+  getTargetExprId,
 } from "@paperclip-ui/designer/src/state";
 import { PCModule } from "@paperclip-ui/proto/lib/generated/virt/module";
 import { Node } from "@paperclip-ui/proto/lib/generated/virt/html";
@@ -143,9 +144,12 @@ const useFrames = ({ shouldCollectRects = true }: UseFramesProps) => {
   const doc = useSelector(getCurrentDocument);
   const dispatch = useDispatch();
   const variantIds = useSelector(getSelectedVariantIds);
+  // const selectedNodeId = useSelector(getTargetExprId);
+  // const [mounts, setMounts] = useState<Record<string, HTMLDivElement>>({});
 
   const emitFrameRects = useCallback(
     (mount: HTMLElement, data: PCModule, frameIndex: number) => {
+      // setMounts({ ...mounts, [frameIndex]: mount });
       if (!shouldCollectRects) {
         return false;
       }
@@ -160,6 +164,7 @@ const useFrames = ({ shouldCollectRects = true }: UseFramesProps) => {
         type: "ui/rectsCaptured",
         payload: { frameIndex, rects },
       });
+
       // dispatch({
       //   type: "ui/computedStylesCaptured",
       //   payload: computedStyles,
@@ -168,6 +173,15 @@ const useFrames = ({ shouldCollectRects = true }: UseFramesProps) => {
     [dispatch, shouldCollectRects]
   );
 
+  // useEffect(() => {
+  //   if (selectedNodeId) {
+  //     for (const frameIndex in mounts) {
+  //       const nodeMap = getNodeMap(mounts[frameIndex]);
+  //       console.log(selectedNodeId, nodeMap, nodeMap[selectedNodeId]);
+  //     }
+  //   }
+  // }, [mounts, selectedNodeId]);
+
   const onFrameUpdated = (
     mount: HTMLElement,
     data: PCModule,

libs/designer/src/ui/logic/Editor/Canvas/Tools/index.tsx

@@ -17,10 +17,13 @@ import { getSelectedEntityShortcuts } from "@paperclip-ui/designer/src/domains/s
 import { DropTarget } from "./DropTarget";
 import { TextEditor } from "./TextEditor";
 import {
+  getActiveVariant,
   getGraph,
   getSelectedExpressionInfo,
+  getSelectedVariantIds,
 } from "@paperclip-ui/designer/src/state/pc";
 import { ast } from "@paperclip-ui/core/lib/proto/ast/pc-utils";
+import { serializeComputedStyle } from "@paperclip-ui/core/lib/proto/ast/serialize";
 
 export const Tools = () => {
   const {
@@ -127,17 +130,28 @@ const useTools = () => {
 
   const highlightedBox = useSelector(getHighlightedNodeBox);
   const selectedBox = useSelector(getSelectedNodeBox);
+  useSelector(getActiveVariant);
 
   const toolsLayerEnabled = !canvas.isExpanded;
 
   const contextMenu = useSelector(getSelectedEntityShortcuts);
   const selectedExpr = useSelector(getSelectedExpressionInfo);
   const graph = useSelector(getGraph);
+  const variantIds = useSelector(getSelectedVariantIds);
+
+  const style =
+    selectedExpr?.expr &&
+    serializeComputedStyle(
+      ast.computeElementStyle(selectedExpr.expr.id, graph, variantIds)
+    );
 
   const resizeable =
-    selectedExpr &&
-    ast.getParentExprInfo(selectedExpr.expr.id, graph)?.kind ==
-      ast.ExprKind.Document;
+    (selectedExpr &&
+      ast.getParentExprInfo(selectedExpr.expr.id, graph)?.kind ==
+        ast.ExprKind.Document) ||
+    (false &&
+      style?.position &&
+      /relative|fixed|absolute/.test(style.position));
 
   const getMousePoint = (event: any) => {
     const rect = (event.currentTarget as any).getBoundingClientRect();

libs/web-renderer/src/render.ts

@@ -1,7 +1,7 @@
 // FYI this code is super dumb and can definitely be made faster
 import * as html from "@paperclip-ui/proto/lib/generated/virt/html";
 import * as css from "@paperclip-ui/proto/lib/generated/virt/css";
-import {metadataValueMapToJSON} from "@paperclip-ui/proto/lib/virt/html-utils";
+import { metadataValueMapToJSON } from "@paperclip-ui/proto/lib/virt/html-utils";
 import {
   PCModule,
   PCModuleImport,
@@ -237,6 +237,23 @@ export const getFrameRects = (
   return rects;
 };
 
+export const getNodeMap = (mount: HTMLElement) => {
+  const map: Record<string, HTMLElement> = {};
+
+  traverseNativeNode(
+    mount.childNodes[STAGE_INDEX].childNodes[0],
+    (node: HTMLElement) => {
+      if (node.nodeType !== Node.ELEMENT_NODE) {
+        return;
+      }
+
+      map[node.id.substring(1)] = node;
+    }
+  );
+
+  return map;
+};
+
 export const computeAllStyles = (mount: HTMLElement, index: number) => {
   const styles: Record<string, any> = {};
 
@@ -560,5 +577,7 @@ const patchChildren = (
 };
 
 export const getFrameBounds = (node: html.Node) => {
-    return metadataValueMapToJSON(node.element?.metadata ?? node.textNode?.metadata).frame;
+  return metadataValueMapToJSON(
+    node.element?.metadata ?? node.textNode?.metadata
+  ).frame;
 };