@lazlon-platform/html-editor 0.5.0 → 0.7.0

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

@@ -1,130 +0,0 @@
-import { computed, state } from "react-bolt"
-import type { Editor } from "../../editor"
-import type { Point } from "../../geometry/math"
-import { roundedPathData } from "../../geometry/svg"
-import type { SerializedNode } from "../../node"
-import type { Page } from "../../page"
-import { ShapeNode, type ShapeNodeProps } from "./shape"
-
-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,
-    )
-  }
-}
-
-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/node/shape/star.ts

@@ -1,91 +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 { clamp, type Point } from "../../geometry/math"
-import { roundedPathData } from "../../geometry/svg"
-
-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,
-    )
-  }
-}
-
-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/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>
-  )
-}

package/lib/ui/node/StarContent.tsx

@@ -1,60 +0,0 @@
-import clsx from "clsx"
-import { useId } from "react"
-import { useStore } from "react-bolt"
-import { type StarNode } from "../../model/node/shape/star"
-import { EditableContent } from "./EditableContent"
-
-export function StarContent(props: { node: StarNode; 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>
-  )
-}