Update deps to range limits. Begin work on a dev testbed.

excalidraw · May 7, 2024 · 334613a · 334613a
1 parent 6f6e4b7
commit 334613a
Show file tree

Hide file tree

Showing 10 changed files with 5,614 additions and 3,604 deletions.
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/dev/index.html b/dev/index.html
@@ -1,118 +1,55 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>svg-to-excalidraw</title>
-    <style>
-      html {
-        height: 100%;
-        width: 100%;
-        font-family: Verdana, Geneva, sans-serif;
-      }
-
-      body {
-        display: flex;
-        flex-direction: column;
-        align-items: stretch;
-        margin: 0;
-        height: 100%;
-      }
-
-      header {
-        text-align: center;
-        font-size: 1.6rem;
-        text-transform: uppercase;
-        background-color: cornflowerblue;
-        color: cornsilk;
-      }
-
-      header > h1 {
-        padding: 0.5rem;
-      }
-
-      main {
-        display: flex;
-        flex-direction: row;
-        height: 100%;
-      }
-
-      main > aside {
-        display: flex;
-        flex-direction: column;
-        align-content: center;
-        flex: 1;
-        background-color: rgba(100, 149, 237, 0.3);
-        padding: 0.8rem;
-      }
-
-      main > textarea {
-        flex: 3;
-      }
 
-      .custom-file-upload {
-        display: inline-block;
-        cursor: pointer;
-        margin: 1rem 0;
-        border-radius: 0.2rem;
-        background-color: #fff;
-        border: 1px solid #333;
-        color: #333;
-        padding: 0.5rem;
-      }
-
-      #source {
-        display: none;
-      }
-
-      #result {
-        margin: 1rem;
-        padding: 0.5rem;
+<head>
+  <title>svg-to-excalidraw</title>
+  <link rel="stylesheet" href="/src/css/style.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css" />
+</head>
+
+<body>
+  <main>
+    <sl-split-panel>
+      <div id="left-main-panel" slot="start">
+        <header>
+          <h1>SVG to Excalidraw Testbed</h1>
+        </header>
+        <sl-divider></sl-divider>
+        <sl-textarea id="svg-textarea" placeholder="Paste SVG here"></sl-textarea>
+        <div style="margin: 1rem 0;">
+          <sl-button id="convert-btn">Convert</sl-button>
+        </div>
+      </div>
+      <div id="right-main-panel" slot="end">
+        <div id="json-viewer-btns">
+          <sl-button id="expand-all-btn">Expand All</sl-button>
+          <sl-button id="collapse-all-btn">Collapse All</sl-button>
+          <sl-button id="copy-btn">Copy JSON</sl-button>
+        </div>
+        <sl-divider></sl-divider>
+        <div id="json-viewer-wrapper">
+          <json-viewer></json-viewer>
+        </div>
+      </div>
+    </sl-split-panel>
+  </main>
+  <!-- Import Map -->
+  <script type="importmap">
+      {
+        "imports": {
+          "svg-to-excalidraw": "/dist/esm-bundle.js"
+        }
       }
-    </style>
-  </head>
-  <body>
-    <header><h1>svg-to-excalidraw</h1></header>
-    <main>
-      <aside>
-        <div>File to convert :</div>
-        <label for="source" class="custom-file-upload">Pick a SVG file</label>
-        <input type="file" id="source" accept=".svg" />
-      </aside>
-      <textarea
-        id="result"
-        placeholder="Result in excalidraw file format should be output here"
-      ></textarea>
-    </main>
-    <script type="module">
-      import svgParse from "../dist/esm-bundle.js";
-
-      const fileSelector = document.getElementById("source");
-      const output = document.getElementById("result");
-
-      output.addEventListener("click", function (event) {
-        this.select();
-      });
-
-      fileSelector.addEventListener("change", (event) => {
-        const fileList = event.target.files;
-        readFile(fileList[0]);
-      });
-
-      function readFile(file) {
-        if (file.type && file.type !== "image/svg+xml") {
-          console.log("File is not SVG.");
+    </script>
 
-          return;
-        }
+  <!-- Shoelace web components: https://shoelace.style/ -->
+  <script type="module"
+    src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace-autoloader.js"></script>
 
-        const reader = new FileReader();
+  <!-- JSON Viewer web component: https://github.com/alenaksu/json-viewer -->
+  <script src="https://unpkg.com/@alenaksu/[email protected]/dist/json-viewer.bundle.js"></script>
 
-        reader.readAsText(file);
-        reader.addEventListener("load", (event) => {
-          const parsingResult = svgParse.parse(event.target.result);
+  <script type="module" src="/src/js/main.mjs"></script>
+</body>
 
-          output.value = JSON.stringify(parsingResult, null, 2);
-        });
-      }
-    </script>
-  </body>
-</html>
+</html>
diff --git a/dev/src/css/style.css b/dev/src/css/style.css
@@ -0,0 +1,34 @@
+@font-face {
+  font-family: 'Virgil';
+  src: url('../fonts/Virgil.woff2') format('woff2');
+}
+
+html {
+  height: 100%;
+  width: 100%;
+  font-family: Verdana, Geneva, sans-serif;
+}
+
+main {
+  height: 100vh;
+}
+
+h1 {
+  padding: 0.5rem;
+  font-size: 2rem;
+  font-family: 'Virgil', sans-serif;
+}
+
+sl-split-panel {
+  height: 100%;
+}
+
+#left-main-panel {
+  height: 100%;
+  margin: 1rem;
+}
+
+#right-main-panel {
+  height: 100%;
+  margin: 1rem;
+}
diff --git a/dev/src/fonts/Virgil.woff2 b/dev/src/fonts/Virgil.woff2
diff --git a/dev/src/js/main.mjs b/dev/src/js/main.mjs
@@ -0,0 +1,42 @@
+import svgToEx from "svg-to-excalidraw";
+
+function addConvertBtnEvents() {
+  const convertBtn = document.querySelector("#convert-btn");
+
+  convertBtn.addEventListener("click", async () => {
+    const svg = document.querySelector("#svg-textarea").value;
+
+    const { content } = await svgToEx.convert(svg);
+
+    const jsonViewer = document.querySelector("json-viewer");
+    jsonViewer.data = content;
+    jsonViewer.expandAll();
+  });
+}
+
+function addJsonViewerBtnEvents() {
+  const jsonViewer = document.querySelector("json-viewer");
+
+  const expandAllBtn = document.querySelector("#expand-all-btn");
+  const collapseAllBtn = document.querySelector("#collapse-all-btn");
+  const copyBtn = document.querySelector("#copy-btn");
+
+  expandAllBtn.addEventListener("click", () => {
+    jsonViewer.expandAll();
+  });
+
+  collapseAllBtn.addEventListener("click", () => {
+    jsonViewer.collapseAll();
+  });
+
+  copyBtn.addEventListener("click", () => {
+    navigator.clipboard.writeText(JSON.stringify(jsonViewer.data, null, 2));
+  });
+}
+
+async function main() {
+  addJsonViewerBtnEvents();
+  addConvertBtnEvents();
+}
+
+document.addEventListener("DOMContentLoaded", main);
diff --git a/package.json b/package.json
@@ -21,7 +21,8 @@
     "test": "yarn test:typecheck && yarn test:code && yarn test:other",
     "test:code": "eslint --max-warnings=0 --ignore-path .gitignore --ext .js,.ts,.tsx .",
     "test:other": "yarn prettier -- --list-different",
