Implemented 2D visualization for notes using Vue Flow

node_modules/.vite/deps/@vue-flow_background.js

@@ -0,0 +1,144 @@
+import {
+  useVueFlow
+} from "./chunk-OUZUAOAF.js";
+import {
+  computed,
+  createBaseVNode,
+  createBlock,
+  createCommentVNode,
+  createElementBlock,
+  defineComponent,
+  h,
+  normalizeStyle,
+  openBlock,
+  renderSlot,
+  toRef,
+  unref
+} from "./chunk-QT7TTBG7.js";
+
+// node_modules/@vue-flow/background/dist/vue-flow-background.mjs
+var BackgroundVariant = ((BackgroundVariant2) => {
+  BackgroundVariant2["Lines"] = "lines";
+  BackgroundVariant2["Dots"] = "dots";
+  return BackgroundVariant2;
+})(BackgroundVariant || {});
+var LinePattern = function({ dimensions, size, color }) {
+  return h("path", {
+    "stroke": color,
+    "stroke-width": size,
+    "d": `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`
+  });
+};
+var DotPattern = function({ radius, color }) {
+  return h("circle", { cx: radius, cy: radius, r: radius, fill: color });
+};
+({
+  [BackgroundVariant.Lines]: LinePattern,
+  [BackgroundVariant.Dots]: DotPattern
+});
+var DefaultBgColors = {
+  [BackgroundVariant.Dots]: "#81818a",
+  [BackgroundVariant.Lines]: "#eee"
+};
+var _hoisted_1 = ["id", "x", "y", "width", "height", "patternTransform"];
+var _hoisted_2 = {
+  key: 2,
+  height: "100",
+  width: "100"
+};
+var _hoisted_3 = ["fill"];
+var _hoisted_4 = ["x", "y", "fill"];
+var __default__ = {
+  name: "Background",
+  compatConfig: { MODE: 3 }
+};
+var _sfc_main = defineComponent({
+  ...__default__,
+  props: {
+    id: {},
+    variant: { default: () => BackgroundVariant.Dots },
+    gap: { default: 20 },
+    size: { default: 1 },
+    lineWidth: { default: 1 },
+    patternColor: {},
+    color: {},
+    bgColor: {},
+    height: { default: 100 },
+    width: { default: 100 },
+    x: { default: 0 },
+    y: { default: 0 },
+    offset: { default: 0 }
+  },
+  setup(__props) {
+    const { id: vueFlowId, viewport } = useVueFlow();
+    const background = computed(() => {
+      const zoom = viewport.value.zoom;
+      const [gapX, gapY] = Array.isArray(__props.gap) ? __props.gap : [__props.gap, __props.gap];
+      const scaledGap = [gapX * zoom || 1, gapY * zoom || 1];
+      const scaledSize = __props.size * zoom;
+      const [offsetX, offsetY] = Array.isArray(__props.offset) ? __props.offset : [__props.offset, __props.offset];
+      const scaledOffset = [offsetX * zoom || 1 + scaledGap[0] / 2, offsetY * zoom || 1 + scaledGap[1] / 2];
+      return {
+        scaledGap,
+        offset: scaledOffset,
+        size: scaledSize
+      };
+    });
+    const patternId = toRef(() => `pattern-${vueFlowId}${__props.id ? `-${__props.id}` : ""}`);
+    const patternColor = toRef(() => __props.color || __props.patternColor || DefaultBgColors[__props.variant || BackgroundVariant.Dots]);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", {
+        class: "vue-flow__background vue-flow__container",
+        style: normalizeStyle({
+          height: `${_ctx.height > 100 ? 100 : _ctx.height}%`,
+          width: `${_ctx.width > 100 ? 100 : _ctx.width}%`
+        })
+      }, [
+        renderSlot(_ctx.$slots, "pattern-container", { id: patternId.value }, () => [
+          createBaseVNode("pattern", {
+            id: patternId.value,
+            x: unref(viewport).x % background.value.scaledGap[0],
+            y: unref(viewport).y % background.value.scaledGap[1],
+            width: background.value.scaledGap[0],
+            height: background.value.scaledGap[1],
+            patternTransform: `translate(-${background.value.offset[0]},-${background.value.offset[1]})`,
+            patternUnits: "userSpaceOnUse"
+          }, [
+            renderSlot(_ctx.$slots, "pattern", {}, () => [
+              _ctx.variant === unref(BackgroundVariant).Lines ? (openBlock(), createBlock(unref(LinePattern), {
+                key: 0,
+                size: _ctx.lineWidth,
+                color: patternColor.value,
+                dimensions: background.value.scaledGap
+              }, null, 8, ["size", "color", "dimensions"])) : _ctx.variant === unref(BackgroundVariant).Dots ? (openBlock(), createBlock(unref(DotPattern), {
+                key: 1,
+                color: patternColor.value,
+                radius: background.value.size / 2
+              }, null, 8, ["color", "radius"])) : createCommentVNode("", true),
+              _ctx.bgColor ? (openBlock(), createElementBlock("svg", _hoisted_2, [
+                createBaseVNode("rect", {
+                  width: "100%",
+                  height: "100%",
+                  fill: _ctx.bgColor
+                }, null, 8, _hoisted_3)
+              ])) : createCommentVNode("", true)
+            ])
+          ], 8, _hoisted_1)
+        ]),
+        createBaseVNode("rect", {
+          x: _ctx.x,
+          y: _ctx.y,
+          width: "100%",
+          height: "100%",
+          fill: `url(#${patternId.value})`
+        }, null, 8, _hoisted_4),
+        renderSlot(_ctx.$slots, "default", { id: patternId.value })
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as Background,
+  BackgroundVariant
+};
+//# sourceMappingURL=@vue-flow_background.js.map

node_modules/.vite/deps/@vue-flow_controls.js

@@ -0,0 +1,228 @@
+import {
+  PanelPosition,
+  _sfc_main,
+  useVueFlow
+} from "./chunk-OUZUAOAF.js";
+import {
+  Fragment,
+  createBaseVNode,
+  createBlock,
+  createCommentVNode,
+  createElementBlock,
+  createVNode,
+  defineComponent,
+  openBlock,
+  renderSlot,
+  resolveDynamicComponent,
+  toRef,
+  unref,
+  withCtx
+} from "./chunk-QT7TTBG7.js";
+
+// node_modules/@vue-flow/controls/dist/vue-flow-controls.mjs
+var _sfc_main$1 = {
+  name: "ControlButton",
+  compatConfig: { MODE: 3 }
+};
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+var _hoisted_1$5 = {
+  type: "button",
+  class: "vue-flow__controls-button"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("button", _hoisted_1$5, [
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+var ControlButton = _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
+var _hoisted_1$4 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 32"
+};
+var _hoisted_2$4 = createBaseVNode("path", { d: "M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z" }, null, -1);
+var _hoisted_3$4 = [
+  _hoisted_2$4
+];
+function render$4(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$4, _hoisted_3$4);
+}
+var PlusIcon = { render: render$4 };
+var _hoisted_1$3 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 5"
+};
+var _hoisted_2$3 = createBaseVNode("path", { d: "M0 0h32v4.2H0z" }, null, -1);
+var _hoisted_3$3 = [
+  _hoisted_2$3
+];
+function render$3(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$3, _hoisted_3$3);
+}
+var MinusIcon = { render: render$3 };
+var _hoisted_1$2 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 30"
+};
+var _hoisted_2$2 = createBaseVNode("path", { d: "M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0 0 27.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94a.919.919 0 0 1-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" }, null, -1);
+var _hoisted_3$2 = [
+  _hoisted_2$2
+];
+function render$2(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$2, _hoisted_3$2);
+}
+var FitView = { render: render$2 };
+var _hoisted_1$1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 25 32"
+};
+var _hoisted_2$1 = createBaseVNode("path", { d: "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 0 0 0 13.714v15.238A3.056 3.056 0 0 0 3.048 32h18.285a3.056 3.056 0 0 0 3.048-3.048V13.714a3.056 3.056 0 0 0-3.048-3.047zM12.19 24.533a3.056 3.056 0 0 1-3.047-3.047 3.056 3.056 0 0 1 3.047-3.048 3.056 3.056 0 0 1 3.048 3.048 3.056 3.056 0 0 1-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" }, null, -1);
+var _hoisted_3$1 = [
+  _hoisted_2$1
+];
+function render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$1, _hoisted_3$1);
+}
+var Lock = { render: render$1 };
+var _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 25 32"
+};
+var _hoisted_2 = createBaseVNode("path", { d: "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 0 0 0 13.714v15.238A3.056 3.056 0 0 0 3.048 32h18.285a3.056 3.056 0 0 0 3.048-3.048V13.714a3.056 3.056 0 0 0-3.048-3.047zM12.19 24.533a3.056 3.056 0 0 1-3.047-3.047 3.056 3.056 0 0 1 3.047-3.048 3.056 3.056 0 0 1 3.048 3.048 3.056 3.056 0 0 1-3.048 3.047z" }, null, -1);
+var _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+var Unlock = { render };
+var __default__ = {
+  name: "Controls",
+  compatConfig: { MODE: 3 }
+};
+var _sfc_main2 = defineComponent({
+  ...__default__,
+  props: {
+    showZoom: { type: Boolean, default: true },
+    showFitView: { type: Boolean, default: true },
+    showInteractive: { type: Boolean, default: true },
+    fitViewParams: {},
+    position: { default: () => PanelPosition.BottomLeft }
+  },
+  emits: ["zoomIn", "zoomOut", "fitView", "interactionChange"],
+  setup(__props, { emit }) {
+    const {
+      nodesDraggable,
+      nodesConnectable,
+      elementsSelectable,
+      setInteractive,
+      zoomIn,
+      zoomOut,
+      fitView,
+      viewport,
+      minZoom,
+      maxZoom
+    } = useVueFlow();
+    const isInteractive = toRef(() => nodesDraggable.value || nodesConnectable.value || elementsSelectable.value);
+    const minZoomReached = toRef(() => viewport.value.zoom <= minZoom.value);
+    const maxZoomReached = toRef(() => viewport.value.zoom >= maxZoom.value);
+    function onZoomInHandler() {
+      zoomIn();
+      emit("zoomIn");
+    }
+    function onZoomOutHandler() {
+      zoomOut();
+      emit("zoomOut");
+    }
+    function onFitViewHandler() {
+      fitView(__props.fitViewParams);
+      emit("fitView");
+    }
+    function onInteractiveChangeHandler() {
+      setInteractive(!isInteractive.value);
+      emit("interactionChange", !isInteractive.value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main), {
+        class: "vue-flow__controls",
+        position: _ctx.position
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "top"),
+          _ctx.showZoom ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            renderSlot(_ctx.$slots, "control-zoom-in", {}, () => [
+              createVNode(ControlButton, {
+                class: "vue-flow__controls-zoomin",
+                disabled: maxZoomReached.value,
+                onClick: onZoomInHandler
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "icon-zoom-in", {}, () => [
+                    (openBlock(), createBlock(resolveDynamicComponent(unref(PlusIcon))))
+                  ])
+                ]),
+                _: 3
+              }, 8, ["disabled"])
+            ]),
+            renderSlot(_ctx.$slots, "control-zoom-out", {}, () => [
+              createVNode(ControlButton, {
+                class: "vue-flow__controls-zoomout",
+                disabled: minZoomReached.value,
+                onClick: onZoomOutHandler
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "icon-zoom-out", {}, () => [
+                    (openBlock(), createBlock(resolveDynamicComponent(unref(MinusIcon))))
+                  ])
+                ]),
+                _: 3
+              }, 8, ["disabled"])
+            ])
+          ], 64)) : createCommentVNode("", true),
+          _ctx.showFitView ? renderSlot(_ctx.$slots, "control-fit-view", { key: 1 }, () => [
+            createVNode(ControlButton, {
+              class: "vue-flow__controls-fitview",
+              onClick: onFitViewHandler
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "icon-fit-view", {}, () => [
+                  (openBlock(), createBlock(resolveDynamicComponent(unref(FitView))))
+                ])
+              ]),
+              _: 3
+            })
+          ]) : createCommentVNode("", true),
+          _ctx.showInteractive ? renderSlot(_ctx.$slots, "control-interactive", { key: 2 }, () => [
+            _ctx.showInteractive ? (openBlock(), createBlock(ControlButton, {
+              key: 0,
+              class: "vue-flow__controls-interactive",
+              onClick: onInteractiveChangeHandler
+            }, {
+              default: withCtx(() => [
+                isInteractive.value ? renderSlot(_ctx.$slots, "icon-unlock", { key: 0 }, () => [
+                  (openBlock(), createBlock(resolveDynamicComponent(unref(Unlock))))
+                ]) : createCommentVNode("", true),
+                !isInteractive.value ? renderSlot(_ctx.$slots, "icon-lock", { key: 1 }, () => [
+                  (openBlock(), createBlock(resolveDynamicComponent(unref(Lock))))
+                ]) : createCommentVNode("", true)
+              ]),
+              _: 3
+            })) : createCommentVNode("", true)
+          ]) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["position"]);
+    };
+  }
+});
+export {
+  ControlButton,
+  _sfc_main2 as Controls
+};
+//# sourceMappingURL=@vue-flow_controls.js.map

