@lazlon-platform/html-editor 0.4.0 → 0.6.0

package/lib/model/geometry.ts

@@ -1,247 +0,0 @@
-export interface Point {
-  x: number
-  y: number
-}
-
-export interface Rect extends Point {
-  width: number
-  height: number
-}
-
-function rectCorners({ x, y, width, height }: Rect): Point[] {
-  return [
-    { x, y },
-    { x: x + width, y },
-    { x, y: y + height },
-    { x: x + width, y: y + height },
-  ]
-}
-
-/**
- * @example
- * ```ts
- * const center = { x: 0, y: 0 }
- * const P = { x: 2, y: 0 }
- * rotate(P, center, 90) // P' = { x: 0, y: 2 }
- * ```
- *
- * P
- * ●
- * │
- * │ 90°
- * ●─────● P'
- */
-export function rotatePoint(p: Point, center: Point, deg: number): Point {
-  const rad = (deg * Math.PI) / 180
-  const cos = Math.cos(rad)
-  const sin = Math.sin(rad)
-  const dx = p.x - center.x
-  const dy = p.y - center.y
-
-  return {
-    x: center.x + dx * cos - dy * sin,
-    y: center.y + dx * sin + dy * cos,
-  }
-}
-
-export function boundingBox(args: Point[] | Rect[]): Rect {
-  const points: Point[] = args.flatMap((arg) =>
-    "width" in arg && "height" in arg ? rectCorners(arg) : arg,
-  )
-
-  let minX = Infinity
-  let minY = Infinity
-  let maxX = -Infinity
-  let maxY = -Infinity
-
-  for (const p of points) {
-    if (p.x < minX) minX = p.x
-    if (p.y < minY) minY = p.y
-    if (p.x > maxX) maxX = p.x
-    if (p.y > maxY) maxY = p.y
-  }
-
-  return {
-    x: minX,
-    y: minY,
-    width: maxX - minX,
-    height: maxY - minY,
-  }
-}
-
-export function rectCenter({ x, y, width, height }: Rect): Point {
-  return {
-    x: x + width / 2,
-    y: y + height / 2,
-  }
-}
-
-/**
- * axis-aligned bounding box (AABB) of the rotated rectangle
- */
-export function rotatedAABB(rect: Rect, deg: number): Rect {
-  return boundingBox(rectCorners(rect).map((c) => rotatePoint(c, rectCenter(rect), deg)))
-}
-
-export function dist(a: Point, b: Point) {
-  const dx = a.x - b.x
-  const dy = a.y - b.y
-  return Math.hypot(dx, dy)
-}
-
-export function sub(a: Point, b: Point) {
-  return {
-    x: a.x - b.x,
-    y: a.y - b.y,
-  }
-}
-
-export function add(a: Point, b: Point) {
-  return {
-    x: a.x + b.x,
-    y: a.y + b.y,
-  }
-}
-
-export function mul(p: Point, n: number) {
-  return {
-    x: p.x * n,
-    y: p.y * n,
-  }
-}
-
-export function norm(p: Point) {
-  const d = Math.hypot(p.x, p.y)
-  return {
-    x: d === 0 ? 0 : p.x / d,
-    y: d === 0 ? 0 : p.y / d,
-  }
-}
-
-export function dot(a: Point, b: Point) {
-  return a.x * b.x + a.y * b.y
-}
-
-export function clamp(n: number, lo: number, hi: number) {
-  return Math.max(lo, Math.min(hi, n))
-}
-
-export function tidyFloat(v: number) {
-  return Math.abs(v) < 1e-10 ? 0 : +v.toFixed(3)
-}
-
-export function radToDeg(rad: number): number {
-  return (rad * 180) / Math.PI
-}
-
-/**
- * @example
- * ```ts
- * const center = { x: 0, y: 0 }
- * const a = { x: 0, y: 2 }
- * const b = { x: 2, y: 0 }
- * angle(center, a, b) // 90
- * ```
- * a
- * ●
- * │
- * │ 90°
- * ●─────● b
- */
-export function angle(center: Point, a: Point, b: Point): number {
-  const angA = radToDeg(Math.atan2(a.y - center.y, a.x - center.x))
-  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),
-    }
-  })
-}
-
-export 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),
-    }
-  })
-}

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"
-
-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()
-  }
-}

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

