@lazlon-platform/html-editor 0.5.0 → 0.7.0

package/lib/ui/node/ShapeContent/StarContent.tsx

@@ -0,0 +1,75 @@
+import { useId } from "react"
+import { useStore } from "react-bolt"
+import type { Point } from "../../../model/geometry/math"
+import { roundedPathData } from "../../../model/geometry/svg"
+import type { ShapeNode, StarShape } from "../../../model/node/shapeNode"
+
+function starPoints(props: {
+  width: number
+  height: number
+  corners: number
+  depth: number
+}): Point[] {
+  const { width, height, corners, depth } = props
+  const cx = width / 2
+  const cy = height / 2
+  const outerRx = width / 2
+  const outerRy = height / 2
+  const innerRx = outerRx * depth
+  const innerRy = outerRy * depth
+
+  return Array.from({ length: corners * 2 }, (_, i) => {
+    const angle = (i * Math.PI) / corners - Math.PI / 2
+    const isOuter = i % 2 === 0
+    const rx = isOuter ? outerRx : innerRx
+    const ry = isOuter ? outerRy : innerRy
+
+    return {
+      x: cx + rx * Math.cos(angle),
+      y: cy + ry * Math.sin(angle),
+    }
+  })
+}
+
+export function StarContent(props: { node: ShapeNode; shape: StarShape["props"] }) {
+  const maskId = useId()
+  const { node, shape } = props
+
+  const [background, borderWidth, borderColor] = useStore(
+    node,
+    "background",
+    "borderWidth",
+    "borderColor",
+  )
+  const [width, height] = useStore(node, "width", "height")
+  const { corners, depth, roundness } = shape
+
+  const d = roundedPathData(
+    starPoints({
+      width,
+      height,
+      corners,
+      depth,
+    }),
+    roundness,
+  )
+
+  return (
+    <svg width={width} height={height} className="absolute inset-0">
+      <defs>
+        <mask id={maskId} maskUnits="userSpaceOnUse">
+          <path d={d} fill="white" />
+        </mask>
+      </defs>
+
+      <path d={d} fill={background} />
+      <path
+        d={d}
+        fill="none"
+        stroke={borderColor}
+        strokeWidth={borderWidth}
+        mask={`url(#${maskId})`}
+      />
+    </svg>
+  )
+}

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

@@ -0,0 +1,43 @@
+import clsx from "clsx"
+import { useStore } from "react-bolt"
+import type { ShapeNode } from "../../../model"
+import { EditableContent } from "../EditableContent"
+import { ArrowContent } from "./ArrowContent"
+import { EllipseContent } from "./EllipseContent"
+import { PolygonContent } from "./PolygonContent"
+import { RectangleShape } from "./RectangleContent"
+import { StarContent } from "./StarContent"
+
+export function ShapeContent(props: { node: ShapeNode; isStatic?: boolean }) {
+  const { node, isStatic } = props
+  const [valign, halign, shape] = useStore(node, "valign", "halign", "shape")
+
+  return (
+    <div className="relative size-full">
+      {shape.name === "rectangle" && <RectangleShape node={node} shape={shape.props} />}
+      {shape.name === "polygon" && <PolygonContent node={node} shape={shape.props} />}
+      {shape.name === "star" && <StarContent node={node} shape={shape.props} />}
+      {shape.name === "ellipse" && <EllipseContent node={node} />}
+      {shape.name === "arrow" && <ArrowContent node={node} shape={shape.props} />}
+
+      <div
+        className={clsx(
+          "flex size-full",
+          valign === "top" && "items-start",
+          valign === "center" && "items-center",
+          valign === "bottom" && "items-end",
+          halign === "left" && "justify-start text-left",
+          halign === "center" && "justify-center text-center",
+          halign === "right" && "justify-end text-right",
+          halign === "justify" && "w-full text-justify",
+        )}
+      >
+        <EditableContent
+          isStatic={isStatic}
+          node={node}
+          className={clsx(halign === "justify" && "w-full")}
+        />
+      </div>
+    </div>
+  )
+}

package/lib/ui/node/TextContent.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx"
 import { useEffect } from "react"
 import { useStore } from "react-bolt"
 import { useEditor } from "../../hooks/editor"
