New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@edgarjuvianno/vue-sb-components

Package Overview
Dependencies
Maintainers
1
Versions
165
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@edgarjuvianno/vue-sb-components - npm Package Compare versions

Comparing version 1.4.102 to 2.0.0

components/organization-tree/interface.d.ts

8

components/organization-tree/__funcs.d.ts
import { IOrganizationTreeItem } from '../../interface';
export declare const addItemToParent: (list: IOrganizationTreeItem, obj: IOrganizationTreeItem) => IOrganizationTreeItem;
export declare const recurseArrayAddItem: (item: IOrganizationTreeItem, path: string, obj: IOrganizationTreeItem) => IOrganizationTreeItem;
export declare const recurseArrayGetData: (item: IOrganizationTreeItem, path: string) => IOrganizationTreeItem | undefined;
export declare const recurseArrayModifyItem: (item: IOrganizationTreeItem, path: string, obj: IOrganizationTreeItem) => IOrganizationTreeItem;
export declare const recurseArrayRemoveItem: (item: IOrganizationTreeItem, path: string) => IOrganizationTreeItem;
import { IConnection } from './interface';
export declare const doUpdateConnectionPath: (item: IConnection) => IConnection;
export declare const doUpdateConnectionPathItemMoved: (items: IOrganizationTreeItem[], itemMoved: number, orgUID: string, canvasState: Record<string, any>) => IOrganizationTreeItem[];

87

