@lazlon-platform/html-editor 0.7.3 → 0.8.0

package/lib/hooks/index.ts

@@ -10,7 +10,7 @@ export {
   useToggleLockAction,
   useTrashAction,
 } from "./actions"
-export { useBatchSet, useNodeField, useNodeFieldBatch } from "./batch"
+export { reduce, useBatchSet, useNodeField, useNodeFieldBatch } from "./batch"
 export { EditorContext, PageContext, useEditor, usePage } from "./editor"
 export { useMoveable } from "./pointer/useMoveable"
 export { useMovePoint } from "./pointer/useMovePoint"

package/lib/model/index.ts

@@ -7,13 +7,16 @@ export { GroupNode, type GroupNodeProps } from "./node/groupNode"
 export { ImageNode, type ImageNodeProps } from "./node/imageNode"
 export { LineNode, type LineNodeProps } from "./node/lineNode"
 export {
-  ShapeNode,
-  type ShapeNodeProps,
-  newRectangleShape,
-  newPolygonShape,
-  newEllipseShape,
   newArrowShape,
+  newEllipseShape,
+  newPolygonShape,
+  newRectangleShape,
   newStarShape,
+  ShapeNode,
+  type ShapeEnum,
+  type ShapeNodeProps,
+  type Shape,
+  type Shapes,
 } from "./node/shapeNode"
 export { TextNode, type TextNodeProps } from "./node/textNode"
 export { Page, type PageProps, type SerializedPage } from "./page"

package/lib/model/node/shapeNode/index.ts

@@ -1,7 +1,7 @@
 import { state } from "react-bolt"
 import type { Page } from "../../page"
 import { EditableNode, type EditableNodeProps } from "../editableNode"
-import { newRectangleShape, type Shape } from "./shape"
+import { newRectangleShape, type ShapeEnum } from "./shape"
 
 export * from "./shape"
 
