Implemented 2D visualization for notes using Vue Flow

2024-03-08 11:23:47 +05:30
parent ffb5eeddf2
commit ce53a54dc5
488 changed files with 123675 additions and 20 deletions
--- a/node_modules/@vue-flow/background/dist/vue-flow-background.js
+++ b/node_modules/@vue-flow/background/dist/vue-flow-background.js
@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const core = require("@vue-flow/core");
+var BackgroundVariant = /* @__PURE__ */ ((BackgroundVariant2) => {
+  BackgroundVariant2["Lines"] = "lines";
+  BackgroundVariant2["Dots"] = "dots";
+  return BackgroundVariant2;
+})(BackgroundVariant || {});
+const LinePattern = function({ dimensions, size, color }) {
+  return vue.h("path", {
+    "stroke": color,
+    "stroke-width": size,
+    "d": `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`
+  });
+};
+const DotPattern = function({ radius, color }) {
+  return vue.h("circle", { cx: radius, cy: radius, r: radius, fill: color });
+};
+({
+  [BackgroundVariant.Lines]: LinePattern,
+  [BackgroundVariant.Dots]: DotPattern
+});
+const DefaultBgColors = {
+  [BackgroundVariant.Dots]: "#81818a",
+  [BackgroundVariant.Lines]: "#eee"
+};
+const _hoisted_1 = ["id", "x", "y", "width", "height", "patternTransform"];
+const _hoisted_2 = {
+  key: 2,
+  height: "100",
+  width: "100"
+};
+const _hoisted_3 = ["fill"];
+const _hoisted_4 = ["x", "y", "fill"];
+const __default__ = {
+  name: "Background",
+  compatConfig: { MODE: 3 }
+};
+const _sfc_main = /* @__PURE__ */ vue.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 } = core.useVueFlow();
+    const background = vue.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 = vue.toRef(() => `pattern-${vueFlowId}${__props.id ? `-${__props.id}` : ""}`);
+    const patternColor = vue.toRef(() => __props.color || __props.patternColor || DefaultBgColors[__props.variant || BackgroundVariant.Dots]);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("svg", {
+        class: "vue-flow__background vue-flow__container",
+        style: vue.normalizeStyle({
+          height: `${_ctx.height > 100 ? 100 : _ctx.height}%`,
+          width: `${_ctx.width > 100 ? 100 : _ctx.width}%`
+        })
+      }, [
+        vue.renderSlot(_ctx.$slots, "pattern-container", { id: patternId.value }, () => [
+          vue.createElementVNode("pattern", {
+            id: patternId.value,
+            x: vue.unref(viewport).x % background.value.scaledGap[0],
+            y: vue.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"
+          }, [
+            vue.renderSlot(_ctx.$slots, "pattern", {}, () => [
+              _ctx.variant === vue.unref(BackgroundVariant).Lines ? (vue.openBlock(), vue.createBlock(vue.unref(LinePattern), {
+                key: 0,
+                size: _ctx.lineWidth,
+                color: patternColor.value,
+                dimensions: background.value.scaledGap
+              }, null, 8, ["size", "color", "dimensions"])) : _ctx.variant === vue.unref(BackgroundVariant).Dots ? (vue.openBlock(), vue.createBlock(vue.unref(DotPattern), {
+                key: 1,
+                color: patternColor.value,
+                radius: background.value.size / 2
+              }, null, 8, ["color", "radius"])) : vue.createCommentVNode("", true),
+              _ctx.bgColor ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2, [
+                vue.createElementVNode("rect", {
+                  width: "100%",
+                  height: "100%",
+                  fill: _ctx.bgColor
+                }, null, 8, _hoisted_3)
+              ])) : vue.createCommentVNode("", true)
+            ])
+          ], 8, _hoisted_1)
+        ]),
+        vue.createElementVNode("rect", {
+          x: _ctx.x,
+          y: _ctx.y,
+          width: "100%",
+          height: "100%",
+          fill: `url(#${patternId.value})`
+        }, null, 8, _hoisted_4),
+        vue.renderSlot(_ctx.$slots, "default", { id: patternId.value })
+      ], 4);
+    };
+  }
+});
+exports.Background = _sfc_main;
+exports.BackgroundVariant = BackgroundVariant;