@lazlon-platform/html-editor 0.6.0 → 0.7.1

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

@@ -0,0 +1,161 @@
+import { useRef } from "react"
+import { useStore } from "react-bolt"
+import { LineNode, TextNode, type HistoryEntry, type Node } from "../../../model"
+import {
+  boxRect,
+  point,
+  pointSubtract,
+  rect,
+  type Corner,
+  type Edge,
+  type Point,
+  type Rect,
+} from "../../../model/geometry/math"
+import { selectionBox } from "../../../ui/selection"
+import { useEditor } from "../../editor"
+import { cursorPosition, usePointer } from "../usePointer"
+import { useMultiLineNodeResize } from "./multiLineNode"
+import { useMultiRegularNodeResize } from "./multiRegularNode"
+import { useMultiTextNodeResize } from "./multiTextNode"
+
+interface MultiResizeHookDownContext {
+  event: React.PointerEvent
+  baseSelectionRect: Rect
+  baseCursorPosition: Point
+  relativeSize(node: Node): Rect
+}
+
+interface MultiResizeHookMoveContext {
+  event: globalThis.PointerEvent
+  baseSelectionRect: Rect
+  baseCursorPosition: Point
+  selectionRect: Rect
+  cursorPosition: Point
+}
+
+interface MultiResizeHookEndContext {
+  event: globalThis.PointerEvent
+  baseSelectionRect: Rect
+  baseCursorPosition: Point
+}
+
+export interface MultiResizeHook<N extends Node> {
+  onDown(ctx: MultiResizeHookDownContext): void
+  onMove(ctx: MultiResizeHookMoveContext): void
+  onEnd(ctx: MultiResizeHookEndContext): Array<HistoryEntry<N>>
+}
+
+export function useMultiResize(direction: Edge | Corner) {
+  const editor = useEditor()
+  const selection = useStore(editor, "selection").values().toArray()
+
+  const text = useMultiTextNodeResize(
+    direction,
+    selection.filter((node) => node instanceof TextNode),
+  )
+
+  const line = useMultiLineNodeResize(
+    direction,
+    selection.filter((node) => node instanceof LineNode),
+  )
+
+  const regular = useMultiRegularNodeResize(
+    direction,
+    selection.filter((node) => !(node instanceof TextNode || node instanceof LineNode)),
+  )
+
+  const state = useRef({
+    baseSelectionRect: rect(),
+    baseCursorPosition: point(),
+  })
+
+  return usePointer({
+    onDown(event) {
+      if (selection.length === 0 || !editor.selectionPage) {
+        return false
+      }
+
+      const baseSelectionRect = boxRect(selectionBox(editor.selection))
+      const baseCursorPosition = cursorPosition(event, editor.selectionPage!)
+      const { x, y, width, height } = baseSelectionRect
+
+      const ctx: MultiResizeHookDownContext = {
+        event,
+        baseSelectionRect,
+        baseCursorPosition,
+        relativeSize: (node) => {
+          return rect({
+            x: (node.x - x) / width,
+            y: (node.y - y) / height,
+            width: node.width / width,
+            height: node.height / height,
+          })
+        },
+      }
+
+      state.current = {
+        baseSelectionRect,
+        baseCursorPosition,
+      }
+
+      text.onDown(ctx)
+      line.onDown(ctx)
+      regular.onDown(ctx)
+    },
+
+    onMove(event) {
+      const r = { ...state.current.baseSelectionRect }
+      const p = pointSubtract(
+        cursorPosition(event, editor.selectionPage!),
+        state.current.baseCursorPosition,
+      )
+
+      /* mutate rect  */ {
+        if (direction.includes("n") && r.height - p.y > 0) {
+          r.height -= p.y
+          r.y += p.y
+        }
+        if (direction.includes("s")) {
+          r.height += p.y
+        }
+        if (direction.includes("w") && r.width - p.x > 0) {
+          r.width -= p.x
+          r.x += p.x
+        }
+        if (direction.includes("e")) {
+          r.width += p.x
+        }
+      }
+
+      const ctx: MultiResizeHookMoveContext = {
+        event,
+        baseSelectionRect: state.current.baseSelectionRect,
+        baseCursorPosition: state.current.baseCursorPosition,
+        selectionRect: r,
+        cursorPosition: p,
+      }
+
+      text.onMove(ctx)
+      line.onMove(ctx)
+      regular.onMove(ctx)
+
+      editor.action = { action: "resize", payload: r }
+    },
+
+    onCancel() {
+      editor.action = {}
+    },
+
+    onEnd(event) {
+      editor.action = {}
+
+      const ctx: MultiResizeHookEndContext = {
+        event,
+        baseSelectionRect: state.current.baseSelectionRect,
+        baseCursorPosition: state.current.baseCursorPosition,
+      }
+
+      editor.pushHistory([...text.onEnd(ctx), ...line.onEnd(ctx), ...regular.onEnd(ctx)])
+    },
+  })
+}

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