node_modules/.vite/deps/@vue-flow_core.js

@@ -0,0 +1,143 @@
+import {
+  BezierEdge$1,
+  ConnectionLineType,
+  ConnectionMode,
+  ErrorCode,
+  MarkerType,
+  NodeId,
+  PanOnScrollMode,
+  PanelPosition,
+  Position,
+  SelectionMode,
+  SimpleBezierEdge$1,
+  SmoothStepEdge$1,
+  StepEdge$1,
+  StraightEdge$1,
+  VueFlow,
+  VueFlowError,
+  _sfc_main,
+  _sfc_main$1,
+  _sfc_main$3,
+  _sfc_main$d,
+  _sfc_main$e,
+  _sfc_main$f,
+  addEdge,
+  applyChanges,
+  applyEdgeChanges,
+  applyNodeChanges,
+  clamp,
+  connectionExists,
+  defaultEdgeTypes,
+  defaultNodeTypes,
+  getBezierEdgeCenter,
+  getBezierPath,
+  getBoundsofRects,
+  getConnectedEdges,
+  getIncomers,
+  getMarkerId,
+  getNodesInside,
+  getOutgoers,
+  getRectOfNodes,
+  getSimpleBezierPath,
+  getSimpleEdgeCenter,
+  getSmoothStepPath,
+  getStraightPath,
+  getTransformForBounds,
+  isEdge,
+  isErrorOfType,
+  isGraphEdge,
+  isGraphNode,
+  isMacOs,
+  isNode,
+  pointToRendererPoint,
+  rendererPointToPoint,
+  updateEdge,
+  useConnection,
+  useEdge,
+  useEdgesData,
+  useGetPointerPosition,
+  useHandle,
+  useHandleConnections,
+  useKeyPress,
+  useNode,
+  useNodeConnections,
+  useNodeId,
+  useNodesData,
+  useNodesInitialized,
+  useVueFlow,
+  useZoomPanHelper,
+  wheelDelta
+} from "./chunk-OUZUAOAF.js";
+import "./chunk-QT7TTBG7.js";
+export {
+  _sfc_main$d as BaseEdge,
+  BezierEdge$1 as BezierEdge,
+  ConnectionLineType,
+  ConnectionMode,
+  _sfc_main$3 as EdgeLabelRenderer,
+  _sfc_main$e as EdgeText,
+  ErrorCode,
+  _sfc_main$f as Handle,
+  MarkerType,
+  NodeId as NodeIdInjection,
+  PanOnScrollMode,
+  _sfc_main as Panel,
+  PanelPosition,
+  Position,
+  SelectionMode,
+  SimpleBezierEdge$1 as SimpleBezierEdge,
+  SmoothStepEdge$1 as SmoothStepEdge,
+  StepEdge$1 as StepEdge,
+  StraightEdge$1 as StraightEdge,
+  _sfc_main$1 as VueFlow,
+  VueFlowError,
+  VueFlow as VueFlowInjection,
+  addEdge,
+  applyChanges,
+  applyEdgeChanges,
+  applyNodeChanges,
+  clamp,
+  connectionExists,
+  defaultEdgeTypes,
+  defaultNodeTypes,
+  getBezierEdgeCenter,
+  getBezierPath,
+  getBoundsofRects,
+  getConnectedEdges,
+  getIncomers,
+  getMarkerId,
+  getNodesInside,
+  getOutgoers,
+  getRectOfNodes,
+  getSimpleBezierPath,
+  getSimpleEdgeCenter,
+  getSmoothStepPath,
+  getStraightPath,
+  getTransformForBounds,
+  rendererPointToPoint as graphPosToZoomedPos,
+  isEdge,
+  isErrorOfType,
+  isGraphEdge,
+  isGraphNode,
+  isMacOs,
+  isNode,
+  pointToRendererPoint,
+  rendererPointToPoint,
+  updateEdge,
+  useConnection,
+  useEdge,
+  useEdgesData,
+  useGetPointerPosition,
+  useHandle,
+  useHandleConnections,
+  useKeyPress,
+  useNode,
+  useNodeConnections,
+  useNodeId,
+  useNodesData,
+  useNodesInitialized,
+  useVueFlow,
+  useZoomPanHelper,
+  wheelDelta
+};
+//# sourceMappingURL=@vue-flow_core.js.map

