@squeed/flow-sdk 0.1.2 → 0.1.3

package/dist/index.js

@@ -26230,35 +26230,40 @@ function KW() {
       if (a.dom_container)
         this._nodes_dom_container = a.dom_container;
       else {
-        let o = document.createElement("div");
-        o.style.position = "absolute", o.style.zIndex = 10, i.querySelector("canvas").parentNode.appendChild(o), this._nodes_dom_container = o;
-      }
-      this._resize_observer = new ResizeObserver((o) => {
-        for (let s of o) {
-          let l = s.target, u = l.__cy_id;
-          n.getElementById(u).style({ width: l.offsetWidth, height: l.offsetHeight, shape: "rectangle" });
-        }
-      }), n.on("add", "node", (o) => {
-        this._add_node(o.target);
-      }), n.on("remove", "node", (o) => {
-        this._remove_node(o.target);
+        let s = document.createElement("div");
+        s.style.position = "absolute", s.style.zIndex = 10, i.querySelector("canvas").parentNode.appendChild(s), this._nodes_dom_container = s;
+      }
+      this._resize_observer = new ResizeObserver((s) => {
+        for (let l of s) {
+          let u = l.target, c = u.__cy_id;
+          n.getElementById(c).style({ width: u.offsetWidth, height: u.offsetHeight, shape: "rectangle" });
+        }
+      }), n.on("add", "node", (s) => {
+        this._add_node(s.target);
+      }), n.on("remove", "node", (s) => {
+        this._remove_node(s.target);
       });
-      for (let o of n.nodes())
-        this._add_node(o);
-      n.on("pan zoom", (o) => {
-        let s = n.pan(), l = n.zoom(), u = "translate(" + s.x + "px," + s.y + "px) scale(" + l + ")";
-        this._nodes_dom_container.style.msTransform = u, this._nodes_dom_container.style.transform = u;
-      }), n.on("position bounds", "node", (o) => {
-        let s = o.target, l = s.id();
-        if (!this._node_dom[l])
+      for (let s of n.nodes())
+        this._add_node(s);
+      this._nodes_dom_container.style.willChange = "transform", this._nodes_dom_container.style.backfaceVisibility = "hidden";
+      let o = null;
+      n.on("pan zoom", () => {
+        o === null && (o = requestAnimationFrame(() => {
+          o = null;
+          let s = n.pan(), l = n.zoom(), u = "translate3d(" + s.x + "px," + s.y + "px,0) scale(" + l + ")";
+          this._nodes_dom_container.style.transform = u;
+        }));
+      }), this._panZoomRafId = o, n.on("position bounds", "node", (s) => {
+        let l = s.target, u = l.id();
+        if (!this._node_dom[u])
           return;
-        let u = this._node_dom[l], c = `translate(-50%, -50%) translate(${s.position("x").toFixed(2)}px, ${s.position("y").toFixed(2)}px)`;
-        u.style.webkitTransform = c, u.style.msTransform = c, u.style.transform = c, u.style.display = "inline", u.style.position = "absolute", u.style["z-index"] = 10;
+        let c = this._node_dom[u], d = `translate(-50%, -50%) translate3d(${l.position("x").toFixed(2)}px, ${l.position("y").toFixed(2)}px, 0)`;
+        c.style.transform = d, c.style.display = "inline", c.style.position = "absolute", c.style["z-index"] = 10;
       });
     }
     _add_node(n) {
       let a = n.data();
-      a.dom && (a.skip_node_append !== !0 && this._nodes_dom_container.appendChild(a.dom), a.dom.__cy_id = n.id(), this._node_dom[n.id()] = a.dom, this._resize_observer.observe(a.dom));
+      a.dom && (a.skip_node_append !== !0 && this._nodes_dom_container.appendChild(a.dom), a.dom.__cy_id = n.id(), a.dom.style.willChange = "transform", a.dom.style.backfaceVisibility = "hidden", this._node_dom[n.id()] = a.dom, this._resize_observer.observe(a.dom));
     }
     _remove_node(n) {
       let a = n.id(), i = this._node_dom[a];
@@ -26285,7 +26290,7 @@ function KW() {
         this._resize_observer.unobserve(this._node_dom[n]);
       for (; this._nodes_dom_container.firstChild; )
         this._nodes_dom_container.removeChild(this._nodes_dom_container.firstChild);
-      this._node_dom = {}, this._cy.removeListener("add", "node"), this._cy.removeListener("remove", "node"), this._cy.removeListener("pan zoom"), this._cy.removeListener("position bounds", "node"), this._params.dom_container || this._nodes_dom_container.parentNode.removeChild(this._nodes_dom_container), this._cy = null, this._params = null, this._nodes_dom_container = null, this._resize_observer = null;
+      this._node_dom = {}, this._cy.removeListener("add", "node"), this._cy.removeListener("remove", "node"), this._cy.removeListener("pan zoom"), this._cy.removeListener("position bounds", "node"), this._params.dom_container || this._nodes_dom_container.parentNode.removeChild(this._nodes_dom_container), this._panZoomRafId !== null && cancelAnimationFrame(this._panZoomRafId), this._cy = null, this._params = null, this._nodes_dom_container = null, this._resize_observer = null;
     }
   }
   function e(t) {