Merge pull request #31 from physical-art/24-phy-42-render-dtif-json-object-using-svg-html-css

24 phy 42 render dtif json object using svg html css

Author: bennobuilder

apps/figma-plugin/package.json

@@ -58,7 +58,6 @@
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "@types/ws": "^8.5.4",
-    "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.3",
     "dotenv": "^16.0.3",
     "eslint": "^8.38.0",
@@ -69,9 +68,6 @@
     "postcss": "^8.4.23",
     "postcss-loader": "^7.2.4",
     "prop-types": "15.8.1",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-import-css": "^3.2.1",
-    "rollup-plugin-postcss": "^4.0.2",
     "storybook": "7.0.18",
     "style-loader": "^3.3.2",
     "tailwindcss": "^3.3.1",

apps/figma-plugin/rollup.config.js

@@ -11,6 +11,7 @@ import yargs from 'yargs/yargs';
 import { hideBin } from 'yargs/helpers';
 import json from '@rollup/plugin-json';
 import bundleSize from 'rollup-plugin-bundle-size';
+import { visualizer } from 'rollup-plugin-visualizer';
 
 // https://github.com/egoist/rollup-plugin-esbuild/issues/361
 import _esbuild from 'rollup-plugin-esbuild';
@@ -76,7 +77,16 @@ const sharedPlugins = {
     ),
     'process.env.PREVIEW_MODE': isPreview,
   }),
+  // Determine bundle size
   bundleSize: bundleSize(),
+  // Visualize bundle
+  visualize: (appName) =>
+    visualizer({
+      title: appName,
+      filename: path.resolve(process.cwd(), `./.compile/${appName}.html`),
+      sourcemap: true,
+      gzipSize: true,
+    }),
 };
 
 // ============================================================================
@@ -105,6 +115,7 @@ export default [
         ...parseDotenv('./.env.background'),
       }),
       sharedPlugins.bundleSize,
+      sharedPlugins.visualize('background'),
     ],
     external: ['react', 'react-dom'],
   },
@@ -115,6 +126,7 @@ export default [
       file: './dist/ui.js',
       format: 'es',
       sourcemap: !isProduction,
+      inlineDynamicImports: true,
     },
     plugins: [
       sharedPlugins.nodeResolve,
@@ -165,6 +177,7 @@ export default [
         ],
       }),
       sharedPlugins.bundleSize,
+      sharedPlugins.visualize('ui'),
     ],
   },
 ];

apps/figma-plugin/src/background/events/intermediate-format-export/process-node.ts

@@ -30,6 +30,7 @@ export async function processNode(
       }
       return uploadDataToBucket(key, data, contentType?.mimeType);
     };
