@lazlon-platform/html-editor 0.7.2 → 0.7.4

package/lib/hooks/batch.ts

@@ -1,7 +1,6 @@
 import { isEqual } from "es-toolkit"
 import { useRef } from "react"
 import { useComputed } from "react-bolt"
-import { type HistoryAction } from "../model/history"
 import { Node } from "../model/node"
 import { useEditor } from "./editor"
 
@@ -13,15 +12,15 @@ export function reduce<T>(values: T[], fallback: T) {
   )
 }
 
-export function useNodeField<N extends Node, K extends keyof N>(
+export function useNodeField<N extends Node, T>(
   nodes: Iterable<N>,
-  key: K,
-  fallback: N[K],
+  fallback: T,
+  getter: (node: N) => T,
 ) {
-  return useComputed<N[K]>({
+  return useComputed<T>({
     equals: isEqual,
     fn: () => {
-      const values = Array.from(nodes).map((node) => node[key])
+      const values = Array.from(nodes).map((node) => getter(node))
       return reduce(values, fallback)
     },
   })
@@ -38,11 +37,11 @@ export function useNodeFieldBatch<N extends Node, K extends keyof N>(
   key: K,
   fallback: N[K],
 ): NodeFieldBatch<N, N[K]> {
-  const { history } = useEditor()
+  const editor = useEditor()
   const initial = useRef<Map<N, N[K]> | null>(null)
 
   return {
-    value: useNodeField(nodes, key, fallback),
+    value: useNodeField(nodes, fallback, (node) => node[key]),
     onChange(set: N[K] | ((node: N) => N[K])) {
       if (nodes.length === 0) return
 
@@ -51,7 +50,9 @@ export function useNodeFieldBatch<N extends Node, K extends keyof N>(
       }
 
       for (const node of nodes) {
-        node[key] = typeof set === "function" ? (set as (node: N) => N[K])(node) : set
+        if (!node.locked) {
+          node[key] = typeof set === "function" ? (set as (node: N) => N[K])(node) : set
+        }
       }
     },
     onChangeEnd(end: N[K] | ((node: N) => N[K])) {
@@ -59,19 +60,21 @@ export function useNodeFieldBatch<N extends Node, K extends keyof N>(
 
       const init = initial.current || new Map(nodes.map((n) => [n, n[key]]))
 
-      const prev: HistoryAction[] = []
-      const next: HistoryAction[] = []
-
-      for (const node of nodes) {
-        const nextValue =
-          typeof end === "function" ? (end as (node: N) => N[K])(node) : end
-
-        prev.push(["set-node-props", [node.id, { [key]: init.get(node) }]])
-        next.push(["set-node-props", [node.id, { [key]: nextValue }]])
-        node[key] = nextValue
-      }
+      editor.pushHistory(
+        nodes
+          .filter((node) => !node.locked)
+          .map((node) => {
+            const nextValue =
+              typeof end === "function" ? (end as (node: N) => N[K])(node) : end
+
+            node[key] = nextValue
+            return {
+              undo: ["set-node-props", [node.id, { [key]: init.get(node) }]],
+              redo: ["set-node-props", [node.id, { [key]: nextValue }]],
+            }
+          }),
+      )
 
-      history.push({ undo: ["batch", prev], redo: ["batch", next] })
       initial.current = null
     },
   }
@@ -88,30 +91,25 @@ type Writable<T> = Pick<T, WritableKeys<T>>
 type Props<N> = Partial<Writable<{ [K in keyof N]: N[K] }>>
 
 export function useBatchSet() {
-  const { history } = useEditor()
+  const editor = useEditor()
 
   return function batchSet<N extends Node>(
     nodes: Iterable<N>,
     set: Props<N> | ((n: N) => Props<N>),
   ) {
-    const prev: HistoryAction[] = []
-    const next: HistoryAction[] = []
-
-    for (const node of nodes) {
-      const nextValues = typeof set === "function" ? set(node) : set
-      const keys = Object.keys(nextValues) as WritableKeys<N>[]
-      const prevValues = Object.fromEntries(keys.map((key) => [key, node[key]]))
-      prev.push(["set-node-props", [node.id, prevValues]])
-      next.push(["set-node-props", [node.id, nextValues]])
-      Object.assign(node, nextValues)
-    }
-
-    if (next.length > 1) {
-      history.push({ undo: ["batch", prev], redo: ["batch", next] })
-    } else if (next.length > 0) {
-      const [undo] = prev
-      const [redo] = next
-      history.push({ undo, redo })
-    }
+    editor.pushHistory(
+      Array.from(nodes)
+        .filter((node) => !node.locked)
+        .map((node) => {
+          const nextValues = typeof set === "function" ? set(node) : set
+          const keys = Object.keys(nextValues) as WritableKeys<N>[]
+          const prevValues = Object.fromEntries(keys.map((key) => [key, node[key]]))
+          Object.assign(node, nextValues)
+          return {
+            undo: ["set-node-props", [node.id, prevValues]],
+            redo: ["set-node-props", [node.id, nextValues]],
+          }
+        }),
+    )
   }
 }

package/lib/hooks/index.ts

@@ -10,7 +10,7 @@ export {
   useToggleLockAction,
   useTrashAction,
 } from "./actions"
-export { useBatchSet, useNodeField, useNodeFieldBatch } from "./batch"
+export { reduce, useBatchSet, useNodeField, useNodeFieldBatch } from "./batch"
 export { EditorContext, PageContext, useEditor, usePage } from "./editor"
 export { useMoveable } from "./pointer/useMoveable"
 export { useMovePoint } from "./pointer/useMovePoint"

package/lib/hooks/node.ts

@@ -3,9 +3,9 @@ import { box, boxBounds, deg } from "../model/geometry/math"
 import { useNodeField, useNodeFieldBatch } from "./batch"
 
 export function useVisualPositionBatch(nodes: Node[]) {
-  const rotation = useNodeField(nodes, "rotation", deg(0))
-  const width = useNodeField(nodes, "width", NaN)
-  const height = useNodeField(nodes, "height", NaN)
+  const rotation = useNodeField(nodes, deg(0), (node) => node.rotation)
+  const width = useNodeField(nodes, NaN, (node) => node.width)
+  const height = useNodeField(nodes, NaN, (node) => node.height)
   const x = useNodeFieldBatch(nodes, "x", NaN)
   const y = useNodeFieldBatch(nodes, "y", NaN)
   const bounds = boxBounds(box({ x: x.value, y: y.value, width, height }, rotation))

package/package.json

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