@lazlon-platform/html-editor 0.5.0 → 0.7.0

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

@@ -0,0 +1,96 @@
+// shapes are not reactive stores because the batch dispatcher and history model
+// is designed for non-nested stores
+
+import { clamp } from "es-toolkit"
+
+export interface StarShape {
+  name: "star"
+  props: {
+    corners: number
+    roundness: number
+    depth: number
+  }
+}
+
+export function newStarShape(props?: Partial<StarShape["props"]>): StarShape {
+  return {
+    name: "star",
+    props: {
+      corners: Math.max(props?.corners ?? 5, 3),
+      roundness: Math.max(props?.roundness ?? 0, 0),
+      depth: clamp(props?.depth ?? 0.4, 0, 1),
+    },
+  }
+}
+
+export interface ArrowShape {
+  name: "arrow"
+  props: {
+    roundness: number
+  }
+}
+
+export function newArrowShape(props?: Partial<ArrowShape["props"]>): ArrowShape {
+  return {
+    name: "arrow",
+    props: {
+      roundness: Math.max(props?.roundness ?? 0, 0),
+    },
+  }
+}
+
+export interface EllipseShape {
+  name: "ellipse"
+  props: { _?: never }
+}
+
+export function newEllipseShape(): EllipseShape {
+  return {
+    name: "ellipse",
+    props: {},
+  }
+}
+
+export interface PolygonShape {
+  name: "polygon"
+  props: {
+    roundness: number
+    sides: number
+  }
+}
+
+export function newPolygonShape(props?: Partial<PolygonShape["props"]>): PolygonShape {
+  return {
+    name: "polygon",
+    props: {
+      roundness: Math.max(props?.roundness ?? 0, 0),
+      sides: clamp(props?.sides ?? 5, 3, 20),
+    },
+  }
+}
+
+export interface RectangleShape {
+  name: "rectangle"
+  props: {
+    cornerTopLeft: number
+    cornerTopRight: number
+    cornerBottomLeft: number
+    cornerBottomRight: number
+  }
+}
+
+export function newRectangleShape(
+  props?: Partial<RectangleShape["props"]>,
+): RectangleShape {
+  return {
+    name: "rectangle",
+    props: {
+      cornerTopLeft: Math.max(props?.cornerTopLeft ?? 0, 0),
+      cornerTopRight: Math.max(props?.cornerTopRight ?? 0, 0),
+      cornerBottomLeft: Math.max(props?.cornerBottomLeft ?? 0, 0),
+      cornerBottomRight: Math.max(props?.cornerBottomRight ?? 0, 0),
+    },
+  }
+}
+
+export type Shape = RectangleShape | ArrowShape | PolygonShape | StarShape | EllipseShape

package/lib/model/node/{text.ts → textNode.ts}

@@ -1,40 +1,29 @@
 import { computed, state } from "react-bolt"
-import type { Editor } from "../editor"
 import type { Page } from "../page"
