@ibodr/editor 0.1.4 → 0.1.5

package/dist/index.mjs

@@ -1646,6 +1646,9 @@ function useScreenBounds(ref) {
         trailing: true
       }
     );
+    if (ref.current) {
+      editor.updateViewportScreenBounds(ref.current);
+    }
     const interval = editor.timers.setInterval(updateBounds, 1e3);
     const win = editor.getContainerWindow();
     win.addEventListener("resize", updateBounds);
@@ -3796,25 +3799,35 @@ var CanvasOverlays = memo(function CanvasOverlays2() {
       () => {
         const instance = editor.getInstanceState();
         const camera = editor.getCamera();
+        const pageState = editor.getCurrentPageState();
         return {
           dpr: instance.devicePixelRatio,
           w: instance.screenBounds.w,
           h: instance.screenBounds.h,
           cx: camera.x,
           cy: camera.y,
-          zoom: camera.z
+          zoom: camera.z,
+          overlayStateKey: [
+            editor.getPath(),
+            pageState.selectedShapeIds.join("\0"),
+            pageState.hoveredShapeId ?? "",
+            pageState.editingShapeId ?? "",
+            instance.isChangingStyle ? "1" : "0",
+            editor.getHintingShapeIds().join("\0")
+          ].join("|")
         };
       },
       {
-        isEqual: (a, b) => a.dpr === b.dpr && a.w === b.w && a.h === b.h && a.cx === b.cx && a.cy === b.cy && a.zoom === b.zoom
+        isEqual: (a, b) => a.dpr === b.dpr && a.w === b.w && a.h === b.h && a.cx === b.cx && a.cy === b.cy && a.zoom === b.zoom && a.overlayStateKey === b.overlayStateKey
       }
     );
     const scheduler = new EffectScheduler("canvas overlays render", () => {
+      const { dpr, w, h, cx, cy, zoom } = renderInputs$.get();
+      const overlayEntries = editor.overlays.getActiveOverlayEntries();
       const canvas = canvasRef.current;
       if (!canvas) return;
       const ctx = canvas.getContext("2d");
       if (!ctx) return;
-      const { dpr, w, h, cx, cy, zoom } = renderInputs$.get();
       const canvasWidth = Math.ceil(w * dpr);
       const canvasHeight = Math.ceil(h * dpr);
       if (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {
@@ -3827,7 +3840,7 @@ var CanvasOverlays = memo(function CanvasOverlays2() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       const s = dpr * zoom;
       ctx.setTransform(s, 0, 0, s, s * cx, s * cy);
-      for (const { util, overlays } of editor.overlays.getActiveOverlayEntries()) {
+      for (const { util, overlays } of overlayEntries) {
         ctx.save();
         util.render(ctx, overlays);
         ctx.restore();
@@ -3880,7 +3893,7 @@ var CanvasOverlays = memo(function CanvasOverlays2() {
         ctx.strokeStyle = "magenta";
         ctx.fillStyle = "rgba(255, 0, 255, 0.1)";
         ctx.lineWidth = 1 / zoom;
-        for (const { overlays } of editor.overlays.getActiveOverlayEntries()) {
+        for (const { overlays } of overlayEntries) {
           for (const overlay of overlays) {
             const geometry = editor.overlays.getOverlayGeometry(overlay);
             if (!geometry) continue;
@@ -4038,7 +4051,7 @@ function DefaultCanvas({ className }) {
           ] }) }),
           Background && /* @__PURE__ */ jsx("div", { className: "dr-background__wrapper", children: /* @__PURE__ */ jsx(Background, {}) }),
           isGridMode && Grid && /* @__PURE__ */ jsx(GridWrapper, {}),
-          /* @__PURE__ */ jsxs("div", { ref: rHtmlLayer, className: "dr-html-layer tl-shapes", draggable: false, children: [
+          /* @__PURE__ */ jsxs("div", { ref: rHtmlLayer, className: "dr-html-layer dr-shapes", draggable: false, children: [
             /* @__PURE__ */ jsx(OnTheCanvasWrapper, {}),
             SelectionBackground && /* @__PURE__ */ jsx(SelectionBackgroundWrapper, {}),
             hideShapes ? null : /* @__PURE__ */ jsx(ShapesLayer, { canvasRef: rCanvas })
@@ -24523,7 +24536,6 @@ function DrawEditorWithReadyStore({
   const { ErrorFallback } = useEditorComponents();
   const container = useContainer();
   const [editor, setEditor] = useRefState(null);
-  const canvasRef = useRef(null);
   const _deepLinks = options?.deepLinks;
   const deepLinks = useShallowObjectIdentity(_deepLinks === true ? {} : _deepLinks);
   const editorOptionsRef = useRef({
@@ -24579,7 +24591,7 @@ function DrawEditorWithReadyStore({
         themes: themes2,
         initialTheme: initialTheme2
       });
-      editor2.updateViewportScreenBounds(canvasRef.current ?? container);
+      editor2.updateViewportScreenBounds(container);
       if (deepLinks2) {
         if (!deepLinks2?.getUrl) {
           editor2.navigateToDeepLink(deepLinks2);
@@ -24694,7 +24706,7 @@ function DrawEditorWithReadyStore({
   if (!editor || !fontLoadingState?.isLoaded) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       LoadingScreen2 && /* @__PURE__ */ jsx(LoadingScreen2, {}),
-      /* @__PURE__ */ jsx("div", { className: "dr-canvas", ref: canvasRef })
+      /* @__PURE__ */ jsx("div", { className: "dr-canvas" })
     ] });
   }
   return (
@@ -24832,7 +24844,7 @@ function getFontsFromRichText(editor, richText, initialState2) {
 // src/index.ts
 registerDrawLibraryVersion(
   "@ibodr/editor",
-  "0.1.4",
+  "0.1.5",
   "esm"
 );
 /*!