@@ -0,0 +1,99 @@
+import { useRef } from "react"
+import type { LineNode } from "../../../model"
+import {
+  deg,
+  floatNorm,
+  point,
+  pointSubtract,
+  rect,
+  rectCenter,
+  rotatePoint,
+  type Corner,
+  type Edge,
+  type Point,
+  type Rect,
+} from "../../../model/geometry/math"
+import type { MultiResizeHook } from "./multi"
+
+type NodeState = {
+  node: LineNode
+  basePoints: Point[]
+  baseX: number
+  baseY: number
+  relativeVertices: Point[]
+}
+
+function relativePoint(p: Point, selectionRect: Rect): Point {
+  return {
+    x: selectionRect.width === 0 ? 0 : (p.x - selectionRect.x) / selectionRect.width,
+    y: selectionRect.height === 0 ? 0 : (p.y - selectionRect.y) / selectionRect.height,
+  }
+}
+
+function pagePoint(relative: Point, selectionRect: Rect): Point {
+  return {
+    x: selectionRect.x + relative.x * selectionRect.width,
+    y: selectionRect.y + relative.y * selectionRect.height,
+  }
+}
+
+function unrotatedPagePoints(vertices: Point[], rotation: number): Point[] {
+  const origin = point()
+  const unrotatedBounds = rect(
+    ...vertices.map((p) => rotatePoint(p, origin, deg(-rotation))),
+  )
+  const center = rotatePoint(rectCenter(unrotatedBounds), origin, deg(rotation))
+  return vertices.map((p) => rotatePoint(p, center, deg(-rotation)))
+}
+
+function setLinePoints(node: LineNode, pagePoints: Point[]) {
+  const bounds = point(rect(...pagePoints))
+  node.x = floatNorm(bounds.x)
+  node.y = floatNorm(bounds.y)
+  node.points = pagePoints.map((p) => pointSubtract(p, bounds))
+}
+
+export function useMultiLineNodeResize(
+  _direction: Edge | Corner,
+  nodes: LineNode[],
+): MultiResizeHook<LineNode> {
+  const state = useRef(Array<NodeState>())
+
+  function redoProps(state: NodeState) {
+    const { x, y, points } = state.node
+    return { x, y, points }
+  }
+
+  function undoProps(state: NodeState) {
+    const { baseX: x, baseY: y, basePoints: points } = state
+    return { x, y, points }
+  }
+
+  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)),
+        }
+      })
+    },
+
+    onMove({ selectionRect }) {
+      for (const item of state.current) {
+        const vertices = item.relativeVertices.map((p) => pagePoint(p, selectionRect))
+        setLinePoints(item.node, unrotatedPagePoints(vertices, item.node.rotation))
+      }
+    },
+
+    onEnd() {
+      return state.current.map((state) => ({
+        redo: ["set-node-props", [state.node.id, redoProps(state)]],
+        undo: ["set-node-props", [state.node.id, undoProps(state)]],
+      }))
+    },
+  }
+}

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