@@ -25,7 +25,7 @@ export class ShapeNode extends EditableNode {
   @state accessor halign: "left" | "center" | "right" | "justify"
   @state accessor valign: "top" | "center" | "bottom"
 
-  @state accessor shape: Shape
+  @state accessor shape: ShapeEnum
 
   constructor(
     page: Page,

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

@@ -3,16 +3,45 @@
 
 import { clamp } from "es-toolkit"
 
-export interface StarShape {
-  name: "star"
-  props: {
+/**
+ * Register custom Shape types by augmentating this interface
+ *
+ * ```ts
+ * declare module "@lazlon/html-editor/model" {
+ *   interface Shapes {
+ *     myCustomShape: {
+ *       field: number
+ *     }
+ *   }
+ * }
+ * ```
+ */
+export interface Shapes {
+  star: {
     corners: number
     roundness: number
     depth: number
   }
+  rectangle: {
+    cornerTopLeft: number
+    cornerTopRight: number
+    cornerBottomLeft: number
+    cornerBottomRight: number
+  }
+  polygon: {
+    roundness: number
+    sides: number
+  }
+  arrow: {
+    roundness: number
+  }
+  ellipse: { _?: never }
 }
 
-export function newStarShape(props?: Partial<StarShape["props"]>): StarShape {
+export type ShapeEnum = { [N in keyof Shapes]: Shape<N> }[keyof Shapes]
+export type Shape<N extends keyof Shapes> = { name: N; props: Shapes[N] }
+
+export function newStarShape(props?: Partial<Shapes["star"]>): Shape<"star"> {
   return {
     name: "star",
     props: {
@@ -23,14 +52,7 @@ export function newStarShape(props?: Partial<StarShape["props"]>): StarShape {
   }
 }
 
-export interface ArrowShape {
-  name: "arrow"
-  props: {
-    roundness: number
-  }
-}
-
-export function newArrowShape(props?: Partial<ArrowShape["props"]>): ArrowShape {
+export function newArrowShape(props?: Partial<Shapes["arrow"]>): Shape<"arrow"> {
   return {
     name: "arrow",
     props: {
@@ -39,27 +61,14 @@ export function newArrowShape(props?: Partial<ArrowShape["props"]>): ArrowShape
   }
 }
 
-export interface EllipseShape {
-  name: "ellipse"
-  props: { _?: never }
-}
-
-export function newEllipseShape(): EllipseShape {
+export function newEllipseShape(props?: Partial<Shapes["ellipse"]>): Shape<"ellipse"> {
   return {
     name: "ellipse",
-    props: {},
-  }
-}
-
-export interface PolygonShape {
-  name: "polygon"
-  props: {
-    roundness: number
-    sides: number
+    props: { ...props },
   }
 }
 
-export function newPolygonShape(props?: Partial<PolygonShape["props"]>): PolygonShape {
+export function newPolygonShape(props?: Partial<Shapes["polygon"]>): Shape<"polygon"> {
   return {
     name: "polygon",
     props: {
@@ -69,19 +78,9 @@ export function newPolygonShape(props?: Partial<PolygonShape["props"]>): Polygon
   }
 }
 
-export interface RectangleShape {
-  name: "rectangle"
-  props: {
-    cornerTopLeft: number
-    cornerTopRight: number
-    cornerBottomLeft: number
-    cornerBottomRight: number
-  }
-}
-
 export function newRectangleShape(
-  props?: Partial<RectangleShape["props"]>,
-): RectangleShape {
+  props?: Partial<Shapes["rectangle"]>,
+): Shape<"rectangle"> {
   return {
     name: "rectangle",
     props: {
@@ -92,5 +91,3 @@ export function newRectangleShape(
     },
   }
 }
-
-export type Shape = RectangleShape | ArrowShape | PolygonShape | StarShape | EllipseShape

package/lib/ui/node/ShapeContent/ArrowContent.tsx

@@ -1,7 +1,7 @@
 import { useId } from "react"
 import { useStore } from "react-bolt"
 import { roundedPathData } from "../../../model/geometry/svg"
-import type { ArrowShape, ShapeNode } from "../../../model/node/shapeNode"
+import type { ShapeNode, Shapes } from "../../../model/node/shapeNode"
 
 function arrowPath(props: { height: number; width: number; roundness: number }) {
   const { height, width, roundness } = props
@@ -21,7 +21,7 @@ function arrowPath(props: { height: number; width: number; roundness: number })
   return roundedPathData(arrowPoints, roundness)
 }
 
-export function ArrowContent(props: { node: ShapeNode; shape: ArrowShape["props"] }) {
+export function ArrowContent(props: { node: ShapeNode; shape: Shapes["arrow"] }) {
   const maskId = useId()
   const { node, shape } = props
 

package/lib/ui/node/ShapeContent/PolygonContent.tsx

@@ -2,7 +2,7 @@ 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"
+import type { ShapeNode, Shapes } from "../../../model/node/shapeNode"
 
 function regularPolygonPoints(props: {
   width: number
@@ -25,7 +25,7 @@ function regularPolygonPoints(props: {
   })
 }
 
-export function PolygonContent(props: { node: ShapeNode; shape: PolygonShape["props"] }) {
+export function PolygonContent(props: { node: ShapeNode; shape: Shapes["polygon"] }) {
   const maskId = useId()
   const { node, shape } = props
 

package/lib/ui/node/ShapeContent/RectangleContent.tsx

@@ -1,10 +1,7 @@
 import { useStore } from "react-bolt"
-import type { RectangleShape, ShapeNode } from "../../../model/node/shapeNode"
+import type { ShapeNode, Shapes } from "../../../model/node/shapeNode"
 
-export function RectangleShape(props: {
-  node: ShapeNode
-  shape: RectangleShape["props"]
-}) {
+export function RectangleShape(props: { node: ShapeNode; shape: Shapes["rectangle"] }) {
   const { node, shape } = props
 
   const [background, borderWidth, borderColor] = useStore(

package/lib/ui/node/ShapeContent/StarContent.tsx

@@ -2,7 +2,7 @@ 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"
+import type { ShapeNode, Shapes } from "../../../model/node/shapeNode"
 
 function starPoints(props: {
   width: number
@@ -31,7 +31,7 @@ function starPoints(props: {
   })
 }
 
-export function StarContent(props: { node: ShapeNode; shape: StarShape["props"] }) {
+export function StarContent(props: { node: ShapeNode; shape: Shapes["star"] }) {
   const maskId = useId()
   const { node, shape } = props
 

package/package.json

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