@lazlon-platform/html-editor 0.7.0 → 0.7.2

package/lib/hooks/node.ts

@@ -8,16 +8,7 @@ export function useVisualPositionBatch(nodes: Node[]) {
   const height = useNodeField(nodes, "height", NaN)
   const x = useNodeFieldBatch(nodes, "x", NaN)
   const y = useNodeFieldBatch(nodes, "y", NaN)
-
-  const bounds = boxBounds(
-    box({
-      x: x.value,
-      y: y.value,
-      width,
-      height,
-      rotation,
-    }),
-  )
+  const bounds = boxBounds(box({ x: x.value, y: y.value, width, height }, rotation))
 
   function withBoundingBox(axis: "x" | "y", fn: (value: number) => void) {
     return function (value: number): void {

package/lib/hooks/pointer/useMoveable.ts

@@ -2,7 +2,6 @@ import { useRef } from "react"
 import { LineNode } from "../../model"
 import {
   accessibleLine,
-  box,
   boxBounds,
   boxContainsPoint,
   lineContainsPoint,
@@ -44,7 +43,7 @@ export function useMoveable() {
     if (node instanceof LineNode) {
       return lineContainsPoint(accessibleLine(node), cursor)
     }
-    return boxContainsPoint(box(node), cursor)
+    return boxContainsPoint(node.toBox(), cursor)
   }
 
   return usePointer({

package/lib/hooks/pointer/useResize/multiLineNode.ts

@@ -65,21 +65,19 @@ export function useMultiLineNodeResize(
   }
 
   function undoProps(state: NodeState) {
-    const { baseX: x, baseY: y, basePoints: points } = state
-    return { x, y, points }
+    const { baseX, baseY, basePoints } = state
+    return { x: baseX, y: baseY, points: basePoints }
   }
 
   return {
     onDown({ baseSelectionRect }) {
-      state.current = nodes.map((node) => {
-        return {
-          node,
-          basePoints: node.points,
-          baseX: node.x,
-          baseY: node.y,
-          relativeVertices: node.vertices.map((p) => relativePoint(p, baseSelectionRect)),
-        }
-      })
+      state.current = nodes.map((node) => ({
+        node,
+        basePoints: node.points,
+        baseX: node.x,
+        baseY: node.y,
+        relativeVertices: node.vertices.map((p) => relativePoint(p, baseSelectionRect)),
+      }))
     },
 
     onMove({ selectionRect }) {

package/lib/hooks/pointer/useResize/multiRegularNode.ts

@@ -1,7 +1,6 @@
 import { useRef } from "react"
 import type { Node } from "../../../model"
 import {
-  box,
   boxRect,
   rect,
   rectCenter,
@@ -78,7 +77,7 @@ export function useMultiRegularNodeResize(
     onDown({ relativeSize }) {
       state.current = nodes.map((node) => ({
         node,
-        baseSize: box(node),
+        baseSize: node.toBox(),
         relative: relativeSize(node),
       }))
     },

package/lib/hooks/pointer/useResize/multiTextNode.ts

@@ -64,7 +64,7 @@ export function useMultiTextNodeResize(
       state.current = nodes.map((node) => ({
         node,
         baseFontSize: node.size,
-        baseBoxSize: box(node),
+        baseBoxSize: node.toBox(),
         relative: relativeSize(node),
       }))
     },

package/lib/hooks/pointer/useResize/singleRegularNode.ts

@@ -49,7 +49,7 @@ export function useSingleRegularNodeResize(direction: Edge | Corner) {
       if (!node || node.locked) return false
 
       state.current = {
-        base: box(node),
+        base: node.toBox(),
         anchorPoint: cursorPosition(event, node.page),
       }
     },

package/lib/hooks/pointer/useResize/singleTextNode.ts

@@ -80,7 +80,7 @@ export function useSingleTextNodeResize(direction: Edge | Corner) {
         state.current = {
           anchorPoint: cursorPosition(event, node.page),
           baseFontSize: node.size,
-          baseBoxSize: box(node),
+          baseBoxSize: node.toBox(),
         }
       }
       return enable

package/lib/hooks/pointer/useRotation.ts

@@ -48,7 +48,7 @@ export function useRotation() {
       state.current = {
         base: angle(pivot, origin, cursorPosition(event, page)),
         pivot,
-        nodes: nodes.map((node) => ({ node, baseBox: box(node) })),
+        nodes: nodes.map((node) => ({ node, baseBox: box(node, node.rotation) })),
       }
 
       editor.action = {

package/lib/hooks/pointer/useSelector.ts

@@ -1,18 +1,18 @@
 import { useRef } from "react"
+import { LineNode } from "../../model"
 import {
   type Rect,
+  accessibleLine,
   box,
   boxContainsPoint,
-  pointSubtract,
-  rect,
   boxIntersects,
   lineContainsPoint,
   lineIntersectsBox,
-  accessibleLine,
+  pointSubtract,
+  rect,
 } from "../../model/geometry/math"
 import { useEditor } from "../editor"
 import { cursorPosition, usePointer } from "./usePointer"
-import { LineNode } from "../../model"
 
 function clientPoint(event: { clientX: number; clientY: number }) {
   return { x: event.clientX, y: event.clientY }
@@ -32,7 +32,7 @@ export function useSelector(view: (props: null | Rect) => void) {
         const cursor = cursorPosition(event, node.page)
         if (
           (node instanceof LineNode && lineContainsPoint(accessibleLine(node), cursor)) ||
-          (!(node instanceof LineNode) && boxContainsPoint(box(node), cursor))
+          (!(node instanceof LineNode) && boxContainsPoint(node.toBox(), cursor))
         ) {
           return false
         }
@@ -68,7 +68,7 @@ export function useSelector(view: (props: null | Rect) => void) {
               if (node instanceof LineNode) {
                 return lineIntersectsBox(node, selection)
               } else {
-                return boxIntersects(selection, box(node))
+                return boxIntersects(selection, node.toBox())
               }
             })
         })

package/lib/hooks/pointer/useSnap.ts

@@ -1,5 +1,5 @@
 import { useStore } from "react-bolt"
-import { type Rect, box, boxBounds, rect } from "../../model/geometry/math"
+import { type Rect, boxBounds, rect } from "../../model/geometry/math"
 import type { Node } from "../../model/node"
 import type { Page } from "../../model/page"
 import { useEditor } from "../editor"
@@ -18,7 +18,7 @@ export function useSnap(page: Page) {
 
   function ySnap(nodes: Node[], rect: Rect): [number, ...Lines] {
     const nodelines = nodes.flatMap((n) => {
-      const { y, height } = boxBounds(box(n))
+      const { y, height } = boxBounds(n.toBox())
       return [y, y + height]
     })
 
@@ -49,7 +49,7 @@ export function useSnap(page: Page) {
 
   function xSnap(nodes: Node[], rect: Rect): [number, ...Lines] {
     const nodelines = nodes.flatMap((n) => {
-      const { x, width } = boxBounds(box(n))
+      const { x, width } = boxBounds(n.toBox())
       return [x, x + width]
     })
 

package/lib/hooks/selectionFrame.ts

@@ -1,7 +1,6 @@
 import { useEffect, useRef } from "react"
 import { useComputed, useStore } from "react-bolt"
-import { pointSubtract } from "../model/geometry/math"
-import { selectionDOMRect } from "../ui/selection"
+import { boxBounds, type Point, type Size } from "../model/geometry/math"
 import { useEditor } from "./editor"
 
 function arraysEqual<T>(a: T[], b: T[]): boolean {
@@ -25,6 +24,7 @@ function useObserver(onChange: () => void) {
         .filter((ref) => ref instanceof HTMLElement)
         .toArray(),
   })
+
   const editorRef = useStore(editor, "ref")
   const zoom = useStore(editor, "zoom")
   const pages = useStore(editor, "pages")
@@ -70,26 +70,33 @@ export function useSelectionFrame<E extends HTMLElement>(props?: {
   const selection = useStore(editor, "selection")
   const zoom = useStore(editor, "zoom")
 
-  useObserver(() => {
+  function setRefStyle({ x, y, width, height }: Point & Size, rotation?: number) {
     const frame = ref.current
     const stage = editor.ref?.getBoundingClientRect()
-    if (!frame || !stage) return
+    const page = editor.selectionPage?.ref?.getBoundingClientRect()
+    if (!frame || !stage || !page) return
 
-    if (props?.accountForSingleSelection && selection.size === 1) {
-      const [firstNode] = selection
-      const { x, y, width, height, rotation } = firstNode
-      const relative = firstNode.page.ref!.getBoundingClientRect()
-      const tx = relative.x - stage.x + x * zoom
-      const ty = relative.y - stage.y + y * zoom
-      frame.style.height = `${height * zoom}px`
-      frame.style.width = `${width * zoom}px`
+    console.log(frame, stage, page)
+
+    const tx = page.x - stage.x + x * zoom
+    const ty = page.y - stage.y + y * zoom
+
+    frame.style.height = `${height * zoom}px`
+    frame.style.width = `${width * zoom}px`
+
+    if (typeof rotation === "number") {
       frame.style.transform = `translate(${tx}px, ${ty}px) rotate(${rotation}deg)`
     } else {
-      const dom = selectionDOMRect(selection)
-      const t = pointSubtract(dom, stage)
-      frame.style.height = `${dom.height}px`
-      frame.style.width = `${dom.width}px`
-      frame.style.transform = `translate(${t.x}px, ${t.y}px)`
+      frame.style.transform = `translate(${tx}px, ${ty}px)`
+    }
+  }
+
+  useObserver(() => {
+    if (props?.accountForSingleSelection && selection.size === 1) {
+      const node = selection.values().next().value!
+      setRefStyle(node, node.rotation)
+    } else {
+      setRefStyle(boxBounds(...selection.values().map((node) => node.toBox())))
     }
   })
 

package/lib/model/geometry/math.ts

@@ -95,13 +95,13 @@ export function rect(...args: Array<(Point & Size) | Point>): Rect {
 /**
  * Create a rotatable box for a rectangle
  */
-export function box(input?: Size & Point & { rotation?: Deg }): Box {
+export function box(input: Size & Point = rect(), rotation = deg(0)): Box {
   return {
-    center: rectCenter(input ?? rect()),
-    rotation: input?.rotation ?? deg(0),
-    pivot: rectCenter(input ?? rect()),
-    width: input?.width ?? 0,
-    height: input?.height ?? 0,
+    center: rectCenter(input),
+    pivot: rectCenter(input),
+    rotation,
+    width: input.width,
+    height: input.height,
   }
 }
 

package/lib/model/node/lineNode.ts

@@ -1,10 +1,12 @@
 import { computed, state } from "react-bolt"
 import {
+  deg,
   floatNorm,
   pointAdd,
   rect,
   rectCenter,
   rotatePoint,
+  type Box,
   type Line,
   type Point,
 } from "../geometry/math"
@@ -77,4 +79,15 @@ export class LineNode extends Node {
       }
     })
   }
+
+  override toBox(): Box {
+    const r = rect(...this.vertices)
+    return {
+      center: rectCenter(r),
+      pivot: rectCenter(r),
+      rotation: deg(0),
+      width: r.width,
+      height: r.height,
+    }
+  }
 }

package/lib/model/node.ts

@@ -1,5 +1,5 @@
 import { computed, state } from "react-bolt"
-import { deg, type Deg } from "./geometry/math"
+import { box, deg, type Box, type Deg } from "./geometry/math"
 import type { Page } from "./page"
 
 export type Schema = Map<string, typeof Node>
@@ -89,4 +89,8 @@ export abstract class Node {
       ...(rotation && { rotation }),
     }
   }
+
+  toBox(): Box {
+    return box(this, this.rotation)
+  }
 }

package/lib/ui/node/EditableContent/index.tsx

@@ -87,7 +87,6 @@ export function EditableContent(props: {
       )}
       {showEditor ? (
         <EditorContent
-          onDragStart={(e) => e.preventDefault()}
           editor={node.tiptap}
           className={clsx("*:outline-none", !isFocused && "*:pointer-events-none")}
         />

package/lib/ui/node/ImageContent.tsx

@@ -19,7 +19,7 @@ export function ImageContent(props: { node: ImageNode; fallback?: React.ReactNod
       src={url}
       draggable={false}
       className={clsx(
-        "size-full",
+        "size-full select-none",
         fit === "cover" && "object-cover",
         fit === "contain" && "object-contain",
         fit === "fill" && "object-fill",

package/lib/ui/node/NodeView.tsx

@@ -40,6 +40,8 @@ export function NodeView(props: {
     <div
       id={id}
       data-node={node.name}
+      draggable={false}
+      onDragStartCapture={(e) => e.preventDefault()}
       ref={(ref) => void (node.ref = ref)}
       className={className}
       style={{

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

@@ -15,7 +15,6 @@ export function EllipseContent(props: { node: ShapeNode }) {
     <svg
       aria-hidden="true"
       className="absolute"
-      onDragStart={(e) => e.preventDefault()}
       style={{
         inset: borderWidth / 2,
         width: `calc(100% - ${borderWidth}px)`,

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

@@ -24,7 +24,6 @@ export function RectangleShape(props: {
   return (
     <div
       className="absolute inset-0 size-full border-4"
-      onDragStart={(e) => e.preventDefault()}
       style={{
         borderRadius: radii.map((r) => `${r}px`).join(" "),
         background: background,

package/lib/ui/selection.ts

@@ -1,22 +1,12 @@
-import { box, boxBounds, rect, type Box, type Rect } from "../model/geometry/math"
+import { box, boxBounds, type Box } from "../model/geometry/math"
 import type { Node } from "../model/node"
 
-export function selectionDOMRect(selection: Set<Node>): Rect {
-  const rects = selection
-    .values()
-    .map((node) => node.ref)
-    .filter((dom) => dom instanceof HTMLElement)
-    .map((dom) => dom.getBoundingClientRect())
-
-  return rect(...rects)
-}
-
 export function selectionBox(selection: Iterable<Node>): Box {
   const arr = Array.from(selection)
 
   if (arr.length === 1) {
-    return box(arr[0])
+    return arr[0].toBox()
   }
 
-  return box(boxBounds(...arr.map(box)))
+  return box(boxBounds(...arr.map((n) => n.toBox())))
 }

package/package.json

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