feat: Add rough mode

2024-05-23 14:05:59 +05:30
parent eb3b2d5446
commit cba9a6754d
7 changed files with 114 additions and 19 deletions
@@ -19,6 +19,7 @@
    "pako",
    "panzoom",
    "pzoom",
+    "roughjs",
    "Serde",
    "serdes",
    "tailwindcss",
@@ -80,6 +80,7 @@
    "plausible-tracker": "^0.3.8",
    "random-word-slugs": "0.1.7",
    "svg-pan-zoom": "3.6.1",
+    "svg2roughjs": "^3.2.0",
    "uuid": "9.0.1"
  },
  "lint-staged": {
@@ -1,17 +1,19 @@
 <script lang="ts">
-  import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state';
-  import { onMount } from 'svelte';
-  import panzoom from 'svg-pan-zoom';
  import type { State, ValidatedState } from '$lib/types';
+  import { recordRenderTime, shouldRefreshView } from '$lib/util/autoSync';
+  import { render as renderDiagram } from '$lib/util/mermaid';
+  import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state';
  import { logEvent, saveStatistics } from '$lib/util/stats';
  import { cmdKey } from '$lib/util/util';
-  import { render as renderDiagram } from '$lib/util/mermaid';
  import type { MermaidConfig } from 'mermaid';
-  import { recordRenderTime, shouldRefreshView } from '$lib/util/autoSync';
+  import { onMount } from 'svelte';
+  import panzoom from 'svg-pan-zoom';
+  import { Svg2Roughjs } from 'svg2roughjs';

  let code = '';
  let config = '';
  let container: HTMLDivElement;
+  let rough: boolean;
  let view: HTMLDivElement;
  let error = false;
  let errorLines: string[] = [];
@@ -75,7 +77,12 @@
        outOfSync = false;
        manualUpdate = true;
        // Do not render if there is no change in Code/Config/PanZoom
-        if (code === state.code && config === state.mermaid && panZoomEnabled === state.panZoom) {
+        if (
+          code === state.code &&
+          config === state.mermaid &&
+          panZoomEnabled === state.panZoom &&
+          rough === state.rough
+        ) {
          return;
        }

@@ -87,6 +94,7 @@
        code = state.code;
        config = state.mermaid;
        panZoomEnabled = state.panZoom;
+        rough = state.rough;
        const scroll = view.parentElement?.scrollTop;
        delete container.dataset.processed;
        const { svg, bindFunctions } = await renderDiagram(
@@ -98,17 +106,33 @@
        if (svg.length > 0) {
          handlePanZoom(state);
          container.innerHTML = svg;
-          console.log({ svg });
-          const graphDiv = document.querySelector<HTMLElement>('#graph-div');
+          const graphDiv = document.querySelector<SVGSVGElement>('#graph-div');
          if (!graphDiv) {
            throw new Error('graph-div not found');
          }
+          if (state.rough) {
+            const svg2roughjs = new Svg2Roughjs('#container');
+            svg2roughjs.svg = graphDiv;
+            await svg2roughjs.sketch();
+            graphDiv?.remove();
+            const sketch = document.querySelector<HTMLElement>('#container > svg');
+            if (!sketch) {
+              throw new Error('sketch not found');
+            }
+            const height = sketch.getAttribute('height');
+            const width = sketch.getAttribute('width');
+            sketch.setAttribute('height', '100%');
+            sketch.setAttribute('width', '100%');
+            sketch.setAttribute('viewBox', `0 0 ${width} ${height}`);
+            sketch.style.maxWidth = '100%';
+          } else {
            graphDiv.setAttribute('height', '100%');
            graphDiv.style.maxWidth = '100%';
            if (bindFunctions) {
              bindFunctions(graphDiv);
            }
          }
+        }
        if (view.parentElement && scroll) {
          view.parentElement.scrollTop = scroll;
        }
@@ -23,6 +23,7 @@ export interface State {
  mermaid: string;
  updateDiagram: boolean;
  autoSync: boolean;
+  rough: boolean;
  editorMode?: EditorMode;
  panZoom?: boolean;
  pan?: { x: number; y: number };
@@ -19,6 +19,7 @@ export const defaultState: State = {
    theme: 'default'
  }),
  autoSync: true,
+  rough: false,
  updateDiagram: true
 };

@@ -1,17 +1,17 @@
 <script lang="ts">
+  import { dev } from '$app/environment';
+  import { base } from '$app/paths';
+  import Actions from '$lib/components/Actions.svelte';
+  import Card from '$lib/components/Card/Card.svelte';
  import Editor from '$lib/components/Editor.svelte';
+  import History from '$lib/components/History/History.svelte';
  import Navbar from '$lib/components/Navbar.svelte';
  import Preset from '$lib/components/Preset.svelte';
-  import Actions from '$lib/components/Actions.svelte';
  import View from '$lib/components/View.svelte';
-  import Card from '$lib/components/Card/Card.svelte';
-  import History from '$lib/components/History/History.svelte';
+  import type { DocumentationConfig, EditorMode, Tab, ValidatedState } from '$lib/types';
  import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state';
  import { cmdKey, initHandler, syncDiagram } from '$lib/util/util';
  import { onMount } from 'svelte';
-  import { base } from '$app/paths';
-  import { dev } from '$app/environment';
-  import type { Tab, DocumentationConfig, EditorMode, ValidatedState } from '$lib/types';

  const MCBaseURL = dev ? 'http://localhost:5174' : 'https://mermaidchart.com';
  const docURLBase = 'https://mermaid.js.org';
@@ -187,12 +187,27 @@
    <div class="flex flex-1 flex-col overflow-hidden">
      <Card title="Diagram" isCloseable={false}>
        <div slot="actions" class="flex flex-row items-center gap-2">
-          <label class="label cursor-pointer py-0" for="panZoom">
+          <label
+            class="label flex cursor-pointer gap-1 py-0"
+            title="Rough mode is in beta. Features like clickable nodes, Pan & Zoom, will be disabled."
+            for="rough">
+            <span>Rough</span>
+            <input
+              type="checkbox"
+              class="toggle {$stateStore.rough ? 'btn-secondary' : 'toggle-primary'}"
+              id="rough"
+              bind:checked={$inputStateStore.rough} />
+          </label>
+          <label
+            class="label flex cursor-pointer gap-1 py-0"
+            title={$stateStore.rough ? 'Pan & Zoom is disabled in rough mode.' : ''}
+            for="panZoom">
            <span>Pan & Zoom</span>
            <input
              type="checkbox"
              class="toggle {$stateStore.panZoom ? 'btn-secondary' : 'toggle-primary'}"
              id="panZoom"
+              disabled={$stateStore.rough}
              bind:checked={$inputStateStore.panZoom} />
          </label>
          <a
@@ -3448,6 +3448,11 @@ graphemer@^1.4.0:
  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
  integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==

+hachure-fill@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/hachure-fill/-/hachure-fill-0.5.2.tgz#d19bc4cc8750a5962b47fb1300557a85fcf934cc"
+  integrity sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==
+
 has-ansi@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -5014,6 +5019,11 @@ parse5@^7.1.2:
  dependencies:
    entities "^4.4.0"

+path-data-parser@0.1.0, path-data-parser@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/path-data-parser/-/path-data-parser-0.1.0.tgz#8f5ba5cc70fc7becb3dcefaea08e2659aba60b8c"
+  integrity sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==
+
 path-exists@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -5155,6 +5165,19 @@ pluralize@^8.0.0:
  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-8.0.0.tgz#1a6fa16a38d12a1901e0320fa017051c539ce3b1"
  integrity sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==

+points-on-curve@0.2.0, points-on-curve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/points-on-curve/-/points-on-curve-0.2.0.tgz#7dbb98c43791859434284761330fa893cb81b4d1"
+  integrity sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==
+
+points-on-path@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/points-on-path/-/points-on-path-0.2.1.tgz#553202b5424c53bed37135b318858eacff85dd52"
+  integrity sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==
+  dependencies:
+    path-data-parser "0.1.0"
+    points-on-curve "0.2.0"
+
 possible-typed-array-names@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
@@ -5820,6 +5843,16 @@ rollup@^4.13.0:
    "@rollup/rollup-win32-x64-msvc" "4.17.2"
    fsevents "~2.3.2"

+roughjs@^4.6.5:
+  version "4.6.6"
+  resolved "https://registry.yarnpkg.com/roughjs/-/roughjs-4.6.6.tgz#1059f49a5e0c80dee541a005b20cc322b222158b"
+  integrity sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==
+  dependencies:
+    hachure-fill "^0.5.2"
+    path-data-parser "^0.1.0"
+    points-on-curve "^0.2.0"
+    points-on-path "^0.2.1"
+
 rrweb-cssom@^0.6.0:
  version "0.6.0"
  resolved "https://registry.yarnpkg.com/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz#ed298055b97cbddcdeb278f904857629dec5e0e1"
@@ -6355,6 +6388,20 @@ svg-pan-zoom@3.6.1:
  resolved "https://registry.yarnpkg.com/svg-pan-zoom/-/svg-pan-zoom-3.6.1.tgz#f880a1bb32d18e9c625d7715350bebc269b450cf"
  integrity sha512-JaKkGHHfGvRrcMPdJWkssLBeWqM+Isg/a09H7kgNNajT1cX5AztDTNs+C8UzpCxjCTRrG34WbquwaovZbmSk9g==

+svg-pathdata@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/svg-pathdata/-/svg-pathdata-6.0.3.tgz#80b0e0283b652ccbafb69ad4f8f73e8d3fbf2cac"
+  integrity sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==
+
+svg2roughjs@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/svg2roughjs/-/svg2roughjs-3.2.0.tgz#d46e713b51a3cdaef285e38f1a8b44a4710be936"
+  integrity sha512-w3/KM8H+0bkGtsq7292+xs6JTQ3RyPk98qu1voxs58Tw2oiqXCTDfuh1o9EN3mLpL/QOPi6e6kRu3diveNnvrg==
+  dependencies:
+    roughjs "^4.6.5"
+    svg-pathdata "^6.0.3"
+    tinycolor2 "^1.6.0"
+
 svgo@^3.2.0:
  version "3.2.0"
  resolved "https://registry.yarnpkg.com/svgo/-/svgo-3.2.0.tgz#7a5dff2938d8c6096e00295c2390e8e652fa805d"
@@ -6487,6 +6534,11 @@ tinybench@^2.5.1:
  resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.8.0.tgz#30e19ae3a27508ee18273ffed9ac7018949acd7b"
  integrity sha512-1/eK7zUnIklz4JUUlL+658n58XO2hHLQfSk1Zf2LKieUjxidN16eKFEoDEfjHc3ohofSSqK3X5yO6VGb6iW8Lw==

+tinycolor2@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
+  integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
+
 tinypool@^0.8.3:
  version "0.8.4"
  resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-0.8.4.tgz#e217fe1270d941b39e98c625dcecebb1408c9aa8"