#30 wip base svg-to-dtif structure

Author: bennobuilder

package.json

@@ -28,6 +28,7 @@
     "chalk": "^5.2.0",
     "concurrently": "^8.1.0",
     "esbuild": "^0.17.19",
+    "esno": "^0.17.0",
     "execa": "^7.1.1",
     "prettier": "^2.8.7",
     "rollup": "^3.21.7",
@@ -37,6 +38,7 @@
     "rollup-plugin-import-css": "^3.2.1",
     "rollup-plugin-node-externals": "^6.0.1",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript-paths": "^1.4.0",
     "rollup-plugin-visualizer": "^5.9.0",
     "shx": "^0.3.4",
     "turbo": "^1.9.3",

packages/dtif-to-svg/README.md

@@ -1,2 +1,12 @@
 # `dtif-to-svg`
 Convert DTIF to SVG using D3.js.
+
+## Why `opentype.js`
+
+TypeScript Support: opentype.js comes with built-in TypeScript definitions. This makes it a more suitable choice for projects written in TypeScript, as it allows for type checking and autocompletion in compatible editors.
+
+NPM Package: opentype.js is available as an NPM package, which simplifies the installation process and makes version management easier.
+
+No Dependency on window: Unlike Typr.js, opentype.js doesn't rely on the global window object for its functionality. This makes it more portable and suitable for environments where window may not be available, such as server-side Node.js or worker threads.
+
+It's worth noting, however, that there are trade-offs associated with choosing opentype.js over Typr.js. Some users have reported that opentype.js might be slower and less precise than Typr.js in some cases. Nonetheless, we believe that the advantages of opentype.js, especially its support for TypeScript and its availability as an NPM package, outweigh these potential downsides for the purposes of dtif-to-svg.

packages/dtif-to-svg/package.json