-import type { SerializedNode } from "../node"
-import { EditableNode, type EditableNodeProps } from "./editable"
+import { EditableNode, type EditableNodeProps } from "./editableNode"
 
 export type TextNodeProps = EditableNodeProps & Partial<Pick<TextNode, "halign" | "size">>
 
 export class TextNode extends EditableNode {
-  get name() {
+  get name(): "text" {
     return "text"
   }
 
   @state accessor halign: "left" | "center" | "right" | "justify"
   @state accessor size: number = 16
-  @state accessor contentHeight: number = 24
 
   private observer = new ResizeObserver(([entry]) => {
-    this.contentHeight = entry.target.clientHeight
+    this.height = entry.target.clientHeight
   })
 
-  @computed get height(): number {
-    return this.contentHeight
-  }
-
-  set height(_) {
-    // no-op: TextNode's height can be set using its font-size
-  }
-
-  constructor(editor: Editor, page: Page, { halign, size, ...props }: TextNodeProps) {
-    super(editor, page, props)
+  constructor(page: Page, { halign, size, height = 24, ...props }: TextNodeProps) {
+    super(page, { height, ...props })
     this.halign = halign ?? "center"
     this.size = size ?? 16
 
     this.tiptap.on("transaction", () => {
       const height = this.tiptap.view.dom.clientHeight
-      if (height > 0) this.contentHeight = height
+      if (height > 0) this.height = height
     })
   }
 
@@ -43,7 +32,7 @@ export class TextNode extends EditableNode {
 
     if (ref) {
       this.observer.observe(ref)
-      this.contentHeight = ref.clientHeight
+      this.height = ref.clientHeight
     } else {
       this.observer.disconnect()
     }
@@ -53,12 +42,8 @@ export class TextNode extends EditableNode {
     return super.contentRef
   }
 
-  props(): TextNodeProps {
+  get props(): TextNodeProps {
     const { halign, size } = this
-    return { ...super.props(), halign, size }
-  }
-
-  serialize(): SerializedNode<this["name"], TextNodeProps> {
-    return super.serialize()
+    return { ...super.props, halign, size }
   }
 }

package/lib/model/node.ts

@@ -1,20 +1,17 @@
 import { computed, state } from "react-bolt"
-import type { Editor } from "./editor"
-import type { Page } from "./page"
 import { deg, type Deg } from "./geometry/math"
+import type { Page } from "./page"
 
 export type Schema = Map<string, typeof Node>
 
-export type SerializedNode<
-  Name extends string = string,
-  Props extends NodeProps = NodeProps,
-> = {
-  name: Name
-  props: Props
+export type SerializedNode<N extends Node = Node> = {
+  name: N["name"]
+  props: N["props"]
 }
 
 export interface NodeProps
-  extends Pick<Node, "id" | "x" | "y" | "width" | "height">,
+  extends
+    Pick<Node, "id" | "x" | "y" | "width" | "height">,
     Partial<Pick<Node, "locked" | "rotation" | "css">> {
   // serialized as a list in case we need to allow
   // nodes to have multiple roles in the future
@@ -23,6 +20,7 @@ export interface NodeProps
 
 export abstract class Node {
   abstract get name(): string
+
   readonly id: string
   readonly page: Page
 
@@ -31,12 +29,12 @@ export abstract class Node {
   @state private accessor _width: number
   @state private accessor _height: number
 
-  @state accessor rotation: Deg
-  @state accessor role: string | null
-  @state accessor locked: boolean
-  @state accessor x: number
-  @state accessor y: number
-  @state accessor css: string
+  @state accessor rotation: Deg = deg(0)
+  @state accessor role: string | null = null
+  @state accessor locked: boolean = false
+  @state accessor x: number = 0
+  @state accessor y: number = 0
+  @state accessor css: string = ""
 
   @computed get width() {
     return this._width
@@ -56,24 +54,28 @@ export abstract class Node {
     this._height = n
   }
 
-  constructor(_: Editor, page: Page, props: NodeProps) {
+  constructor(page: Page, props: NodeProps) {
     this.page = page
     this.id = props.id
     this.x = props.x
     this.y = props.y
     this._width = props.width
     this._height = props.height
-    this.role = props.role?.[0] || null
-    this.locked = props.locked ?? false
-    this.rotation = props.rotation ?? deg(0)
-    this.css = props.css ?? ""
-  }
-
-  blockMove(_: React.PointerEvent): boolean {
-    return !!this.locked
+    if (typeof props.role === "object") {
+      this.role = props.role?.[0]
+    }
+    if (typeof props.locked === "boolean") {
+      this.locked = props.locked
+    }
+    if (typeof props.rotation === "number") {
+      this.rotation = props.rotation
+    }
+    if (typeof props.css === "string") {
+      this.css = props.css
+    }
   }
 
-  props(): NodeProps {
+  get props(): NodeProps {
     const { id, role, locked, rotation, css, x, y, width, height } = this
     return {
       id,
@@ -87,11 +89,4 @@ export abstract class Node {
       ...(rotation && { rotation }),
     }
   }
-
-  serialize(): SerializedNode {
-    return {
-      name: this.name,
-      props: this.props(),
-    }
-  }
 }

package/lib/model/page.ts

@@ -1,10 +1,10 @@
 import { state } from "react-bolt"
 import type { Editor } from "./editor"
 import { Node, type SerializedNode } from "./node"
-// import { createRef } from "react"
 
-export interface PageProps
-  extends Partial<Pick<Page, "background" | "width" | "height">> {
+export interface PageProps extends Partial<
+  Pick<Page, "background" | "width" | "height">
+> {
   id: string
   nodes?: Node[]
 }
@@ -46,7 +46,7 @@ export class Page {
       height: this.height,
       nodes: this.nodes
         .values()
-        .map((node) => node.serialize())
+        .map((node) => this.editor.serializeNode(node))
         .toArray(),
     }
   }

package/lib/model/traversal.ts

@@ -1,5 +1,5 @@
 import { Node } from "./node"
-import { GroupNode } from "./node/group"
+import { GroupNode } from "./node/groupNode"
 import { Page } from "./page"
 
 export function flattenNodes(root: Node | Page): Array<Node> {

package/lib/ui/extractor.ts

@@ -1,9 +1,9 @@
 import type { JSONContent } from "@tiptap/core"
 import { uniq } from "es-toolkit"
 import { Node } from "../model/node"
-import { EditableNode } from "../model/node/editable"
-import { FormattableNode } from "../model/node/formattable"
-import { ShapeNode } from "../model/node/shape/shape"
+import { EditableNode } from "../model/node/editableNode"
+import { FormattableNode } from "../model/node/formattableNode"
+import { ShapeNode } from "../model/node/shapeNode"
 import { Page } from "../model/page"
 import { flattenNodes } from "../model/traversal"
 

package/lib/ui/index.ts

@@ -1,11 +1,9 @@
 export { getReadableForeground } from "./colors"
 export { getColors, getFontFamilies } from "./extractor"
-export { ArrowContent } from "./node/ArrowContent"
 export { EditableContent } from "./node/EditableContent"
-export { EllipseContent } from "./node/EllipseContent"
 export { GroupContent } from "./node/GroupContent"
 export { ImageContent } from "./node/ImageContent"
+export { LineContent } from "./node/LineContent"
 export { NodeView } from "./node/NodeView"
-export { PolygonContent } from "./node/PolygonContent"
-export { StarContent } from "./node/StarContent"
+export { ShapeContent } from "./node/ShapeContent"
 export { TextContent } from "./node/TextContent"

package/lib/ui/node/{EditableContent.tsx → EditableContent/index.tsx}

@@ -3,8 +3,8 @@ import clsx from "clsx"
 import { debounce, isEqual } from "es-toolkit"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { useStore } from "react-bolt"
-import { useEditor } from "../../hooks/editor"
-import type { EditableNode, EditableNodeProps } from "../../model/node/editable"
+import { useEditor } from "../../../hooks/editor"
+import type { EditableNode } from "../../../model"
 import { useDoubleClick } from "./useDoubleClick"
 
 export function EditableContent(props: {
@@ -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,18 +38,19 @@ 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(() => {
       const next = node.tiptap.getJSON()
       const prev = prevContent.current
       if (!isEqual(prev, next)) {
-        editor.history.push<EditableNodeProps>({
+        editor.history.push<EditableNode>({
           undo: ["set-node-props", [node.id, { content: prev }]],
           redo: ["set-node-props", [node.id, { content: next }]],
         })
@@ -70,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/GroupContent.tsx

@@ -1,6 +1,6 @@
 import { useStore } from "react-bolt"
 import type { Node } from "../../model/node"
-import type { GroupNode } from "../../model/node/group"
+import type { GroupNode } from "../../model"
 
 function GroupedNodeContent(props: { node: Node; children: React.ReactNode }) {
   const { node, children } = props

package/lib/ui/node/ImageContent.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx"
 import { useStore } from "react-bolt"
-import type { ImageNode } from "../../model/node/image"
+import type { ImageNode } from "../../model"
 
 export function ImageContent(props: { node: ImageNode; fallback?: React.ReactNode }) {
   const { node, fallback } = props

package/lib/ui/node/LineContent.tsx

@@ -0,0 +1,30 @@
+import { useStore } from "react-bolt"
+import type { LineNode } from "../../model/node/lineNode"
+
+export function LineContent(props: { node: LineNode }) {
+  const [width, height, points, strokeWidth, strokeColor] = useStore(
+    props.node,
+    "width",
+    "height",
+    "points",
+    "strokeWidth",
+    "strokeColor",
+  )
+
+  return (
+    <svg
+      className="absolute inset-0 overflow-visible"
+      width={width}
+      height={height}
+      fill="none"
+    >
+      <polyline
+        points={points.map(({ x, y }) => `${x},${y}`).join(" ")}
+        stroke={strokeColor}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

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

@@ -0,0 +1,57 @@
+import { useId } from "react"
+import { useStore } from "react-bolt"
+import { roundedPathData } from "../../../model/geometry/svg"
+import type { ArrowShape, ShapeNode } from "../../../model/node/shapeNode"
+
+function arrowPath(props: { height: number; width: number; roundness: number }) {
+  const { height, width, roundness } = props
+  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, roundness)
+}
+
+export function ArrowContent(props: { node: ShapeNode; shape: ArrowShape["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 { roundness } = shape
+  const d = arrowPath({ width, height, 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/EllipseContent.tsx

@@ -0,0 +1,37 @@
+import { useStore } from "react-bolt"
+import type { ShapeNode } from "../../../model/node/shapeNode"
+
+export function EllipseContent(props: { node: ShapeNode }) {
+  const { node } = props
+
+  const [background, borderWidth, borderColor] = useStore(
+    node,
+    "background",
+    "borderWidth",
+    "borderColor",
+  )
+
+  return (
+    <svg
+      aria-hidden="true"
+      className="absolute"
+      onDragStart={(e) => e.preventDefault()}
+      style={{
+        inset: borderWidth / 2,
+        width: `calc(100% - ${borderWidth}px)`,
+        height: `calc(100% - ${borderWidth}px)`,
+        overflow: "visible",
+      }}
+    >
+      <ellipse
+        cx="50%"
+        cy="50%"
+        rx="50%"
+        ry="50%"
+        fill={background}
+        stroke={borderColor}
+        strokeWidth={borderWidth}
+      />
+    </svg>
+  )
+}

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

@@ -0,0 +1,62 @@
+import { useId } from "react"
+import { useStore } from "react-bolt"
+import type { Point } from "../../../model/geometry/math"
+import { roundedPathData } from "../../../model/geometry/svg"
+import type { PolygonShape, ShapeNode } from "../../../model/node/shapeNode"
+
+function regularPolygonPoints(props: {
+  width: number
+  height: number
+  sides: number
+}): Point[] {
+  const { width, height, sides } = props
+  const rotation = sides % 2 === 0 ? Math.PI / sides : 0
+  const cx = width / 2
+  const cy = height / 2
+  const rx = width / 2
+  const ry = height / 2
+
+  return Array.from({ length: sides }, (_, i) => {
+    const angle = (i * Math.PI * 2) / sides - Math.PI / 2 + rotation
+    return {
+      x: cx + rx * Math.cos(angle),
+      y: cy + ry * Math.sin(angle),
+    }
+  })
+}
+
+export function PolygonContent(props: { node: ShapeNode; shape: PolygonShape["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 { sides, roundness } = shape
+
+  const d = roundedPathData(regularPolygonPoints({ width, height, sides }), 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/RectangleContent.tsx

@@ -0,0 +1,35 @@
+import { useStore } from "react-bolt"
+import type { RectangleShape, ShapeNode } from "../../../model/node/shapeNode"
+
+export function RectangleShape(props: {
+  node: ShapeNode
+  shape: RectangleShape["props"]
+}) {
+  const { node, shape } = props
+
+  const [background, borderWidth, borderColor] = useStore(
+    node,
+    "background",
+    "borderWidth",
+    "borderColor",
+  )
+
+  const radii = [
+    shape["cornerTopLeft"],
+    shape["cornerTopRight"],
+    shape["cornerBottomRight"],
+    shape["cornerBottomLeft"],
+  ]
+
+  return (
+    <div
+      className="absolute inset-0 size-full border-4"
+      onDragStart={(e) => e.preventDefault()}
+      style={{
+        borderRadius: radii.map((r) => `${r}px`).join(" "),
+        background: background,
+        border: `${borderWidth}px solid ${borderColor}`,
+      }}
+    />
+  )
+}