-import type { TextNode } from "../../model/node/text"
+import type { TextNode } from "../../model"
 import { EditableContent } from "./EditableContent"
 
 export function TextContent(props: {

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.5.0",
+  "version": "0.7.0",
   "type": "module",
   "files": [
     "lib"

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),
-      }
-    },
-    onMove(event) {
-      const cursor = cursorPosition(event, node)
-
-      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,103 +0,0 @@
-import { useRef } from "react"
-import { angle, deg, point, rectCenter, type Deg } from "../../model/geometry/math"
-import type { HistoryAction } from "../../model/history"
-import type { Node } from "../../model/node"
-import { selectionDOMRect } from "../../ui/selection"
-import { useEditor } from "../editor"
-import { 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({
-    centerPoint: point(),
-    inititalDeg: deg(0),
-    nodes: Array<{ node: Node; deg: Deg }>(),
-  })
-
-  return usePointer({
-    onDown(event) {
-      const target = selectionDOMRect(editor.selection)
-      const nodes = editor.selection.values().toArray()
-      const center = rectCenter(target)
-
-      state.current = {
-        centerPoint: center,
-        inititalDeg: angle(center, point(), {
-          x: event.clientX,
-          y: event.clientY,
-        }),
-        nodes: nodes.map((node) => ({ node, deg: node.rotation })),
-      }
-
-      const deg = nodes.length === 1 ? nodes[0].rotation : 0
-      editor.action = { action: "rotate", payload: { deg } }
-    },
-
-    onMove(event) {
-      const { centerPoint, inititalDeg, nodes } = state.current
-
-      const clientPoint = { x: event.clientX, y: event.clientY }
-      const deg = angle(centerPoint, point(), clientPoint) - inititalDeg
-
-      for (const n of nodes) {
-        n.node.rotation = snappedDeg(n.deg, deg, event.shiftKey)
-      }
-
-      const display =
-        nodes.length === 1
-          ? nodes[0].node.rotation
-          : snappedDeg(inititalDeg, deg, event.shiftKey)
-
-      editor.action = {
-        action: "rotate",
-        payload: {
-          deg: display,
-        },
-      }
-    },
-
-    onCancel() {
-      editor.action = {}
-    },
-
-    onEnd(event) {
-      const { centerPoint, inititalDeg, nodes } = state.current
-
-      const clientPoint = { x: event.clientX, y: event.clientY }
-      const deg = angle(centerPoint, point(), clientPoint) - inititalDeg
-
-      if (nodes.length === 0) {
-        const [n] = nodes
-        const rotation = snappedDeg(n.deg, deg, event.shiftKey)
-        editor.history.push({
-          redo: ["set-node-props", [n.node.id, { rotation }]],
-          undo: ["set-node-props", [n.node.id, { rotation: n.deg }]],
-        })
-        n.node.rotation = rotation
-      } else {
-        const redo: HistoryAction[] = []
-        const undo: HistoryAction[] = []
-
-        for (const n of nodes) {
-          const rotation = snappedDeg(n.deg, deg, event.shiftKey)
-          redo.push(["set-node-props", [n.node.id, { rotation }]])
-          undo.push(["set-node-props", [n.node.id, { rotation: n.deg }]])
-          n.node.rotation = rotation
-        }
-
-        editor.history.push({
-          redo: ["batch", redo],
-          undo: ["batch", undo],
-        })
-      }
-
-      editor.action = {}
-    },
-  })
-}

package/lib/model/node/shape/arrow.ts

@@ -1,50 +0,0 @@
-import { computed, state } from "react-bolt"
-import type { Editor } from "../../editor"
-import type { SerializedNode } from "../../node"
-import type { Page } from "../../page"
-import { ShapeNode, type ShapeNodeProps } from "./shape"
-import { roundedPathData } from "../../geometry/svg"
-
-export type ArrowNodeProps = ShapeNodeProps & Partial<Pick<ArrowNode, "roundness">>
-
-export class ArrowNode extends ShapeNode {
-  get name() {
-    return "arrow"
-  }
-
-  @state accessor roundness: number
-
-  constructor(editor: Editor, page: Page, { roundness = 0, ...props }: ArrowNodeProps) {
-    super(editor, page, props)
-    this.roundness = roundness
-  }
-
-  props(): ArrowNodeProps {
-    return {
-      ...super.props(),
-      roundness: this.roundness,
-    }
-  }
-
-  serialize(): SerializedNode<this["name"], ArrowNodeProps> {
-    return super.serialize()
-  }
-
-  @computed get svgPathData() {
-    const { width, height } = this
-    const bodyRight = width * 0.68
-    const inset = height * 0.28
-
-    const arrowPoints = [
-      { x: 0, y: inset },
-      { x: bodyRight, y: inset },
-      { x: bodyRight, y: 0 },
-      { x: width, y: height / 2 },
-      { x: bodyRight, y: height },
-      { x: bodyRight, y: height - inset },
-      { x: 0, y: height - inset },
-    ]
-
-    return roundedPathData(arrowPoints, this.roundness)
-  }
-}

package/lib/model/node/shape/ellipse.ts

@@ -1,26 +0,0 @@
-import type { Editor } from "../../editor"
-import type { SerializedNode } from "../../node"
-import type { Page } from "../../page"
-import { ShapeNode, type ShapeNodeProps } from "./shape"
-
-export type EllipseNodeProps = ShapeNodeProps
-
-export class EllipseNode extends ShapeNode {
-  get name() {
-    return "ellipse"
-  }
-
-  constructor(editor: Editor, page: Page, props: EllipseNodeProps) {
-    super(editor, page, props)
-  }
-
-  props(): EllipseNodeProps {
-    return {
-      ...super.props(),
-    }
-  }
-
-  serialize(): SerializedNode<this["name"], EllipseNodeProps> {
-    return super.serialize()
-  }
-}