@@ -20,7 +20,7 @@
   "license": "MIT",
   "dependencies": {
     "@pda/openapi-fetch": "workspace:^",
-    "@remotion/paths": "^4.0.6",
+    "@pda/utils": "workspace:^",
     "d3-selection": "^3.0.0",
     "opentype.js": "^1.3.4",
     "webfontloader": "^1.6.28"
@@ -31,11 +31,13 @@
   "devDependencies": {
     "@pda/jest-presets": "workspace:*",
     "@pda/tsconfig": "workspace:*",
+    "@pda/types": "workspace:^",
     "@types/d3": "^7.4.0",
     "@types/d3-selection": "^3.0.5",
     "@types/jest": "^29.5.1",
     "@types/node": "^18.15.13",
     "@types/opentype.js": "^1.3.4",
+    "@types/react": "^18.2.14",
     "eslint": "^8.38.0",
     "eslint-config-pda-base": "workspace:*",
     "jest": "^29.5.0",

packages/dtif-to-svg/src/d3.ts

@@ -23,4 +23,4 @@ const d3 = (() => {
   return getD3;
 })();
 
-export { d3 };
+export default d3;

packages/dtif-to-svg/src/helpers/css/index.ts

@@ -0,0 +1 @@
+export * from './transform-to-css';

packages/dtif-to-svg/src/helpers/css/transform-to-css.ts

@@ -0,0 +1,23 @@
+import { TTransform } from '@pda/types/dtif';
+import type { CSSProperties } from 'react';
+import { T2DMatrixData, extractMatrixData } from '../math/extract-matrix-data';
+
+export function transformToCSS(
+  transform: TTransform | T2DMatrixData
+): CSSProperties {
+  const {
+    rotation,
+    scaleX,
+    scaleY,
+    tx: x,
+    ty: y,
+  } = Array.isArray(transform) ? extractMatrixData(transform) : transform;
+
+  return {
+    transform: `translate(${x}px, ${y}px) rotate(${
+      // We negate the rotation to correct for Figma's clockwise rotation
+      -rotation
+    }deg) scale(${scaleX}, ${scaleY})`,
+    transformOrigin: '0 0', // top left
+  };
+}

packages/dtif-to-svg/src/helpers/d3/append-basic-shape-node-element.ts

@@ -0,0 +1,70 @@
+import { TD3SVGElementSelection, TD3Selection } from '@/types';
+import {
+  TEllipseNode,
+  TPolygonNode,
+  TRectangleNode,
+  TStarNode,
+} from '@pda/types/dtif';
+import { getElementId } from '../other';
+import { appendNodeWrapperGElement } from './append-node-wrapper-g-element';
+
+export async function appendBasicShapeNodeElement(
+  parent: TD3SVGElementSelection,
+  props: {
+    node: TRectangleNode | TEllipseNode | TStarNode | TPolygonNode;
+    shapeAppend: (
+      parent: TD3SVGElementSelection
+    ) => Promise<TD3SVGElementSelection>;
+    index?: number;
+  }
+): Promise<TD3Selection<SVGGElement>> {
+  const { node, shapeAppend, index = 0 } = props;
+  const fillClipPathId = getElementId({
+    id: node.id,
+    index,
+    type: node.type.toLocaleLowerCase(),
+    category: 'fill-clip',
+    isDefinition: true,
+  });
+
+  // Create element
+  const gElement = appendNodeWrapperGElement(parent, { node, index });
+
+  // Append children
+  await appendDefsElement(gElement, { fillClipPathId, shapeAppend });
+  // TODO: fill
+
+  return gElement;
+}
+
+async function appendDefsElement(
+  parent: TD3SVGElementSelection,
+  props: {
+    fillClipPathId: string;
+    shapeAppend: (
+      parent: TD3SVGElementSelection
+    ) => Promise<TD3SVGElementSelection>;
+  }
+) {
+  const defsElement = parent.append('defs');
+  await appendClipPathElement(defsElement, props);
+  return defsElement;
+}
+
+async function appendClipPathElement(
+  parent: TD3SVGElementSelection,
+  props: {
+    fillClipPathId: string;
+    shapeAppend: (
+      parent: TD3SVGElementSelection
+    ) => Promise<TD3SVGElementSelection>;
+  }
+) {
+  const { fillClipPathId, shapeAppend } = props;
+  const clipPathElement = parent.append('clipPath').attr('id', fillClipPathId);
+
+  // Append children
+  await shapeAppend(clipPathElement);
+
+  return clipPathElement;
+}

packages/dtif-to-svg/src/helpers/d3/append-node-wrapper-g-element.ts

@@ -0,0 +1,29 @@
+import { TD3SVGElementSelection } from '@/types';
+import { TNode } from '@pda/types/dtif';
+import { transformToCSS } from '../css/transform-to-css';
+import { getElementId } from '../other/get-element-id';
+import { applyCSSToD3 } from './apply-css-to-d3';
+
+export function appendNodeWrapperGElement(
+  parent: TD3SVGElementSelection,
+  props: { node: TNode; index?: number }
+) {
+  const { node, index = 0 } = props;
+
+  // Create element
+  const gElement = parent
+    .append('g')
+    .attr(
+      'id',
+      getElementId({ id: node.id, index, type: node.type.toLocaleLowerCase() })
+    );
+
+  // Apply styles
+  applyCSSToD3(gElement, {
+    display: node.isVisible ? 'block' : 'none',
+    opacity: node.opacity,
+    ...transformToCSS(node.relativeTransform),
+  });
+
+  return gElement;
+}

packages/dtif-to-svg/src/helpers/d3/apply-css-to-d3.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'react';
+import { TD3Selection } from '../../types';
+
+export function applyCSSToD3(
+  selection: TD3Selection<any>,
+  styles: CSSProperties
+): TD3Selection<any> {
+  for (const key in styles) {
+    selection.style(key, camelToKebabCase(styles[key]));
+  }
+  return selection;
+}
+
+function camelToKebabCase(str: string): string {
+  return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+}

packages/dtif-to-svg/src/helpers/d3/index.ts

@@ -0,0 +1,3 @@
+export * from './append-basic-shape-node-element';
+export * from './append-node-wrapper-g-element';
+export * from './apply-css-to-d3';