f1ow 1.1.0 → 1.1.1

package/dist/syncBridge-BBEfPdNb.js

@@ -0,0 +1,254 @@
+import * as A from "yjs";
+import { useCanvasStore as w } from "./f1ow.js";
+import { getYElements as _, getYDoc as W } from "./yjsProvider-CXmqUJXr.js";
+const R = [
+  "id",
+  "type",
+  "x",
+  "y",
+  "width",
+  "height",
+  "rotation",
+  "isLocked",
+  "isVisible",
+  "sortOrder",
+  "version"
+], T = [
+  "strokeColor",
+  "fillColor",
+  "strokeWidth",
+  "opacity",
+  "strokeStyle",
+  "roughness",
+  "fontSize",
+  "fontFamily"
+];
+function B(t, e) {
+  const s = t;
+  for (const i of R) {
+    const r = s[i];
+    r !== void 0 && e.set(i, r);
+  }
+  if (t.style)
+    for (const i of T)
+      e.set(`style.${i}`, t.style[i]);
+  switch (t.boundElements ? e.set("boundElements", JSON.stringify(t.boundElements)) : e.set("boundElements", null), t.ports && e.set("ports", JSON.stringify(t.ports)), "lineStyle" in t && t.lineStyle && e.set("lineStyle", JSON.stringify(t.lineStyle)), t.ports && e.set("ports", JSON.stringify(t.ports)), "lineStyle" in t && t.lineStyle && e.set("lineStyle", JSON.stringify(t.lineStyle)), t.groupIds && e.set("groupIds", JSON.stringify(t.groupIds)), t.type) {
+    case "rectangle":
+      e.set("cornerRadius", t.cornerRadius);
+      break;
+    case "line":
+    case "arrow":
+      e.set("points", JSON.stringify(t.points)), e.set("lineType", t.lineType), t.curvature !== void 0 && e.set("curvature", t.curvature), e.set("startBinding", t.startBinding ? JSON.stringify(t.startBinding) : null), e.set("endBinding", t.endBinding ? JSON.stringify(t.endBinding) : null), t.type === "arrow" && (e.set("startArrowhead", t.startArrowhead), e.set("endArrowhead", t.endArrowhead));
+      break;
+    case "freedraw":
+      e.set("points", JSON.stringify(t.points));
+      break;
+    case "text":
+      e.set("text", t.text), e.set("containerId", t.containerId), e.set("textAlign", t.textAlign), e.set("verticalAlign", t.verticalAlign);
+      break;
+    case "image":
+      e.set("src", t.src), e.set("naturalWidth", t.naturalWidth), e.set("naturalHeight", t.naturalHeight), e.set("scaleMode", t.scaleMode), e.set("crop", t.crop ? JSON.stringify(t.crop) : null), e.set("cornerRadius", t.cornerRadius), e.set("alt", t.alt);
+      break;
+  }
+}
+function E(t) {
+  const e = t.get("type"), s = t.get("id");
+  if (!e || !s) return null;
+  const i = {};
+  for (const n of T) {
+    const h = t.get(`style.${n}`);
+    h !== void 0 && (i[n] = h);
+  }
+  const r = {
+    id: s,
+    type: e,
+    x: t.get("x") ?? 0,
+    y: t.get("y") ?? 0,
+    width: t.get("width") ?? 100,
+    height: t.get("height") ?? 100,
+    rotation: t.get("rotation") ?? 0,
+    isLocked: t.get("isLocked") ?? !1,
+    isVisible: t.get("isVisible") ?? !0,
+    version: t.get("version") ?? 0,
+    style: i,
+    boundElements: u(t.get("boundElements")) ?? null,
+    groupIds: u(t.get("groupIds")) ?? void 0,
+    sortOrder: t.get("sortOrder") ?? void 0,
+    ports: u(t.get("ports")) ?? void 0
+  };
+  switch (e) {
+    case "rectangle":
+      r.cornerRadius = t.get("cornerRadius") ?? 0;
+      break;
+    case "line":
+    case "arrow":
+      r.points = u(t.get("points")) ?? [0, 0, 100, 0], r.lineType = t.get("lineType") ?? "sharp", r.curvature = t.get("curvature") ?? void 0, r.startBinding = u(t.get("startBinding")), r.endBinding = u(t.get("endBinding")), e === "arrow" && (r.startArrowhead = t.get("startArrowhead") ?? null, r.endArrowhead = t.get("endArrowhead") ?? "arrow");
+      {
+        const n = u(t.get("lineStyle"));
+        n && (r.lineStyle = n);
+      }
+      break;
+    case "freedraw":
+      r.points = u(t.get("points")) ?? [];
+      break;
+    case "text":
+      r.text = t.get("text") ?? "", r.containerId = t.get("containerId") ?? null, r.textAlign = t.get("textAlign") ?? "center", r.verticalAlign = t.get("verticalAlign") ?? "middle";
+      break;
+    case "image":
+      r.src = t.get("src") ?? "", r.naturalWidth = t.get("naturalWidth") ?? 0, r.naturalHeight = t.get("naturalHeight") ?? 0, r.scaleMode = t.get("scaleMode") ?? "fit", r.crop = u(t.get("crop")) ?? null, r.cornerRadius = t.get("cornerRadius") ?? 0, r.alt = t.get("alt") ?? "";
+      break;
+  }
+  return r;
+}
+function u(t) {
+  if (t == null) return null;
+  try {
+    return JSON.parse(t);
+  } catch {
+    return null;
+  }
+}
+let m = !1, S = !1, x = null, J = null, O = null, a = [];
+function $(t = 50) {
+  const e = W(), s = _();
+  if (!e || !s)
+    return;
+  if (H(), s.size > 0) {
+    m = !0;
+    const o = C(s);
+    w.getState().setElements(o), a = o, m = !1;
+  } else {
+    const o = w.getState().elements;
+    o.length > 0 && (S = !0, e.transact(() => {
+      for (const l of o) {
+        const c = new A.Map();
+        B(l, c), s.set(l.id, c);
+      }
+    }, "local-init"), S = !1), a = o;
+  }
+  const i = (o, l) => {
+    if (l.origin === "local-sync" || l.origin === "local-init" || S) return;
+    m = !0;
+    const c = w.getState();
+    let d = [...a], v = !1;
+    for (const [f, g] of o.keys)
+      if (g.action === "add" || g.action === "update") {
+        const b = s.get(f);
+        if (b) {
+          const k = E(b);
+          if (k) {
+            const N = d.findIndex((I) => I.id === f);
+            N >= 0 ? d[N] = k : d.push(k), v = !0;
+          }
+        }
+      } else g.action === "delete" && (d = d.filter((b) => b.id !== f), v = !0);
+    v && (d.sort((f, g) => f.sortOrder && g.sortOrder ? f.sortOrder < g.sortOrder ? -1 : f.sortOrder > g.sortOrder ? 1 : 0 : 0), c.setElements(d), a = d), m = !1;
+  };
+  let r = null;
+  const n = /* @__PURE__ */ new Set(), h = (o) => {
+    if (!S) {
+      for (const l of o) {
+        let c = l.target;
+        for (; c && !(c instanceof A.Map && c.parent === s); )
+          c = c.parent;
+        if (c instanceof A.Map) {
+          const d = c.get("id");
+          d && n.add(d);
+        }
+      }
+      r && clearTimeout(r), r = setTimeout(() => {
+        if (n.size === 0 || S) return;
+        m = !0;
+        let l = [...a], c = !1;
+        for (const d of n) {
+          const v = s.get(d);
+          if (!v) continue;
+          const f = E(v);
+          if (!f) continue;
+          const g = l.findIndex((b) => b.id === d);
+          g >= 0 && (l[g] = f, c = !0);
+        }
+        n.clear(), c && (w.getState().setElements(l), a = l), m = !1;
+      }, 16);
+    }
+  };
+  s.observe(i), s.observeDeep(h), J = () => {
+    s.unobserve(i), s.unobserveDeep(h), r && clearTimeout(r), n.clear();
+  }, x = w.subscribe(
+    (o) => {
+      m || o.elements !== a && (O && clearTimeout(O), O = setTimeout(() => {
+        L(o.elements, s, e);
+      }, t));
+    }
+  );
+}
+function H() {
+  x && (x(), x = null), J && (J(), J = null), O && (clearTimeout(O), O = null), a = [];
+}
+function L(t, e, s) {
+  S = !0, a = t;
+  const i = /* @__PURE__ */ new Map();
+  for (const r of t)
+    i.set(r.id, r);
+  s.transact(() => {
+    for (const [r] of e.entries())
+      i.has(r) || e.delete(r);
+    for (const r of t) {
+      let n = e.get(r.id);
+      n ? Y(r, n) : (n = new A.Map(), B(r, n), e.set(r.id, n));
+    }
+  }, "local-sync"), S = !1;
+}
+function Y(t, e) {
+  const s = t;
+  for (const r of R) {
+    const n = s[r];
+    n !== e.get(r) && e.set(r, n);
+  }
+  if (t.style)
+    for (const r of T) {
+      const n = t.style[r];
+      n !== e.get(`style.${r}`) && e.set(`style.${r}`, n);
+    }
+  const i = t.boundElements ? JSON.stringify(t.boundElements) : null;
+  switch (i !== e.get("boundElements") && e.set("boundElements", i), t.type) {
+    case "rectangle":
+      t.cornerRadius !== e.get("cornerRadius") && e.set("cornerRadius", t.cornerRadius);
+      break;
+    case "line":
+    case "arrow": {
+      const n = JSON.stringify(t.points);
+      n !== e.get("points") && e.set("points", n), t.lineType !== e.get("lineType") && e.set("lineType", t.lineType), t.curvature !== e.get("curvature") && e.set("curvature", t.curvature);
+      const h = t.startBinding ? JSON.stringify(t.startBinding) : null;
+      h !== e.get("startBinding") && e.set("startBinding", h);
+      const o = t.endBinding ? JSON.stringify(t.endBinding) : null;
+      o !== e.get("endBinding") && e.set("endBinding", o), t.type === "arrow" && (t.startArrowhead !== e.get("startArrowhead") && e.set("startArrowhead", t.startArrowhead), t.endArrowhead !== e.get("endArrowhead") && e.set("endArrowhead", t.endArrowhead));
+      break;
+    }
+    case "freedraw": {
+      const n = JSON.stringify(t.points);
+      n !== e.get("points") && e.set("points", n);
+      break;
+    }
+    case "text":
+      t.text !== e.get("text") && e.set("text", t.text), t.containerId !== e.get("containerId") && e.set("containerId", t.containerId), t.textAlign !== e.get("textAlign") && e.set("textAlign", t.textAlign), t.verticalAlign !== e.get("verticalAlign") && e.set("verticalAlign", t.verticalAlign);
+      break;
+    case "image":
+      t.src !== e.get("src") && e.set("src", t.src), t.naturalWidth !== e.get("naturalWidth") && e.set("naturalWidth", t.naturalWidth), t.naturalHeight !== e.get("naturalHeight") && e.set("naturalHeight", t.naturalHeight), t.scaleMode !== e.get("scaleMode") && e.set("scaleMode", t.scaleMode);
+      const r = t.crop ? JSON.stringify(t.crop) : null;
+      r !== e.get("crop") && e.set("crop", r), t.cornerRadius !== e.get("cornerRadius") && e.set("cornerRadius", t.cornerRadius), t.alt !== e.get("alt") && e.set("alt", t.alt);
+      break;
+  }
+}
+function C(t) {
+  const e = [];
+  for (const [, s] of t.entries()) {
+    const i = E(s);
+    i && e.push(i);
+  }
+  return e.sort((s, i) => s.sortOrder && i.sortOrder ? s.sortOrder < i.sortOrder ? -1 : s.sortOrder > i.sortOrder ? 1 : 0 : 0), e;
+}
+export {
+  $ as startSync,
+  H as stopSync
+};

