@lazlon-platform/html-editor 0.1.0 → 0.2.1

package/demo/Navbar/index.tsx

@@ -1,33 +0,0 @@
-import { useAddNodeAction, useEditor } from "@lazlon/html-editor/hooks"
-import { PolygonNode } from "@lazlon/html-editor/model"
-import { useStore } from "react-bolt"
-
-function randomHexColor(): string {
-  const value = Math.floor(Math.random() * 0xffffff)
-  return `#${value.toString(16).padStart(6, "0")}`
-}
-
-export default function Navbar() {
-  const { history } = useEditor()
-  const canUndo = useStore(history, "undoHistory").length
-  const canRedo = useStore(history, "redoHistory").length
-  const addNode = useAddNodeAction()
-
-  return (
-    <nav className="bg-white flex shadow-xl justify-between px-2">
-      <span className="text-3xl font-medium p-1">Brand</span>
-
-      <div className="flex gap-2 my-auto">
-        <button onClick={() => addNode(PolygonNode, { background: randomHexColor() })}>
-          add
-        </button>
-        <button disabled={!canRedo} onClick={history.redo}>
-          redo
-        </button>
-        <button disabled={!canUndo} onClick={history.undo}>
-          undo
-        </button>
-      </div>
-    </nav>
-  )
-}

package/demo/Sidebar/index.tsx

@@ -1,71 +0,0 @@
-import {
-  useEditor,
-  useNodeFieldBatch,
-  useVisualPositionBatch,
-} from "@lazlon/html-editor/hooks"
-import { PolygonNode } from "@lazlon/html-editor/model"
-import { ColorField, Input, Label, NumberField } from "react-aria-components"
-import { useStore } from "react-bolt"
-
-export default function SideBar() {
-  const editor = useEditor()
-  const selection = useStore(editor, "selection").values().toArray()
-
-  const width = useNodeFieldBatch(selection, "width", NaN)
-  const height = useNodeFieldBatch(selection, "height", NaN)
-  const { x, y } = useVisualPositionBatch(selection)
-  const rotation = useNodeFieldBatch(selection, "rotation", NaN)
-
-  const polygons = selection.filter((node) => node instanceof PolygonNode)
-  const color = useNodeFieldBatch(polygons, "background", "#000000")
-  const roundness = useNodeFieldBatch(polygons, "roundness", NaN)
-  const sides = useNodeFieldBatch(polygons, "sides", NaN)
-
-  return (
-    <div className="bg-white flex flex-col w-58 shadow-lg p-2 gap-8 h-full">
-      {selection.length > 0 && (
-        <fieldset className="grid grid-cols-2 gap-4">
-          <NumberField value={x.value} onChange={x.onChangeEnd}>
-            <Label>X Position</Label>
-            <Input className="w-full" />
-          </NumberField>
-          <NumberField value={y.value} onChange={y.onChangeEnd}>
-            <Label>Y Position</Label>
-            <Input className="w-full" />
-          </NumberField>
-          <NumberField value={width.value} onChange={width.onChangeEnd}>
-            <Label>Width</Label>
-            <Input className="w-full" />
-          </NumberField>
-          <NumberField value={height.value} onChange={height.onChangeEnd}>
-            <Label>Height</Label>
-            <Input className="w-full" />
-          </NumberField>
-          <NumberField value={rotation.value} onChange={rotation.onChangeEnd}>
-            <Label>Rotation</Label>
-            <Input className="w-full" />
-          </NumberField>
-        </fieldset>
-      )}
-      {polygons.length > 0 && (
-        <fieldset className="grid grid-cols-2 gap-4">
-          <ColorField
-            value={color.value}
-            onChange={(c) => color.onChangeEnd(c!.toString("hex"))}
-          >
-            <Label>Color</Label>
-            <Input className="w-full" />
-          </ColorField>
-          <NumberField value={roundness.value} onChange={roundness.onChangeEnd}>
-            <Label>Roundness</Label>
-            <Input className="w-full" />
-          </NumberField>
-          <NumberField value={sides.value} onChange={sides.onChangeEnd} minValue={3}>
-            <Label>Sides</Label>
-            <Input className="w-full" />
-          </NumberField>
-        </fieldset>
-      )}
-    </div>
-  )
-}

package/demo/hotkeys.ts