@@ -1,108 +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 { regularPolygonPoints, roundedPathData } from "../../geometry"
-
-export type PolygonNodeProps = ShapeNodeProps &
-  Partial<
-    Pick<
-      PolygonNode,
-      | "roundness"
-      | "sides"
-      | "cornerTopLeft"
-      | "cornerTopRight"
-      | "cornerBottomLeft"
-      | "cornerBottomRight"
-    >
-  >
-
-export class PolygonNode extends ShapeNode {
-  get name() {
-    return "polygon"
-  }
-
-  @state private accessor _roundness: number
-  @state accessor sides: number
-
-  // rectangles are special cased where they support by corner rounding
-  @state accessor cornerTopLeft: number
-  @state accessor cornerTopRight: number
-  @state accessor cornerBottomLeft: number
-  @state accessor cornerBottomRight: number
-
-  set roundness(r: number) {
-    if (this.sides === 4) {
-      this.cornerTopLeft = r
-      this.cornerTopRight = r
-      this.cornerBottomLeft = r
-      this.cornerBottomRight = r
-    }
-
-    this._roundness = r
-  }
-
-  @computed get roundness() {
-    if (this.sides === 4) {
-      const [first, ...radii] = [
-        this.cornerTopLeft,
-        this.cornerTopRight,
-        this.cornerBottomLeft,
-        this.cornerBottomRight,
-      ]
-
-      return radii.reduce((acc, it) => (it === acc ? acc : 0), first)
-    }
-
-    return this._roundness
-  }
-
-  constructor(
-    editor: Editor,
-    page: Page,
-    {
-      sides,
-      cornerTopLeft,
-      cornerTopRight,
-      cornerBottomLeft,
-      cornerBottomRight,
-      roundness = 0,
-      ...props
-    }: PolygonNodeProps,
-  ) {
-    super(editor, page, props)
-    this._roundness = roundness
-    this.sides = sides ?? 4
-    this.cornerTopLeft = cornerTopLeft ?? roundness
-    this.cornerTopRight = cornerTopRight ?? roundness
-    this.cornerBottomLeft = cornerBottomLeft ?? roundness
-    this.cornerBottomRight = cornerBottomRight ?? roundness
-  }
-
-  props(): PolygonNodeProps {
-    return {
-      ...super.props(),
-      sides: this.sides,
-      cornerTopLeft: this.cornerTopLeft,
-      cornerTopRight: this.cornerTopRight,
-      cornerBottomLeft: this.cornerBottomLeft,
-      cornerBottomRight: this.cornerBottomRight,
-    }
-  }
-
-  serialize(): SerializedNode<this["name"], PolygonNodeProps> {
-    return super.serialize()
-  }
-
-  @computed get svgPathData() {
-    return roundedPathData(
-      regularPolygonPoints({
-        width: this.width,
-        height: this.height,
-        sides: this.sides,
-      }),
-      this._roundness,
-    )
-  }
-}

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

@@ -1,63 +0,0 @@
-import { computed, state } from "react-bolt"
-import { clamp, roundedPathData, starPoints } from "../../geometry"
-import type { Editor } from "../../editor"
-import type { SerializedNode } from "../../node"
-import type { Page } from "../../page"
-import { ShapeNode, type ShapeNodeProps } from "./shape"
-
-export type StarNodeProps = ShapeNodeProps &
-  Partial<Pick<StarNode, "corners" | "roundness" | "depth">>
-
-export class StarNode extends ShapeNode {
-  get name() {
-    return "star"
-  }
-
-  @state accessor corners: number
-  @state accessor roundness: number
-  @state private accessor _depth: number
-
-  @computed get depth() {
-    return this._depth
-  }
-
-  set depth(value: number) {
-    this._depth = clamp(value, 0, 1)
-  }
-
-  constructor(
-    editor: Editor,
-    page: Page,
-    { corners = 5, roundness = 0, depth = 0.4, ...props }: StarNodeProps,
-  ) {
-    super(editor, page, props)
-    this.corners = corners
-    this.roundness = roundness
-    this._depth = clamp(depth, 0, 1)
-  }
-
-  props(): StarNodeProps {
-    return {
-      ...super.props(),
-      corners: this.corners,
-      roundness: this.roundness,
-      depth: this.depth,
-    }
-  }
-
-  serialize(): SerializedNode<this["name"], StarNodeProps> {
-    return super.serialize()
-  }
-
-  @computed get svgPathData() {
-    return roundedPathData(
-      starPoints({
-        width: this.width,
-        height: this.height,
-        corners: this.corners,
-        depth: this.depth,
-      }),
-      this.roundness,
-    )
-  }
-}

package/lib/ui/node/ArrowContent.tsx

@@ -1,60 +0,0 @@
-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/EllipseContent.tsx

@@ -1,49 +0,0 @@
-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/lib/ui/node/PolygonContent.tsx

@@ -1,81 +0,0 @@
-import clsx from "clsx"
-import { useId } from "react"
-import { useStore } from "react-bolt"
-import { type PolygonNode } from "../../model/node/shape/polygon"
-import { EditableContent } from "./EditableContent"
-
-export function PolygonContent(props: { node: PolygonNode; isStatic?: boolean }) {
-  const maskId = useId()
-  const { node, isStatic } = props
-
-  const [valign, halign, background, borderWidth, borderColor, sides] = useStore(
-    node,
-    "valign",
-    "halign",
-    "background",
-    "borderWidth",
-    "borderColor",
-    "sides",
-  )
-
-  const [w, h, d] = useStore(node, "width", "height", "svgPathData")
-
-  const radii = useStore(
-    node,
-    "cornerTopLeft",
-    "cornerTopRight",
-    "cornerBottomRight",
-    "cornerBottomLeft",
-  )
-
-  return (
-    <div className="relative size-full">
-      {sides !== 4 ? (
-        <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="absolute inset-0 size-full"
-          onDragStart={(e) => e.preventDefault()}
-          style={{
-            borderRadius: radii.map((r) => `${r}px`).join(" "),
-            background: 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>
-  )
-}