package/dist/yjsProvider-CXmqUJXr.js

@@ -0,0 +1,72 @@
+import * as c from "yjs";
+import { WebsocketProvider as i } from "y-websocket";
+let n = null, e = null, u = null, l = /* @__PURE__ */ new Set();
+function w(t) {
+  return e && d(), u = t, n = new c.Doc(), e = new i(
+    t.serverUrl,
+    t.roomName,
+    n,
+    {
+      connect: !0,
+      params: t.authToken ? { token: t.authToken } : void 0
+    }
+  ), e.awareness.setLocalState({
+    user: t.user,
+    cursor: null,
+    selectedIds: []
+  }), e.on("status", (r) => {
+    const o = r.status;
+    for (const s of l)
+      s(o);
+  }), { doc: n, provider: e };
+}
+function d() {
+  e && (e.awareness.setLocalState(null), e.disconnect(), e.destroy(), e = null), n && (n.destroy(), n = null), u = null;
+}
+function m() {
+  return n;
+}
+function p() {
+  return e;
+}
+function v() {
+  return n?.getMap("elements");
+}
+function S() {
+  return u;
+}
+function g() {
+  return e !== null && e.wsconnected;
+}
+function C(t) {
+  return l.add(t), () => {
+    l.delete(t);
+  };
+}
+function b(t) {
+  if (!e) return;
+  const r = e.awareness.getLocalState();
+  e.awareness.setLocalState({
+    ...r,
+    ...t
+  });
+}
+function L() {
+  if (!e) return /* @__PURE__ */ new Map();
+  const t = e.awareness.getStates(), r = e.awareness.clientID, o = /* @__PURE__ */ new Map();
+  for (const [s, a] of t)
+    s !== r && a && a.user && o.set(s, a);
+  return o;
+}
+export {
+  w as createCollaborationProvider,
+  d as destroyCollaborationProvider,
+  S as getCollaborationConfig,
+  L as getRemoteAwareness,
+  m as getYDoc,
+  v as getYElements,
+  p as getYProvider,
+  g as isCollaborationActive,
+  C as onStatusChange,
+  b as updateAwareness
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "f1ow",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "type": "module",
   "description": "Interactive canvas drawing toolkit built on KonvaJS — drop-in React component for diagrams, sketches & whiteboards",
   "author": "Nuumz <info@nuumz.com>",