@@ -1,93 +0,0 @@
-import {
-  useAddNodeAction,
-  useDuplicateAction,
-  useEditor,
-  useGroupAction,
-  useMoveAction,
-  useTrashAction,
-} from "@lazlon/html-editor/hooks"
-import { GroupNode, PolygonNode, TextNode, type Node } from "@lazlon/html-editor/model"
-import { useEffect } from "react"
-import { useHotkeys } from "react-hotkeys-hook"
-
-let pasteCount = 0
-let clipboard = new Set<Node>()
-
-export default function Hotkeys(): React.ReactNode {
-  const editor = useEditor()
-  const duplicate = useDuplicateAction()
-  const trash = useTrashAction()
-  const { group, ungroup } = useGroupAction()
-  const addNode = useAddNodeAction()
-  const move = useMoveAction()
-
-  useEffect(() => {
-    const stage = editor.ref
-
-    function onWheel(e: WheelEvent) {
-      if (!e.ctrlKey) return
-      e.preventDefault()
-
-      const sign = Math.sign(e.deltaY)
-
-      // zoom in, cap at 500%
-      if (sign < 0 && editor.zoom < 5) {
-        editor.zoom += 0.05
-      }
-
-      // zoom out, cap at 5%
-      if (sign > 0 && editor.zoom > 0.05) {
-        editor.zoom -= 0.05
-      }
-    }
-
-    if (stage) {
-      stage.addEventListener("wheel", onWheel, { passive: false })
-      return () => void stage.removeEventListener("wheel", onWheel)
-    }
-  })
-
-  useHotkeys("mod+c", () => {
-    pasteCount = 0
-    clipboard = new Set(editor.selection)
-  })
-
-  useHotkeys("mod+v", () => {
-    duplicate({ nodes: clipboard, offset: ++pasteCount * 10 })
-  })
-
-  useHotkeys("backspace", trash)
-  useHotkeys("delete", trash)
-  useHotkeys("mod+d", () => duplicate())
-
-  useHotkeys("mod+z", () => editor.history.undo())
-  useHotkeys("mod+y", () => editor.history.redo())
-
-  useHotkeys("mod+g", group)
-  useHotkeys("mod+shift+g", () => {
-    const [group, ...rest] = editor.selection
-    if (group && group instanceof GroupNode && rest.length === 0) {
-      ungroup(group)
-    }
-  })
-
-  useHotkeys("shift+r", () => addNode(PolygonNode, { sides: 4 }))
-  // useHotkeys("shift+l", () => addNode(LineNode))
-  useHotkeys("shift+t", () => addNode(TextNode))
-  // useHotkeys("shift+o", () => addNode(OvalNode))
-
-  useHotkeys("escape", () => {
-    editor.selection = new Set()
-  })
-
-  useHotkeys("up", () => move({ y: -1 }))
-  useHotkeys("down", () => move({ y: 1 }))
-  useHotkeys("left", () => move({ x: -1 }))
-  useHotkeys("right", () => move({ x: 1 }))
-  useHotkeys("shift+up", () => move({ y: -10 }))
-  useHotkeys("shift+down", () => move({ y: 10 }))
-  useHotkeys("shift+left", () => move({ x: -10 }))
-  useHotkeys("shift+right", () => move({ x: 10 }))
-
-  return null
-}

package/demo/main.tsx

@@ -1,10 +0,0 @@
-import { StrictMode } from "react"
-import { createRoot } from "react-dom/client"
-import App from "./App"
-import "./style.css"
-
-createRoot(document.body).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)

package/demo/style.css

@@ -1 +0,0 @@
-@import "tailwindcss";

package/eslint.config.js

@@ -1,43 +0,0 @@
-// @ts-check
-
-import js from "@eslint/js"
-import globals from "globals"
-import reactHooks from "eslint-plugin-react-hooks"
-import reactRefresh from "eslint-plugin-react-refresh"
-import tseslint from "typescript-eslint"
-import { defineConfig, globalIgnores } from "eslint/config"
-
-export default defineConfig([
-  globalIgnores(["dist"]),
-  {
-    files: ["**/*.{ts,tsx}"],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    rules: {
-      // react-bolt uses accessors for state updates
-      "react-hooks/immutability": ["off"],
-
-      // Allow unused variables with underscore
-      "@typescript-eslint/no-unused-vars": [
-        "error",
-        {
-          args: "all",
-          argsIgnorePattern: "^_",
-          caughtErrors: "all",
-          caughtErrorsIgnorePattern: "^_",
-          destructuredArrayIgnorePattern: "^_",
-          varsIgnorePattern: "^_",
-          ignoreRestSiblings: true,
-        },
-      ],
-    },
-  },
-])

package/index.html

@@ -1,14 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>html-editor</title>
-</head>
-
-<body class="h-screen">
-    <script type="module" src="/demo/main.tsx"></script>
-</body>
-
-</html>

package/tests/createTestEditor.ts

@@ -1,19 +0,0 @@
-import { Editor, type NodeConstructor } from "@lazlon/html-editor/model"
-import { TextNode } from "../lib/model/node/text"
-import { ImageNode } from "../lib/model/node/image"
-import { PolygonNode } from "../lib/model/node/shape/polygon"
-import { GroupNode } from "../lib/model/node/group"
-
-export function createTestEditor(options?: {
-  schema?: NodeConstructor[]
-  maxHistory?: number
-}) {
-  return new Editor({
-    schema: options?.schema ?? [TextNode, ImageNode, PolygonNode, GroupNode],
-    options: {
-      loadFonts: async () => [],
-      maxHistory: options?.maxHistory ?? 100,
-      snapThreshold: 8,
-    },
-  })
-}