@@ -0,0 +1,109 @@
+import { useRef } from "react"
+import type { Node } from "../../../model"
+import {
+  box,
+  boxRect,
+  rect,
+  rectCenter,
+  type Box,
+  type Corner,
+  type Edge,
+  type Point,
+  type Rect,
+} from "../../../model/geometry/math"
+import type { MultiResizeHook } from "./multi"
+import { setRegularNodeSize } from "./singleRegularNode"
+
+type NodeState = {
+  node: Node
+  baseSize: Box
+  relative: Rect
+}
+
+function resizeScale(enabled: boolean, base: number, target: number) {
+  return enabled && base !== 0 ? target / base : 1
+}
+
+function selectionScale(
+  direction: Edge | Corner,
+  baseSelectionRect: Rect,
+  selectionRect: Rect,
+) {
+  return {
+    x: resizeScale(
+      direction.includes("w") || direction.includes("e"),
+      baseSelectionRect.width,
+      selectionRect.width,
+    ),
+    y: resizeScale(
+      direction.includes("n") || direction.includes("s"),
+      baseSelectionRect.height,
+      selectionRect.height,
+    ),
+  }
+}
+
+function scaledRegularBox(baseSize: Box, target: Rect, scale: Point): Box {
+  const r = (baseSize.rotation * Math.PI) / 180
+  const cos = Math.cos(r)
+  const sin = Math.sin(r)
+  const center = rectCenter(target)
+
+  return {
+    center,
+    pivot: center,
+    rotation: baseSize.rotation,
+    width: baseSize.width * Math.hypot(scale.x * cos, scale.y * sin),
+    height: baseSize.height * Math.hypot(scale.x * sin, scale.y * cos),
+  }
+}
+
+export function useMultiRegularNodeResize(
+  direction: Edge | Corner,
+  nodes: Node[],
+): MultiResizeHook<Node> {
+  const state = useRef(Array<NodeState>())
+
+  function redoProps(state: NodeState) {
+    const { x, y, width, height } = state.node
+    return { x, y, width, height }
+  }
+
+  function undoProps(state: NodeState) {
+    const { x, y, width, height } = boxRect(state.baseSize)
+    return { x, y, width, height }
+  }
+
+  return {
+    onDown({ relativeSize }) {
+      state.current = nodes.map((node) => ({
+        node,
+        baseSize: box(node),
+        relative: relativeSize(node),
+      }))
+    },
+
+    onMove({ baseSelectionRect, selectionRect }) {
+      const { x, y, width, height } = selectionRect
+      const scale = selectionScale(direction, baseSelectionRect, selectionRect)
+
+      for (const { node, relative, baseSize } of state.current) {
+        const size = rect({
+          x: relative.x * width + x,
+          y: relative.y * height + y,
+          width: width * relative.width,
+          height: height * relative.height,
+        })
+
+        setRegularNodeSize(node, scaledRegularBox(baseSize, size, scale))
+      }
+    },
+
+    onEnd() {
+      return state.current.map((state) => ({
+        undo: ["set-node-props", [state.node.id, undoProps(state)]],
+        redo: ["set-node-props", [state.node.id, redoProps(state)]],
+      }))
+    },
+  }
+}

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

