@lazlon-platform/html-editor 0.7.1 → 0.7.3

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/node.ts

@@ -3,21 +3,12 @@ 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,
-    }),
-  )
+  const bounds = boxBounds(box({ x: x.value, y: y.value, width, height }, rotation))
 
   function withBoundingBox(axis: "x" | "y", fn: (value: number) => void) {
     return function (value: number): void {

package/lib/hooks/pointer/useMoveable.ts

@@ -2,7 +2,6 @@ import { useRef } from "react"
 import { LineNode } from "../../model"
 import {
   accessibleLine,
-  box,
   boxBounds,
   boxContainsPoint,
   lineContainsPoint,
@@ -44,7 +43,7 @@ export function useMoveable() {
     if (node instanceof LineNode) {
       return lineContainsPoint(accessibleLine(node), cursor)
     }
-    return boxContainsPoint(box(node), cursor)
+    return boxContainsPoint(node.toBox(), cursor)
   }
 
   return usePointer({

package/lib/hooks/pointer/useResize/multiLineNode.ts

@@ -65,21 +65,19 @@ export function useMultiLineNodeResize(
   }
 
   function undoProps(state: NodeState) {
-    const { baseX: x, baseY: y, basePoints: points } = state
-    return { x, y, points }
+    const { baseX, baseY, basePoints } = state
+    return { x: baseX, y: baseY, points: basePoints }
   }
 
   return {
     onDown({ baseSelectionRect }) {
-      state.current = nodes.map((node) => {
-        return {
-          node,
-          basePoints: node.points,
-          baseX: node.x,
-          baseY: node.y,
-          relativeVertices: node.vertices.map((p) => relativePoint(p, baseSelectionRect)),
-        }
-      })
+      state.current = nodes.map((node) => ({
+        node,
+        basePoints: node.points,
+        baseX: node.x,
+        baseY: node.y,
+        relativeVertices: node.vertices.map((p) => relativePoint(p, baseSelectionRect)),
+      }))
     },
 
     onMove({ selectionRect }) {

package/lib/hooks/pointer/useResize/multiRegularNode.ts

@@ -1,7 +1,6 @@
 import { useRef } from "react"
 import type { Node } from "../../../model"
 import {
-  box,
   boxRect,
   rect,
   rectCenter,
@@ -78,7 +77,7 @@ export function useMultiRegularNodeResize(
     onDown({ relativeSize }) {
       state.current = nodes.map((node) => ({
         node,
-        baseSize: box(node),
+        baseSize: node.toBox(),
         relative: relativeSize(node),
       }))
     },

package/lib/hooks/pointer/useResize/multiTextNode.ts

@@ -64,7 +64,7 @@ export function useMultiTextNodeResize(
       state.current = nodes.map((node) => ({
         node,
         baseFontSize: node.size,
-        baseBoxSize: box(node),
+        baseBoxSize: node.toBox(),
         relative: relativeSize(node),
       }))
     },

package/lib/hooks/pointer/useResize/singleRegularNode.ts

@@ -49,7 +49,7 @@ export function useSingleRegularNodeResize(direction: Edge | Corner) {
       if (!node || node.locked) return false
 
       state.current = {
-        base: box(node),
+        base: node.toBox(),
         anchorPoint: cursorPosition(event, node.page),
       }
     },

package/lib/hooks/pointer/useResize/singleTextNode.ts

@@ -80,7 +80,7 @@ export function useSingleTextNodeResize(direction: Edge | Corner) {
         state.current = {
           anchorPoint: cursorPosition(event, node.page),
           baseFontSize: node.size,
-          baseBoxSize: box(node),
+          baseBoxSize: node.toBox(),
         }
       }
       return enable

package/lib/hooks/pointer/useRotation.ts

@@ -48,7 +48,7 @@ export function useRotation() {
       state.current = {
         base: angle(pivot, origin, cursorPosition(event, page)),
         pivot,
-        nodes: nodes.map((node) => ({ node, baseBox: box(node) })),
+        nodes: nodes.map((node) => ({ node, baseBox: box(node, node.rotation) })),
       }
 
       editor.action = {

package/lib/hooks/pointer/useSelector.ts

@@ -1,18 +1,18 @@
 import { useRef } from "react"
+import { LineNode } from "../../model"
 import {
   type Rect,
+  accessibleLine,
   box,
   boxContainsPoint,
-  pointSubtract,
-  rect,
   boxIntersects,
   lineContainsPoint,
   lineIntersectsBox,
-  accessibleLine,
+  pointSubtract,
+  rect,
 } from "../../model/geometry/math"
 import { useEditor } from "../editor"
 import { cursorPosition, usePointer } from "./usePointer"
-import { LineNode } from "../../model"
 
 function clientPoint(event: { clientX: number; clientY: number }) {
   return { x: event.clientX, y: event.clientY }
@@ -32,7 +32,7 @@ export function useSelector(view: (props: null | Rect) => void) {
         const cursor = cursorPosition(event, node.page)
         if (
           (node instanceof LineNode && lineContainsPoint(accessibleLine(node), cursor)) ||
-          (!(node instanceof LineNode) && boxContainsPoint(box(node), cursor))
+          (!(node instanceof LineNode) && boxContainsPoint(node.toBox(), cursor))
         ) {
           return false
         }
@@ -68,7 +68,7 @@ export function useSelector(view: (props: null | Rect) => void) {
               if (node instanceof LineNode) {
                 return lineIntersectsBox(node, selection)
               } else {
-                return boxIntersects(selection, box(node))
+                return boxIntersects(selection, node.toBox())
               }
             })
         })

package/lib/hooks/pointer/useSnap.ts

@@ -1,5 +1,5 @@
 import { useStore } from "react-bolt"
-import { type Rect, box, boxBounds, rect } from "../../model/geometry/math"
+import { type Rect, boxBounds, rect } from "../../model/geometry/math"
 import type { Node } from "../../model/node"
 import type { Page } from "../../model/page"
 import { useEditor } from "../editor"
@@ -18,7 +18,7 @@ export function useSnap(page: Page) {
 
   function ySnap(nodes: Node[], rect: Rect): [number, ...Lines] {
     const nodelines = nodes.flatMap((n) => {
-      const { y, height } = boxBounds(box(n))
+      const { y, height } = boxBounds(n.toBox())
       return [y, y + height]
     })
 
@@ -49,7 +49,7 @@ export function useSnap(page: Page) {
 
   function xSnap(nodes: Node[], rect: Rect): [number, ...Lines] {
     const nodelines = nodes.flatMap((n) => {
-      const { x, width } = boxBounds(box(n))
+      const { x, width } = boxBounds(n.toBox())
       return [x, x + width]
     })
 

package/lib/hooks/selectionFrame.ts

@@ -1,7 +1,6 @@
 import { useEffect, useRef } from "react"
 import { useComputed, useStore } from "react-bolt"
-import { pointSubtract } from "../model/geometry/math"
-import { selectionDOMRect } from "../ui/selection"
+import { boxBounds, type Point, type Size } from "../model/geometry/math"
 import { useEditor } from "./editor"
 
 function arraysEqual<T>(a: T[], b: T[]): boolean {
@@ -25,6 +24,7 @@ function useObserver(onChange: () => void) {
         .filter((ref) => ref instanceof HTMLElement)
         .toArray(),
   })
+
   const editorRef = useStore(editor, "ref")
   const zoom = useStore(editor, "zoom")
   const pages = useStore(editor, "pages")
@@ -70,26 +70,33 @@ export function useSelectionFrame<E extends HTMLElement>(props?: {
   const selection = useStore(editor, "selection")
   const zoom = useStore(editor, "zoom")
 
-  useObserver(() => {
+  function setRefStyle({ x, y, width, height }: Point & Size, rotation?: number) {
     const frame = ref.current
     const stage = editor.ref?.getBoundingClientRect()
-    if (!frame || !stage) return
+    const page = editor.selectionPage?.ref?.getBoundingClientRect()
+    if (!frame || !stage || !page) return
 
-    if (props?.accountForSingleSelection && selection.size === 1) {
-      const [firstNode] = selection
-      const { x, y, width, height, rotation } = firstNode
-      const relative = firstNode.page.ref!.getBoundingClientRect()
-      const tx = relative.x - stage.x + x * zoom
-      const ty = relative.y - stage.y + y * zoom
-      frame.style.height = `${height * zoom}px`
-      frame.style.width = `${width * zoom}px`
+    console.log(frame, stage, page)
+
+    const tx = page.x - stage.x + x * zoom
+    const ty = page.y - stage.y + y * zoom
+
+    frame.style.height = `${height * zoom}px`
+    frame.style.width = `${width * zoom}px`
+
+    if (typeof rotation === "number") {
       frame.style.transform = `translate(${tx}px, ${ty}px) rotate(${rotation}deg)`
     } else {
-      const dom = selectionDOMRect(selection)
-      const t = pointSubtract(dom, stage)
-      frame.style.height = `${dom.height}px`
-      frame.style.width = `${dom.width}px`
-      frame.style.transform = `translate(${t.x}px, ${t.y}px)`
+      frame.style.transform = `translate(${tx}px, ${ty}px)`
+    }
+  }
+
+  useObserver(() => {
+    if (props?.accountForSingleSelection && selection.size === 1) {
+      const node = selection.values().next().value!
+      setRefStyle(node, node.rotation)
+    } else {
+      setRefStyle(boxBounds(...selection.values().map((node) => node.toBox())))
     }
   })
 

package/lib/model/geometry/math.ts

@@ -95,13 +95,13 @@ export function rect(...args: Array<(Point & Size) | Point>): Rect {
 /**
  * Create a rotatable box for a rectangle
  */
-export function box(input?: Size & Point & { rotation?: Deg }): Box {
+export function box(input: Size & Point = rect(), rotation = deg(0)): Box {
   return {
-    center: rectCenter(input ?? rect()),
-    rotation: input?.rotation ?? deg(0),
-    pivot: rectCenter(input ?? rect()),
-    width: input?.width ?? 0,
-    height: input?.height ?? 0,
+    center: rectCenter(input),
+    pivot: rectCenter(input),
+    rotation,
+    width: input.width,
+    height: input.height,
   }
 }
 

package/lib/model/node/lineNode.ts

@@ -1,10 +1,12 @@
 import { computed, state } from "react-bolt"
 import {
+  deg,
   floatNorm,
   pointAdd,
   rect,
   rectCenter,
   rotatePoint,
+  type Box,
   type Line,
   type Point,
 } from "../geometry/math"
@@ -77,4 +79,15 @@ export class LineNode extends Node {
       }
     })
   }
+
+  override toBox(): Box {
+    const r = rect(...this.vertices)
+    return {
+      center: rectCenter(r),
+      pivot: rectCenter(r),
+      rotation: deg(0),
+      width: r.width,
+      height: r.height,
+    }
+  }
 }

package/lib/model/node.ts

@@ -1,5 +1,5 @@
 import { computed, state } from "react-bolt"
-import { deg, type Deg } from "./geometry/math"
+import { box, deg, type Box, type Deg } from "./geometry/math"
 import type { Page } from "./page"
 
 export type Schema = Map<string, typeof Node>
@@ -89,4 +89,8 @@ export abstract class Node {
       ...(rotation && { rotation }),
     }
   }
+
+  toBox(): Box {
+    return box(this, this.rotation)
+  }
 }

package/lib/ui/node/ImageContent.tsx

@@ -17,8 +17,9 @@ export function ImageContent(props: { node: ImageNode; fallback?: React.ReactNod
   return url ? (
     <img
       src={url}
+      draggable={false}
       className={clsx(
-        "size-full",
+        "size-full select-none",
         fit === "cover" && "object-cover",
         fit === "contain" && "object-contain",
         fit === "fill" && "object-fill",

package/lib/ui/selection.ts

@@ -1,22 +1,12 @@
-import { box, boxBounds, rect, type Box, type Rect } from "../model/geometry/math"
+import { box, boxBounds, type Box } from "../model/geometry/math"
 import type { Node } from "../model/node"
 
-export function selectionDOMRect(selection: Set<Node>): Rect {
-  const rects = selection
-    .values()
-    .map((node) => node.ref)
-    .filter((dom) => dom instanceof HTMLElement)
-    .map((dom) => dom.getBoundingClientRect())
-
-  return rect(...rects)
-}
-
 export function selectionBox(selection: Iterable<Node>): Box {
   const arr = Array.from(selection)
 
   if (arr.length === 1) {
-    return box(arr[0])
+    return arr[0].toBox()
   }
 
-  return box(boxBounds(...arr.map(box)))
+  return box(boxBounds(...arr.map((n) => n.toBox())))
 }

package/package.json

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