components/organization-tree/__organization-tree-item.d.ts
import { PropType } from 'vue';
import { IOrganizationCurrentData, IOrganizationTreeItem } from '../../interface';
import { IOrganizationTreeItem } from '../../interface';
import { ICanvasState, IConnectorState, IDraggedItem, IPointTarget } from './interface';
declare const _default: import("vue").DefineComponent<{
isDraggable: {
canvasState: {
required: true;
type: PropType<ICanvasState>;
};
connectorState: {
required: true;
type: PropType<IConnectorState>;
};
isDragged: {
required: false;
type: BooleanConstructor;
};
isEditable: {
required: false;
type: BooleanConstructor;
};
item: {

@@ -12,25 +25,46 @@ required: true;

};
lastIndex: {
required: true;
type: NumberConstructor;
selectedConnection: {
required: false;
type: PropType<string | null>;
};
}, unknown, {
draggedCards: string[];
dropTarget: string | null;
onDropTimeout: any;
}, {}, {
handleDragCard(ev: DragEvent, item: IOrganizationTreeItem): void;
handleDragEnd(ev: DragEvent): void;
handleDragEnter(ev: DragEvent): void;
handleDragLeave(): void;
handleDropCard(ev: DragEvent, item: IOrganizationTreeItem): void;
handleEmitChange(parent: IOrganizationCurrentData, target: IOrganizationCurrentData): void;
isDragged(id: string): boolean;
}, unknown, unknown, {
getItemPosition(): {
left: string | number;
top: string | number;
};
isConnecting(): boolean;
}, {
getCoordinatesMove(ev: MouseEvent | TouchEvent): {
x: number;
y: number;
};
handleCircleDoubleClick(indexConnection: number, indexCircle: number): void;
handleClickIO(ev: MouseEvent | TouchEvent, targetIO: number): void;
handleClickPoint(ev: MouseEvent | TouchEvent, indexConnection: number, indexPoint: number): void;
handleConnectionClick(index: number): void;
handleConnectionDoubleClick(ev: MouseEvent, index: number): void;
handleItemClick(ev: MouseEvent | TouchEvent): void;
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
changeItem: (_parent: IOrganizationCurrentData, _target: IOrganizationCurrentData) => true;
changePoint: (_item: IOrganizationTreeItem, _index: number) => true;
dragItem: (_item: IDraggedItem) => true;
dragConnection: (_io: string, _fromRect: DOMRect) => true;
dragPoint: (_target: IPointTarget, _fromRect: DOMRect) => true;
selectConnection: (_connectionKey: string) => true;
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
isDraggable: {
canvasState: {
required: true;
type: PropType<ICanvasState>;
};
connectorState: {
required: true;
type: PropType<IConnectorState>;
};
isDragged: {
required: false;
type: BooleanConstructor;
};
isEditable: {
required: false;
type: BooleanConstructor;
};
item: {

@@ -40,11 +74,16 @@ required: true;

};
lastIndex: {
required: true;
type: NumberConstructor;
selectedConnection: {
required: false;
type: PropType<string | null>;
};
}>> & {
onChangeItem?: ((_parent: IOrganizationCurrentData, _target: IOrganizationCurrentData) => any) | undefined;
onChangePoint?: ((_item: IOrganizationTreeItem, _index: number) => any) | undefined;
onDragItem?: ((_item: IDraggedItem) => any) | undefined;
onDragConnection?: ((_io: string, _fromRect: DOMRect) => any) | undefined;
onDragPoint?: ((_target: IPointTarget, _fromRect: DOMRect) => any) | undefined;
onSelectConnection?: ((_connectionKey: string) => any) | undefined;
}, {
isDraggable: boolean;
isDragged: boolean;
isEditable: boolean;
}, {}>;
export default _default;

63

components/organization-tree/organization-tree.d.ts
import { PropType } from 'vue';
import { IOrganizationCurrentData, IOrganizationTreeItem } from '../../interface';
import { IOrganizationTreeItem } from '../../interface';
import { ICanvasState, IConnectorState, ICoordinates, IDraggedItem, IMouseState, IParentPointerState, IParentState, IPointState, IPointTarget } from './interface';
declare const _default: import("vue").DefineComponent<{
isDraggable: {
isEditable: {
required: false;

@@ -10,14 +11,52 @@ type: BooleanConstructor;

required: true;
type: PropType<IOrganizationTreeItem>;
type: PropType<IOrganizationTreeItem[]>;
};
}, unknown, {
cardIndex: number;
localList: IOrganizationTreeItem;
canvasState: ICanvasState;
canvasStyle: Record<string, any>;
connectorState: IConnectorState;
draggedItem: IDraggedItem | null;
exportAreaStyle: Record<string, any>;
isExporting: boolean;
localList: IOrganizationTreeItem[];
mouseState: IMouseState;
parentPointerState: IParentPointerState;
parentState: IParentState;
pointState: IPointState;
selectedConnection: string | null;
}, {}, {
handleChangeItem(parent: IOrganizationCurrentData, target: IOrganizationCurrentData): void;
handleModList(newValue: IOrganizationTreeItem): void;
doExport(): Promise<string | null>;
doParentZoom(inc: number): void;
doParentZoomRefresh(): void;
doSetTempConnectionPath(): void;
doUpdateConnections(itemTrigger: number, updatedList: IOrganizationTreeItem[]): void;
getCanvasRect(): any;
getCoordinatesEnd(ev: MouseEvent | TouchEvent): {
x: number;
y: number;
};
getCoordinatesMove(ev: MouseEvent | TouchEvent): {
x: number;
y: number;
};
handleChangeItemPoint(item: IOrganizationTreeItem, index: number): void;
handleConnectionDragged(io: string, fromRect: DOMRect): void;
handleItemChangePosition(coordinates: ICoordinates): void;
handleItemDragged(item: IDraggedItem): void;
handleParentClick(ev: MouseEvent | TouchEvent): void;
handleParentDragEnd(ev: MouseEvent | TouchEvent): void;
handleParentKeydown(ev: KeyboardEvent): void;
handleParentPointerDown(ev: PointerEvent): void;
handleParentPointerMove(ev: PointerEvent): void;
handleParentPointerUp(ev: PointerEvent): void;
handleParentPosition(ev: MouseEvent | TouchEvent): void;
handleParentZoom(ev: WheelEvent): void;
handlePointDragged(target: IPointTarget, fromRect: DOMRect): void;
handleSelectConnection(key: string): void;
isConnectionExist(fromId: string, toId: string): boolean;
isItemDragged(key: string): boolean;
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
change: (_list: IOrganizationTreeItem) => boolean;
change: (_list: IOrganizationTreeItem[]) => boolean;
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
isDraggable: {
isEditable: {
required: false;

@@ -28,9 +67,9 @@ type: BooleanConstructor;

required: true;
type: PropType<IOrganizationTreeItem>;
type: PropType<IOrganizationTreeItem[]>;
};
}>> & {
onChange?: ((_list: IOrganizationTreeItem) => any) | undefined;
onChange?: ((_list: IOrganizationTreeItem[]) => any) | undefined;
}, {
isDraggable: boolean;
isEditable: boolean;
}, {}>;
export default _default;

1523

components/organization-tree/organization-tree.js
import "./organization-tree.css";
import { defineComponent as L, resolveComponent as k, openBlock as d, createElementBlock as o, normalizeClass as P, Fragment as I, mergeProps as u, withModifiers as l, toDisplayString as f, createCommentVNode as m, renderList as C, createBlock as $, normalizeStyle as E, createElementVNode as h } from "vue";
import { _ as c } from "../../_plugin-vue_export-helper-dad06003.js";
const S = (e) => {
let r = [];
return [...e].map((t) => (t.childs && t.childs.length && (r = [...r, ...t.childs]), t)).concat(r.length ? S(r) : r);
}, O = (e, r) => e.childs ? {
...e,
childs: [...e.childs, { ...r }]
} : { ...e }, z = (e, r, t) => e.childs ? [...e.childs].some(
(a) => a.path === r
) ? {
...e,
childs: [...e.childs].map((a) => a.path === r ? {
...a,
childs: [...a.childs || [], t]
} : a)
import { defineComponent as _, openBlock as g, createElementBlock as S, Fragment as v, normalizeClass as U, normalizeStyle as R, withModifiers as m, renderList as I, createTextVNode as gt, toDisplayString as X, createCommentVNode as x, createElementVNode as E, resolveComponent as ft, mergeProps as W, createBlock as z, Teleport as pt } from "vue";
import { _ as tt } from "../../_plugin-vue_export-helper-dad06003.js";
const V = (t, e) => t < 1 ? {
x: e.x + 3,
y: e.y
} : t >= 1 && t <= 3 ? {
x: e.x,
y: e.y + 3
} : t >= 4 && t <= 6 ? {
x: e.x,
y: e.y - 3
} : {
...e,
childs: [...e.childs].map(
(a) => z(a, r, t)
)
} : e, q = (e, r) => {
const t = [e], s = [...S(e.childs || [])];
return [...t, ...s].find(
(a) => a.path === r
x: e.x - 3,
y: e.y
}, L = (t) => {
const e = [...t.points || []];
if (e.length) {
const n = e.map((s, r) => r === e.length - 1 ? `L ${t.pathObject.to.x} ${t.pathObject.to.y}` : `L ${e[r + 1].x} ${e[r + 1].y}`).join(" "), o = `M ${t.pathObject.from.x} ${t.pathObject.from.y} L ${e[0].x} ${e[0].y} ${n}`;
return {
...t,
path: o
};
}
return {
...t,
path: `M ${t.pathObject.from.x} ${t.pathObject.from.y} L ${t.pathObject.to.x} ${t.pathObject.to.y}`
};
}, yt = (t, e, n, o) => {
const { canvasHeight: s, canvasWidth: r, x: a, y: i } = o;
return [...t].map(
(h) => {
if ([...h.connections || []].some(
(f) => f.from.item === e || f.to.item === e
)) {
const f = [
...h.connections || []
].map((d) => {
if (d.from.item === e || d.to.item === e) {
const p = document.getElementById(
`${n}-org-item-${d.from.item}-io-${d.from.io}`
), y = document.getElementById(
`${n}-org-item-${d.to.item}-io-${d.to.io}`
);
if (p && y) {
const {
height: C,
width: l,
x: P,
y: k
} = p.getBoundingClientRect().toJSON(), {
height: T,
width: B,
x: ct,
y: lt
} = y.getBoundingClientRect().toJSON(), ht = l / 2 + (P - a) * r, ut = C / 2 + (k - i) * s, dt = B / 2 + (ct - a) * r, mt = T / 2 + (lt - i) * s;
return {
...L({
...d,
pathObject: {
from: {
...V(
d.from.io,
{
x: ht,
y: ut
}
)
},
to: {
...V(
d.to.io,
{
x: dt,
y: mt
}
)
}
}
})
};
}
}
return d;
});
return {
...h,
connections: [...f]
};
}
return h;
}
);
}, M = (e, r, t) => e.childs ? [...e.childs].some(
(a) => a.path === r
) ? {
...e,
childs: [...e.childs].map((a) => a.path === r ? t : a)
} : {
...e,
childs: [...e.childs].map(
(a) => M(a, r, t)
)
} : e, v = (e, r) => e.childs ? [...e.childs].some(
(s) => s.path === r
) ? {
...e,
childs: [...e.childs].filter(
(s) => s.path !== r
)
} : {
...e,
childs: [...e.childs].map(
(s) => v(s, r)
)
} : e, A = L({
};
function St(t, e) {
if (t.match(/^[a-z]+:\/\//i))
return t;
if (t.match(/^\/\//))
return window.location.protocol + t;
if (t.match(/^[a-z]+:/i))
return t;
const n = document.implementation.createHTMLDocument(), o = n.createElement("base"), s = n.createElement("a");
return n.head.appendChild(o), n.body.appendChild(s), e && (o.href = e), s.href = t, s.href;
}
const $t = (() => {
let t = 0;
const e = () => (
// eslint-disable-next-line no-bitwise
`0000${(Math.random() * 36 ** 4 << 0).toString(36)}`.slice(-4)
);
return () => (t += 1, `u${e()}${t}`);
})();
function b(t) {
const e = [];
for (let n = 0, o = t.length; n < o; n++)
e.push(t[n]);
return e;
}
function M(t, e) {
const o = (t.ownerDocument.defaultView || window).getComputedStyle(t).getPropertyValue(e);
return o ? parseFloat(o.replace("px", "")) : 0;
}
function wt(t) {
const e = M(t, "border-left-width"), n = M(t, "border-right-width");
return t.clientWidth + e + n;
}
function Pt(t) {
const e = M(t, "border-top-width"), n = M(t, "border-bottom-width");
return t.clientHeight + e + n;
}
function et(t, e = {}) {
const n = e.width || wt(t), o = e.height || Pt(t);
return { width: n, height: o };
}
function Ct() {
let t, e;
try {
e = process;
} catch {
}
const n = e && e.env ? e.env.devicePixelRatio : null;
return n && (t = parseInt(n, 10), Number.isNaN(t) && (t = 1)), t || window.devicePixelRatio || 1;
}
const w = 16384;
function bt(t) {
(t.width > w || t.height > w) && (t.width > w && t.height > w ? t.width > t.height ? (t.height *= w / t.width, t.width = w) : (t.width *= w / t.height, t.height = w) : t.width > w ? (t.height *= w / t.width, t.width = w) : (t.width *= w / t.height, t.height = w));
}
function O(t) {
return new Promise((e, n) => {
const o = new Image();
o.decode = () => e(o), o.onload = () => e(o), o.onerror = n, o.crossOrigin = "anonymous", o.decoding = "async", o.src = t;
});
}
async function vt(t) {
return Promise.resolve().then(() => new XMLSerializer().serializeToString(t)).then(encodeURIComponent).then((e) => `data:image/svg+xml;charset=utf-8,${e}`);
}
async function Et(t, e, n) {
const o = "http://www.w3.org/2000/svg", s = document.createElementNS(o, "svg"), r = document.createElementNS(o, "foreignObject");
return s.setAttribute("width", `${e}`), s.setAttribute("height", `${n}`), s.setAttribute("viewBox", `0 0 ${e} ${n}`), r.setAttribute("width", "100%"), r.setAttribute("height", "100%"), r.setAttribute("x", "0"), r.setAttribute("y", "0"), r.setAttribute("externalResourcesRequired", "true"), s.appendChild(r), r.appendChild(t), vt(s);
}
const $ = (t, e) => {
if (t instanceof e)
return !0;
const n = Object.getPrototypeOf(t);
return n === null ? !1 : n.constructor.name === e.name || $(n, e);
};
function kt(t) {
const e = t.getPropertyValue("content");
return `${t.cssText} content: '${e.replace(/'|"/g, "")}';`;
}
function It(t) {
return b(t).map((e) => {
const n = t.getPropertyValue(e), o = t.getPropertyPriority(e);
return `${e}: ${n}${o ? " !important" : ""};`;
}).join(" ");
}
function Rt(t, e, n) {
const o = `.${t}:${e}`, s = n.cssText ? kt(n) : It(n);
return document.createTextNode(`${o}{${s}}`);
}
function Z(t, e, n) {
const o = window.getComputedStyle(t, n), s = o.getPropertyValue("content");
if (s === "" || s === "none")
return;
const r = $t();
try {
e.className = `${e.className} ${r}`;
} catch {
return;
}
const a = document.createElement("style");
a.appendChild(Rt(r, n, o)), e.appendChild(a);
}
function Tt(t, e) {
Z(t, e, ":before"), Z(t, e, ":after");
}
const q = "application/font-woff", J = "image/jpeg", Dt = {
woff: q,
woff2: q,
ttf: "application/font-truetype",
eot: "application/vnd.ms-fontobject",
png: "image/png",
jpg: J,
jpeg: J,
gif: "image/gif",
tiff: "image/tiff",
svg: "image/svg+xml",
webp: "image/webp"
};
function xt(t) {
const e = /\.([^./]*?)$/g.exec(t);
return e ? e[1] : "";
}
function j(t) {
const e = xt(t).toLowerCase();
return Dt[e] || "";
}
function Lt(t) {
return t.split(/,/)[1];
}
function H(t) {
return t.search(/^(data:)/) !== -1;
}
function nt(t, e) {
return `data:${e};base64,${t}`;
}
async function ot(t, e, n) {
const o = await fetch(t, e);
if (o.status === 404)
throw new Error(`Resource "${o.url}" not found`);
const s = await o.blob();
return new Promise((r, a) => {
const i = new FileReader();
i.onerror = a, i.onloadend = () => {
try {
r(n({ res: o, result: i.result }));
} catch (c) {
a(c);
}
}, i.readAsDataURL(s);
});
}
const F = {};
function Mt(t, e, n) {
let o = t.replace(/\?.*/, "");
return n && (o = t), /ttf|otf|eot|woff2?/i.test(o) && (o = o.replace(/.*\//, "")), e ? `[${e}]${o}` : o;
}
async function Y(t, e, n) {
const o = Mt(t, e, n.includeQueryParams);
if (F[o] != null)
return F[o];
n.cacheBust && (t += (/\?/.test(t) ? "&" : "?") + (/* @__PURE__ */ new Date()).getTime());
let s;
try {
const r = await ot(t, n.fetchRequestInit, ({ res: a, result: i }) => (e || (e = a.headers.get("Content-Type") || ""), Lt(i)));
s = nt(r, e);
} catch (r) {
s = n.imagePlaceholder || "";
let a = `Failed to fetch resource: ${t}`;
r && (a = typeof r == "string" ? r : r.message), a && console.warn(a);
}
return F[o] = s, s;
}
async function Ot(t) {
const e = t.toDataURL();
return e === "data:," ? t.cloneNode(!1) : O(e);
}
async function At(t, e) {
if (t.currentSrc) {
const r = document.createElement("canvas"), a = r.getContext("2d");
r.width = t.clientWidth, r.height = t.clientHeight, a == null || a.drawImage(t, 0, 0, r.width, r.height);
const i = r.toDataURL();
return O(i);
}
const n = t.poster, o = j(n), s = await Y(n, o, e);
return O(s);
}
async function Ut(t) {
var e;
try {
if (!((e = t == null ? void 0 : t.contentDocument) === null || e === void 0) && e.body)
return await A(t.contentDocument.body, {}, !0);
} catch {
}
return t.cloneNode(!1);
}
async function Xt(t, e) {
return $(t, HTMLCanvasElement) ? Ot(t) : $(t, HTMLVideoElement) ? At(t, e) : $(t, HTMLIFrameElement) ? Ut(t) : t.cloneNode(!1);
}
const Ft = (t) => t.tagName != null && t.tagName.toUpperCase() === "SLOT";
async function Ht(t, e, n) {
var o, s;
let r = [];
return Ft(t) && t.assignedNodes ? r = b(t.assignedNodes()) : $(t, HTMLIFrameElement) && (!((o = t.contentDocument) === null || o === void 0) && o.body) ? r = b(t.contentDocument.body.childNodes) : r = b(((s = t.shadowRoot) !== null && s !== void 0 ? s : t).childNodes), r.length === 0 || $(t, HTMLVideoElement) || await r.reduce((a, i) => a.then(() => A(i, n)).then((c) => {
c && e.appendChild(c);
}), Promise.resolve()), e;
}
function jt(t, e) {
const n = e.style;
if (!n)
return;
const o = window.getComputedStyle(t);
o.cssText ? (n.cssText = o.cssText, n.transformOrigin = o.transformOrigin) : b(o).forEach((s) => {
let r = o.getPropertyValue(s);
s === "font-size" && r.endsWith("px") && (r = `${Math.floor(parseFloat(r.substring(0, r.length - 2))) - 0.1}px`), $(t, HTMLIFrameElement) && s === "display" && r === "inline" && (r = "block"), s === "d" && e.getAttribute("d") && (r = `path(${e.getAttribute("d")})`), n.setProperty(s, r, o.getPropertyPriority(s));
});
}
function Yt(t, e) {
$(t, HTMLTextAreaElement) && (e.innerHTML = t.value), $(t, HTMLInputElement) && e.setAttribute("value", t.value);
}
function Bt(t, e) {
if ($(t, HTMLSelectElement)) {
const n = e, o = Array.from(n.children).find((s) => t.value === s.getAttribute("value"));
o && o.setAttribute("selected", "");
}
}
function Wt(t, e) {
return $(e, Element) && (jt(t, e), Tt(t, e), Yt(t, e), Bt(t, e)), e;
}
async function zt(t, e) {
const n = t.querySelectorAll ? t.querySelectorAll("use") : [];
if (n.length === 0)
return t;
const o = {};
for (let r = 0; r < n.length; r++) {
const i = n[r].getAttribute("xlink:href");
if (i) {
const c = t.querySelector(i), h = document.querySelector(i);
!c && h && !o[i] && (o[i] = await A(h, e, !0));
}
}
const s = Object.values(o);
if (s.length) {
const r = "http://www.w3.org/1999/xhtml", a = document.createElementNS(r, "svg");
a.setAttribute("xmlns", r), a.style.position = "absolute", a.style.width = "0", a.style.height = "0", a.style.overflow = "hidden", a.style.display = "none";
const i = document.createElementNS(r, "defs");
a.appendChild(i);
for (let c = 0; c < s.length; c++)
i.appendChild(s[c]);
t.appendChild(a);
}
return t;
}
async function A(t, e, n) {
return !n && e.filter && !e.filter(t) ? null : Promise.resolve(t).then((o) => Xt(o, e)).then((o) => Ht(t, o, e)).then((o) => Wt(t, o)).then((o) => zt(o, e));
}
const it = /url\((['"]?)([^'"]+?)\1\)/g, Vt = /url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g, Zt = /src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;
function qt(t) {
const e = t.replace(/([.*+?^${}()|\[\]\/\\])/g, "\\$1");
return new RegExp(`(url\\(['"]?)(${e})(['"]?\\))`, "g");
}
function Jt(t) {
const e = [];
return t.replace(it, (n, o, s) => (e.push(s), n)), e.filter((n) => !H(n));
}
async function Kt(t, e, n, o, s) {
try {
const r = n ? St(e, n) : e, a = j(e);
let i;
if (s) {
const c = await s(r);
i = nt(c, a);
} else
i = await Y(r, a, o);
return t.replace(qt(e), `$1${i}$3`);
} catch {
}
return t;
}
function Gt(t, { preferredFontFormat: e }) {
return e ? t.replace(Zt, (n) => {
for (; ; ) {
const [o, , s] = Vt.exec(n) || [];
if (!s)
return "";
if (s === e)
return `src: ${o};`;
}
}) : t;
}
function st(t) {
return t.search(it) !== -1;
}
async function rt(t, e, n) {
if (!st(t))
return t;
const o = Gt(t, n);
return Jt(o).reduce((r, a) => r.then((i) => Kt(i, a, e, n)), Promise.resolve(o));
}
async function D(t, e, n) {
var o;
const s = (o = e.style) === null || o === void 0 ? void 0 : o.getPropertyValue(t);
if (s) {
const r = await rt(s, null, n);
return e.style.setProperty(t, r, e.style.getPropertyPriority(t)), !0;
}
return !1;
}
async function Qt(t, e) {
await D("background", t, e) || await D("background-image", t, e), await D("mask", t, e) || await D("mask-image", t, e);
}
async function Nt(t, e) {
const n = $(t, HTMLImageElement);
if (!(n && !H(t.src)) && !($(t, SVGImageElement) && !H(t.href.baseVal)))
return;
const o = n ? t.src : t.href.baseVal, s = await Y(o, j(o), e);
await new Promise((r, a) => {
t.onload = r, t.onerror = a;
const i = t;
i.decode && (i.decode = r), i.loading === "lazy" && (i.loading = "eager"), n ? (t.srcset = "", t.src = s) : t.href.baseVal = s;
});
}
async function _t(t, e) {
const o = b(t.childNodes).map((s) => at(s, e));
await Promise.all(o).then(() => t);
}
async function at(t, e) {
$(t, Element) && (await Qt(t, e), await Nt(t, e), await _t(t, e));
}
function te(t, e) {
const { style: n } = t;
e.backgroundColor && (n.backgroundColor = e.backgroundColor), e.width && (n.width = `${e.width}px`), e.height && (n.height = `${e.height}px`);
const o = e.style;
return o != null && Object.keys(o).forEach((s) => {
n[s] = o[s];
}), t;
}
const K = {};
async function G(t) {
let e = K[t];
if (e != null)
return e;
const o = await (await fetch(t)).text();
return e = { url: t, cssText: o }, K[t] = e, e;
}
async function Q(t, e) {
let n = t.cssText;
const o = /url\(["']?([^"')]+)["']?\)/g, r = (n.match(/url\([^)]+\)/g) || []).map(async (a) => {
let i = a.replace(o, "$1");
return i.startsWith("https://") || (i = new URL(i, t.url).href), ot(i, e.fetchRequestInit, ({ result: c }) => (n = n.replace(a, `url(${c})`), [a, c]));
});
return Promise.all(r).then(() => n);
}
function N(t) {
if (t == null)
return [];
const e = [], n = /(\/\*[\s\S]*?\*\/)/gi;
let o = t.replace(n, "");
const s = new RegExp("((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})", "gi");
for (; ; ) {
const c = s.exec(o);
if (c === null)
break;
e.push(c[0]);
}
o = o.replace(s, "");
const r = /@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi, a = "((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})", i = new RegExp(a, "gi");
for (; ; ) {
let c = r.exec(o);
if (c === null) {
if (c = i.exec(o), c === null)
break;
r.lastIndex = i.lastIndex;
} else
i.lastIndex = r.lastIndex;
e.push(c[0]);
}
return e;
}
async function ee(t, e) {
const n = [], o = [];
return t.forEach((s) => {
if ("cssRules" in s)
try {
b(s.cssRules || []).forEach((r, a) => {
if (r.type === CSSRule.IMPORT_RULE) {
let i = a + 1;
const c = r.href, h = G(c).then((u) => Q(u, e)).then((u) => N(u).forEach((f) => {
try {
s.insertRule(f, f.startsWith("@import") ? i += 1 : s.cssRules.length);
} catch (d) {
console.error("Error inserting rule from remote css", {
rule: f,
error: d
});
}
})).catch((u) => {
console.error("Error loading remote css", u.toString());
});
o.push(h);
}
});
} catch (r) {
const a = t.find((i) => i.href == null) || document.styleSheets[0];
s.href != null && o.push(G(s.href).then((i) => Q(i, e)).then((i) => N(i).forEach((c) => {
a.insertRule(c, s.cssRules.length);
})).catch((i) => {
console.error("Error loading remote stylesheet", i);
})), console.error("Error inlining remote css file", r);
}
}), Promise.all(o).then(() => (t.forEach((s) => {
if ("cssRules" in s)
try {
b(s.cssRules || []).forEach((r) => {
n.push(r);
});
} catch (r) {
console.error(`Error while reading CSS rules from ${s.href}`, r);
}
}), n));
}
function ne(t) {
return t.filter((e) => e.type === CSSRule.FONT_FACE_RULE).filter((e) => st(e.style.getPropertyValue("src")));
}
async function oe(t, e) {
if (t.ownerDocument == null)
throw new Error("Provided element is not within a Document");
const n = b(t.ownerDocument.styleSheets), o = await ee(n, e);
return ne(o);
}
async function ie(t, e) {
const n = await oe(t, e);
return (await Promise.all(n.map((s) => {
const r = s.parentStyleSheet ? s.parentStyleSheet.href : null;
return rt(s.cssText, r, e);
}))).join(`
`);
}
async function se(t, e) {
const n = e.fontEmbedCSS != null ? e.fontEmbedCSS : e.skipFonts ? null : await ie(t, e);
if (n) {
const o = document.createElement("style"), s = document.createTextNode(n);
o.appendChild(s), t.firstChild ? t.insertBefore(o, t.firstChild) : t.appendChild(o);
}
}
async function re(t, e = {}) {
const { width: n, height: o } = et(t, e), s = await A(t, e, !0);
return await se(s, e), await at(s, e), te(s, e), await Et(s, n, o);
}
async function ae(t, e = {}) {
const { width: n, height: o } = et(t, e), s = await re(t, e), r = await O(s), a = document.createElement("canvas"), i = a.getContext("2d"), c = e.pixelRatio || Ct(), h = e.canvasWidth || n, u = e.canvasHeight || o;
return a.width = h * c, a.height = u * c, e.skipAutoScale || bt(a), a.style.width = `${h}`, a.style.height = `${u}`, e.backgroundColor && (i.fillStyle = e.backgroundColor, i.fillRect(0, 0, a.width, a.height)), i.drawImage(r, 0, 0, a.width, a.height), a;
}
async function ce(t, e = {}) {
return (await ae(t, e)).toDataURL();
}
const le = _({
emits: {
changeItem: (e, r) => !0
changePoint: (t, e) => !0,
dragItem: (t) => !0,
dragConnection: (t, e) => !0,
dragPoint: (t, e) => !0,
selectConnection: (t) => !0
},
props: {
isDraggable: {
canvasState: {
required: !0,
type: Object
},
connectorState: {
required: !0,
type: Object
},
isDragged: {
required: !1,
type: Boolean
},
isEditable: {
required: !1,
type: Boolean
},
item: {

@@ -63,201 +576,224 @@ required: !0,

},
lastIndex: {
required: !0,
type: Number
selectedConnection: {
required: !1,
type: String
}
},
name: "sb-organization-tree-item",
data() {
return {
draggedCards: [],
dropTarget: null,
onDropTimeout: null
};
computed: {
getItemPosition() {
return {
left: this.item.coordinates.x ? `${this.item.coordinates.x}px` : 0,
top: this.item.coordinates.y ? `${this.item.coordinates.y}px` : 0
};
},
isConnecting() {
return this.connectorState.from ? this.connectorState.from.split("-io-")[0] === this.$.vnode.key : !1;
}
},
computed: {},
methods: {
handleDragCard(e, r) {
var s;
e.stopPropagation();
const t = e.target;
this.draggedCards.push(t.id), (s = e.dataTransfer) == null || s.setData(
"text/html",
JSON.stringify({
data: { ...r },
index: r.path
})
);
getCoordinatesMove(t) {
return t.type === "touchstart" ? {
x: t.touches[0].clientX,
y: t.touches[0].clientY
} : {
x: t.clientX,
y: t.clientY
};
},
handleDragEnd(e) {
e.stopPropagation();
const r = e.target;
this.draggedCards = [...this.draggedCards].filter(
(t) => t !== r.id
);
handleCircleDoubleClick(t, e) {
var n;
if (this.isEditable) {
const o = [
...this.item.connections || []
], s = [
...((n = o[t]) == null ? void 0 : n.points) || []
];
s.splice(e, 1);
const r = L({
...o[t],
points: [...s]
});
o[t] = {
...r
};
const a = Number(
String(this.$.vnode.key).split("-item-")[1]
);
this.$emit(
"changePoint",
{
...this.item,
connections: [...o]
},
a
);
}
},
handleDragEnter(e) {
const r = e.target;
this.dropTarget = r.id, this.onDropTimeout && clearTimeout(this.onDropTimeout);
handleClickIO(t, e) {
const n = t.target;
if (n && this.isEditable) {
const o = n.getBoundingClientRect();
this.$emit(
"dragConnection",
`${String(this.$.vnode.key)}-io-${e}`,
o
);
}
},
handleDragLeave() {
this.onDropTimeout = setTimeout(() => {
this.dropTarget = null;
}, 50);
handleClickPoint(t, e, n) {
const o = t.target;
if (o && this.isEditable) {
const s = o.getBoundingClientRect();
this.$emit(
"dragPoint",
{
connection: e,
item: Number(
String(this.$.vnode.key).split("-item-")[1]
),
point: n
},
s
);
}
},
handleDropCard(e, r) {
var s;
e.stopPropagation(), this.handleDragLeave();
const t = (s = e.dataTransfer) == null ? void 0 : s.getData("text/html");
if (t) {
const a = t.replace(
'<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">',
""
), i = {
...JSON.parse(a)
};
handleConnectionClick(t) {
this.isEditable && this.$emit(
"selectConnection",
`${String(this.$.vnode.key)}-connection-${t}`
);
},
handleConnectionDoubleClick(t, e) {
const n = [
...this.item.connections || []
], { elem: o, zoom: s } = this.canvasState;
if (o && this.isEditable) {
const { height: r, width: a, x: i, y: c } = o.getBoundingClientRect().toJSON(), h = t.clientX, u = t.clientY, f = h * (a / (a * s)) - i * (a / (a * s)), d = u * (r / (r * s)) - c * (r / (r * s)), p = L({
...n[e],
points: [
...n[e].points || [],
{
x: f,
y: d
}
]
});
n[e] = { ...p };
const y = Number(
String(this.$.vnode.key).split("-item-")[1]
);
this.$emit(
"changeItem",
"changePoint",
{
data: r,
index: r.path
...this.item,
connections: [...n]
},
i
y
);
}
},
handleEmitChange(e, r) {
this.$emit("changeItem", e, r);
},
isDragged(e) {
return this.draggedCards.indexOf(e) > -1;
handleItemClick(t) {
if (!t.target.classList.contains("io") && this.isEditable) {
const n = this.getCoordinatesMove(t);
this.$emit("dragItem", {
coordinates: n,
elem: this.$el.nextSibling,
key: this.$.vnode.key
});
}
}
}
}), w = ["id"], B = {
key: 1,
class: "parent-tree"
}, N = ["id"], H = { class: "data-wrapper" }, j = { class: "name" }, J = { class: "position" }, F = ["innerHTML"], G = ["id"], R = { class: "data-wrapper" }, U = { class: "name" }, V = { class: "position" }, K = ["innerHTML"], Q = { class: "parent-tree" };
function W(e, r, t, s, a, i) {
var p, y, T, b;
const g = k("sb-organization-tree-item");
return d(), o("li", {
class: P(["child-tree", {
"has-childs": !!((p = e.item.childs) != null && p.length)
}])
}, [
e.item.department ? (d(), o(I, { key: 0 }, [
e.item.department ? (d(), o("div", u({
key: 0,
class: ["department", {
"has-childs": !!((y = e.item.childs) != null && y.length),
draggable: e.isDraggable,
dragged: e.isDragged(String(e.lastIndex)),
droparea: e.dropTarget === String(e.lastIndex)
}],
id: String(e.lastIndex)
}, {
draggable: e.isDraggable
}, {
onDragend: r[0] || (r[0] = (...n) => e.handleDragEnd && e.handleDragEnd(...n)),
onDragenter: r[1] || (r[1] = l((...n) => e.handleDragEnter && e.handleDragEnter(...n), ["prevent"])),
onDragleave: r[2] || (r[2] = l((...n) => e.handleDragLeave && e.handleDragLeave(...n), ["prevent"])),
onDragover: r[3] || (r[3] = l((...n) => e.handleDragEnter && e.handleDragEnter(...n), ["prevent"])),
onDragstart: r[4] || (r[4] = (n) => e.handleDragCard(n, e.item)),
onDrop: r[5] || (r[5] = l((n) => e.handleDropCard(n, e.item), ["prevent"]))
}), f(e.item.department), 17, w)) : m("", !0),
(T = e.item.childs) != null && T.length ? (d(), o("ul", B, [
(d(!0), o(I, null, C(e.item.childs, (n, D) => (d(), $(g, u({
item: n,
key: `${String(e.$.vnode.key)}-childs-${D}`,
"last-index": e.lastIndex + D + 1
}, {
isDraggable: e.isDraggable
}, { onChangeItem: e.handleEmitChange }), null, 16, ["item", "last-index", "onChangeItem"]))), 128))
])) : m("", !0)
], 64)) : (b = e.item.childs) != null && b.length ? (d(), o(I, { key: 2 }, [
h("div", u({
class: ["card has-childs", {
draggable: e.isDraggable && e.lastIndex > 1,
dragged: e.isDragged(String(e.lastIndex)),
droparea: e.dropTarget === String(e.lastIndex)
}],
id: String(e.lastIndex)
}, {
draggable: e.isDraggable && e.lastIndex > 1,
...e.lastIndex > 1 && {
onDragend: e.handleDragEnd,
onDragstart: (n) => e.handleDragCard(n, e.item)
}
}, {
onDragenter: r[12] || (r[12] = l((...n) => e.handleDragEnter && e.handleDragEnter(...n), ["prevent"])),
onDragleave: r[13] || (r[13] = l((...n) => e.handleDragLeave && e.handleDragLeave(...n), ["prevent"])),
onDragover: r[14] || (r[14] = l((...n) => e.handleDragEnter && e.handleDragEnter(...n), ["prevent"])),
onDrop: r[15] || (r[15] = l((n) => e.handleDropCard(n, e.item), ["prevent"]))
}), [
e.item.photo ? (d(), o("div", {
key: 0,
class: "item-photo",
style: E({
backgroundImage: `url(${e.item.photo})`
})
}, null, 4)) : m("", !0),
h("div", R, [
h("p", U, f(e.item.name), 1),
h("p", V, f(e.item.position), 1),
e.item.additionalInfo ? (d(), o("div", {
key: 0,
innerHTML: e.item.additionalInfo
}, null, 8, K)) : m("", !0)
])
], 16, G),
h("ul", Q, [
(d(!0), o(I, null, C(e.item.childs, (n, D) => (d(), $(g, u({
item: n,
key: `${String(e.$.vnode.key)}-childs-${D}`,
"last-index": e.lastIndex + D + 1
}, {
isDraggable: e.isDraggable
}, { onChangeItem: e.handleEmitChange }), null, 16, ["item", "last-index", "onChangeItem"]))), 128))
])
], 64)) : (d(), o("div", u({
}), he = ["id"], ue = ["id", "onMousedown", "onTouchstart"], de = ["id"], me = ["id", "onMousedown", "onTouchstart"], ge = { class: "data-wrapper" }, fe = { class: "name" }, pe = { class: "position" }, ye = ["innerHTML"], Se = ["d", "onClick", "onDblclick"], $e = ["cx", "cy", "onDblclick", "onMousedown", "onTouchstart"];
function we(t, e, n, o, s, r) {
return g(), S(v, null, [
t.item.department ? (g(), S("div", {
key: 0,
class: U(["department", {
connecting: t.isConnecting,
draggable: t.isEditable,
dragged: t.isDragged
}]),
id: String(t.$.vnode.key),
style: R(t.getItemPosition),
onMousedown: e[0] || (e[0] = m((...a) => t.handleItemClick && t.handleItemClick(...a), ["stop"])),
onTouchstart: e[1] || (e[1] = m((...a) => t.handleItemClick && t.handleItemClick(...a), ["stop"]))
}, [
(g(!0), S(v, null, I([...Array(8).keys()], (a) => (g(), S("span", {
class: "io",
id: `${String(t.$.vnode.key)}-io-${a}`,
key: `io-${a}`,
onMousedown: m((i) => t.handleClickIO(i, a), ["stop"]),
onTouchstart: m((i) => t.handleClickIO(i, a), ["stop"])
}, null, 40, ue))), 128)),
gt(" " + X(t.item.department), 1)
], 46, he)) : (g(), S("div", {
key: 1,
class: ["card", {
draggable: e.isDraggable,
dragged: e.isDragged(String(e.lastIndex)),
droparea: e.dropTarget === String(e.lastIndex)
}],
id: String(e.lastIndex)
}, {
draggable: e.isDraggable
}, {
onDragend: r[6] || (r[6] = (...n) => e.handleDragEnd && e.handleDragEnd(...n)),
onDragenter: r[7] || (r[7] = l((...n) => e.handleDragEnter && e.handleDragEnter(...n), ["prevent"])),
onDragleave: r[8] || (r[8] = l((...n) => e.handleDragLeave && e.handleDragLeave(...n), ["prevent"])),
onDragover: r[9] || (r[9] = l((...n) => e.handleDragEnter && e.handleDragEnter(...n), ["prevent"])),
onDragstart: r[10] || (r[10] = (n) => e.handleDragCard(n, e.item)),
onDrop: r[11] || (r[11] = l((n) => e.handleDropCard(n, e.item), ["prevent"]))
}), [
e.item.photo ? (d(), o("div", {
class: U(["card", {
connecting: t.isConnecting,
draggable: t.isEditable,
dragged: t.isDragged
}]),
id: String(t.$.vnode.key),
style: R(t.getItemPosition),
onMousedown: e[2] || (e[2] = m((...a) => t.handleItemClick && t.handleItemClick(...a), ["stop"])),
onTouchstart: e[3] || (e[3] = m((...a) => t.handleItemClick && t.handleItemClick(...a), ["stop"]))
}, [
(g(!0), S(v, null, I([...Array(8).keys()], (a) => (g(), S("span", {
class: "io",
id: `${String(t.$.vnode.key)}-io-${a}`,
key: `io-${a}`,
onMousedown: m((i) => t.handleClickIO(i, a), ["stop"]),
onTouchstart: m((i) => t.handleClickIO(i, a), ["stop"])
}, null, 40, me))), 128)),
t.item.photo ? (g(), S("div", {
key: 0,
class: "item-photo",
style: E({
backgroundImage: `url(${e.item.photo})`
style: R({
backgroundImage: `url(${t.item.photo})`
})
}, null, 4)) : m("", !0),
h("div", H, [
h("p", j, f(e.item.name), 1),
h("p", J, f(e.item.position), 1),
e.item.additionalInfo ? (d(), o("div", {
}, null, 4)) : x("", !0),
E("div", ge, [
E("p", fe, X(t.item.name), 1),
E("p", pe, X(t.item.position), 1),
t.item.additionalInfo ? (g(), S("div", {
key: 0,
innerHTML: e.item.additionalInfo
}, null, 8, F)) : m("", !0)
innerHTML: t.item.additionalInfo
}, null, 8, ye)) : x("", !0)
])
], 16, N))
], 2);
], 46, de)),
(g(!0), S(v, null, I(t.item.connections || [], (a, i) => (g(), S("svg", {
class: U(["connection", {
editable: t.isEditable,
selected: `${String(t.$.vnode.key)}-connection-${i}` === t.selectedConnection
}]),
xmlns: "http://www.w3.org/2000/svg",
key: `${String(t.$.vnode.key)}-connection-${i}`
}, [
E("path", {
d: a.path,
onClick: m((c) => t.handleConnectionClick(i), ["stop"]),
onDblclick: m((c) => t.handleConnectionDoubleClick(c, i), ["stop"])
}, null, 40, Se),
(g(!0), S(v, null, I(a.points || [], (c, h) => (g(), S("circle", {
class: "circle",
r: "4",
cx: c.x,
cy: c.y,
key: `${String(
t.$.vnode.key
)}-connection-${i}-circle-${h}`,
onDblclick: m((u) => t.handleCircleDoubleClick(i, h), ["stop"]),
onMousedown: m((u) => t.handleClickPoint(u, i, h), ["stop"]),
onTouchstart: m((u) => t.handleClickPoint(u, i, h), ["stop"])
}, null, 40, $e))), 128))
], 2))), 128))
], 64);
}
const X = /* @__PURE__ */ c(A, [["render", W]]), Y = L({
const Pe = /* @__PURE__ */ tt(le, [["render", we]]), Ce = _({
emits: {
change: (e) => !0
change: (t) => !0
},
props: {
isDraggable: {
isEditable: {
required: !1,

@@ -273,84 +809,389 @@ type: Boolean

components: {
"sb-org-tree-item": X
"sb-org-tree-item": Pe
},
data() {
return {
cardIndex: 1,
localList: {}
canvasState: {
coordinates: {
x: 0,
y: 0
},
elem: null,
lastZoom: 1,
zoom: 1
},
canvasStyle: {},
connectorState: {
from: null,
fromRect: null,
toCoordinates: null
},
draggedItem: null,
exportAreaStyle: {},
isExporting: !1,
localList: [],
mouseState: {
mouse: {
x: 0,
y: 0
},
position: {
x: 0,
y: 0
},
positionStart: {
x: 0,
y: 0
}
},
parentPointerState: {
events: [],
prevDiff: -1
},
parentState: {
isDrag: !1,
position: {
x: 0,
y: 0
}
},
pointState: {
fromRect: null,
target: null,
toCoordinates: null
},
selectedConnection: null
};
},
methods: {
handleChangeItem(e, r) {
const t = e.index.replace(`${this.$.uid}-org`, "").split("-").filter((a) => a !== ""), s = r.index.replace(`${this.$.uid}-org`, "").split("-").filter((a) => a !== "");
if (t.length) {
if (e.index !== r.index)
if (s.length < t.length) {
const a = {
...v(
{ ...this.localList },
e.index
)
}, i = [
...e.data.childs || []
], g = {
...q(
{ ...a },
r.index
)
}, p = {
...M(
{ ...a },
r.index,
{
...e.data,
childs: [...i, g]
}
)
};
this.$emit("change", p);
} else {
const a = {
...v(
{ ...this.localList },
r.index
)
}, i = {
...z(
{ ...a },
e.index,
r.data
)
};
this.$emit("change", i);
async doExport() {
this.isExporting = !0, await new Promise(
(l) => setTimeout(() => {
l(!0);
}, 200)
);
const e = [...[...this.localList].flatMap(
(l) => l.connections ? [...l.connections] : []
)].flatMap(
(l) => l.points ? [...l.points] : []
), n = [...this.localList].map(
(l, P) => {
const k = `${this.$.uid}-org-item-${P}`, T = document.getElementById(k);
return T ? T.getBoundingClientRect().toJSON() : null;
}
), o = [...n].map(
(l) => (l == null ? void 0 : l.x) || 0
), s = [...n].map(
(l) => ((l == null ? void 0 : l.x) || 0) + ((l == null ? void 0 : l.width) || 0)
), r = [...n].map(
(l) => (l == null ? void 0 : l.y) || 0
), a = [...n].map(
(l) => ((l == null ? void 0 : l.y) || 0) + ((l == null ? void 0 : l.height) || 0)
), i = [
...[...e].map((l) => l.x),
...o,
...s
], c = [
...[...e].map((l) => l.y),
...r,
...a
], h = Math.max.apply(null, i), u = Math.min.apply(null, i), f = Math.max.apply(null, c), d = Math.min.apply(null, c), p = Math.abs(d) + f, y = Math.abs(u) + h, C = this.canvasState.elem;
if (this.exportAreaStyle = {
height: `${p + 40}px`,
width: `${y + 40}px`
}, C) {
const l = C.cloneNode(
!0
);
l.style.transform = "none", l.style.background = "transparent", l.style.height = `${p}px`, l.style.position = "relative", l.style.width = `${y}px`;
const P = document.getElementById(
`${this.$.uid}-org-export-area`
);
if (P) {
P.appendChild(l);
const k = await ce(
P,
{
style: {
opacity: "1"
}
}
).catch(() => null);
return l.remove(), this.isExporting = !1, k;
}
}
return null;
},
doParentZoom(t) {
this.canvasState.zoom += t, this.$nextTick(() => this.doParentZoomRefresh());
},
doParentZoomRefresh() {
const { coordinates: t, lastZoom: e, zoom: n } = this.canvasState, o = t.x / e * n, s = t.y / e * n;
this.canvasState.lastZoom = n, this.canvasStyle = {
transform: `translate(${o}px, ${s}px) scale(${n})`
};
},
doSetTempConnectionPath() {
if (this.connectorState.toCoordinates && this.connectorState.fromRect) {
const { x: t, y: e } = this.connectorState.toCoordinates, {
height: n,
width: o,
x: s,
y: r
} = this.connectorState.fromRect, { zoom: a } = this.canvasState, i = this.getCanvasRect(), c = (i == null ? void 0 : i.height) || 0, h = (i == null ? void 0 : i.width) || 0, u = h / (h * a) || 0, f = c / (c * a) || 0, d = (i == null ? void 0 : i.x) || 0, p = (i == null ? void 0 : i.y) || 0, y = o / 2 + (s - d) * u, C = n / 2 + (r - p) * f, l = t * (h / (h * a)) - d * (h / (h * a)), P = e * (c / (c * a)) - p * (c / (c * a));
this.connectorState.pathObject = {
from: {
x: y,
y: C
},
to: {
x: l,
y: P
}
} else {
const a = {
...v(
{ ...this.localList },
r.index
}, this.connectorState.path = `M ${y} ${C} L ${l} ${P}`;
} else
this.connectorState.pathObject = void 0, this.connectorState.path = void 0;
},
doUpdateConnections(t, e) {
const { zoom: n } = this.canvasState, o = this.getCanvasRect();
if (o) {
const s = o.height || 0, r = o.width || 0, a = r / (r * n) || 0, i = s / (s * n) || 0;
this.localList = [
...yt(
e,
t,
String(this.$.uid),
{
canvasHeight: i,
canvasWidth: a,
x: o.x,
y: o.y
}
)
}, i = {
...O({ ...a }, r.data)
];
}
},
getCanvasRect() {
return this.$refs["canvas-tree"] ? {
...this.$refs["canvas-tree"].getBoundingClientRect().toJSON()
} : null;
},
getCoordinatesEnd(t) {
return t.type === "touchend" ? {
x: this.mouseState.mouse.x,
y: this.mouseState.mouse.y
} : {
x: t.clientX,
y: t.clientY
};
},
getCoordinatesMove(t) {
return t.type === "touchmove" || t.type === "touchstart" ? {
x: t.touches[0].clientX,
y: t.touches[0].clientY
} : {
x: t.clientX,
y: t.clientY
};
},
handleChangeItemPoint(t, e) {
this.localList[e] = { ...t }, this.$nextTick(() => this.$emit("change", this.localList));
},
handleConnectionDragged(t, e) {
this.connectorState.from = t, this.connectorState.fromRect = { ...e.toJSON() }, this.selectedConnection = null;
},
handleItemChangePosition(t) {
if (this.draggedItem) {
const e = Number(
this.draggedItem.key.split("-item-")[1]
), n = [
...this.localList
];
n[e] = {
...this.localList[e],
coordinates: t
}, this.$nextTick(
() => this.doUpdateConnections(e, n)
);
}
},
handleItemDragged(t) {
this.draggedItem = { ...t }, this.mouseState.position = { ...t.coordinates }, this.selectedConnection = null;
},
handleParentClick(t) {
const e = this.getCoordinatesMove(t);
this.selectedConnection = null, this.mouseState.mouse = { ...e }, this.mouseState.position = { ...e }, this.mouseState.positionStart = { ...e }, this.parentState.isDrag = !0;
},
handleParentDragEnd(t) {
const { x: e, y: n } = this.getCoordinatesEnd(t), { coordinates: o } = this.canvasState, s = o.x + -(this.mouseState.position.x - e), r = o.y + -(this.mouseState.position.y - n);
if (this.parentState.isDrag)
this.canvasState.coordinates = {
x: s,
y: r
};
this.$emit("change", i);
else if (this.connectorState.from) {
const a = t.target;
if (a.id !== this.connectorState.from && !this.isConnectionExist(
this.connectorState.from,
a.id
)) {
const c = this.connectorState.from.split("-io-")[0], h = Number(
this.connectorState.from.split("-io-")[1]
), u = Number(
c.split("-item-")[1]
), f = a.id.split("-io-")[0], d = Number(
a.id.split("-io-")[1]
), p = Number(
f.split("-item-")[1]
);
if (this.localList[u] && this.localList[p] && this.connectorState.fromRect) {
const y = [
...this.localList
];
y[u].connections = [
...y[u].connections || [],
{
from: {
io: h,
item: u
},
to: {
io: d,
item: p
},
path: this.connectorState.path,
pathObject: this.connectorState.pathObject
}
], this.$nextTick(
() => this.doUpdateConnections(
u,
y
)
);
}
}
}
this.$nextTick(() => {
(this.draggedItem || this.pointState.target || this.connectorState.from) && this.$nextTick(
() => this.$emit("change", this.localList)
), this.parentState.isDrag = !1, this.draggedItem = null, this.connectorState = {
from: null,
fromRect: null,
path: void 0,
toCoordinates: null
}, this.pointState = {
fromRect: null,
target: null,
toCoordinates: null
};
});
},
handleModList(e) {
const r = (t, s, a) => {
const i = a ? `${a}-childs[${s}]` : `${this.$.uid}-org`;
return t.childs ? {
...t,
childs: [...t.childs].map(
(g, p) => g.childs ? r(g, p, i) : {
...g,
path: `${i}-childs[${p}]`
}
),
path: i
} : {
...t,
path: i
handleParentKeydown(t) {
if ((t.key === "Delete" || t.key === "Backspace" && t.metaKey) && this.selectedConnection) {
const e = this.selectedConnection.split("-connection-"), n = Number(
e[0].split("-item-")[1]
), o = Number(e[1]);
if (this.localList[n]) {
const s = [
...this.localList[n].connections || []
];
this.localList[n].connections = s.filter(
(r, a) => a !== o
), this.$nextTick(
() => this.$emit("change", this.localList)
);
}
}
},
handleParentPointerDown(t) {
this.parentPointerState.events.push(t);
},
handleParentPointerMove(t) {
this.parentPointerState.events = [
...this.parentPointerState.events
].map((e) => e.pointerId === t.pointerId ? t : e), this.$nextTick(() => {
if (this.parentPointerState.events.length === 2) {
const e = Math.abs(
this.parentPointerState.events[0].clientX - this.parentPointerState.events[1].clientX
);
this.parentPointerState.prevDiff > 100 && e > this.parentPointerState.prevDiff ? this.doParentZoom(0.1) : this.parentPointerState.prevDiff > 100 && e < this.parentPointerState.prevDiff && this.doParentZoom(-0.1), this.parentPointerState.prevDiff = e;
}
});
},
handleParentPointerUp(t) {
this.parentPointerState.events = [
...this.parentPointerState.events
].filter((e) => e.pointerId !== t.pointerId), this.$nextTick(() => {
this.parentPointerState.events.length < 2 && (this.parentPointerState.prevDiff = -1);
});
},
handleParentPosition(t) {
const { x: e, y: n } = this.getCoordinatesMove(t), { coordinates: o, zoom: s } = this.canvasState, r = this.getCanvasRect();
if (this.parentState.isDrag) {
const a = o.x + -(this.mouseState.position.x - e), i = o.y + -(this.mouseState.position.y - n);
this.canvasStyle = {
transform: `translate(${a}px, ${i}px) scale(${s})`
};
};
this.localList = { ...r(e) };
} else if (this.draggedItem) {
t.preventDefault();
const { x: a, y: i } = this.mouseState.position, c = (a - e) * ((r == null ? void 0 : r.width) || 0) / (((r == null ? void 0 : r.width) || 0) * s), h = (i - n) * ((r == null ? void 0 : r.height) || 0) / (((r == null ? void 0 : r.height) || 0) * s);
this.handleItemChangePosition({
x: this.draggedItem.elem.offsetLeft - c,
y: this.draggedItem.elem.offsetTop - h
}), this.$nextTick(() => this.mouseState.position = { x: e, y: n });
} else if (this.connectorState.from)
this.connectorState.toCoordinates = {
x: e,
y: n
}, this.$nextTick(() => this.doSetTempConnectionPath());
else if (this.pointState.target && this.canvasState.elem) {
const {
height: a,
width: i,
x: c,
y: h
} = this.canvasState.elem.getBoundingClientRect().toJSON(), u = e * (i / (i * s)) - c * (i / (i * s)), f = n * (a / (a * s)) - h * (a / (a * s)), { target: d } = this.pointState, p = [
...this.localList[d.item].connections || []
], y = [
...p[d.connection].points || []
];
y[d.point] = {
x: u,
y: f
};
const C = L({
...p[d.connection],
points: [...y]
});
p[d.connection] = {
...C
}, this.localList[d.item].connections = [
...p
];
}
this.parentState.position = { x: e, y: n }, t.type === "touchmove" && (this.mouseState.mouse = {
x: e,
y: n
});
},
handleParentZoom(t) {
t.ctrlKey && (t.preventDefault(), t.deltaY > 0 && this.canvasState.zoom > 0.5 ? this.doParentZoom(-0.1) : this.canvasState.zoom < 1.6 && this.doParentZoom(0.1));
},
handlePointDragged(t, e) {
this.pointState.target = { ...t }, this.pointState.fromRect = { ...e.toJSON() };
},
handleSelectConnection(t) {
this.selectedConnection = t;
},
isConnectionExist(t, e) {
return [...this.localList].flatMap(
(o) => o.connections ? [...o.connections] : []
).some((o) => {
const s = `${this.$.uid}-org-item-${o.from.item}-io-${o.from.io}`, r = `${this.$.uid}-org-item-${o.to.item}-io-${o.to.io}`;
return t === s && e === r || t === r && e === s;
});
},
isItemDragged(t) {
var e;
return ((e = this.draggedItem) == null ? void 0 : e.key) === t;
}

@@ -361,32 +1202,86 @@ },

deep: !0,
handler(e) {
Object.keys(e).length || (this.cardIndex = 1), this.handleModList(e);
}
handler(t) {
this.localList = [...t];
},
immediate: !0
}
},
mounted() {
this.cardIndex = 1, this.handleModList({ ...this.list || {} });
}
this.$refs["canvas-tree"] && (this.canvasState.elem = this.$refs["canvas-tree"]), document.addEventListener("keydown", this.handleParentKeydown);
},
unmounted() {
this.canvasState.elem = null, document.removeEventListener("keydown", this.handleParentKeydown);
},
expose: ["doExport"]
});
const Z = {
const be = ["id"], ve = {
key: 0,
class: "parent-tree"
};
function x(e, r, t, s, a, i) {
const g = k("sb-org-tree-item");
return d(), o("div", u({ class: "organization-wrapper" }, { ...e.$attrs }), [
Object.keys(e.list).length ? (d(), o("ul", Z, [
(d(), $(g, u({
item: e.localList,
key: `${e.$.uid}-org`,
lastIndex: e.cardIndex
}, {
isDraggable: e.isDraggable
}, { onChangeItem: e.handleChangeItem }), null, 16, ["item", "lastIndex", "onChangeItem"]))
])) : m("", !0)
], 16);
class: "connection connecting",
xmlns: "http://www.w3.org/2000/svg"
}, Ee = ["d"], ke = ["id"];
function Ie(t, e, n, o, s, r) {
const a = ft("sb-org-tree-item");
return g(), S(v, null, [
E("div", W({
class: [{
connecting: t.connectorState.from,
dragging: t.parentState.isDrag
}, "organization-wrapper"],
id: `${t.$.uid}-org`
}, { ...t.$attrs }, {
onMousedown: e[0] || (e[0] = m((...i) => t.handleParentClick && t.handleParentClick(...i), ["stop"])),
onMousemove: e[1] || (e[1] = m((...i) => t.handleParentPosition && t.handleParentPosition(...i), ["stop"])),
onMouseup: e[2] || (e[2] = m((...i) => t.handleParentDragEnd && t.handleParentDragEnd(...i), ["stop"])),
onPointercancel: e[3] || (e[3] = (...i) => t.handleParentPointerUp && t.handleParentPointerUp(...i)),
onPointerdown: e[4] || (e[4] = (...i) => t.handleParentPointerDown && t.handleParentPointerDown(...i)),
onPointerleave: e[5] || (e[5] = (...i) => t.handleParentPointerUp && t.handleParentPointerUp(...i)),
onPointermove: e[6] || (e[6] = (...i) => t.handleParentPointerMove && t.handleParentPointerMove(...i)),
onPointerout: e[7] || (e[7] = (...i) => t.handleParentPointerUp && t.handleParentPointerUp(...i)),
onPointerup: e[8] || (e[8] = (...i) => t.handleParentPointerUp && t.handleParentPointerUp(...i)),
onTouchend: e[9] || (e[9] = m((...i) => t.handleParentDragEnd && t.handleParentDragEnd(...i), ["stop"])),
onTouchmove: e[10] || (e[10] = m((...i) => t.handleParentPosition && t.handleParentPosition(...i), ["stop"])),
onTouchstart: e[11] || (e[11] = m((...i) => t.handleParentClick && t.handleParentClick(...i), ["stop"])),
onWheel: e[12] || (e[12] = m((...i) => t.handleParentZoom && t.handleParentZoom(...i), ["stop"]))
}), [
E("div", {
class: "canvas",
ref: "canvas-tree",
style: R(t.canvasStyle)
}, [
(g(!0), S(v, null, I(t.localList, (i, c) => (g(), z(a, W({
"canvas-state": t.canvasState,
"connector-state": t.connectorState,
"is-dragged": t.isItemDragged(`${t.$.uid}-org-item-${c}`),
key: `${t.$.uid}-org-item-${c}`
}, {
isEditable: t.isEditable,
item: i,
...t.selectedConnection && { selectedConnection: t.selectedConnection }
}, {
onChangePoint: t.handleChangeItemPoint,
onDragConnection: t.handleConnectionDragged,
onDragItem: t.handleItemDragged,
onDragPoint: t.handlePointDragged,
onSelectConnection: t.handleSelectConnection
}), null, 16, ["canvas-state", "connector-state", "is-dragged", "onChangePoint", "onDragConnection", "onDragItem", "onDragPoint", "onSelectConnection"]))), 128)),
t.connectorState.from ? (g(), S("svg", ve, [
E("path", {
d: t.connectorState.path
}, null, 8, Ee)
])) : x("", !0)
], 4)
], 16, be),
(g(), z(pt, { to: "body" }, [
t.isExporting ? (g(), S("div", {
key: 0,
class: "export-area-org-chart",
id: `${t.$.uid}-org-export-area`,
style: R(t.exportAreaStyle)
}, null, 12, ke)) : x("", !0)
]))
], 64);
}
const re = /* @__PURE__ */ c(Y, [["render", x]]);
const xe = /* @__PURE__ */ tt(Ce, [["render", Ie]]);
export {
re as default
xe as default
};

8

interface.d.ts

@@ -0,1 +1,2 @@

import { IConnection, ICoordinates } from './components/organization-tree/interface';
export interface IHTTPResponse {

@@ -181,3 +182,4 @@ code: number | string;

additionalInfo?: string;
childs?: IOrganizationTreeItem[];
connections?: IConnection[];
coordinates: ICoordinates;
department?: string;

@@ -189,5 +191,1 @@ name?: string;

}
export interface IOrganizationCurrentData {
data: IOrganizationTreeItem;
index: any;
}

12

interface.ts

@@ -0,1 +1,5 @@

import {
IConnection,
ICoordinates,
} from '@/components/organization-tree/interface'
export interface IHTTPResponse {

@@ -229,3 +233,4 @@ code: number | string

additionalInfo?: string
childs?: IOrganizationTreeItem[]
connections?: IConnection[]
coordinates: ICoordinates
department?: string

@@ -237,6 +242,1 @@ name?: string

}
export interface IOrganizationCurrentData {
data: IOrganizationTreeItem
index: any
}

3

package.json

@@ -5,3 +5,3 @@ {

"homepage": "http://edgarjuvianno.github.io/vue-sb-components",
"version": "1.4.102",
"version": "2.0.0",
"type": "module",

@@ -18,2 +18,3 @@ "module": "./main.js",

"dayjs": "^1.11.9",
"html-to-image": "^1.11.11",
"maska": "^2.1.10",

@@ -20,0 +21,0 @@ "pdfjs-dist": "^3.9.179",

2

README.md
# SANGBYTE VUE COMPONENTS
This library created using [Vue 3](https://vuejs.org/guide/introduction.html), [Vite](https://vitejs.dev/), [Day.js](https://day.js.org/), [Maska](https://beholdr.github.io/maska/#/) and [PDF.js](https://mozilla.github.io/pdf.js/).
This library created using [Vue 3](https://vuejs.org/guide/introduction.html), [Vite](https://vitejs.dev/), [Day.js](https://day.js.org/), [Maska](https://beholdr.github.io/maska/#/), [PDF.js](https://mozilla.github.io/pdf.js/) and [html-to-image](https://github.com/bubkoo/html-to-image/).

@@ -5,0 +5,0 @@ Documentation: [Homepage](http://edgarjuvianno.github.io/vue-sb-components)

components/organization-tree/organization-tree.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc