atharva/OrgTree
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented 2D visualization for notes using Vue Flow

Browse Source
This commit is contained in:
Atharva Sawant
2024-03-08 11:23:47 +05:30
parent 4e1e2054a6
commit f16d7e4788
488 changed files with 123675 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
node_modules/@vue-flow/background/dist/Background.vue.d.ts generated vendored Normal file
View File

@@ -0,0 +1,112 @@
import type { BackgroundVariant } from './types'
declare const _default: __VLS_WithTemplateSlots<
import('vue').DefineComponent<
{
id: {
type: import('vue').PropType<string>
}
variant: {
type: import('vue').PropType<'lines' | 'dots' | BackgroundVariant>
}
gap: {
type: import('vue').PropType<number | number[]>
}
size: {
type: import('vue').PropType<number>
}
lineWidth: {
type: import('vue').PropType<number>
}
patternColor: {
type: import('vue').PropType<string>
}
color: {
type: import('vue').PropType<string>
}
bgColor: {
type: import('vue').PropType<string>
}
height: {
type: import('vue').PropType<number>
}
width: {
type: import('vue').PropType<number>
}
x: {
type: import('vue').PropType<number>
}
y: {
type: import('vue').PropType<number>
}
offset: {
type: import('vue').PropType<number | [number, number]>
}
},
{},
unknown,
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<
import('vue').ExtractPropTypes<{
id: {
type: import('vue').PropType<string>
}
variant: {
type: import('vue').PropType<'lines' | 'dots' | BackgroundVariant>
}
gap: {
type: import('vue').PropType<number | number[]>
}
size: {
type: import('vue').PropType<number>
}
lineWidth: {
type: import('vue').PropType<number>
}
patternColor: {
type: import('vue').PropType<string>
}
color: {
type: import('vue').PropType<string>
}
bgColor: {
type: import('vue').PropType<string>
}
height: {
type: import('vue').PropType<number>
}
width: {
type: import('vue').PropType<number>
}
x: {
type: import('vue').PropType<number>
}
y: {
type: import('vue').PropType<number>
}
offset: {
type: import('vue').PropType<number | [number, number]>
}
}>
>,
{},
{}
>,
{
'pattern-container'?(_: { id: string }): any
pattern?(_: {}): any
default?(_: { id: string }): any
}
>
export default _default
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S
}
}

2
node_modules/@vue-flow/background/dist/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,2 @@
export { default as Background } from './Background.vue'
export * from './types'

20
node_modules/@vue-flow/background/dist/patterns.d.ts generated vendored Normal file
View File

@@ -0,0 +1,20 @@
import type { FunctionalComponent } from 'vue'
import type { BackgroundVariant } from './types'
interface LinePatternProps {
dimensions: [number, number]
size?: number
color: string
}
export declare const LinePattern: FunctionalComponent<LinePatternProps>
interface DotPatternProps {
radius: number
color: string
}
export declare const DotPattern: FunctionalComponent<DotPatternProps>
export declare const Patterns: {
lines: FunctionalComponent<LinePatternProps, {}, any>
dots: FunctionalComponent<DotPatternProps, {}, any>
}
export declare const DefaultBgColors: Record<BackgroundVariant, string>
export {}

40
node_modules/@vue-flow/background/dist/types.d.ts generated vendored Normal file
View File

@@ -0,0 +1,40 @@
/**
* @deprecated - will be removed in the next major version. You can use simple string values for `variant` prop instead, i.e. `lines` or `dots`
*/
export declare enum BackgroundVariant {
Lines = 'lines',
Dots = 'dots',
}
export type BackgroundVariantType = Lowercase<keyof typeof BackgroundVariant>
export interface BackgroundProps {
id?: string
/** The background pattern variant */
variant?: BackgroundVariant | BackgroundVariantType
/** Background pattern gap */
gap?: number | number[]
/** Background pattern size */
size?: number
lineWidth?: number
/**
* @deprecated - will be removed in the next major version. Use `color` instead
* Background pattern color
*/
patternColor?: string
/** Background pattern color */
color?: string
/**
* @deprecated - will be removed in the next major version. You can assign a bg color to `<VueFlow />` directly instead.
* Background color
*/
bgColor?: string
/** @deprecated Background height */
height?: number
/** @deprecated Background width */
width?: number
/** Background x-coordinate (offset x) */
x?: number
/** Background y-coordinate (offset y) */
y?: number
/** Background offset */
offset?: number | [number, number]
}

127
node_modules/@vue-flow/background/dist/vue-flow-background.iife.js generated vendored Normal file
View File

@@ -0,0 +1,127 @@
var VueFlowBackground = function(exports, vue, core) {
"use strict";
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;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
return exports;
}({}, Vue, VueFlowCore);

126
node_modules/@vue-flow/background/dist/vue-flow-background.js generated vendored Normal file
View File

@@ -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;

126
node_modules/@vue-flow/background/dist/vue-flow-background.mjs generated vendored Normal file
View File

@@ -0,0 +1,126 @@
import { h, defineComponent, computed, toRef, openBlock, createElementBlock, normalizeStyle, renderSlot, createElementVNode, unref, createBlock, createCommentVNode } from "vue";
import { useVueFlow } from "@vue-flow/core";
var BackgroundVariant = /* @__PURE__ */ ((BackgroundVariant2) => {
BackgroundVariant2["Lines"] = "lines";
BackgroundVariant2["Dots"] = "dots";
return BackgroundVariant2;
})(BackgroundVariant || {});
const 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]}`
});
};
const DotPattern = function({ radius, color }) {
return 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__ */ 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 }, () => [
createElementVNode("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, [
createElementVNode("rect", {
width: "100%",
height: "100%",
fill: _ctx.bgColor
}, null, 8, _hoisted_3)
])) : createCommentVNode("", true)
])
], 8, _hoisted_1)
]),
createElementVNode("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
};