Implemented 2D visualization for notes using Vue Flow

2024-03-08 11:23:47 +05:30
parent 4e1e2054a6
commit f16d7e4788
488 changed files with 123675 additions and 20 deletions
--- a/node_modules/.vite/deps/@vue-flow_background.js
+++ b/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