New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@edgarjuvianno/vue-sb-components
Advanced tools
@edgarjuvianno/vue-sb-components - npm Package Compare versions
Comparing version 2.0.0 to 2.0.1
| import { IOrganizationTreeItem } from '../../interface'; | ||
| import { IConnection } from './interface'; | ||
| import { IConnection, ICoordinates } from './interface'; | ||
| export declare const doSortPoints: (points: ICoordinates[], endLine: ICoordinates) => ICoordinates[]; | ||
| export declare const doUpdateConnectionPath: (item: IConnection) => IConnection; | ||
| export declare const doUpdateConnectionPathItemMoved: (items: IOrganizationTreeItem[], itemMoved: number, orgUID: string, canvasState: Record<string, any>) => IOrganizationTreeItem[]; |
| import { PropType } from 'vue'; | ||
| import { IOrganizationTreeItem } from '../../interface'; | ||
| import { ICanvasState, IConnectorState, IDraggedItem, IPointTarget } from './interface'; | ||
| import { ICanvasState, IConnectorState, IDraggedItem, IPointTarget, ISelectedConnection } from './interface'; | ||
| declare const _default: import("vue").DefineComponent<{ | ||
@@ -27,3 +27,3 @@ canvasState: { | ||
| required: false; | ||
| type: PropType<string | null>; | ||
| type: PropType<ISelectedConnection | null>; | ||
| }; | ||
@@ -44,5 +44,6 @@ }, unknown, unknown, { | ||
| handleClickPoint(ev: MouseEvent | TouchEvent, indexConnection: number, indexPoint: number): void; | ||
| handleConnectionClick(index: number): void; | ||
| handleConnectionClick(ev: MouseEvent, index: number): void; | ||
| handleConnectionDoubleClick(ev: MouseEvent, index: number): void; | ||
| handleItemClick(ev: MouseEvent | TouchEvent): void; | ||
| isConnectionSelected(index: number): boolean; | ||
| }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { | ||
@@ -53,3 +54,3 @@ changePoint: (_item: IOrganizationTreeItem, _index: number) => true; | ||
| dragPoint: (_target: IPointTarget, _fromRect: DOMRect) => true; | ||
| selectConnection: (_connectionKey: string) => true; | ||
| selectConnection: (_connection: ISelectedConnection) => true; | ||
| }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{ | ||
@@ -78,3 +79,3 @@ canvasState: { | ||
| required: false; | ||
| type: PropType<string | null>; | ||
| type: PropType<ISelectedConnection | null>; | ||
| }; | ||
@@ -86,3 +87,3 @@ }>> & { | ||
| onDragPoint?: ((_target: IPointTarget, _fromRect: DOMRect) => any) | undefined; | ||
| onSelectConnection?: ((_connectionKey: string) => any) | undefined; | ||
| onSelectConnection?: ((_connection: ISelectedConnection) => any) | undefined; | ||
| }, { | ||
@@ -89,0 +90,0 @@ isDragged: boolean; |
@@ -69,1 +69,6 @@ export interface ICoordinates { | ||
| } | ||
| export interface ISelectedConnection { | ||
| from: IConnectionIO; | ||
| key: string; | ||
| to: IConnectionIO; | ||
| } |
| import { PropType } from 'vue'; | ||
| import { IOrganizationTreeItem } from '../../interface'; | ||
| import { ICanvasState, IConnectorState, ICoordinates, IDraggedItem, IMouseState, IParentPointerState, IParentState, IPointState, IPointTarget } from './interface'; | ||
| import { ICanvasState, IConnectorState, ICoordinates, IDraggedItem, IMouseState, IParentPointerState, IParentState, IPointState, IPointTarget, ISelectedConnection } from './interface'; | ||
| declare const _default: import("vue").DefineComponent<{ | ||
@@ -25,3 +25,3 @@ isEditable: { | ||
| pointState: IPointState; | ||
| selectedConnection: string | null; | ||
| selectedConnection: ISelectedConnection | null; | ||
| }, {}, { | ||
@@ -48,3 +48,3 @@ doExport(): Promise<string | null>; | ||
| handleParentDragEnd(ev: MouseEvent | TouchEvent): void; | ||
| handleParentKeydown(ev: KeyboardEvent): void; | ||
| handleParentKeydown(ev: KeyboardEvent): Promise<void>; | ||
| handleParentPointerDown(ev: PointerEvent): void; | ||
@@ -56,3 +56,3 @@ handleParentPointerMove(ev: PointerEvent): void; | ||
| handlePointDragged(target: IPointTarget, fromRect: DOMRect): void; | ||
| handleSelectConnection(key: string): void; | ||
| handleSelectConnection(connection: ISelectedConnection): void; | ||
| isConnectionExist(fromId: string, toId: string): boolean; | ||
@@ -59,0 +59,0 @@ isItemDragged(key: string): boolean; |
| import "./organization-tree.css"; | ||
| 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 { defineComponent as _, openBlock as g, createElementBlock as S, Fragment as v, normalizeClass as D, normalizeStyle as R, withModifiers as m, renderList as I, createTextVNode as gt, toDisplayString as X, createCommentVNode as L, createElementVNode as k, resolveComponent as ft, mergeProps as W, createBlock as z, Teleport as pt } from "vue"; | ||
| import { _ as tt } from "../../_plugin-vue_export-helper-dad06003.js"; | ||
@@ -16,6 +16,15 @@ const V = (t, e) => t < 1 ? { | ||
| y: e.y | ||
| }, L = (t) => { | ||
| }, yt = (t, e) => [...t].sort( | ||
| (i, r) => { | ||
| const a = Math.sqrt( | ||
| (i.x - e.x) * (i.x - e.x) + (i.y - e.y) * (i.y - e.y) | ||
| ), s = Math.sqrt( | ||
| (r.x - e.x) * (r.x - e.x) + (r.y - e.y) * (r.y - e.y) | ||
| ); | ||
| return a - s; | ||
| } | ||
| ).reverse(), M = (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}`; | ||
| const n = e.map((i, 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 { | ||
@@ -30,4 +39,4 @@ ...t, | ||
| }; | ||
| }, yt = (t, e, n, o) => { | ||
| const { canvasHeight: s, canvasWidth: r, x: a, y: i } = o; | ||
| }, St = (t, e, n, o) => { | ||
| const { canvasHeight: i, canvasWidth: r, x: a, y: s } = o; | ||
| return [...t].map( | ||
@@ -49,14 +58,14 @@ (h) => { | ||
| const { | ||
| height: C, | ||
| height: w, | ||
| width: l, | ||
| x: P, | ||
| y: k | ||
| x: C, | ||
| y: E | ||
| } = p.getBoundingClientRect().toJSON(), { | ||
| height: T, | ||
| width: B, | ||
| width: Y, | ||
| 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; | ||
| } = y.getBoundingClientRect().toJSON(), ht = l / 2 + (C - a) * r, ut = w / 2 + (E - s) * i, dt = Y / 2 + (ct - a) * r, mt = T / 2 + (lt - s) * i; | ||
| return { | ||
| ...L({ | ||
| ...M({ | ||
| ...d, | ||
@@ -98,3 +107,3 @@ pathObject: { | ||
| }; | ||
| function St(t, e) { | ||
| function $t(t, e) { | ||
| if (t.match(/^[a-z]+:\/\//i)) | ||
@@ -106,6 +115,6 @@ return t; | ||
| 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 n = document.implementation.createHTMLDocument(), o = n.createElement("base"), i = n.createElement("a"); | ||
| return n.head.appendChild(o), n.body.appendChild(i), e && (o.href = e), i.href = t, i.href; | ||
| } | ||
| const $t = (() => { | ||
| const Pt = (() => { | ||
| let t = 0; | ||
@@ -124,3 +133,3 @@ const e = () => ( | ||
| } | ||
| function M(t, e) { | ||
| function O(t, e) { | ||
| const o = (t.ownerDocument.defaultView || window).getComputedStyle(t).getPropertyValue(e); | ||
@@ -130,14 +139,14 @@ return o ? parseFloat(o.replace("px", "")) : 0; | ||
| function wt(t) { | ||
| const e = M(t, "border-left-width"), n = M(t, "border-right-width"); | ||
| const e = O(t, "border-left-width"), n = O(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"); | ||
| function Ct(t) { | ||
| const e = O(t, "border-top-width"), n = O(t, "border-bottom-width"); | ||
| return t.clientHeight + e + n; | ||
| } | ||
| function et(t, e = {}) { | ||
| const n = e.width || wt(t), o = e.height || Pt(t); | ||
| const n = e.width || wt(t), o = e.height || Ct(t); | ||
| return { width: n, height: o }; | ||
| } | ||
| function Ct() { | ||
| function bt() { | ||
| let t, e; | ||
@@ -151,7 +160,7 @@ try { | ||
| } | ||
| 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)); | ||
| const P = 16384; | ||
| function vt(t) { | ||
| (t.width > P || t.height > P) && (t.width > P && t.height > P ? t.width > t.height ? (t.height *= P / t.width, t.width = P) : (t.width *= P / t.height, t.height = P) : t.width > P ? (t.height *= P / t.width, t.width = P) : (t.width *= P / t.height, t.height = P)); | ||
| } | ||
| function O(t) { | ||
| function A(t) { | ||
| return new Promise((e, n) => { | ||
@@ -162,8 +171,8 @@ const o = new Image(); | ||
| } | ||
| async function vt(t) { | ||
| async function kt(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 o = "http://www.w3.org/2000/svg", i = document.createElementNS(o, "svg"), r = document.createElementNS(o, "foreignObject"); | ||
| return i.setAttribute("width", `${e}`), i.setAttribute("height", `${n}`), i.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"), i.appendChild(r), r.appendChild(t), kt(i); | ||
| } | ||
@@ -176,7 +185,7 @@ const $ = (t, e) => { | ||
| }; | ||
| function kt(t) { | ||
| function It(t) { | ||
| const e = t.getPropertyValue("content"); | ||
| return `${t.cssText} content: '${e.replace(/'|"/g, "")}';`; | ||
| } | ||
| function It(t) { | ||
| function Rt(t) { | ||
| return b(t).map((e) => { | ||
@@ -187,11 +196,11 @@ const n = t.getPropertyValue(e), o = t.getPropertyPriority(e); | ||
| } | ||
| function Rt(t, e, n) { | ||
| const o = `.${t}:${e}`, s = n.cssText ? kt(n) : It(n); | ||
| return document.createTextNode(`${o}{${s}}`); | ||
| function Tt(t, e, n) { | ||
| const o = `.${t}:${e}`, i = n.cssText ? It(n) : Rt(n); | ||
| return document.createTextNode(`${o}{${i}}`); | ||
| } | ||
| function Z(t, e, n) { | ||
| const o = window.getComputedStyle(t, n), s = o.getPropertyValue("content"); | ||
| if (s === "" || s === "none") | ||
| function q(t, e, n) { | ||
| const o = window.getComputedStyle(t, n), i = o.getPropertyValue("content"); | ||
| if (i === "" || i === "none") | ||
| return; | ||
| const r = $t(); | ||
| const r = Pt(); | ||
| try { | ||
@@ -203,10 +212,10 @@ e.className = `${e.className} ${r}`; | ||
| const a = document.createElement("style"); | ||
| a.appendChild(Rt(r, n, o)), e.appendChild(a); | ||
| a.appendChild(Tt(r, n, o)), e.appendChild(a); | ||
| } | ||
| function Tt(t, e) { | ||
| Z(t, e, ":before"), Z(t, e, ":after"); | ||
| function xt(t, e) { | ||
| q(t, e, ":before"), q(t, e, ":after"); | ||
| } | ||
| const q = "application/font-woff", J = "image/jpeg", Dt = { | ||
| woff: q, | ||
| woff2: q, | ||
| const Z = "application/font-woff", J = "image/jpeg", Dt = { | ||
| woff: Z, | ||
| woff2: Z, | ||
| ttf: "application/font-truetype", | ||
@@ -222,14 +231,14 @@ eot: "application/vnd.ms-fontobject", | ||
| }; | ||
| function xt(t) { | ||
| function Lt(t) { | ||
| const e = /\.([^./]*?)$/g.exec(t); | ||
| return e ? e[1] : ""; | ||
| } | ||
| function j(t) { | ||
| const e = xt(t).toLowerCase(); | ||
| function H(t) { | ||
| const e = Lt(t).toLowerCase(); | ||
| return Dt[e] || ""; | ||
| } | ||
| function Lt(t) { | ||
| function Mt(t) { | ||
| return t.split(/,/)[1]; | ||
| } | ||
| function H(t) { | ||
| function j(t) { | ||
| return t.search(/^(data:)/) !== -1; | ||
@@ -244,54 +253,54 @@ } | ||
| throw new Error(`Resource "${o.url}" not found`); | ||
| const s = await o.blob(); | ||
| const i = await o.blob(); | ||
| return new Promise((r, a) => { | ||
| const i = new FileReader(); | ||
| i.onerror = a, i.onloadend = () => { | ||
| const s = new FileReader(); | ||
| s.onerror = a, s.onloadend = () => { | ||
| try { | ||
| r(n({ res: o, result: i.result })); | ||
| r(n({ res: o, result: s.result })); | ||
| } catch (c) { | ||
| a(c); | ||
| } | ||
| }, i.readAsDataURL(s); | ||
| }, s.readAsDataURL(i); | ||
| }); | ||
| } | ||
| const F = {}; | ||
| function Mt(t, e, n) { | ||
| function Ot(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); | ||
| async function B(t, e, n) { | ||
| const o = Ot(t, e, n.includeQueryParams); | ||
| if (F[o] != null) | ||
| return F[o]; | ||
| n.cacheBust && (t += (/\?/.test(t) ? "&" : "?") + (/* @__PURE__ */ new Date()).getTime()); | ||
| let s; | ||
| let i; | ||
| 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); | ||
| const r = await ot(t, n.fetchRequestInit, ({ res: a, result: s }) => (e || (e = a.headers.get("Content-Type") || ""), Mt(s))); | ||
| i = nt(r, e); | ||
| } catch (r) { | ||
| s = n.imagePlaceholder || ""; | ||
| i = 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; | ||
| return F[o] = i, i; | ||
| } | ||
| async function Ot(t) { | ||
| async function At(t) { | ||
| const e = t.toDataURL(); | ||
| return e === "data:," ? t.cloneNode(!1) : O(e); | ||
| return e === "data:," ? t.cloneNode(!1) : A(e); | ||
| } | ||
| async function At(t, e) { | ||
| async function Ut(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 s = r.toDataURL(); | ||
| return A(s); | ||
| } | ||
| const n = t.poster, o = j(n), s = await Y(n, o, e); | ||
| return O(s); | ||
| const n = t.poster, o = H(n), i = await B(n, o, e); | ||
| return A(i); | ||
| } | ||
| async function Ut(t) { | ||
| async function Xt(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); | ||
| return await U(t.contentDocument.body, {}, !0); | ||
| } catch { | ||
@@ -301,14 +310,14 @@ } | ||
| } | ||
| async function Xt(t, e) { | ||
| return $(t, HTMLCanvasElement) ? Ot(t) : $(t, HTMLVideoElement) ? At(t, e) : $(t, HTMLIFrameElement) ? Ut(t) : t.cloneNode(!1); | ||
| async function Ft(t, e) { | ||
| return $(t, HTMLCanvasElement) ? At(t) : $(t, HTMLVideoElement) ? Ut(t, e) : $(t, HTMLIFrameElement) ? Xt(t) : t.cloneNode(!1); | ||
| } | ||
| const Ft = (t) => t.tagName != null && t.tagName.toUpperCase() === "SLOT"; | ||
| const jt = (t) => t.tagName != null && t.tagName.toUpperCase() === "SLOT"; | ||
| async function Ht(t, e, n) { | ||
| var o, s; | ||
| var o, i; | ||
| 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) => { | ||
| return jt(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(((i = t.shadowRoot) !== null && i !== void 0 ? i : t).childNodes), r.length === 0 || $(t, HTMLVideoElement) || await r.reduce((a, s) => a.then(() => U(s, n)).then((c) => { | ||
| c && e.appendChild(c); | ||
| }), Promise.resolve()), e; | ||
| } | ||
| function jt(t, e) { | ||
| function Bt(t, e) { | ||
| const n = e.style; | ||
@@ -318,5 +327,5 @@ if (!n) | ||
| 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)); | ||
| o.cssText ? (n.cssText = o.cssText, n.transformOrigin = o.transformOrigin) : b(o).forEach((i) => { | ||
| let r = o.getPropertyValue(i); | ||
| i === "font-size" && r.endsWith("px") && (r = `${Math.floor(parseFloat(r.substring(0, r.length - 2))) - 0.1}px`), $(t, HTMLIFrameElement) && i === "display" && r === "inline" && (r = "block"), i === "d" && e.getAttribute("d") && (r = `path(${e.getAttribute("d")})`), n.setProperty(i, r, o.getPropertyPriority(i)); | ||
| }); | ||
@@ -327,12 +336,12 @@ } | ||
| } | ||
| function Bt(t, e) { | ||
| function Wt(t, e) { | ||
| if ($(t, HTMLSelectElement)) { | ||
| const n = e, o = Array.from(n.children).find((s) => t.value === s.getAttribute("value")); | ||
| const n = e, o = Array.from(n.children).find((i) => t.value === i.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; | ||
| function zt(t, e) { | ||
| return $(e, Element) && (Bt(t, e), xt(t, e), Yt(t, e), Wt(t, e)), e; | ||
| } | ||
| async function zt(t, e) { | ||
| async function Vt(t, e) { | ||
| const n = t.querySelectorAll ? t.querySelectorAll("use") : []; | ||
@@ -343,16 +352,16 @@ if (n.length === 0) | ||
| 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 = n[r].getAttribute("xlink:href"); | ||
| if (s) { | ||
| const c = t.querySelector(s), h = document.querySelector(s); | ||
| !c && h && !o[s] && (o[s] = await U(h, e, !0)); | ||
| } | ||
| } | ||
| const s = Object.values(o); | ||
| if (s.length) { | ||
| const i = Object.values(o); | ||
| if (i.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]); | ||
| const s = document.createElementNS(r, "defs"); | ||
| a.appendChild(s); | ||
| for (let c = 0; c < i.length; c++) | ||
| s.appendChild(i[c]); | ||
| t.appendChild(a); | ||
@@ -362,24 +371,24 @@ } | ||
| } | ||
| 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)); | ||
| async function U(t, e, n) { | ||
| return !n && e.filter && !e.filter(t) ? null : Promise.resolve(t).then((o) => Ft(o, e)).then((o) => Ht(t, o, e)).then((o) => zt(t, o)).then((o) => Vt(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 it = /url\((['"]?)([^'"]+?)\1\)/g, qt = /url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g, Zt = /src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g; | ||
| function Jt(t) { | ||
| const e = t.replace(/([.*+?^${}()|\[\]\/\\])/g, "\\$1"); | ||
| return new RegExp(`(url\\(['"]?)(${e})(['"]?\\))`, "g"); | ||
| } | ||
| function Jt(t) { | ||
| function Gt(t) { | ||
| const e = []; | ||
| return t.replace(it, (n, o, s) => (e.push(s), n)), e.filter((n) => !H(n)); | ||
| return t.replace(it, (n, o, i) => (e.push(i), n)), e.filter((n) => !j(n)); | ||
| } | ||
| async function Kt(t, e, n, o, s) { | ||
| async function Kt(t, e, n, o, i) { | ||
| try { | ||
| const r = n ? St(e, n) : e, a = j(e); | ||
| let i; | ||
| if (s) { | ||
| const c = await s(r); | ||
| i = nt(c, a); | ||
| const r = n ? $t(e, n) : e, a = H(e); | ||
| let s; | ||
| if (i) { | ||
| const c = await i(r); | ||
| s = nt(c, a); | ||
| } else | ||
| i = await Y(r, a, o); | ||
| return t.replace(qt(e), `$1${i}$3`); | ||
| s = await B(r, a, o); | ||
| return t.replace(Jt(e), `$1${s}$3`); | ||
| } catch { | ||
@@ -389,9 +398,9 @@ } | ||
| } | ||
| function Gt(t, { preferredFontFormat: e }) { | ||
| function Qt(t, { preferredFontFormat: e }) { | ||
| return e ? t.replace(Zt, (n) => { | ||
| for (; ; ) { | ||
| const [o, , s] = Vt.exec(n) || []; | ||
| if (!s) | ||
| const [o, , i] = qt.exec(n) || []; | ||
| if (!i) | ||
| return ""; | ||
| if (s === e) | ||
| if (i === e) | ||
| return `src: ${o};`; | ||
@@ -407,10 +416,10 @@ } | ||
| return t; | ||
| const o = Gt(t, n); | ||
| return Jt(o).reduce((r, a) => r.then((i) => Kt(i, a, e, n)), Promise.resolve(o)); | ||
| const o = Qt(t, n); | ||
| return Gt(o).reduce((r, a) => r.then((s) => Kt(s, a, e, n)), Promise.resolve(o)); | ||
| } | ||
| async function D(t, e, n) { | ||
| async function x(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); | ||
| const i = (o = e.style) === null || o === void 0 ? void 0 : o.getPropertyValue(t); | ||
| if (i) { | ||
| const r = await rt(i, null, n); | ||
| return e.style.setProperty(t, r, e.style.getPropertyPriority(t)), !0; | ||
@@ -420,38 +429,38 @@ } | ||
| } | ||
| 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) { | ||
| await x("background", t, e) || await x("background-image", t, e), await x("mask", t, e) || await x("mask-image", t, e); | ||
| } | ||
| async function Nt(t, e) { | ||
| async function _t(t, e) { | ||
| const n = $(t, HTMLImageElement); | ||
| if (!(n && !H(t.src)) && !($(t, SVGImageElement) && !H(t.href.baseVal))) | ||
| if (!(n && !j(t.src)) && !($(t, SVGImageElement) && !j(t.href.baseVal))) | ||
| return; | ||
| const o = n ? t.src : t.href.baseVal, s = await Y(o, j(o), e); | ||
| const o = n ? t.src : t.href.baseVal, i = await B(o, H(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; | ||
| const s = t; | ||
| s.decode && (s.decode = r), s.loading === "lazy" && (s.loading = "eager"), n ? (t.srcset = "", t.src = i) : t.href.baseVal = i; | ||
| }); | ||
| } | ||
| async function _t(t, e) { | ||
| const o = b(t.childNodes).map((s) => at(s, e)); | ||
| async function te(t, e) { | ||
| const o = b(t.childNodes).map((i) => at(i, 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)); | ||
| $(t, Element) && (await Nt(t, e), await _t(t, e), await te(t, e)); | ||
| } | ||
| function te(t, e) { | ||
| function ee(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]; | ||
| return o != null && Object.keys(o).forEach((i) => { | ||
| n[i] = o[i]; | ||
| }), t; | ||
| } | ||
| const K = {}; | ||
| async function G(t) { | ||
| let e = K[t]; | ||
| const G = {}; | ||
| async function K(t) { | ||
| let e = G[t]; | ||
| if (e != null) | ||
| return e; | ||
| const o = await (await fetch(t)).text(); | ||
| return e = { url: t, cssText: o }, K[t] = e, e; | ||
| return e = { url: t, cssText: o }, G[t] = e, e; | ||
| } | ||
@@ -461,4 +470,4 @@ async function Q(t, e) { | ||
| 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])); | ||
| let s = a.replace(o, "$1"); | ||
| return s.startsWith("https://") || (s = new URL(s, t.url).href), ot(s, e.fetchRequestInit, ({ result: c }) => (n = n.replace(a, `url(${c})`), [a, c])); | ||
| }); | ||
@@ -472,5 +481,5 @@ return Promise.all(r).then(() => n); | ||
| let o = t.replace(n, ""); | ||
| const s = new RegExp("((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})", "gi"); | ||
| const i = new RegExp("((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})", "gi"); | ||
| for (; ; ) { | ||
| const c = s.exec(o); | ||
| const c = i.exec(o); | ||
| if (c === null) | ||
@@ -480,12 +489,12 @@ break; | ||
| } | ||
| 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"); | ||
| o = o.replace(i, ""); | ||
| const r = /@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi, a = "((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})", s = new RegExp(a, "gi"); | ||
| for (; ; ) { | ||
| let c = r.exec(o); | ||
| if (c === null) { | ||
| if (c = i.exec(o), c === null) | ||
| if (c = s.exec(o), c === null) | ||
| break; | ||
| r.lastIndex = i.lastIndex; | ||
| r.lastIndex = s.lastIndex; | ||
| } else | ||
| i.lastIndex = r.lastIndex; | ||
| s.lastIndex = r.lastIndex; | ||
| e.push(c[0]); | ||
@@ -495,13 +504,13 @@ } | ||
| } | ||
| async function ee(t, e) { | ||
| async function ne(t, e) { | ||
| const n = [], o = []; | ||
| return t.forEach((s) => { | ||
| if ("cssRules" in s) | ||
| return t.forEach((i) => { | ||
| if ("cssRules" in i) | ||
| try { | ||
| b(s.cssRules || []).forEach((r, a) => { | ||
| b(i.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) => { | ||
| let s = a + 1; | ||
| const c = r.href, h = K(c).then((u) => Q(u, e)).then((u) => N(u).forEach((f) => { | ||
| try { | ||
| s.insertRule(f, f.startsWith("@import") ? i += 1 : s.cssRules.length); | ||
| i.insertRule(f, f.startsWith("@import") ? s += 1 : i.cssRules.length); | ||
| } catch (d) { | ||
@@ -520,56 +529,56 @@ console.error("Error inserting rule from remote css", { | ||
| } 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); | ||
| const a = t.find((s) => s.href == null) || document.styleSheets[0]; | ||
| i.href != null && o.push(K(i.href).then((s) => Q(s, e)).then((s) => N(s).forEach((c) => { | ||
| a.insertRule(c, i.cssRules.length); | ||
| })).catch((s) => { | ||
| console.error("Error loading remote stylesheet", s); | ||
| })), console.error("Error inlining remote css file", r); | ||
| } | ||
| }), Promise.all(o).then(() => (t.forEach((s) => { | ||
| if ("cssRules" in s) | ||
| }), Promise.all(o).then(() => (t.forEach((i) => { | ||
| if ("cssRules" in i) | ||
| try { | ||
| b(s.cssRules || []).forEach((r) => { | ||
| b(i.cssRules || []).forEach((r) => { | ||
| n.push(r); | ||
| }); | ||
| } catch (r) { | ||
| console.error(`Error while reading CSS rules from ${s.href}`, r); | ||
| console.error(`Error while reading CSS rules from ${i.href}`, r); | ||
| } | ||
| }), n)); | ||
| } | ||
| function ne(t) { | ||
| function oe(t) { | ||
| return t.filter((e) => e.type === CSSRule.FONT_FACE_RULE).filter((e) => st(e.style.getPropertyValue("src"))); | ||
| } | ||
| async function oe(t, e) { | ||
| async function ie(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); | ||
| const n = b(t.ownerDocument.styleSheets), o = await ne(n, e); | ||
| return oe(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); | ||
| async function se(t, e) { | ||
| const n = await ie(t, e); | ||
| return (await Promise.all(n.map((i) => { | ||
| const r = i.parentStyleSheet ? i.parentStyleSheet.href : null; | ||
| return rt(i.cssText, r, e); | ||
| }))).join(` | ||
| `); | ||
| } | ||
| async function se(t, e) { | ||
| const n = e.fontEmbedCSS != null ? e.fontEmbedCSS : e.skipFonts ? null : await ie(t, e); | ||
| async function re(t, e) { | ||
| const n = e.fontEmbedCSS != null ? e.fontEmbedCSS : e.skipFonts ? null : await se(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); | ||
| const o = document.createElement("style"), i = document.createTextNode(n); | ||
| o.appendChild(i), 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; | ||
| const { width: n, height: o } = et(t, e), i = await U(t, e, !0); | ||
| return await re(i, e), await at(i, e), ee(i, e), await Et(i, n, o); | ||
| } | ||
| async function ce(t, e = {}) { | ||
| return (await ae(t, e)).toDataURL(); | ||
| const { width: n, height: o } = et(t, e), i = await ae(t, e), r = await A(i), a = document.createElement("canvas"), s = a.getContext("2d"), c = e.pixelRatio || bt(), h = e.canvasWidth || n, u = e.canvasHeight || o; | ||
| return a.width = h * c, a.height = u * c, e.skipAutoScale || vt(a), a.style.width = `${h}`, a.style.height = `${u}`, e.backgroundColor && (s.fillStyle = e.backgroundColor, s.fillRect(0, 0, a.width, a.height)), s.drawImage(r, 0, 0, a.width, a.height), a; | ||
| } | ||
| const le = _({ | ||
| async function le(t, e = {}) { | ||
| return (await ce(t, e)).toDataURL(); | ||
| } | ||
| const he = _({ | ||
| emits: { | ||
@@ -605,3 +614,3 @@ changePoint: (t, e) => !0, | ||
| required: !1, | ||
| type: String | ||
| type: Object | ||
| } | ||
@@ -636,9 +645,9 @@ }, | ||
| ...this.item.connections || [] | ||
| ], s = [ | ||
| ], i = [ | ||
| ...((n = o[t]) == null ? void 0 : n.points) || [] | ||
| ]; | ||
| s.splice(e, 1); | ||
| const r = L({ | ||
| i.splice(e, 1); | ||
| const r = M({ | ||
| ...o[t], | ||
| points: [...s] | ||
| points: [...i] | ||
| }); | ||
@@ -675,3 +684,3 @@ o[t] = { | ||
| if (o && this.isEditable) { | ||
| const s = o.getBoundingClientRect(); | ||
| const i = o.getBoundingClientRect(); | ||
| this.$emit( | ||
@@ -686,11 +695,17 @@ "dragPoint", | ||
| }, | ||
| s | ||
| i | ||
| ); | ||
| } | ||
| }, | ||
| handleConnectionClick(t) { | ||
| this.isEditable && this.$emit( | ||
| "selectConnection", | ||
| `${String(this.$.vnode.key)}-connection-${t}` | ||
| ); | ||
| handleConnectionClick(t, e) { | ||
| if (this.isEditable && t.target) { | ||
| const n = { | ||
| ...this.item.connections[e] || {} | ||
| }; | ||
| this.$emit("selectConnection", { | ||
| from: n.from, | ||
| key: `${String(this.$.vnode.key)}-connection-${e}`, | ||
| to: n.to | ||
| }); | ||
| } | ||
| }, | ||
@@ -700,16 +715,21 @@ handleConnectionDoubleClick(t, e) { | ||
| ...this.item.connections || [] | ||
| ], { elem: o, zoom: s } = this.canvasState; | ||
| ], { elem: o, zoom: i } = 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({ | ||
| const { height: r, width: a, x: s, y: c } = o.getBoundingClientRect().toJSON(), h = t.clientX, u = t.clientY, f = h * (a / (a * i)) - s * (a / (a * i)), d = u * (r / (r * i)) - c * (r / (r * i)), p = [ | ||
| ...yt( | ||
| [ | ||
| ...n[e].points || [], | ||
| { | ||
| x: f, | ||
| y: d | ||
| } | ||
| ], | ||
| n[e].pathObject.to | ||
| ) | ||
| ], y = M({ | ||
| ...n[e], | ||
| points: [ | ||
| ...n[e].points || [], | ||
| { | ||
| x: f, | ||
| y: d | ||
| } | ||
| ] | ||
| points: [...p] | ||
| }); | ||
| n[e] = { ...p }; | ||
| const y = Number( | ||
| n[e] = { ...y }; | ||
| const w = Number( | ||
| String(this.$.vnode.key).split("-item-")[1] | ||
@@ -723,3 +743,3 @@ ); | ||
| }, | ||
| y | ||
| w | ||
| ); | ||
@@ -737,10 +757,13 @@ } | ||
| } | ||
| }, | ||
| isConnectionSelected(t) { | ||
| return this.selectedConnection ? `${String(this.$.vnode.key)}-connection-${t}` === this.selectedConnection.key : !1; | ||
| } | ||
| } | ||
| }), 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) { | ||
| }), ue = ["id"], de = ["id", "onMousedown", "onTouchstart"], me = ["id"], ge = ["id", "onMousedown", "onTouchstart"], fe = { class: "data-wrapper" }, pe = { class: "name" }, ye = { class: "position" }, Se = ["innerHTML"], $e = ["id"], Pe = ["d", "onClick", "onDblclick"], we = ["cx", "cy", "onDblclick", "onMousedown", "onTouchstart"]; | ||
| function Ce(t, e, n, o, i, r) { | ||
| return g(), S(v, null, [ | ||
| t.item.department ? (g(), S("div", { | ||
| key: 0, | ||
| class: U(["department", { | ||
| class: D(["department", { | ||
| connecting: t.isConnecting, | ||
@@ -759,9 +782,9 @@ draggable: t.isEditable, | ||
| key: `io-${a}`, | ||
| onMousedown: m((i) => t.handleClickIO(i, a), ["stop"]), | ||
| onTouchstart: m((i) => t.handleClickIO(i, a), ["stop"]) | ||
| }, null, 40, ue))), 128)), | ||
| onMousedown: m((s) => t.handleClickIO(s, a), ["stop"]), | ||
| onTouchstart: m((s) => t.handleClickIO(s, a), ["stop"]) | ||
| }, null, 40, de))), 128)), | ||
| gt(" " + X(t.item.department), 1) | ||
| ], 46, he)) : (g(), S("div", { | ||
| ], 46, ue)) : (g(), S("div", { | ||
| key: 1, | ||
| class: U(["card", { | ||
| class: D(["card", { | ||
| connecting: t.isConnecting, | ||
@@ -780,5 +803,5 @@ draggable: t.isEditable, | ||
| key: `io-${a}`, | ||
| onMousedown: m((i) => t.handleClickIO(i, a), ["stop"]), | ||
| onTouchstart: m((i) => t.handleClickIO(i, a), ["stop"]) | ||
| }, null, 40, me))), 128)), | ||
| onMousedown: m((s) => t.handleClickIO(s, a), ["stop"]), | ||
| onTouchstart: m((s) => t.handleClickIO(s, a), ["stop"]) | ||
| }, null, 40, ge))), 128)), | ||
| t.item.photo ? (g(), S("div", { | ||
@@ -790,25 +813,26 @@ key: 0, | ||
| }) | ||
| }, null, 4)) : x("", !0), | ||
| E("div", ge, [ | ||
| E("p", fe, X(t.item.name), 1), | ||
| E("p", pe, X(t.item.position), 1), | ||
| }, null, 4)) : L("", !0), | ||
| k("div", fe, [ | ||
| k("p", pe, X(t.item.name), 1), | ||
| k("p", ye, X(t.item.position), 1), | ||
| t.item.additionalInfo ? (g(), S("div", { | ||
| key: 0, | ||
| innerHTML: t.item.additionalInfo | ||
| }, null, 8, ye)) : x("", !0) | ||
| }, null, 8, Se)) : L("", !0) | ||
| ]) | ||
| ], 46, de)), | ||
| (g(!0), S(v, null, I(t.item.connections || [], (a, i) => (g(), S("svg", { | ||
| class: U(["connection", { | ||
| ], 46, me)), | ||
| (g(!0), S(v, null, I(t.item.connections || [], (a, s) => (g(), S("svg", { | ||
| class: D(["connection", { | ||
| editable: t.isEditable, | ||
| selected: `${String(t.$.vnode.key)}-connection-${i}` === t.selectedConnection | ||
| selected: t.isConnectionSelected(s) | ||
| }]), | ||
| xmlns: "http://www.w3.org/2000/svg", | ||
| key: `${String(t.$.vnode.key)}-connection-${i}` | ||
| id: `${String(t.$.vnode.key)}-connection-${s}`, | ||
| key: `${String(t.$.vnode.key)}-connection-${s}` | ||
| }, [ | ||
| E("path", { | ||
| k("path", { | ||
| d: a.path, | ||
| onClick: m((c) => t.handleConnectionClick(i), ["stop"]), | ||
| onDblclick: m((c) => t.handleConnectionDoubleClick(c, i), ["stop"]) | ||
| }, null, 40, Se), | ||
| onClick: m((c) => t.handleConnectionClick(c, s), ["stop"]), | ||
| onDblclick: m((c) => t.handleConnectionDoubleClick(c, s), ["stop"]) | ||
| }, null, 40, Pe), | ||
| (g(!0), S(v, null, I(a.points || [], (c, h) => (g(), S("circle", { | ||
@@ -821,11 +845,11 @@ class: "circle", | ||
| 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)) | ||
| )}-connection-${s}-circle-${h}`, | ||
| onDblclick: m((u) => t.handleCircleDoubleClick(s, h), ["stop"]), | ||
| onMousedown: m((u) => t.handleClickPoint(u, s, h), ["stop"]), | ||
| onTouchstart: m((u) => t.handleClickPoint(u, s, h), ["stop"]) | ||
| }, null, 40, we))), 128)) | ||
| ], 10, $e))), 128)) | ||
| ], 64); | ||
| } | ||
| const Pe = /* @__PURE__ */ tt(le, [["render", we]]), Ce = _({ | ||
| const be = /* @__PURE__ */ tt(he, [["render", Ce]]), ve = _({ | ||
| emits: { | ||
@@ -846,3 +870,3 @@ change: (t) => !0 | ||
| components: { | ||
| "sb-org-tree-item": Pe | ||
| "sb-org-tree-item": be | ||
| }, | ||
@@ -915,4 +939,4 @@ data() { | ||
| ), n = [...this.localList].map( | ||
| (l, P) => { | ||
| const k = `${this.$.uid}-org-item-${P}`, T = document.getElementById(k); | ||
| (l, C) => { | ||
| const E = `${this.$.uid}-org-item-${C}`, T = document.getElementById(E); | ||
| return T ? T.getBoundingClientRect().toJSON() : null; | ||
@@ -922,3 +946,3 @@ } | ||
| (l) => (l == null ? void 0 : l.x) || 0 | ||
| ), s = [...n].map( | ||
| ), i = [...n].map( | ||
| (l) => ((l == null ? void 0 : l.x) || 0) + ((l == null ? void 0 : l.width) || 0) | ||
@@ -929,6 +953,6 @@ ), r = [...n].map( | ||
| (l) => ((l == null ? void 0 : l.y) || 0) + ((l == null ? void 0 : l.height) || 0) | ||
| ), i = [ | ||
| ), s = [ | ||
| ...[...e].map((l) => l.x), | ||
| ...o, | ||
| ...s | ||
| ...i | ||
| ], c = [ | ||
@@ -938,18 +962,18 @@ ...[...e].map((l) => l.y), | ||
| ...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; | ||
| ], h = Math.max.apply(null, s), u = Math.min.apply(null, s), f = Math.max.apply(null, c), d = Math.min.apply(null, c), p = Math.abs(d) + f, y = Math.abs(u) + h, w = this.canvasState.elem; | ||
| if (this.exportAreaStyle = { | ||
| height: `${p + 40}px`, | ||
| width: `${y + 40}px` | ||
| }, C) { | ||
| const l = C.cloneNode( | ||
| }, w) { | ||
| const l = w.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( | ||
| l.classList.remove("connection-selected"), l.style.transform = "none", l.style.background = "transparent", l.style.height = `${p}px`, l.style.position = "relative", l.style.width = `${y}px`; | ||
| const C = document.getElementById( | ||
| `${this.$.uid}-org-export-area` | ||
| ); | ||
| if (P) { | ||
| P.appendChild(l); | ||
| const k = await ce( | ||
| P, | ||
| if (C) { | ||
| C.appendChild(l); | ||
| const E = await le( | ||
| C, | ||
| { | ||
@@ -961,3 +985,3 @@ style: { | ||
| ).catch(() => null); | ||
| return l.remove(), this.isExporting = !1, k; | ||
| return l.remove(), this.isExporting = !1, E; | ||
| } | ||
@@ -971,5 +995,5 @@ } | ||
| doParentZoomRefresh() { | ||
| const { coordinates: t, lastZoom: e, zoom: n } = this.canvasState, o = t.x / e * n, s = t.y / e * n; | ||
| const { coordinates: t, lastZoom: e, zoom: n } = this.canvasState, o = t.x / e * n, i = t.y / e * n; | ||
| this.canvasState.lastZoom = n, this.canvasStyle = { | ||
| transform: `translate(${o}px, ${s}px) scale(${n})` | ||
| transform: `translate(${o}px, ${i}px) scale(${n})` | ||
| }; | ||
@@ -982,15 +1006,15 @@ }, | ||
| width: o, | ||
| x: s, | ||
| x: i, | ||
| 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.fromRect, { zoom: a } = this.canvasState, s = this.getCanvasRect(), c = (s == null ? void 0 : s.height) || 0, h = (s == null ? void 0 : s.width) || 0, u = h / (h * a) || 0, f = c / (c * a) || 0, d = (s == null ? void 0 : s.x) || 0, p = (s == null ? void 0 : s.y) || 0, y = o / 2 + (i - d) * u, w = n / 2 + (r - p) * f, l = t * (h / (h * a)) - d * (h / (h * a)), C = e * (c / (c * a)) - p * (c / (c * a)); | ||
| this.connectorState.pathObject = { | ||
| from: { | ||
| x: y, | ||
| y: C | ||
| y: w | ||
| }, | ||
| to: { | ||
| x: l, | ||
| y: P | ||
| y: C | ||
| } | ||
| }, this.connectorState.path = `M ${y} ${C} L ${l} ${P}`; | ||
| }, this.connectorState.path = `M ${y} ${w} L ${l} ${C}`; | ||
| } else | ||
@@ -1002,5 +1026,5 @@ this.connectorState.pathObject = void 0, this.connectorState.path = void 0; | ||
| if (o) { | ||
| const s = o.height || 0, r = o.width || 0, a = r / (r * n) || 0, i = s / (s * n) || 0; | ||
| const i = o.height || 0, r = o.width || 0, a = r / (r * n) || 0, s = i / (i * n) || 0; | ||
| this.localList = [ | ||
| ...yt( | ||
| ...St( | ||
| e, | ||
@@ -1010,3 +1034,3 @@ t, | ||
| { | ||
| canvasHeight: i, | ||
| canvasHeight: s, | ||
| canvasWidth: a, | ||
@@ -1072,6 +1096,6 @@ x: o.x, | ||
| 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); | ||
| const { x: e, y: n } = this.getCoordinatesEnd(t), { coordinates: o } = this.canvasState, i = o.x + -(this.mouseState.position.x - e), r = o.y + -(this.mouseState.position.y - n); | ||
| if (this.parentState.isDrag) | ||
| this.canvasState.coordinates = { | ||
| x: s, | ||
| x: i, | ||
| y: r | ||
@@ -1081,3 +1105,3 @@ }; | ||
| const a = t.target; | ||
| if (a.id !== this.connectorState.from && !this.isConnectionExist( | ||
| if (a.id !== this.connectorState.from && a.classList.contains("io") && !this.isConnectionExist( | ||
| this.connectorState.from, | ||
@@ -1137,16 +1161,21 @@ a.id | ||
| }, | ||
| handleParentKeydown(t) { | ||
| if ((t.key === "Delete" || t.key === "Backspace" && t.metaKey) && this.selectedConnection) { | ||
| const e = this.selectedConnection.split("-connection-"), n = Number( | ||
| async handleParentKeydown(t) { | ||
| if ((t.key === "Delete" || t.key === "Backspace") && this.selectedConnection) { | ||
| t.preventDefault(); | ||
| const e = this.selectedConnection.key.split("-connection-"); | ||
| this.selectedConnection = null, await new Promise( | ||
| (i) => setTimeout(() => i(!0), 150) | ||
| ); | ||
| const n = Number( | ||
| e[0].split("-item-")[1] | ||
| ), o = Number(e[1]); | ||
| if (this.localList[n]) { | ||
| const s = [ | ||
| const i = [ | ||
| ...this.localList[n].connections || [] | ||
| ]; | ||
| this.localList[n].connections = s.filter( | ||
| this.localList[n].connections = i.filter( | ||
| (r, a) => a !== o | ||
| ), this.$nextTick( | ||
| () => this.$emit("change", this.localList) | ||
| ); | ||
| ), this.$nextTick(() => { | ||
| this.$emit("change", this.localList); | ||
| }); | ||
| } | ||
@@ -1178,11 +1207,11 @@ } | ||
| handleParentPosition(t) { | ||
| const { x: e, y: n } = this.getCoordinatesMove(t), { coordinates: o, zoom: s } = this.canvasState, r = this.getCanvasRect(); | ||
| const { x: e, y: n } = this.getCoordinatesMove(t), { coordinates: o, zoom: i } = 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); | ||
| const a = o.x + -(this.mouseState.position.x - e), s = o.y + -(this.mouseState.position.y - n); | ||
| this.canvasStyle = { | ||
| transform: `translate(${a}px, ${i}px) scale(${s})` | ||
| transform: `translate(${a}px, ${s}px) scale(${i})` | ||
| }; | ||
| } 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); | ||
| const { x: a, y: s } = this.mouseState.position, c = (a - e) * ((r == null ? void 0 : r.width) || 0) / (((r == null ? void 0 : r.width) || 0) * i), h = (s - n) * ((r == null ? void 0 : r.height) || 0) / (((r == null ? void 0 : r.height) || 0) * i); | ||
| this.handleItemChangePosition({ | ||
@@ -1200,6 +1229,6 @@ x: this.draggedItem.elem.offsetLeft - c, | ||
| height: a, | ||
| width: i, | ||
| width: s, | ||
| 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.canvasState.elem.getBoundingClientRect().toJSON(), u = e * (s / (s * i)) - c * (s / (s * i)), f = n * (a / (a * i)) - h * (a / (a * i)), { target: d } = this.pointState, p = [ | ||
| ...this.localList[d.item].connections || [] | ||
@@ -1213,3 +1242,3 @@ ], y = [ | ||
| }; | ||
| const C = L({ | ||
| const w = M({ | ||
| ...p[d.connection], | ||
@@ -1219,3 +1248,3 @@ points: [...y] | ||
| p[d.connection] = { | ||
| ...C | ||
| ...w | ||
| }, this.localList[d.item].connections = [ | ||
@@ -1237,3 +1266,3 @@ ...p | ||
| handleSelectConnection(t) { | ||
| this.selectedConnection = t; | ||
| this.selectedConnection = { ...t }; | ||
| }, | ||
@@ -1244,4 +1273,4 @@ isConnectionExist(t, e) { | ||
| ).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; | ||
| const i = `${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 === i && e === r || t === r && e === i; | ||
| }); | ||
@@ -1271,11 +1300,11 @@ }, | ||
| }); | ||
| const be = ["id"], ve = { | ||
| const ke = ["id"], Ee = { | ||
| key: 0, | ||
| class: "connection connecting", | ||
| xmlns: "http://www.w3.org/2000/svg" | ||
| }, Ee = ["d"], ke = ["id"]; | ||
| function Ie(t, e, n, o, s, r) { | ||
| }, Ie = ["d"], Re = ["id"]; | ||
| function Te(t, e, n, o, i, r) { | ||
| const a = ft("sb-org-tree-item"); | ||
| return g(), S(v, null, [ | ||
| E("div", W({ | ||
| k("div", W({ | ||
| class: [{ | ||
@@ -1287,30 +1316,32 @@ connecting: t.connectorState.from, | ||
| }, { ...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"])) | ||
| onMousedown: e[0] || (e[0] = m((...s) => t.handleParentClick && t.handleParentClick(...s), ["stop"])), | ||
| onMousemove: e[1] || (e[1] = m((...s) => t.handleParentPosition && t.handleParentPosition(...s), ["stop"])), | ||
| onMouseup: e[2] || (e[2] = m((...s) => t.handleParentDragEnd && t.handleParentDragEnd(...s), ["stop"])), | ||
| onPointercancel: e[3] || (e[3] = (...s) => t.handleParentPointerUp && t.handleParentPointerUp(...s)), | ||
| onPointerdown: e[4] || (e[4] = (...s) => t.handleParentPointerDown && t.handleParentPointerDown(...s)), | ||
| onPointerleave: e[5] || (e[5] = (...s) => t.handleParentPointerUp && t.handleParentPointerUp(...s)), | ||
| onPointermove: e[6] || (e[6] = (...s) => t.handleParentPointerMove && t.handleParentPointerMove(...s)), | ||
| onPointerout: e[7] || (e[7] = (...s) => t.handleParentPointerUp && t.handleParentPointerUp(...s)), | ||
| onPointerup: e[8] || (e[8] = (...s) => t.handleParentPointerUp && t.handleParentPointerUp(...s)), | ||
| onTouchend: e[9] || (e[9] = m((...s) => t.handleParentDragEnd && t.handleParentDragEnd(...s), ["stop"])), | ||
| onTouchmove: e[10] || (e[10] = m((...s) => t.handleParentPosition && t.handleParentPosition(...s), ["stop"])), | ||
| onTouchstart: e[11] || (e[11] = m((...s) => t.handleParentClick && t.handleParentClick(...s), ["stop"])), | ||
| onWheel: e[12] || (e[12] = m((...s) => t.handleParentZoom && t.handleParentZoom(...s), ["stop"])) | ||
| }), [ | ||
| E("div", { | ||
| class: "canvas", | ||
| k("div", { | ||
| class: D(["canvas", { | ||
| "connection-selected": t.selectedConnection | ||
| }]), | ||
| ref: "canvas-tree", | ||
| style: R(t.canvasStyle) | ||
| }, [ | ||
| (g(!0), S(v, null, I(t.localList, (i, c) => (g(), z(a, W({ | ||
| (g(!0), S(v, null, I(t.localList, (s, 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}` | ||
| key: `${t.$.uid}-org-item-${c}`, | ||
| "selected-connection": t.selectedConnection | ||
| }, { | ||
| isEditable: t.isEditable, | ||
| item: i, | ||
| ...t.selectedConnection && { selectedConnection: t.selectedConnection } | ||
| item: s | ||
| }, { | ||
@@ -1322,10 +1353,10 @@ onChangePoint: t.handleChangeItemPoint, | ||
| 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", { | ||
| }), null, 16, ["canvas-state", "connector-state", "is-dragged", "selected-connection", "onChangePoint", "onDragConnection", "onDragItem", "onDragPoint", "onSelectConnection"]))), 128)), | ||
| t.connectorState.from ? (g(), S("svg", Ee, [ | ||
| k("path", { | ||
| d: t.connectorState.path | ||
| }, null, 8, Ee) | ||
| ])) : x("", !0) | ||
| ], 4) | ||
| ], 16, be), | ||
| }, null, 8, Ie) | ||
| ])) : L("", !0) | ||
| ], 6) | ||
| ], 16, ke), | ||
| (g(), z(pt, { to: "body" }, [ | ||
@@ -1337,9 +1368,9 @@ t.isExporting ? (g(), S("div", { | ||
| style: R(t.exportAreaStyle) | ||
| }, null, 12, ke)) : x("", !0) | ||
| }, null, 12, Re)) : L("", !0) | ||
| ])) | ||
| ], 64); | ||
| } | ||
| const xe = /* @__PURE__ */ tt(Ce, [["render", Ie]]); | ||
| const Me = /* @__PURE__ */ tt(ve, [["render", Te]]); | ||
| export { | ||
| xe as default | ||
| Me as default | ||
| }; |
@@ -5,3 +5,3 @@ { | ||
| "homepage": "http://edgarjuvianno.github.io/vue-sb-components", | ||
| "version": "2.0.0", | ||
| "version": "2.0.1", | ||
| "type": "module", | ||
@@ -8,0 +8,0 @@ "module": "./main.js", |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by0.17%
1284160
- Lines of code
- increased by0.15%
27038
No dependency changes