@lazlon-platform/html-editor 0.6.0 → 0.7.0

package/lib/ui/node/EditableContent/index.tsx

@@ -18,6 +18,7 @@ export function EditableContent(props: {
   const editor = useEditor()
   const selection = useStore(editor, "selection")
   const { action } = useStore(editor, "action")
+  const locked = useStore(node, "locked")
   const prevContent = useRef(node.tiptap.getJSON())
 
   // start with selection.has(node) so that newly added editable nodes can be focused
@@ -25,9 +26,10 @@ export function EditableContent(props: {
 
   const onDoubleClick = useDoubleClick(
     useCallback(() => {
+      if (locked) return
       setClicked(true)
       node.tiptap.commands.focus()
-    }, [node, setClicked]),
+    }, [node, locked, setClicked]),
   )
 
   const html = useEditorState({
@@ -36,12 +38,12 @@ export function EditableContent(props: {
   })
 
   useEffect(() => {
-    if (!selection.has(node)) {
+    if (!selection.has(node) || locked) {
       node.blur()
       // eslint-disable-next-line react-hooks/set-state-in-effect
       setClicked(false)
     }
-  }, [selection, node])
+  }, [selection, node, locked])
 
   useEffect(() => {
     const onUpdate = debounce(() => {
@@ -71,7 +73,7 @@ export function EditableContent(props: {
   })
 
   const lineHeight = useStore(node, "lineHeight")
-  const showEditor = !isStatic && selection.has(node) && !action && clicked
+  const showEditor = !isStatic && selection.has(node) && !action && clicked && !locked
 
   return (
     <div

package/lib/ui/node/LineContent.tsx

@@ -11,8 +11,6 @@ export function LineContent(props: { node: LineNode }) {
     "strokeColor",
   )
 
-  const polylinePoints = points.map(({ x, y }) => `${x},${y}`).join(" ")
-
   return (
     <svg
       className="absolute inset-0 overflow-visible"
@@ -21,7 +19,7 @@ export function LineContent(props: { node: LineNode }) {
       fill="none"
     >
       <polyline
-        points={polylinePoints}
+        points={points.map(({ x, y }) => `${x},${y}`).join(" ")}
         stroke={strokeColor}
         strokeWidth={strokeWidth}
         strokeLinecap="round"

package/lib/ui/selection.ts

@@ -11,11 +11,12 @@ export function selectionDOMRect(selection: Set<Node>): Rect {
   return rect(...rects)
 }
 
-export function selectionBox(selection: Set<Node>): Box {
-  if (selection.size === 1) {
-    const [node] = selection
-    return box(node)
+export function selectionBox(selection: Iterable<Node>): Box {
+  const arr = Array.from(selection)
+
+  if (arr.length === 1) {
+    return box(arr[0])
   }
 
-  return box(boxBounds(...selection.values().map(box)))
+  return box(boxBounds(...arr.map(box)))
 }

package/package.json

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

package/lib/hooks/pointer/movePoint.ts

@@ -1,75 +0,0 @@
-import { useRef } from "react"
-import type { LineNode } from "../../model"
-import {
-  point,
-  pointAdd,
-  pointSubtract,
-  rect,
-  type Point,
-} from "../../model/geometry/math"
-import { useEditor } from "../editor"
-import { cursorPosition, usePointer } from "./pointer"
-import { useSnap } from "./snap"
-
-export function useMovePoint(props: { lineNode: LineNode; pointIndex: number }) {
-  const editor = useEditor()
-  const { lineNode, pointIndex } = props
-  const page = lineNode.page
-  const snap = useSnap(page)
-
-  const state = useRef({
-    cursorOffset: point(),
-    initialAnchor: point(),
-    initialPoints: [] as Point[],
-  })
-
-  return usePointer({
-    onDown(event) {
-      const cursor = cursorPosition(event, page)
-      const linePoint = lineNode.points[pointIndex]
-      const pointPosition = pointAdd(lineNode, linePoint)
-
-      event.preventDefault()
-      event.stopPropagation()
-
-      state.current = {
-        cursorOffset: pointSubtract(cursor, pointPosition),
-        initialAnchor: point(lineNode),
-        initialPoints: Array.from(lineNode.points),
-      }
-    },
-    onMove(event) {
-      const { cursorOffset, initialPoints, initialAnchor } = state.current
-      const cursor = pointSubtract(cursorPosition(event, page), cursorOffset)
-      const snapped = snap(
-        !event.shiftKey,
-        rect({ x: cursor.x, y: cursor.y, width: 0, height: 0 }),
-      )
-
-      const points = initialPoints.map((p, i) =>
-        i === pointIndex ? snapped : pointAdd(initialAnchor, p),
-      )
-
-      const bounds = point(rect(...points))
-
-      lineNode.x = bounds.x
-      lineNode.y = bounds.y
-      lineNode.points = points.map((p) => pointSubtract(p, bounds))
-
-      editor.action = { action: "move", payload: point(snapped) }
-    },
-    onCancel() {
-      editor.action = {}
-      page.snapLines = []
-    },
-    onEnd() {
-      editor.action = {}
-      page.snapLines = []
-
-      lineNode.page.editor.history.push<LineNode>({
-        redo: ["set-node-props", [lineNode.id, { points: lineNode.points }]],
-        undo: ["set-node-props", [lineNode.id, { points: state.current.initialPoints }]],
-      })
-    },
-  })
-}

package/lib/hooks/pointer/resize.ts

@@ -1,247 +0,0 @@
-import { TextNode, type HistoryEntry, type Node } from "@lazlon/html-editor/model"
-import { pick } from "es-toolkit"
-import { useRef } from "react"
-import { useStore } from "react-bolt"
-import {
-  box,
-  boxRect,
-  deg,
-  floatNorm,
-  perpDistance,
-  point,
-  pointNorm,
-  pointSubtract,
-  rect,
-  resizeBox,
-  rotatePoint,
-  scaleBox,
-  vectorDotProd,
-  type Box,
-  type Corner,
-  type Edge,
-  type Point,
-  type Rect,
-  type Size,
-} from "../../model/geometry/math"
-import { selectionBox } from "../../ui/selection"
-import { useEditor } from "../editor"
-import { cursorPosition, usePointer } from "./pointer"
-
-const rectProps = ["x", "y", "width", "height"] as const
-
-function setNodeSize(node: Node, size: Point & Size) {
-  node.x = floatNorm(size.x)
-  node.y = floatNorm(size.y)
-  node.width = floatNorm(size.width)
-  node.height = floatNorm(size.height)
-}
-
-function setTextNodeSize(node: TextNode, size: Point & Size) {
-  const target = Math.max(1, size.height)
-  node.size = (node.size * target) / node.contentHeight
-  node.contentHeight = target
-  setNodeSize(node, size)
-}
-
-function scaleDistance(
-  base: Box,
-  direction: Edge | Corner,
-  anchor: Point,
-  cursor: Point,
-) {
-  const vector = pointSubtract(cursor, anchor)
-  const localDirection = pointNorm({
-    x: direction.includes("w") ? -base.width : direction.includes("e") ? base.width : 0,
-    y: direction.includes("n") ? -base.height : direction.includes("s") ? base.height : 0,
-  })
-  const worldDirection = rotatePoint(localDirection, point(), base.rotation)
-  const distance = vectorDotProd(vector, worldDirection)
-
-  if (direction.length === 1) return distance
-
-  const diagonal = Math.hypot(base.width, base.height)
-  return diagonal === 0 ? 0 : (distance * base.height) / diagonal
-}
-
-export function useSingleResize(direction: Edge | Corner) {
-  const editor = useEditor()
-  const edges = direction.split("") as Edge[]
-  const [node] = useStore(editor, "selection")
-
-  const state = useRef({
-    baseSize: box(),
-    anchorPoint: point(),
-  })
-
-  return usePointer({
-    onDown(event) {
-      state.current = {
-        baseSize: box(node),
-        anchorPoint: cursorPosition(event, node.page),
-      }
-    },
-    onMove(event) {
-      const cursor = cursorPosition(event, node.page)
-
-      if (node instanceof TextNode && direction !== "w" && direction !== "e") {
-        const size = scaleBox(
-          state.current.baseSize,
-          direction,
-          scaleDistance(
-            state.current.baseSize,
-            direction,
-            state.current.anchorPoint,
-            cursor,
-          ),
-        )
-
-        setTextNodeSize(node, boxRect(size))
-      } else {
-        let size = state.current.baseSize
-
-        for (const edge of edges) {
-          const r = edge === "w" ? 90 : edge === "e" ? -90 : edge === "n" ? 180 : 0
-          size = resizeBox(
-            size,
-            edge,
-            perpDistance(state.current.anchorPoint, cursor, deg(node.rotation + r)),
-          )
-        }
-
-        setNodeSize(node, boxRect(size))
-      }
-    },
-    onCancel() {
-      editor.action = {}
-    },
-    onEnd() {
-      editor.action = {}
-
-      const prev = boxRect(state.current.baseSize)
-      const next = rect(node)
-
-      editor.history.push({
-        redo: ["set-node-props", [node.id, pick(prev, rectProps)]],
-        undo: ["set-node-props", [node.id, pick(next, rectProps)]],
-      })
-    },
-  })
-}
-
-function useMultiResize(direction: Edge | Corner) {
-  const editor = useEditor()
-  const edges = direction.split("") as Edge[]
-
-  const state = useRef({
-    initialTargetRect: rect(),
-    initialCursorPos: point(),
-    nodes: Array<{
-      node: Node
-      baseSize: Box
-      relative: Rect
-    }>(),
-  })
-
-  return usePointer({
-    onDown(event) {
-      const { x, y, width, height } = boxRect(selectionBox(editor.selection))
-
-      state.current = {
-        initialTargetRect: rect({ x, y, width, height }),
-        initialCursorPos: cursorPosition(event, editor.selectionPage!),
-        nodes: editor.selection
-          .values()
-          .toArray()
-          .map((node) => ({
-            node,
-            baseSize: box(node),
-            relative: rect({
-              x: (node.x - x) / width,
-              y: (node.y - y) / height,
-              width: node.width / width,
-              height: node.height / height,
-            }),
-          })),
-      }
-    },
-
-    onMove(event) {
-      const r = { ...state.current.initialTargetRect }
-      const p = pointSubtract(
-        cursorPosition(event, editor.selectionPage!),
-        state.current.initialCursorPos,
-      )
-
-      /* mutate rect  */ {
-        const { x, y, height, width } = state.current.initialTargetRect
-
-        if (edges.includes("n") && height - p.y > 0) {
-          r.height = height - p.y
-          r.y = y + p.y
-        }
-        if (edges.includes("s")) {
-          r.height = height + p.y
-        }
-        if (edges.includes("w") && width - p.x > 0) {
-          r.width = width - p.x
-          r.x = x + p.x
-        }
-        if (edges.includes("e")) {
-          r.width = width + p.x
-        }
-      }
-
-      /* mutate nodes according to rect */ {
-        for (const { node, baseSize, relative } of state.current.nodes) {
-          const size = {
-            x: relative.x * r.width + r.x,
-            y: relative.y * r.height + r.y,
-            width: r.width * relative.width,
-            height: r.height * relative.height,
-          }
-
-          if (node instanceof TextNode && direction !== "w" && direction !== "e") {
-            const scaled = scaleBox(baseSize, direction, size.height - baseSize.height)
-
-            setTextNodeSize(node, {
-              x: size.x + size.width / 2 - scaled.width / 2,
-              y: size.y + size.height / 2 - scaled.height / 2,
-              width: scaled.width,
-              height: scaled.height,
-            })
-          } else {
-            setNodeSize(node, size)
-          }
-        }
-      }
-
-      editor.action = { action: "resize", payload: r }
-    },
-
-    onCancel() {
-      editor.action = {}
-    },
-
-    onEnd() {
-      editor.action = {}
-
-      const entries: HistoryEntry[] = state.current.nodes.map(({ node, baseSize }) => ({
-        redo: ["set-node-props", [node.id, pick(node, rectProps)]],
-        undo: ["set-node-props", [node.id, pick(boxRect(baseSize), rectProps)]],
-      }))
-
-      editor.history.push({
-        redo: ["batch", entries.map((e) => e.redo)],
-        undo: ["batch", entries.map((e) => e.undo)],
-      })
-    },
-  })
-}
-
-export function useResize(direction: Edge | Corner) {
-  const editor = useEditor()
-  const nodes = useStore(editor, "selection")
-  const single = useSingleResize(direction)
-  const multi = useMultiResize(direction)
-  return nodes.size === 1 ? single : multi
-}

package/lib/hooks/pointer/rotation.ts

@@ -1,138 +0,0 @@
-import { pick } from "es-toolkit"
-import { useRef } from "react"
-import {
-  angle,
-  box,
-  boxRect,
-  deg,
-  floatNorm,
-  point,
-  rotatePoint,
-  type Box,
-} from "../../model/geometry/math"
-import type { HistoryAction } from "../../model/history"
-import type { Node } from "../../model/node"
-import type { Page } from "../../model/page"
-import { selectionBox } from "../../ui/selection"
-import { useEditor } from "../editor"
-import { cursorPosition, usePointer } from "./pointer"
-
-function snappedDeg(startDeg: number, delta: number, shiftKey: boolean) {
-  const rotation = startDeg + delta
-  return deg(shiftKey ? Math.round(rotation / 45) * 45 : rotation)
-}
-
-export function useRotation() {
-  const editor = useEditor()
-
-  const state = useRef({
-    initialDeg: deg(0),
-    page: null as Page | null,
-    selectionCenter: point(),
-    nodes: Array<{
-      node: Node
-      base: Box
-    }>(),
-  })
-
-  function applyRotation(delta: number, shiftKey: boolean) {
-    const { initialDeg, nodes, selectionCenter } = state.current
-
-    if (nodes.length > 1) {
-      const groupDelta = snappedDeg(initialDeg, delta, shiftKey) - initialDeg
-
-      for (const { node, base } of nodes) {
-        const center = rotatePoint(base.center, selectionCenter, deg(groupDelta))
-
-        node.x = floatNorm(center.x - base.width / 2)
-        node.y = floatNorm(center.y - base.height / 2)
-        node.rotation = deg(base.rotation + groupDelta)
-      }
-
-      return snappedDeg(initialDeg, delta, shiftKey)
-    }
-
-    for (const { node, base } of nodes) {
-      node.rotation = snappedDeg(base.rotation, delta, shiftKey)
-    }
-
-    return nodes[0]?.node.rotation ?? deg(0)
-  }
-
-  return usePointer({
-    onDown(event) {
-      const nodes = editor.selection.values().toArray()
-      const page = editor.selectionPage
-      if (nodes.length === 0 || !page) return false
-
-      const { center: selectionCenter } = selectionBox(editor.selection)
-
-      state.current = {
-        initialDeg: angle(selectionCenter, point(), cursorPosition(event, page)),
-        page,
-        selectionCenter,
-        nodes: nodes.map((node) => ({ node, base: box(node) })),
-      }
-
-      const deg = nodes.length === 1 ? nodes[0].rotation : 0
-      editor.action = { action: "rotate", payload: { deg } }
-    },
-
-    onMove(event) {
-      const { initialDeg, page, selectionCenter } = state.current
-      if (!page) return
-
-      const deg =
-        angle(selectionCenter, point(), cursorPosition(event, page)) - initialDeg
-      const display = applyRotation(deg, event.shiftKey)
-
-      editor.action = {
-        action: "rotate",
-        payload: {
-          deg: display,
-        },
-      }
-    },
-
-    onCancel() {
-      editor.action = {}
-    },
-
-    onEnd(event) {
-      const { initialDeg, nodes, page, selectionCenter } = state.current
-      if (!page) return
-
-      const deg =
-        angle(selectionCenter, point(), cursorPosition(event, page)) - initialDeg
-
-      applyRotation(deg, event.shiftKey)
-
-      if (nodes.length === 1) {
-        const [n] = nodes
-        editor.history.push({
-          redo: ["set-node-props", [n.node.id, { rotation: n.node.rotation }]],
-          undo: ["set-node-props", [n.node.id, { rotation: n.base.rotation }]],
-        })
-      } else {
-        const redo: HistoryAction[] = []
-        const undo: HistoryAction[] = []
-
-        for (const { node, base } of nodes) {
-          const baseRect = boxRect(base)
-          redo.push(["set-node-props", [node.id, pick(node, ["rotation", "x", "y"])]])
-          undo.push([
-            "set-node-props",
-            [node.id, { rotation: base.rotation, x: baseRect.x, y: baseRect.y }],
-          ])
-        }
-
-        editor.history.push({
-          redo: ["batch", redo],
-          undo: ["batch", undo],
-        })
-      }
-
-      editor.action = {}
-    },
-  })
-}