@@ -0,0 +1,108 @@
+import { useRef } from "react"
+import { TextNode } from "../../../model"
+import {
+  box,
+  boxRect,
+  rect,
+  scaleBox,
+  type Box,
+  type Corner,
+  type Edge,
+  type Rect,
+} from "../../../model/geometry/math"
+import type { MultiResizeHook } from "./multi"
+import { setTextNodeSize } from "./singleTextNode"
+import { setRegularNodeSize } from "./singleRegularNode"
+
+type NodeState = {
+  node: TextNode
+  baseFontSize: number
+  baseBoxSize: Box
+  relative: Rect
+}
+
+function textScale(base: Box, target: Rect, direction: Edge | Corner) {
+  const horizontal = direction.includes("w") || direction.includes("e")
+  const vertical = direction.includes("n") || direction.includes("s")
+  const widthScale = base.width === 0 ? 1 : target.width / base.width
+  const heightScale = base.height === 0 ? 1 : target.height / base.height
+
+  if (horizontal && vertical) return Math.min(widthScale, heightScale)
+  if (horizontal) return widthScale
+  return heightScale
+}
+
+function scaledTextBox(base: Box, target: Rect, direction: Edge | Corner) {
+  const scale = textScale(base, target, direction)
+  const by =
+    direction.includes("n") || direction.includes("s")
+      ? base.height * scale - base.height
+      : base.width * scale - base.width
+
+  return scaleBox(base, direction, by)
+}
+
+export function useMultiTextNodeResize(
+  direction: Edge | Corner,
+  nodes: TextNode[],
+): MultiResizeHook<TextNode> {
+  const state = useRef(Array<NodeState>())
+
+  function redoProps(state: NodeState) {
+    const { x, y, width, height, size } = state.node
+    return { x, y, width, height, size }
+  }
+
+  function undoProps(state: NodeState) {
+    const { baseBoxSize, baseFontSize: size } = state
+    const { x, y, width, height } = boxRect(baseBoxSize)
+    return { x, y, width, height, size }
+  }
+
+  return {
+    onDown({ relativeSize }) {
+      state.current = nodes.map((node) => ({
+        node,
+        baseFontSize: node.size,
+        baseBoxSize: box(node),
+        relative: relativeSize(node),
+      }))
+    },
+
+    onMove({ selectionRect }) {
+      const { width, height, x, y } = selectionRect
+      for (const { node, relative, baseBoxSize, baseFontSize } of state.current) {
+        const size = rect({
+          x: relative.x * width + x,
+          y: relative.y * height + y,
+          width: width * relative.width,
+          height: height * relative.height,
+        })
+
+        if (direction === "w" || direction === "e") {
+          setRegularNodeSize(node, box(size))
+        } else {
+          const scaled = scaledTextBox(baseBoxSize, size, direction)
+          setTextNodeSize(
+            node,
+            baseFontSize,
+            baseBoxSize,
+            box({
+              x: size.x + size.width / 2 - scaled.width / 2,
+              y: size.y + size.height / 2 - scaled.height / 2,
+              width: scaled.width,
+              height: scaled.height,
+            }),
+          )
+        }
+      }
+    },
+
+    onEnd() {
+      return state.current.map((state) => ({
+        redo: ["set-node-props", [state.node.id, redoProps(state)]],
+        undo: ["set-node-props", [state.node.id, undoProps(state)]],
+      }))
+    },
+  }
+}

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

@@ -0,0 +1,91 @@
+import { useRef } from "react"
+import { useStore } from "react-bolt"
+import { Node } from "../../../model"
+import {
+  box,
+  boxRect,
+  deg,
+  floatNorm,
+  perpDistance,
+  point,
+  resizeBox,
+  type Box,
+  type Corner,
+  type Edge,
+} from "../../../model/geometry/math"
+import { useEditor } from "../../editor"
+import { cursorPosition, usePointer } from "../usePointer"
+
+export function setRegularNodeSize(node: Node, size: Box) {
+  const { x, y, width, height } = boxRect(size)
+  node.x = floatNorm(x)
+  node.y = floatNorm(y)
+  node.width = floatNorm(width)
+  node.height = floatNorm(height)
+}
+
+export function useSingleRegularNodeResize(direction: Edge | Corner) {
+  const editor = useEditor()
+  const edges = direction.split("") as Edge[]
+  const [node] = useStore(editor, "selection")
+
+  const state = useRef({
+    base: box(),
+    anchorPoint: point(),
+  })
+
+  function redoProps() {
+    const { x, y, width, height } = node
+    return { x, y, width, height }
+  }
+
+  function undoProps() {
+    const { x, y, width, height } = boxRect(state.current.base)
+    return { x, y, width, height }
+  }
+
+  return usePointer({
+    onDown(event) {
+      if (!node || node.locked) return false
+
+      state.current = {
+        base: box(node),
+        anchorPoint: cursorPosition(event, node.page),
+      }
+    },
+
+    onMove(event) {
+      const { base, anchorPoint } = state.current
+      const cursor = cursorPosition(event, node.page)
+
+      setRegularNodeSize(
+        node,
+        edges.reduce((size, edge) => {
+          const r = edge === "w" ? 90 : edge === "e" ? -90 : edge === "n" ? 180 : 0
+          return resizeBox(
+            size,
+            edge,
+            perpDistance(anchorPoint, cursor, deg(node.rotation + r)),
+          )
+        }, base),
+      )
+
+      editor.action = {
+        action: "resize",
+        payload: { width: node.width, height: node.height },
+      }
+    },
+
+    onCancel() {
+      editor.action = {}
+    },
+
+    onEnd() {
+      editor.action = {}
+      editor.pushHistory({
+        redo: ["set-node-props", [node.id, redoProps()]],
+        undo: ["set-node-props", [node.id, undoProps()]],
+      })
+    },
+  })
+}

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

