@lazlon-platform/html-editor 0.2.1 → 0.3.0

package/lib/hooks/actions.ts

@@ -3,7 +3,6 @@ import type { Editor, NodeConstructor } from "../model/editor"
 import type { HistoryAction } from "../model/history"
 import type { Node, NodeProps } from "../model/node"
 import { GroupNode } from "../model/node/group"
-import { TextNode } from "../model/node/text"
 import type { Page } from "../model/page"
 import { flattenNodes } from "../model/traversal"
 import { getTargetRect } from "../ui/selection"
@@ -57,11 +56,6 @@ export function useAddNodeAction(page?: Page) {
       undo: ["delete-node", [targetPage.id, [node.id]]],
     })
 
-    if (node instanceof TextNode) {
-      editor.selection = new Set([node])
-      setTimeout(() => node.tiptap.commands.focus())
-    }
-
     return node as InstanceType<N>
   }
 }

package/lib/model/geometry.ts

@@ -153,3 +153,68 @@ export function angle(center: Point, a: Point, b: Point): number {
   const angB = radToDeg(Math.atan2(b.y - center.y, b.x - center.x))
   return Math.round(((((angA + angB + 180) % 360) + 360) % 360) - 180)
 }
+
+export function roundedPathData(points: Point[], roundness: number): string {
+  const count = points.length
+  const winding = Math.sign(
+    points.reduce((area, curr, i) => {
+      const next = points[(i + 1) % count]
+      return area + curr.x * next.y - next.x * curr.y
+    }, 0),
+  )
+
+  const cmds = Array.from({ length: count }, (_, i) => {
+    const prev = points[(i - 1 + count) % count]
+    const curr = points[i]
+    const next = points[(i + 1) % count]
+    const cmd = i === 0 ? "M" : "L"
+
+    const v1 = norm(sub(prev, curr))
+    const v2 = norm(sub(next, curr))
+
+    const cosTheta = clamp(dot(v1, v2), -1, 1)
+    const theta = Math.acos(cosTheta)
+    const cornerCross =
+      (curr.x - prev.x) * (next.y - curr.y) - (curr.y - prev.y) * (next.x - curr.x)
+
+    if (!isFinite(theta) || theta < 1e-6 || roundness <= 0) {
+      return `${cmd} ${tidyFloat(curr.x)} ${tidyFloat(curr.y)}`
+    }
+
+    const dPrev = dist(curr, prev)
+    const dNext = dist(curr, next)
+    const tIdeal = roundness / Math.tan(theta / 2)
+    const t = Math.min(tIdeal, dPrev / 2, dNext / 2)
+    const rEff = t * Math.tan(theta / 2)
+    const p1 = add(curr, mul(v1, t))
+    const p2 = add(curr, mul(v2, t))
+    const isConcave = winding !== 0 && Math.sign(cornerCross) !== winding
+    const sweep = isConcave ? 0 : 1
+    const arc = `A ${tidyFloat(rEff)} ${tidyFloat(rEff)} 0 0 ${sweep} ${tidyFloat(p2.x)} ${tidyFloat(p2.y)}`
+
+    return `${cmd} ${tidyFloat(p1.x)} ${tidyFloat(p1.y)} ${arc}`
+  })
+
+  return cmds.concat("Z").join(" ")
+}
+
+export 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),
+    }
+  })
+}

package/lib/model/index.ts

@@ -5,6 +5,8 @@ export { EditableNode, type EditableNodeProps } from "./node/editable"
 export { FormattableNode, type FormattableNodeProps } from "./node/formattable"
 export { GroupNode, type GroupNodeProps } from "./node/group"
 export { ImageNode, type ImageNodeProps } from "./node/image"
+export { ArrowNode, type ArrowNodeProps } from "./node/shape/arrow"
+export { EllipseNode, type EllipseNodeProps } from "./node/shape/ellipse"
 export { PolygonNode, type PolygonNodeProps } from "./node/shape/polygon"
 export { ShapeNode, type ShapeNodeProps } from "./node/shape/shape"
 export { TextNode, type TextNodeProps } from "./node/text"

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

@@ -0,0 +1,50 @@
+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"
+
+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

@@ -0,0 +1,26 @@
+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()
+  }
+}

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

@@ -1,9 +1,9 @@
 import { computed, state } from "react-bolt"
 import type { Editor } from "../../editor"
-import { add, clamp, dist, dot, mul, norm, sub, tidyFloat } from "../../geometry"
 import type { SerializedNode } from "../../node"
 import type { Page } from "../../page"
 import { ShapeNode, type ShapeNodeProps } from "./shape"
+import { regularPolygonPoints, roundedPathData } from "../../geometry"
 
 export type PolygonNodeProps = ShapeNodeProps &
   Partial<
