@lazlon-platform/html-editor 0.5.0 → 0.6.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,13 +1,11 @@
 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"
   }
 
@@ -27,8 +25,8 @@ export class TextNode extends EditableNode {
     // 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, ...props }: TextNodeProps) {
+    super(page, props)
     this.halign = halign ?? "center"
     this.size = size ?? 16
 
@@ -53,12 +51,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,16 +1,12 @@
 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
@@ -23,6 +19,7 @@ export interface NodeProps
 
 export abstract class Node {
   abstract get name(): string
+
   readonly id: string
   readonly page: Page
 
@@ -34,8 +31,8 @@ export abstract class Node {
   @state accessor rotation: Deg
   @state accessor role: string | null
   @state accessor locked: boolean
-  @state accessor x: number
-  @state accessor y: number
+  @state accessor x: number = 0
+  @state accessor y: number = 0
   @state accessor css: string
 
   @computed get width() {
@@ -56,7 +53,7 @@ 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
@@ -69,11 +66,7 @@ export abstract class Node {
     this.css = props.css ?? ""
   }
 
-  blockMove(_: React.PointerEvent): boolean {
-    return !!this.locked
-  }
-
-  props(): NodeProps {
+  get props(): NodeProps {
     const { id, role, locked, rotation, css, x, y, width, height } = this
     return {
       id,
@@ -87,11 +80,4 @@ export abstract class Node {
       ...(rotation && { rotation }),
     }
   }
-
-  serialize(): SerializedNode {
-    return {
-      name: this.name,
-      props: this.props(),
-    }
-  }
 }

package/lib/model/page.ts

@@ -1,7 +1,6 @@
 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">> {
@@ -46,7 +45,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: {
@@ -38,6 +38,7 @@ export function EditableContent(props: {
   useEffect(() => {
     if (!selection.has(node)) {
       node.blur()
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setClicked(false)
     }
   }, [selection, node])
@@ -47,7 +48,7 @@ export function EditableContent(props: {
       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 }]],
         })

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,32 @@
+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",
+  )
+
+  const polylinePoints = points.map(({ x, y }) => `${x},${y}`).join(" ")
+
+  return (
+    <svg
+      className="absolute inset-0 overflow-visible"
+      width={width}
+      height={height}
+      fill="none"
+    >
+      <polyline
+        points={polylinePoints}
+        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}`,
+      }}
+    />
+  )
+}

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/package.json

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