@@ -0,0 +1,115 @@
+import { useRef } from "react"
+import { useComputed, useStore } from "react-bolt"
+import { Node, TextNode } from "../../../model"
+import {
+  box,
+  boxRect,
+  floatNorm,
+  point,
+  pointNorm,
+  pointSubtract,
+  rotatePoint,
+  scaleBox,
+  vectorDotProd,
+  type Box,
+  type Corner,
+  type Edge,
+  type Point,
+} from "../../../model/geometry/math"
+import { useEditor } from "../../editor"
+import { cursorPosition, usePointer } from "../usePointer"
+
+export function setTextNodeSize(
+  node: TextNode,
+  baseFontSize: number,
+  baseBoxSize: Box,
+  size: Box,
+) {
+  const { height, width, x, y } = boxRect(size)
+  const targetHeight = Math.max(8, height)
+  node.size = floatNorm((baseFontSize * targetHeight) / baseBoxSize.height)
+  node.x = floatNorm(x)
+  node.y = floatNorm(y)
+  node.height = floatNorm(targetHeight)
+  node.width = floatNorm(width)
+}
+
+export function useSingleTextNodeResize(direction: Edge | Corner) {
+  const editor = useEditor()
+  const [node] = useStore(editor, "selection")
+  const isLocked = useComputed(() => node instanceof Node && node.locked)
+  const enable =
+    node instanceof TextNode && !isLocked && direction !== "w" && direction !== "e"
+
+  const state = useRef({
+    anchorPoint: point(),
+    baseFontSize: 0,
+    baseBoxSize: box(),
+  })
+
+  function scaleDistance(cursor: Point) {
+    const { width, height, rotation } = state.current.baseBoxSize
+    const localDirection = pointNorm({
+      x: direction.includes("w") ? -width : direction.includes("e") ? width : 0,
+      y: direction.includes("n") ? -height : direction.includes("s") ? height : 0,
+    })
+    const distance = vectorDotProd(
+      pointSubtract(cursor, state.current.anchorPoint),
+      rotatePoint(localDirection, point(), rotation),
+    )
+
+    if (direction.length === 1) return distance
+    const diagonal = Math.hypot(width, height)
+    return diagonal === 0 ? 0 : (distance * height) / diagonal
+  }
+
+  function redoProps() {
+    const { x, y, width, height, size } = node as TextNode
+    return { x, y, width, height, size }
+  }
+
+  function undoProps() {
+    const { x, y, width, height } = boxRect(state.current.baseBoxSize)
+    const size = state.current.baseFontSize
+    return { x, y, width, height, size }
+  }
+
+  return usePointer({
+    onDown(event) {
+      if (enable) {
+        state.current = {
+          anchorPoint: cursorPosition(event, node.page),
+          baseFontSize: node.size,
+          baseBoxSize: box(node),
+        }
+      }
+      return enable
+    },
+
+    onMove(event) {
+      if (!enable) return
+
+      const { baseFontSize, baseBoxSize } = state.current
+      const cursor = cursorPosition(event, node.page)
+      const size = scaleBox(baseBoxSize, direction, scaleDistance(cursor))
+      setTextNodeSize(node, baseFontSize, baseBoxSize, size)
+
+      editor.action = {
+        action: "resize",
+        payload: { width: node.width, height: node.height },
+      }
+    },
+
+    onCancel() {
+      editor.action = {}
+    },
+
+    onEnd() {
+      editor.action = {}
+      editor.pushHistory<TextNode>({
+        redo: ["set-node-props", [node.id, redoProps()]],
+        undo: ["set-node-props", [node.id, undoProps()]],
+      })
+    },
+  })
+}