@farris/ui-vue/components/flow-canvas/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { ref as F, defineComponent as ct, inject as st, computed as at, watch as pt, createVNode as W, provide as rt, onMounted as yt } from "vue";
import { FDesignerCanvas as mt } from "../designer-canvas/index.esm.js";
const vt = {
  /**
   * 组件值
   */
  modelValue: { type: Object, default: {} }
};
function xt() {
  const v = { aroundDirection: "none", left: 2, right: 2, top: 2, bottom: 2, x: 0, y: 0 };
  function M() {
    const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
    return o.setAttribute("fill", "none"), o.setAttribute("stroke", "#4d53e8"), o.setAttribute("stroke-width", "2"), o.setAttribute("class", ""), o;
  }
  function X() {
    const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
    return o.setAttribute("fill", "none"), o.setAttribute("stroke", "#4d53e8"), o.setAttribute("stroke-width", "2"), o.setAttribute("stroke-linecap", "round"), o;
  }
  function _() {
    const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
    return o.setAttribute("fill", "none"), o.setAttribute("stroke", "#4d53e8"), o.setAttribute("stroke-width", "2"), o.setAttribute("stroke-linecap", "round"), o;
  }
  function w(o, t, s, r) {
    const e = (n) => {
      n.key === "Delete" && (o.indexOf("^"), document.removeEventListener("keydown", e), t.remove());
    };
    s.addEventListener("mouseenter", () => {
      s.setAttribute("stroke", "#37d0ff"), r.setAttribute("stroke", "#37d0ff"), s.setAttribute("stroke-width", "3"), document.addEventListener("keydown", e);
    }), s.addEventListener("mouseleave", () => {
      s.setAttribute("stroke", "#4d53e8"), s.setAttribute("stroke-width", "2"), r.setAttribute("stroke", "#4d53e8"), document.removeEventListener("keydown", e);
    });
  }
  function N(o) {
    let t = document.getElementById(o);
    if (t == null) {
      const s = document.createElementNS("http://www.w3.org/2000/svg", "svg"), r = M();
      s.appendChild(r);
      const e = X();
      s.appendChild(e);
      const n = _();
      s.appendChild(n);
      const c = _();
      s.appendChild(c), t = document.createElement("div"), t.id = o, t.style.position = "absolute", t.appendChild(s), w(o, t, r, e);
      const a = document.getElementById("svg-container");
      return a && a.appendChild(t), t;
    }
    return t;
  }
  function b(o, t, s, r, e) {
    const n = { x: 0, y: 0 };
    return o === "west" && (t === "north_west" && (s === "north" && (n.x = 0, n.y = 0 - e / 2), s === "west" && (n.x = 0 - r / 2, n.y = 0)), t === "north_east" && (s === "north" && (n.x = -100, n.y = 0 - e / 2), s === "east" && (n.x = -100, n.y = 0 - e / 2)), t === "south_east" && (s === "south" && (n.x = -100, n.y = 0 + e / 2), s === "east" && (n.x = -100, n.y = 0 + e / 2)), t === "south_west" && (s === "south" && (n.x = 0, n.y = 0 + e / 2), s === "west" && (n.x = 0 - r / 2, n.y = 0))), o === "east" && (t === "north_west" && (s === "north" && (n.x = -100, n.y = 0 - e / 2), s === "west" && (n.x = 100, n.y = 0 - e / 2)), t === "north_east" && (s === "north" && (n.x = 0, n.y = 0 - e / 2), s === "east" && (n.x = 0 + r / 2, n.y = 0)), t === "south_east" && (s === "south" && (n.x = 0, n.y = 0 + e / 2), s === "east" && (n.x = 0 + r / 2, n.y = 0)), t === "south_west" && (s === "south" && (n.x = 100, n.y = 0 + e / 2), s === "west" && (n.x = 100, n.y = 0 + e / 2))), o === "north" && (t === "north_west" && (s === "north" && (n.x = 0, n.y = 0 - e / 2), s === "west" && (n.x = 0 - r / 2, n.y = 0)), t === "north_east" && (s === "north" && (n.x = 0, n.y = 0 - e / 2), s === "east" && (n.x = 0 + r / 2, n.y = 0)), t === "south_east" && (s === "south" && (n.x = 0 + r / 2, n.y = -100), s === "east" && (n.x = 0 + r / 2, n.y = -100)), t === "south_west" && (s === "south" && (n.x = 0 - r / 2, n.y = -100), s === "west" && (n.x = 0 - r / 2, n.y = -100))), o === "south" && (t === "north_west" && (s === "north" && (n.x = 0 - r / 2, n.y = 100), s === "west" && (n.x = 0 - r / 2, n.y = 100)), t === "north_east" && (s === "north" && (n.x = 0 + r / 2, n.y = 100), s === "east" && (n.x = 0 + r / 2, n.y = 100)), t === "south_east" && (s === "south" && (n.x = 0, n.y = 0 + e / 2), s === "east" && (n.x = 0 + r / 2, n.y = 0)), t === "south_west" && (s === "south" && (n.x = 0, n.y = e / 2), s === "west" && (n.x = 0 - r / 2, n.y = 0))), n;
  }
  function g(o, t, s, r) {
    const e = { x: 0, y: 0 };
    return o === "south" && (t === "west" && (e.x = -100, e.y = 0 - r / 2), t === "east" && (e.x = 100, e.y = -100), t === "south" && (e.x = 0 - s / 2, e.y = 100), (t === "north" || t === "center") && (e.x = 0, e.y = 0 - r / 2)), o === "north" && (t === "west" && (e.x = -100, e.y = 100), t === "east" && (e.x = 100, e.y = 100), t === "north" && (e.x = 0 - s / 2, e.y = -100), (t === "south" || t === "center") && (e.x = 0, e.y = r / 2)), o === "east" && (t === "north" && (e.y = -100, e.x = -100), t === "south" && (e.y = 100, e.x = -100), t === "east" && (e.x = 100, e.y = 100), (t === "west" || t === "center") && (e.x = 0 - s / 2, e.y = 0)), o === "west" && (t === "north" && (e.y = -100, e.x = 100), t === "south" && (e.y = 100, e.x = 100), t === "west" && (e.x = -100, e.y = r / 2), (t === "east" || t === "center") && (e.x = s / 2, e.y = 0)), e;
  }
  function k(o, t, s, r, e, n, c) {
    const a = c === "south" || c === "east" ? "portrait" : "landscape", C = e, h = a === "landscape" ? "east" : "north", S = c === "center" ? a === "landscape" ? "west" : "south" : c, E = b(C, n, h, o, t), { x: i, y: p } = E, V = g(h, S, o, t), { x: f, y: u } = V;
    u < 0 && (t += Math.abs(u));
    const j = /* @__PURE__ */ new Map([["default", 0 + i], ["portrait", 0 + i], ["landscape", 0 + i]]), y = /* @__PURE__ */ new Map([["default", t + p], ["portrait", t + p], ["landscape", t + p]]);
    i < 0 && (o += Math.abs(i)), f > 0 && (o += f);
    const Q = /* @__PURE__ */ new Map([["default", o + f], ["portrait", o + f], ["landscape", o + f]]), z = /* @__PURE__ */ new Map([["default", 0 + u], ["portrait", 0 + u], ["landscape", 0 + u]]), T = r.left > v.left, O = r.bottom > v.bottom, G = T ? 0 : O ? o / 2 : j.get(a), H = O ? t + r.bottom : T ? t / 2 : y.get(a), U = Q.get(a), J = z.get(a);
    return [{ x: G, y: H }, { x: U, y: J }, { x: f, y: u }];
  }
  function Z(o, t, s, r, e, n, c) {
    const a = c === "south" || c === "west" ? "portrait" : "landscape", C = e, h = a === "landscape" ? "west" : "north", S = c, E = b(C, n, h, o, t), { x: i, y: p } = E, V = g(h, S, o, t), { x: f, y: u } = V;
    u < 0 && (t += Math.abs(u)), i > 0 && (o += i), f < 0 && (o += Math.abs(f));
    const j = /* @__PURE__ */ new Map([["default", o + i], ["portrait", o + i], ["landscape", o + i]]), y = /* @__PURE__ */ new Map([["default", t + p], ["portrait", t + p], ["landscape", t + p]]), Q = /* @__PURE__ */ new Map([["default", 0 + f], ["portrait", 0 + f], ["landscape", 0 + f]]), z = /* @__PURE__ */ new Map([["default", 0 + u], ["portrait", 0 + u], ["landscape", 0 + u]]), T = r.right > v.right, O = r.bottom > v.bottom, G = T ? o + r.right : O ? o / 2 : j.get(a), H = O ? t + r.bottom : T ? t / 2 : y.get(a), U = Q.get(a), J = z.get(a);
    return [{ x: G, y: H }, { x: U, y: J }, { x: f, y: u }];
  }
  function q(o, t, s, r, e, n, c) {
    const a = c === "north" || c === "east" ? "portrait" : "landscape", C = e, h = a === "landscape" ? "east" : "south", S = c, E = b(C, n, h, o, t), { x: i, y: p } = E, V = g(h, S, o, t), { x: f, y: u } = V, j = /* @__PURE__ */ new Map([["default", 0 + i], ["portrait", 0 + i], ["landscape", 0 + i]]), y = /* @__PURE__ */ new Map([["default", 0 + p], ["portrait", 0 + p], ["landscape", 0 + p]]);
    i < 0 && (o += Math.abs(i)), p < 0 && (t += Math.abs(p)), f > 0 && (o += f), u > 0 && (t += u);
    const Q = /* @__PURE__ */ new Map([["default", o + f], ["portrait", o + f], ["landscape", o + f]]), z = /* @__PURE__ */ new Map([["default", t + u], ["portrait", t + u], ["landscape", t + u]]), T = r.left > v.left, O = r.top > v.top, G = T ? 0 : O ? o / 2 : j.get(a), H = O ? 0 : T ? t / 2 : y.get(a), U = Q.get(a), J = z.get(a);
    return [{ x: G, y: H }, { x: U, y: J }, { x: f, y: u }];
  }
  function D(o, t, s, r, e, n, c) {
    const a = c === "north" || c === "west" ? "portrait" : "landscape", C = e, h = a === "landscape" ? "west" : "south", S = c, E = b(C, n, h, o, t), { x: i, y: p } = E, V = g(h, S, o, t), { x: f, y: u } = V;
    f < 0 && (o += Math.abs(f));
    const j = /* @__PURE__ */ new Map([["default", o + i], ["portrait", o + i], ["landscape", o + i]]), y = /* @__PURE__ */ new Map([["default", 0 + p], ["portrait", 0 + p], ["landscape", 0 + p]]);
    p < 0 && (t += Math.abs(p)), u > 0 && (t += u);
    const Q = /* @__PURE__ */ new Map([["default", 0 + f], ["portrait", 0 + f], ["landscape", 0 + f]]), z = /* @__PURE__ */ new Map([["default", t + u], ["portrait", t + u], ["landscape", t + u]]), T = r.right > v.right, O = r.top > v.top, G = T ? o + r.right : O ? o / 2 : j.get(a), H = O ? 0 : T ? t / 2 : y.get(a), U = Q.get(a), J = z.get(a);
    return [{ x: G, y: H }, { x: U, y: J }, { x: f, y: u }];
  }
  const P = /* @__PURE__ */ new Map([
    ["north_east", k],
    ["north_west", Z],
    ["south_east", q],
    ["south_west", D]
  ]), Y = /* @__PURE__ */ new Map([
    ["east", ["north_west", "south_west"]],
    ["west", ["north_east", "south_east"]],
    ["north", ["south_west", "south_east"]],
    ["south", ["north_west", "north_east"]],
    ["center", []]
  ]);
  function d(o, t) {
    return o === "north_west" ? {
      aroundDirection: "north_west",
      left: t.left,
      right: 100,
      top: t.top,
      bottom: t.top
    } : o === "south_west" ? {
      aroundDirection: "south_west",
      left: t.left,
      right: 100,
      top: t.top,
      bottom: t.bottom
    } : t;
  }
  function $(o, t) {
    return o === "north_east" ? {
      left: 100,
      right: t.right,
      top: t.top,
      bottom: t.top
    } : o === "south_east" ? {
      left: 100,
      right: t.right,
      top: t.top,
      bottom: t.bottom
    } : t;
  }
  function A(o, t) {
    return o === "south_west" ? {
      left: t.left,
      right: t.right,
      top: 100,
      bottom: t.top
    } : o === "south_east" ? {
      left: t.left,
      right: t.right,
      top: 100,
      bottom: t.bottom
    } : t;
  }
  function B(o, t) {
    return o === "north_west" ? {
      left: t.left,
      right: t.right,
      top: t.top,
      bottom: 100
    } : o === "north_east" ? {
      left: t.left,
      right: t.right,
      top: t.top,
      bottom: 100
    } : t;
  }
  function l(o, t) {
    return t;
  }
  const x = /* @__PURE__ */ new Map([
    ["east", d],
    ["west", $],
    ["north", A],
    ["south", B],
    ["center", l]
  ]);
  function R(o, t, s, r) {
    const e = t.x - o.x, n = t.y - o.y, c = e >= 0 ? "east" : "west", a = n >= 0 ? "south" : "north", C = `${a}_${c}`, S = (Y.get(s) || []).includes(C), E = x.get(s), i = S ? E(C, v) : v, p = Math.abs(e), V = Math.abs(n), f = P.get(`${a}_${c}`), [u, j, y] = f(
      p,
      V,
      S,
      i,
      s,
      C,
      r
    ), Q = c === "west" ? y.x < 0 ? Math.abs(y.x) : 0 : y.x > 0 ? y.x : 0, z = i.left + i.right + p + Q, T = a === "north" ? y.y < 0 ? Math.abs(y.y) : 0 : y.y > 0 ? y.y : 0, O = i.top + i.bottom + V + T, G = c === "east" ? o.x - i.left : o.x + i.right - z, H = a === "south" ? o.y - i.top : o.y + i.bottom - O, U = c === "east" ? i.left : z - i.right, J = a === "north" ? O - i.bottom : i.top, ut = c === "west" ? y.x < 0 ? Math.abs(y.x) : 0 : y.x < 0 ? z : z - y.x, dt = a === "north" ? y.y < 0 ? Math.abs(y.y) : 0 : y.y < 0 ? O : O - y.y;
    return { width: z, height: O, left: G, top: H, startPoinInBoundray: { x: U, y: J }, firstControlPoint: u, secondControlPoint: j, endPoinInBoundray: { x: ut, y: dt } };
  }
  function I(o, t, s, r, e) {
    o.style.position = "absolute", o.style.alignItems = "center", o.style.left = `${t}px`, o.style.top = `${s}px`, o.style.width = r + "px", o.style.height = e + "px";
  }
  function tt(o, t, s, r, e, n, c) {
    const a = o.childNodes[0];
    a.setAttribute("width", String(t)), a.setAttribute("height", String(s)), o.appendChild(a);
    const C = a.childNodes[0], h = `${r.x} ${r.y}`, S = `${e.x} ${e.y}`, E = `${n.x} ${n.y}`, i = `${c.x} ${c.y}`, p = "M ".concat(h).concat(" C ").concat(S).concat("," + E + ",").concat(i);
    C.setAttribute("d", p), C.setAttribute("fill", "none"), C.setAttribute("stroke", "#4d53e8"), C.setAttribute("stroke-width", "2"), C.setAttribute("class", "");
  }
  function ot(o, t, s, r, e) {
    const {
      width: n,
      height: c,
      left: a,
      top: C,
      startPoinInBoundray: h,
      firstControlPoint: S,
      secondControlPoint: E,
      endPoinInBoundray: i
    } = R(t, s, r, e);
    I(o, a, C, n, c), tt(o, n, c, h, S, E, i);
  }
  function nt(o, t, s, r, e) {
    const n = N(o);
    ot(n, t, s, r, e);
  }
  function et(o) {
    return Number(o.replace("px", ""));
  }
  function it(o) {
    if (o !== null) {
      const t = o.parentNode, s = et(t.style.left), r = et(t.style.top);
      return {
        x: s + o.offsetLeft + o.offsetWidth / 2,
        y: r + o.offsetTop + o.offsetHeight / 2
      };
    }
    return { x: 0, y: 0 };
  }
  function lt(o, t) {
    const s = document.getElementById(o), r = document.getElementById(t), e = it(s), n = it(r), c = e.x + 2, a = e.y, C = n.x - 2, h = n.y;
    return { startPoint: { x: c, y: a }, endPoint: { x: C, y: h } };
  }
  function ft(o, t, s, r) {
    const { startPoint: e, endPoint: n } = lt(o, t);
    nt(`${o}_${t}`, e, n, s, r);
  }
  return { connect: ft, drawing: nt };
}
function wt(L) {
  const K = F(), m = F(0), v = F(0), M = F({ x: 0, y: 0 }), X = F(), { drawing: _ } = L;
  function w(d) {
    return Number(d.replace("px", ""));
  }
  function N(d) {
    return (d && d.className && d.className.split ? d.className.split(" ") : []).includes("f-flow-ancher");
  }
  function b(d) {
    switch ((d ? d.className.split(" ") : []).find((B) => B.startsWith("circle-")) || "") {
      case "circle-left":
        return "west";
      case "circle-right":
        return "east";
      case "circle-top":
        return "north";
      case "circle-bottom":
        return "south";
      default:
        return "center";
    }
  }
  function g(d, $, A) {
    const B = A.getBoundingClientRect();
    m.value = B.left, v.value = B.top, M.value = { x: d, y: $ }, K.value = b(A);
  }
  function k(d) {
    var I;
    const $ = d.clientX - m.value, A = d.clientY - v.value, B = M.value.x + $, l = M.value.y + A, x = d.target, R = x && typeof x.className == "string" && N(x) ? b(x) : "center";
    _(
      `${(I = X.value) == null ? void 0 : I.id}_curve_to`,
      { x: M.value.x, y: M.value.y },
      { x: B, y: l },
      K.value,
      R
    );
  }
  function Z(d) {
    const $ = document.getElementById(d);
    $ && $.remove();
  }
  function q() {
    document.addEventListener("mousemove", k);
  }
  function D() {
    document.removeEventListener("mousemove", k);
  }
  function P(d) {
    X.value = void 0, D();
  }
  function Y(d, $) {
    X.value = document.getElementById(d);
    const A = X.value.offsetParent, B = X.value.getBoundingClientRect(), l = A.getBoundingClientRect(), x = w(A.style.left) + (B.left - l.left), R = w(A.style.top) + (B.top - l.top), I = x + B.width / 2, tt = R + B.height / 2;
    g(I, tt, X.value), q();
  }
  return { drawFrom: Y, eraseDrawingLine: Z, finishToDraw: P, getAncherPointPosition: b, isAncherPoint: N };
}
const Ct = {
  id: { type: String, default: "" },
  type: { type: String, default: "" },
  /**
   * 组件值
   */
  modelValue: { type: Object },
  x: { type: Number, default: 0 },
  y: { type: Number, default: 0 },
  connection: { type: Array, default: [] }
}, Pt = /* @__PURE__ */ ct({
  name: "FFlowNodeItem",
  props: Ct,
  emits: [],
  setup(L, K) {
    const m = F(L.id), v = F(L.modelValue), M = F(), X = st("use-drawing-bezier-composition"), {
      drawFrom: _,
      eraseDrawingLine: w,
      finishToDraw: N,
      getAncherPointPosition: b,
      isAncherPoint: g
    } = X, k = st("use-bezier-curve-composition"), {
      connect: Z
    } = k, q = st("use-connections-composition"), {
      addConnection: D,
      getConnectionsOfNode: P
    } = q;
    new Map(L.connection);
    const Y = at(() => ({
      left: `${L.x}px`,
      top: `${L.y}px`
    }));
    function d(l, x) {
      if (g(l) && g(x)) {
        const R = b(l), I = b(x);
        Z(l.id, x.id, R, I);
        const tt = l.id, ot = x.id, nt = tt.split(/(-left-point|-right-point|-top-point|-bottom-point)/, 1)[0], et = ot.split(/(-left-point|-right-point|-top-point|-bottom-point)/, 1)[0];
        D(nt, tt, et, ot);
      }
    }
    function $(l) {
      var x;
      document.removeEventListener("mouseup", $), N(l), w(`${(x = M.value) == null ? void 0 : x.id}_curve_to`), d(M.value, l.target);
    }
    function A(l, x) {
      M.value = document.getElementById(l), _(l, x), document.addEventListener("mouseup", $), x.stopPropagation();
    }
    pt([() => L.x, () => L.y], () => {
      const l = P(m.value);
      l.length && l.forEach((x) => {
        const R = document.getElementById(x.from), I = document.getElementById(x.to);
        R && I && d(R, I);
      });
    });
    const B = at(() => ({
      "node-content": !0
    }));
    return () => W("div", {
      id: m.value,
      class: "br-node",
      style: Y.value
    }, [W("div", {
      id: `${m.value}-left-point`,
      class: "f-flow-ancher circle-left",
      onMousedown: (l) => A(`${m.value}-left-point`, l)
    }, null), W("div", {
      id: `${m.value}-top-point`,
      class: "f-flow-ancher circle-top",
      onMousedown: (l) => A(`${m.value}-top-point`, l)
    }, null), W("div", {
      id: `${m.value}-content`,
      class: B.value,
      style: "min-width:200px;min-height:200px;"
    }, [v.value && W(mt, {
      modelValue: v.value,
      "onUpdate:modelValue": (l) => v.value = l
    }, null)]), W("div", {
      id: `${m.value}-right-point`,
      class: "f-flow-ancher circle-right",
      onMousedown: (l) => A(`${m.value}-right-point`, l)
    }, null), W("div", {
      id: `${m.value}-bottom-point`,
      class: "f-flow-ancher circle-bottom",
      onMousedown: (l) => A(`${m.value}-bottom-point`, l)
    }, null)]);
  }
});
function gt(L) {
  const K = /* @__PURE__ */ new Map(), m = /* @__PURE__ */ new Map();
  function v(_, w) {
    const N = m.get(_) || [];
    N.filter(
      (g) => w.from === g.from && w.to === g.to
    ).length > 0 || (N.push(w), m.set(_, N));
  }
  function M(_, w, N, b) {
    const g = new Set(K.get(w) || []);
    g.add(b), K.set(w, [...g]);
    const k = { from: w, to: b, type: "Curve" };
    v(_, k), v(N, k);
  }
  function X(_) {
    return m.get(_) || [];
  }
  return { addConnection: M, getConnectionsOfNode: X };
}
const Mt = /* @__PURE__ */ ct({
  name: "FFlowCanvas",
  props: vt,
  emits: [],
  setup(L, K) {
    const m = F(), v = xt(), M = wt(v), X = gt();
    rt("use-bezier-curve-composition", v), rt("use-connections-composition", X), rt("use-drawing-bezier-composition", M);
    const _ = at(() => ({
      transition: "transform 0.2s",
      "background-color": "#F2F3F5",
      height: "100%",
      width: "100%",
      position: "relative"
    }));
    yt(() => {
      m.value = L.modelValue;
    });
    const w = F(), N = F(), b = F(), g = F(), k = F();
    function Z(P) {
      const Y = P.clientX - g.value, d = P.clientY - k.value;
      w.value && w.value.position && (w.value.position.x = N.value + Y, w.value.position.y = b.value + d);
    }
    function q() {
      document.removeEventListener("mousemove", Z), document.removeEventListener("mouseup", q), w.value = void 0, g.value = void 0, k.value = void 0;
    }
    function D(P, Y) {
      w.value = P, N.value = P.position.x, b.value = P.position.y, g.value = Y.clientX, k.value = Y.clientY, document.addEventListener("mousemove", Z), document.addEventListener("mouseup", q);
    }
    return () => W("div", {
      class: "f-flow-canvas editorDiv flex-fill h-100"
    }, [W("div", {
      id: "svg-container",
      class: "f-struct-wrapper flex-fill",
      style: _.value
    }, [m.value && m.value.contents.map((P) => W(Pt, {
      modelValue: P.content[0],
      "onUpdate:modelValue": (Y) => P.content[0] = Y,
      id: P.id,
      x: P.position.x,
      y: P.position.y,
      onMousedown: (Y) => D(P, Y)
    }, null))])]);
  }
});
export {
  Mt as FFlowCanvas,
  vt as flowCanvasProps
};