-    "test:typecheck": "tsc"
+    "test:typecheck": "tsc",
+    "dev": "yarn build:watch & serve"
   },
   "prettier": "@excalidraw/prettier-config",
   "contributors": [
@@ -30,38 +31,40 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "7.15.5",
-    "@babel/plugin-proposal-class-properties": "7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "7.14.7",
+    "@babel/core": "7.24.5",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "7.20.7",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/preset-env": "7.15.4",
-    "@babel/preset-typescript": "7.15.0",
-    "@excalidraw/eslint-config": "1.0.1",
+    "@babel/preset-env": "7.24.5",
+    "@babel/preset-typescript": "7.24.1",
+    "@excalidraw/eslint-config": "1.0.3",
     "@excalidraw/prettier-config": "1.0.2",
-    "@types/chroma-js": "^2.1.3",
-    "@typescript-eslint/eslint-plugin": "4.31.0",
-    "@typescript-eslint/parser": "4.31.0",
-    "babel-loader": "^8.2.2",
+    "@types/chroma-js": "^2.4.4",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
+    "babel-loader": "^8.3.0",
     "eslint": "7.32.0",
-    "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-prettier": "4.0.0",
-    "lint-staged": "11.1.2",
-    "prettier": "2.3.2",
-    "typescript": "4.4.2",
-    "webpack": "5.52.0",
-    "webpack-cli": "4.8.0"
+    "eslint-config-prettier": "8.10.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "lint-staged": "11.2.6",
+    "prettier": "2.8.8",
+    "typescript": "4.9.5",
+    "webpack": "5.91.0",
+    "webpack-cli": "4.10.0"
   },
   "lint-staged": {
     "*.js": "eslint --cache --fix",
     "*.{js,css,md}": "prettier --write"
   },
   "dependencies": {
-    "chroma-js": "^2.1.2",
-    "gl-matrix": "^3.3.0",
-    "nanoid": "^3.1.25",
+    "chroma-js": "^2.4.2",
+    "gl-matrix": "^3.4.3",
+    "nanoid": "^3.3.7",
     "path-data-parser": "^0.1.0",
     "points-on-curve": "^0.2.0",
     "points-on-path": "^0.2.1",
-    "roughjs": "^4.4.1"
+    "rimraf": "^5.0.5",
+    "roughjs": "^4.6.6",
+    "serve": "^14.2.3"
   }
 }
diff --git a/serve.json b/serve.json
@@ -0,0 +1,9 @@
+{
+  "rewrites": [{
+    "source": "/",
+    "destination": "/dev/index.html"
+  }, {
+    "source": "/src/:asset/:path*",
+    "destination": "/dev/src/:asset/:path*"
+  }]
+}
diff --git a/src/attributes.ts b/src/attributes.ts
@@ -15,7 +15,7 @@ export function get(el: Element, attr: string, backup?: string): string {
 
 export function getNum(el: Element, attr: string, backup?: number): number {
   const numVal = Number(get(el, attr));
-  return numVal === NaN ? backup || 0 : numVal;
+  return Number.isNaN(numVal) ? backup || 0 : numVal;
 }
 
 const presAttrs = {