@@ -96,78 +96,13 @@ export class PolygonNode extends ShapeNode {
   }
 
   @computed get svgPathData() {
-    return pathData({
-      width: this.width,
-      height: this.height,
-      sides: this.sides,
-      roundness: this._roundness,
-    })
+    return roundedPathData(
+      regularPolygonPoints({
+        width: this.width,
+        height: this.height,
+        sides: this.sides,
+      }),
+      this._roundness,
+    )
   }
 }
-
-function pathData(props: {
-  width: number
-  height: number
-  sides: number
-  roundness: number
-}): string {
-  const { width, height, sides, roundness } = 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
-
-  // vertices (raw)
-  const p = 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),
-    }
-  })
-
-  const cmds = Array.from({ length: sides }, (_, i) => {
-    const prev = p[(i - 1 + sides) % sides]
-    const curr = p[i]
-    const next = p[(i + 1) % sides]
-    const cmd = i === 0 ? "M" : "L"
-
-    const v1 = norm(sub(prev, curr)) // direction from curr towards prev
-    const v2 = norm(sub(next, curr)) // direction from curr towards next
-
-    // interior angle between the two edges at curr
-    const cosTheta = clamp(dot(v1, v2), -1, 1)
-    const theta = Math.acos(cosTheta)
-
-    // degenerate / nearly straight: just treat as sharp
-    if (!isFinite(theta) || theta < 1e-6) {
-      const x = tidyFloat(curr.x)
-      const y = tidyFloat(curr.y)
-      return `${cmd} ${x} ${y}`
-    }
-
-    const dPrev = dist(curr, prev)
-    const dNext = dist(curr, next)
-
-    // how far to inset along each adjacent edge for radius r
-    const tIdeal = roundness / Math.tan(theta / 2)
-
-    // cannot exceed half of either edge
-    const t = Math.min(tIdeal, dPrev / 2, dNext / 2)
-
-    // if we had to clamp t, reduce radius so the arc still matches geometry
-    const rEff = t * Math.tan(theta / 2)
-
-    const p1 = add(curr, mul(v1, t)) // point on edge towards prev
-    const p2 = add(curr, mul(v2, t)) // point on edge towards next
-
-    // Arc to p2 with radius rEff.
-    // Use the small arc (0) and let SVG choose sweep; for convex polygons this is fine.
-    const arc = `A ${tidyFloat(rEff)} ${tidyFloat(rEff)} 0 0 1 ${tidyFloat(p2.x)} ${tidyFloat(p2.y)}`
-
-    return `${cmd} ${tidyFloat(p1.x)} ${tidyFloat(p1.y)} ${arc}`
-  })
-
-  return cmds.concat("Z").join(" ")
-}

package/lib/ui/index.ts

@@ -1,6 +1,8 @@
 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 { NodeView } from "./node/NodeView"

package/lib/ui/node/ArrowContent.tsx

@@ -0,0 +1,60 @@
+import clsx from "clsx"
+import { useId } from "react"
+import { useStore } from "react-bolt"
+import { type ArrowNode } from "../../model/node/shape/arrow"
+import { EditableContent } from "./EditableContent"
+
+export function ArrowContent(props: { node: ArrowNode; isStatic?: boolean }) {
+  const maskId = useId()
+  const { node, isStatic } = props
+
+  const [valign, halign, background, borderWidth, borderColor] = useStore(
+    node,
+    "valign",
+    "halign",
+    "background",
+    "borderWidth",
+    "borderColor",
+  )
+
+  const [w, h, d] = useStore(node, "width", "height", "svgPathData")
+
+  return (
+    <div className="relative size-full">
+      <svg width={w} height={h} 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>
+      <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/EditableContent.tsx

@@ -20,7 +20,10 @@ export function EditableContent(props: {
   const selection = useStore(editor, "selection")
   const { action } = useStore(editor, "action")
   const prevContent = useRef(node.tiptap.getJSON())
-  const [clicked, setClicked] = useState(false)
+
+  // start with selection.has(node) so that newly added editable nodes can be focused
+  const [clicked, setClicked] = useState(selection.has(node))
+
   const onDoubleClick = useDoubleClick(
     useCallback(() => {
       setClicked(true)

package/lib/ui/node/EllipseContent.tsx

@@ -0,0 +1,49 @@
+import clsx from "clsx"
+import { useStore } from "react-bolt"
+import { type EllipseNode } from "../../model/node/shape/ellipse"
+import { EditableContent } from "./EditableContent"
+
+export function EllipseContent(props: { node: EllipseNode; isStatic?: boolean }) {
+  const { node, isStatic } = props
+
+  const [valign, halign, background, borderWidth, borderColor] = useStore(
+    node,
+    "valign",
+    "halign",
+    "background",
+    "borderWidth",
+    "borderColor",
+  )
+
+  return (
+    <div className="relative size-full">
+      <div
+        className="absolute inset-0 size-full"
+        onDragStart={(e) => e.preventDefault()}
+        style={{
+          borderRadius: "50%",
+          background,
+          border: `${borderWidth}px solid ${borderColor}`,
+        }}
+      />
+      <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/package.json

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