@lazlon-platform/html-editor 0.3.0 → 0.3.2

package/lib/model/geometry.ts

@@ -218,3 +218,30 @@ export function regularPolygonPoints(props: {
     }
   })
 }
+
+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/index.ts

@@ -9,6 +9,7 @@ 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 { StarNode, type StarNodeProps } from "./node/shape/star"
 export { TextNode, type TextNodeProps } from "./node/text"
 export { Page, type PageProps, type SerializedPage } from "./page"
 export { flattenNodes } from "./traversal"

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

@@ -0,0 +1,63 @@
+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/index.ts

@@ -7,4 +7,5 @@ export { GroupContent } from "./node/GroupContent"
 export { ImageContent } from "./node/ImageContent"
 export { NodeView } from "./node/NodeView"
 export { PolygonContent } from "./node/PolygonContent"
+export { StarContent } from "./node/StarContent"
 export { TextContent } from "./node/TextContent"

package/lib/ui/node/EditableContent.tsx

@@ -22,11 +22,12 @@ export function EditableContent(props: {
   const prevContent = useRef(node.tiptap.getJSON())
 
   // start with selection.has(node) so that newly added editable nodes can be focused
-  const [clicked, setClicked] = useState(selection.has(node))
+  const [clicked, setClicked] = useState(() => selection.has(node))
 
   const onDoubleClick = useDoubleClick(
     useCallback(() => {
       setClicked(true)
+      console.log("hello")
       node.tiptap.commands.focus()
     }, [node, setClicked]),
   )
@@ -77,7 +78,7 @@ export function EditableContent(props: {
   return (
     <div
       ref={(ref) => void (node.contentRef = ref)}
-      className={clsx("relative min-w-[min(80%,6ch)]", className)}
+      className={clsx("relative min-w-[min(80%,6ch)] min-h-3", className)}
       onPointerDown={onDoubleClick}
       style={{ ...style, ...(!isEmpty && { lineHeight }) }}
     >

package/lib/ui/node/StarContent.tsx

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

package/package.json

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