@lazlon-platform/html-editor 0.8.0 → 0.9.1

package/lib/hooks/batch.ts

@@ -26,6 +26,50 @@ export function useNodeField<N extends Node, T>(
   })
 }
 
+export function useNodeFieldBatchSetter<T, N extends Node>(
+  nodes: N[],
+  props: {
+    snapshot(node: N): Partial<N["props"]>
+    mutate(value: T, node: N): Partial<N["props"]>
+  },
+) {
+  const editor = useEditor()
+  const initial = useRef<Map<N, Partial<N["props"]>> | null>(null)
+
+  return {
+    onChange(value: T) {
+      if (!initial.current) {
+        initial.current = new Map(nodes.map((n) => [n, props.snapshot(n)]))
+      }
+
+      for (const node of nodes) {
+        if (!node.locked) {
+          Object.assign(node, props.mutate(value, node))
+        }
+      }
+    },
+    onChangeEnd(value: T) {
+      const init = initial.current || new Map(nodes.map((n) => [n, props.snapshot(n)]))
+
+      editor.pushHistory(
+        nodes
+          .filter((node) => !node.locked)
+          .map((node) => {
+            const prev = init.get(node)!
+            const next = props.mutate(value, node)
+            Object.assign(node, next)
+            return {
+              undo: ["set-node-props", [node.id, prev]],
+              redo: ["set-node-props", [node.id, next]],
+            }
+          }),
+      )
+
+      initial.current = null
+    },
+  }
+}
+
 export interface NodeFieldBatch<N extends Node, T> {
   value: T
   onChange(set: T | ((node: N) => T)): void

package/lib/hooks/index.ts

@@ -10,15 +10,21 @@ export {
   useToggleLockAction,
   useTrashAction,
 } from "./actions"
-export { reduce, useBatchSet, useNodeField, useNodeFieldBatch } from "./batch"
+export {
+  reduce,
+  useBatchSet,
+  useNodeField,
+  useNodeFieldBatch,
+  useNodeFieldBatchSetter,
+} from "./batch"
 export { EditorContext, PageContext, useEditor, usePage } from "./editor"
+export { useVisualPositionBatch } from "./node"
+export { useEditPage } from "./page"
 export { useMoveable } from "./pointer/useMoveable"
 export { useMovePoint } from "./pointer/useMovePoint"
 export { usePointer } from "./pointer/usePointer"
 export { useResize } from "./pointer/useResize"
 export { useRotation } from "./pointer/useRotation"
-export { useSelectionFrame } from "./selectionFrame"
 export { useSelector } from "./pointer/useSelector"
+export { useSelectionFrame } from "./selectionFrame"
 export { useTextMarks } from "./textMarks"
-export { useEditPage } from "./page"
-export { useVisualPositionBatch } from "./node"

package/lib/hooks/selectionFrame.ts

@@ -76,8 +76,6 @@ export function useSelectionFrame<E extends HTMLElement>(props?: {
     const page = editor.selectionPage?.ref?.getBoundingClientRect()
     if (!frame || !stage || !page) return
 
-    console.log(frame, stage, page)
-
     const tx = page.x - stage.x + x * zoom
     const ty = page.y - stage.y + y * zoom
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazlon-platform/html-editor",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "type": "module",
   "files": [
     "lib"