node_modules/.vite/deps/@vue-flow_core.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

node_modules/.vite/deps/_metadata.json

@@ -1,23 +1,41 @@
 {
-  "hash": "891f6d0d",
-  "browserHash": "ace4061b",
+  "hash": "5686f588",
+  "browserHash": "504d91e1",
   "optimized": {
     "pinia": {
       "src": "../../pinia/dist/pinia.mjs",
       "file": "pinia.js",
-      "fileHash": "743100d8",
+      "fileHash": "4984e75a",
       "needsInterop": false
     },
     "vue": {
       "src": "../../vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "2793dc8b",
+      "fileHash": "91b27941",
       "needsInterop": false
     },
     "vue-router": {
       "src": "../../vue-router/dist/vue-router.mjs",
       "file": "vue-router.js",
-      "fileHash": "868d5267",
+      "fileHash": "1d5cd9f7",
+      "needsInterop": false
+    },
+    "@vue-flow/core": {
+      "src": "../../@vue-flow/core/dist/vue-flow-core.mjs",
+      "file": "@vue-flow_core.js",
+      "fileHash": "d8a4d018",
+      "needsInterop": false
+    },
+    "@vue-flow/controls": {
+      "src": "../../@vue-flow/controls/dist/vue-flow-controls.mjs",
+      "file": "@vue-flow_controls.js",
+      "fileHash": "47d61b01",
+      "needsInterop": false
+    },
+    "@vue-flow/background": {
+      "src": "../../@vue-flow/background/dist/vue-flow-background.mjs",
+      "file": "@vue-flow_background.js",
+      "fileHash": "aed5145d",
       "needsInterop": false
     }
   },
@@ -25,6 +43,9 @@
     "chunk-YFT6OQ5R": {
       "file": "chunk-YFT6OQ5R.js"
     },
+    "chunk-OUZUAOAF": {
+      "file": "chunk-OUZUAOAF.js"
+    },
     "chunk-QT7TTBG7": {
       "file": "chunk-QT7TTBG7.js"
     }