+
     // Format the node for export
     const toExportNode = await formatFrameToScene(node, {
       ...options,
@@ -59,7 +60,7 @@ export async function processNode(
 
     // Upload the node as JSON string to bucket
     const json = JSON.stringify(toExportNode);
-    const key = sha256(json);
+    const key = options.nameAsBucketId ? node.name : sha256(json);
     await uploadDataToBucket(key, stringToUint8Array(json), 'application/json');
 
     // Post success message and notify the user

apps/figma-plugin/src/shared/types/background-events.ts

@@ -9,7 +9,9 @@ export interface TIntermediateFormatExportEvent extends TBaseFigmaMessageEvent {
       FrameNode | ComponentNode | InstanceNode,
       'name' | 'id'
     >[];
-    options: Omit<TFormatNodeOptions, 'uploadStaticData'>;
+    options: Omit<TFormatNodeOptions, 'uploadStaticData'> & {
+      nameAsBucketId?: boolean;
+    };
   };
 }
 

apps/figma-plugin/src/ui/routes/dtif/ExportPreview.tsx

@@ -36,25 +36,29 @@ const ExportPreview: React.FC<TProps> = (props) => {
   // Render node as JSXs
   React.useEffect(() => {
     const renderNodeAsJSX = async () => {
-      if (node != null) {
-        const jsxNode = await (isFrameNode(node)
-          ? renderRelativeParent(node, 0.2)
-          : renderNode(node, { isLocked: false, isVisible: true }));
-        setNodeAsJSX(jsxNode);
-        setNodeAsJSXString(toJSXString(jsxNode as React.ReactElement));
+      if (node != null && activeTab === EPreviewTabs.PREVIEW) {
+        setTimeout(async () => {
+          const jsxNode = await (isFrameNode(node)
+            ? renderRelativeParent(node, 0.2)
+            : renderNode(node, { isLocked: false, isVisible: true }));
+          setNodeAsJSX(jsxNode);
+          setNodeAsJSXString(toJSXString(jsxNode as React.ReactElement));
+        });
       }
     };
     renderNodeAsJSX();
-  }, [node]);
+  }, [node, activeTab === EPreviewTabs.PREVIEW]);
 
   // Find an highlight all code snippets in the page
   React.useEffect(() => {
     // setIsLoadingHighlight(true); // Directly set in callback to avoid waiting for next render cycle
     // Wrapped in timeout to avoid UI lag and instead highlight after switch
-    setTimeout(() => {
-      Prism.highlightAll();
-      setIsLoadingHighlight(false);
-    });
+    if (activeTab === EPreviewTabs.JSX) {
+      setTimeout(() => {
+        Prism.highlightAll();
+        setIsLoadingHighlight(false);
+      });
+    }
   }, [nodeAsJSXString, activeTab === EPreviewTabs.JSX]);
 
   // ============================================================================

apps/figma-plugin/src/ui/routes/dtif/index.tsx

@@ -71,16 +71,19 @@ const DTIFExport: React.FC = () => {
 
       // Send export event to sandbox
       if (selectedFrame != null) {
+        // TODO: make config accessible from UI
         uiHandler.postMessage('intermediate-format-export', {
           selectedElements: [selectedFrame],
           options: {
             svg: {
               inline: true,
               exportIdentifierRegex: '_svg$',
+              frameToSVG: false,
             },
             gradientFill: {
               inline: true,
             },
+            nameAsBucketId: true,
           },
         });
       } else {

apps/web/app/components/canvas/README.md

@@ -0,0 +1,47 @@
+# Design Decisions
+
+## Local Definition of Defs
+
+In SVG, the `<defs>` element is used to define graphical elements that can be reused later with the `<use>` tag or as a clipping path, gradient definition, etc. Typically, these `<defs>` elements are defined at the top level of the SVG, which provides a centralized repository of reusable elements.
+
+However, in complex, dynamic SVG structures, it can be more practical and efficient to define `<defs>` locally within each grouping (`<g>`) element. This approach keeps each grouping unit contained with its clip path and transformations. 
+
+One of the key reasons to choose local definition of `<defs>` is the consideration for performance and maintainability. Specifically, in a dynamic and interactive application where SVG elements are frequently updated, moved, or transformed, local `<defs>` help avoid the overhead of traversing the SVG tree multiple times and synchronize transformations across different parts of the SVG. 
+
+While not the most "typical" approach, local definition of `<defs>` is a valid and often beneficial strategy for managing complex and dynamic SVG structures.
+
+# Good To Know
+
+## G Elements and Width/Height
+
+In SVG, the `<g>` element is used to group SVG shapes together. Once grouped, transformations and styles can be applied to the whole group as a single entity. However, unlike some other SVG elements such as `<rect>`, the `<g>` element does not have `width` and `height` attributes.
+
+The dimensions of a `<g>` element are determined by the contents within it. Any attempt to apply `width` or `height` directly to a `<g>` element will have no effect. This is because `<g>` elements are not directly rendered; their purpose is to group other elements.
+
+For example, consider the following SVG structure:
+
+```html
+<svg width="200" height="200" viewBox="0 0 200 200">
+  <g width="50" height="50" fill="green">
+    <rect width="50" height="50" fill="blue"></rect>
+  </g>
+</svg>
+```
+
+In this case, the `<rect>` inside the `<g>` element is set to be 50 units wide and 50 units high. However, the `width` and `height` attributes applied to the `<g>` element are ignored. The size of the `<g>` element is determined by the dimensions and positions of its content, not by any `width` or `height` attributes applied directly to the `<g>` itself.
+
+## Transformations on G Elements and Child Element Positioning
+
+When a transformation (such as translate, rotate, scale, etc.) is applied to a `<g>` element, it affects the coordinate system for that group and all of its child elements. This means the positions of the child elements become relative to the coordinate system of the parent `<g>` element, not the overall SVG.
+
+For example, consider the following SVG structure:
+
+```html
+<svg width="200" height="200" viewBox="0 0 200 200">
+  <g transform="translate(50,50)">
+    <rect width="50" height="50" fill="blue"></rect>
+  </g>
+</svg>
+```
+
+In this case, a `translate(50,50)` transformation is applied to the `<g>` element. This means that the origin of the coordinate system for this group is moved 50 units to the right and 50 units down. As a result, the `<rect>` inside the `<g>` element, which is positioned at (0,0) relative to the `<g>`, will actually appear at the (50,50) position in the overall SVG. This is because the rectangle's position is relative to its parent group, not the overall SVG.

apps/web/app/components/canvas/components/index.ts

@@ -0,0 +1,2 @@
+export * from './nodes';
+export * from './other';

apps/web/app/components/canvas/components/nodes/Ellipse.tsx

@@ -0,0 +1,62 @@
+import {
+  createEllipsePath,
+  getIdentifier,
+  transformToCSS,
+} from '@/components/canvas/utils';
+import { TEllipseNode } from '@pda/types/dtif';
+import React from 'react';
+import { Fill } from '../other';
+
+const Ellipse: React.FC<TProps> = (props) => {
+  const { node, index = 0 } = props;
+  const fillClipPathId = React.useMemo(
+    () =>
+      getIdentifier({
+        id: node.id,
+        index,
+        type: 'ellipse',
+        category: 'fill-clip',
+        isDefinition: true,
+      }),
+    [node.id]
+  );
+  const svgPath = React.useMemo(
+    () =>
+      createEllipsePath({
+        arcData: node.arcData,
+        width: node.width,
+        height: node.height,
+      }),
+    [node.arcData, node.width, node.height]
+  );
+
+  return (
+    <g
+      id={getIdentifier({
+        id: node.id,
+        index,
+        type: 'ellipse',
+      })}
+      style={{
+        display: node.isVisible ? 'block' : 'none',
+        opacity: node.opacity,
+        pointerEvents: node.isLocked ? 'none' : 'auto',
+        ...transformToCSS(node.relativeTransform),
+      }}
+    >
+      <defs>
+        <clipPath id={fillClipPathId}>
+          <path d={svgPath} fill={'red'} />
+        </clipPath>
+      </defs>
+      <Fill node={node} clipPathId={fillClipPathId} />
+    </g>
+  );
+};
+
+export default Ellipse;
+
+type TProps = {
+  node: TEllipseNode;
+  index?: number;
+};

apps/web/app/components/canvas/components/nodes/Frame.tsx

@@ -0,0 +1,96 @@
+import { getIdentifier, transformToCSS } from '@/components/canvas/utils';
+import { TFrameNode } from '@pda/types/dtif';
+import React from 'react';
+import { Fill } from '../other';
+import Node from './Node';
+
+const Frame: React.FC<TProps> = (props) => {
+  const { node, index = 0 } = props;
+  const contentClipPathId = React.useMemo(
+    () =>
+      getIdentifier({
+        id: node.id,
+        index,
+        type: 'frame',
+        category: 'content-clip',
+        isDefinition: true,
+      }),
+    [node.id]
+  );
+  const fillClipPathId = React.useMemo(
+    () =>
+      getIdentifier({
+        id: node.id,
+        index,
+        type: 'frame',
+        category: 'fill-clip',
+        isDefinition: true,
+      }),
+    [node.id]
+  );
+
+  return (
+    <g
+      id={getIdentifier({
+        id: node.id,
+        index,
+        type: 'frame',
+      })}
+      style={{ ...transformToCSS(node.relativeTransform) }}
+    >
+      {/* Frame Content */}
+      <g
+        id={getIdentifier({
+          id: node.id,
+          index,
+          type: 'frame',
+          category: 'content',
+        })}
+        clipPath={node.clipsContent ? `url(#${contentClipPathId})` : undefined}
+      >
+        <defs>
+          <clipPath id={fillClipPathId}>
+            <rect width={node.width} height={node.height} />
+          </clipPath>
+        </defs>
+        <Fill node={node} clipPathId={fillClipPathId} />
+        <g
+          id={getIdentifier({
+            id: node.id,
+            index,
+            type: 'frame',
+            category: 'children',
+          })}
+        >
+          {node.children.map((child, i) => (
+            <Node
+              key={getIdentifier({
+                id: node.id,
+                index: i,
+                type: 'child',
+              })}
+              index={i}
+              node={child}
+            />
+          ))}
+        </g>
+      </g>
+
+      {/* Clips Content */}
+      {node.clipsContent && (
+        <defs>
+          <clipPath id={contentClipPathId}>
+            <rect width={node.width} height={node.height} />
+          </clipPath>
+        </defs>
+      )}
+    </g>
+  );
+};
+
+export default Frame;
+
+type TProps = {
+  node: TFrameNode;
+  index?: number;
+};