@appthen/x6-html-shape - npm Package Compare versions

Comparing version 0.1.1 to 0.1.3

dist/x6html.es.js

+import { ObjectExt as y, Dom as s, Markup as E, Node as l, NodeView as p, Graph as N, View as a } from "@antv/x6";
+import k from "react";
+import h from "react-dom";
+const c = "fo-shape-view";
+function L(t, e, n) {
+  e.addEventListener(t, function(r) {
+    n.dispatchEvent(new r.constructor(r.type, r)), r.preventDefault(), r.stopPropagation();
+  });
+}
+function f(t, e = 3) {
+  return !t || !s.isHTMLElement(t) || e <= 0 ? !1 : ["a", "button"].includes(s.tagName(t)) || t.getAttribute("role") === "button" || t.getAttribute("type") === "button" ? !0 : f(t.parentNode, e - 1);
+}
+function H(t) {
+  if (s.tagName(t) === "input") {
+    const n = t.getAttribute("type");
+    if (n == null || ["text", "password", "number", "email", "search", "tel", "url"].includes(
+      n
+    ))
+      return !0;
+  }
+  return !1;
+}
+function u(t = "rect", e = !0) {
+  return [
+    {
+      tagName: t,
+      selector: "body"
+    },
+    e ? E.getForeignObjectMarkup() : null,
+    {
+      tagName: "text",
+      selector: "label"
+    }
+  ].filter((n) => n);
+}
+function S(t) {
+  return {
+    view: t,
+    markup: u("rect", t === c),
+    attrs: {
+      body: {
+        // fill: "none",
+        // 这里很奇怪，none的时候不能触发节点移动，改成transparent可以触发
+        fill: "transparent",
+        stroke: "none",
+        refWidth: "100%",
+        refHeight: "100%"
+      },
+      label: {
+        fontSize: 14,
+        fill: "#333",
+        refX: "50%",
+        refY: "50%",
+        textAnchor: "middle",
+        textVerticalAnchor: "middle"
+      },
+      fo: {
+        refWidth: "100%",
+        refHeight: "100%"
+      }
+    },
+    propHooks(e) {
+      if (e.markup == null) {
+        const { primer: n, view: r } = e;
+        if (n && n !== "rect") {
+          e.markup = u(n, r === c);
+          let o = {};
+          n === "circle" ? o = {
+            refCx: "50%",
+            refCy: "50%",
+            refR: "50%"
+          } : n === "ellipse" && (o = {
+            refCx: "50%",
+            refCy: "50%",
+            refRx: "50%",
+            refRy: "50%"
+          }), e.attrs = y.merge(
+            {},
+            {
+              body: {
+                refWidth: null,
+                refHeight: null,
+                ...o
+              }
+            },
+            e.attrs || {}
+          );
+        }
+      }
+      return e;
+    }
+  };
+}
+function D(t) {
+  return function(n, r, o) {
+    return h.render(/* @__PURE__ */ k.createElement(t, { node: n, graph: r }), o), () => h.unmountComponentAtNode(o);
+  };
+}
+const d = "html-shape", m = "html-shape-view", A = l.define(S(m)), g = {};
+function O(t) {
+  const { shape: e, render: n, inherit: r = d, ...o } = t;
+  if (!e)
+    throw new Error("should specify shape in config");
+  g[e] = n, N.registerNode(
+    e,
+    {
+      inherit: r,
+      ...o
+    },
+    !0
+  );
+}
+const i = "html";
+class C extends p {
+  confirmUpdate(e) {
+    const n = super.confirmUpdate(e);
+    return this.handleAction(n, i, () => {
+      if (!this.mounted) {
+        const r = g[this.cell.shape], o = this.ensureComponentContainer();
+        r && o && (this.mounted = r(this.cell, this.graph, o) || !0, this.onMounted(), o.addEventListener("mousedown", this.prevEvent, !0), o.addEventListener("mouseup", this.prevEvent, !0));
+      }
+    });
+  }
+  prevEvent(e) {
+    (f(e.target) || H(e.target)) && (e.preventDefault(), e.stopPropagation());
+  }
+  ensureComponentContainer() {
+  }
+  onMounted() {
+  }
+  onUnMount() {
+  }
+  unmount() {
+    return typeof this.mounted == "function" && this.mounted(), this.componentContainer && this.componentContainer.remove(), this.onUnMount(), this;
+  }
+}
+C.config({
+  bootstrap: [i],
+  actions: {
+    component: i
+  }
+});
+class V extends C {
+  onMounted() {
+    this.onTranslate = this.updateTransform.bind(this), this.graph.on("translate", this.onTranslate), this.graph.on("scale", this.onTranslate), this.graph.on("node:change:position", this.onTranslate);
+  }
+  onUnMount() {
+    this.graph.off("translate", this.onTranslate), this.graph.off("scale", this.onTranslate), this.graph.off("node:change:position", this.onTranslate);
+  }
+  ensureComponentContainer() {
+    if (!this.graph.htmlContainer) {
+      const e = this.graph.htmlContainer = a.createElement(
+        "div",
+        !1
+      );
+      s.css(e, {
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        "touch-action": "none",
+        "user-select": "none",
+        "pointer-events": "none",
+        overflow: "hidden",
+        // ensure the node under selection and transform tool.
+        "z-index": 0
+      }), e.classList.add("x6-html-shape-container"), this.graph.container.append(e);
+    }
+    if (!this.componentContainer) {
+      const e = this.componentContainer = a.createElement(
+        "div",
+        !1
+      );
+      s.css(e, {
+        "pointer-events": "auto",
+        "touch-action": "none",
+        "user-select": "none",
+        "transform-origin": "center",
+        position: "absolute"
+      }), e.classList.add("x6-html-shape-node"), "click,dblclick,contextmenu,mousedown,mousemove,mouseup,mouseover,mouseout,mouseenter,mouseleave,mousewheel".split(
+        ","
+      ).forEach(
+        (r) => L(r, e, this.container)
+      ), this.graph.htmlContainer.append(e);
+    }
+    return this.componentContainer;
+  }
+  updateTransform(e) {
+    super.updateTransform();
+    const n = this.ensureComponentContainer(), { x: r, y: o } = this.graph.localToGraph(this.cell.getPosition()), { width: v, height: x } = this.cell.getSize(), w = this.graph.transform.getZoom(), b = getComputedStyle(this.container).cursor, T = this.cell.getZIndex(), M = this.graph.isSelected && this.graph.isSelected(this.cell);
+    s.css(n, {
+      cursor: b,
+      height: x + "px",
+      width: v + "px",
+      // set to front when select node.
+      "z-index": M ? 1e9 : T,
+      transform: `translate(${r}px, ${o}px) rotate(${this.cell.getAngle()}deg) scale(${w})`
+    });
+  }
+}
+p.registry.register(m, V, !0);
+l.registry.register(d, A, !0);
+export {
+  C as BaseHTMLShapeView,
+  A as HTMLShape,
+  d as HTMLShapeName,
+  V as HTMLShapeView,
+  m as HTMLView,
+  i as action,
+  D as createRender,
+  O as register
+};

package.json

 {
   "name": "@appthen/x6-html-shape",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
@@ -20,4 +20,4 @@ "files": [
   ],
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.umd.js",
+  "main": "dist/x6html.cjs.js",
+  "module": "dist/x6html.es.js",
   "types": "dist/index.d.ts",
@@ -24,0 +24,0 @@ "author": "fork from lloydzhou",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Improved metrics

Total package byte prevSize

25133

32.52%

Number of package files

10

11.11%

Lines of code

323

190.99%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes