@oh-just-another/editor 0.61.1 → 0.62.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/CHANGELOG.md +125 -0
  2. package/README.md +18 -15
  3. package/dist/.tsbuildinfo +1 -1
  4. package/dist/Diagram.d.ts +22 -1
  5. package/dist/Diagram.d.ts.map +1 -1
  6. package/dist/Diagram.js +151 -114
  7. package/dist/Diagram.js.map +1 -1
  8. package/dist/brand/brand-logo.d.ts +11 -0
  9. package/dist/brand/brand-logo.d.ts.map +1 -0
  10. package/dist/brand/brand-logo.js +11 -0
  11. package/dist/brand/brand-logo.js.map +1 -0
  12. package/dist/brand/logo.generated.d.ts +4 -0
  13. package/dist/brand/logo.generated.d.ts.map +1 -0
  14. package/dist/brand/logo.generated.js +5 -0
  15. package/dist/brand/logo.generated.js.map +1 -0
  16. package/dist/file-actions.d.ts +38 -7
  17. package/dist/file-actions.d.ts.map +1 -1
  18. package/dist/file-actions.js +167 -17
  19. package/dist/file-actions.js.map +1 -1
  20. package/dist/index.d.ts +4 -1
  21. package/dist/index.d.ts.map +1 -1
  22. package/dist/index.js +4 -1
  23. package/dist/index.js.map +1 -1
  24. package/dist/png-export.d.ts +7 -1
  25. package/dist/png-export.d.ts.map +1 -1
  26. package/dist/png-export.js +13 -49
  27. package/dist/png-export.js.map +1 -1
  28. package/dist/preferences-storage.d.ts +18 -0
  29. package/dist/preferences-storage.d.ts.map +1 -0
  30. package/dist/preferences-storage.js +63 -0
  31. package/dist/preferences-storage.js.map +1 -0
  32. package/dist/scene-subset.d.ts +20 -0
  33. package/dist/scene-subset.d.ts.map +1 -0
  34. package/dist/scene-subset.js +68 -0
  35. package/dist/scene-subset.js.map +1 -0
  36. package/package.json +16 -14
package/CHANGELOG.md CHANGED
@@ -1,5 +1,130 @@
1
1
  # @oh-just-another/editor
2
2
 
3
+ ## 0.62.0
4
+
5
+ ### Minor Changes
6
+
7
+ - b8f70d6: Brand cell of the top bar shows the product logo. New `logo` prop on `Diagram` (default: the built-in `BrandLogo`, also exported; `null` drops the cell). The light / dark artwork lives in `packages/editor/assets/logo.svg` and `logo-dark.svg`, inlined by `scripts/gen-logo.mjs` (`pnpm gen:logo`, part of `build`); CSS (`.du-brand-logo-light/-dark`, `--du-brand-h`) shows the variant matching the theme. The `⌗` glyph and the playground's "Diagram" heading are gone.
8
+ - c989c1c: Canvas context menu (right-click on empty canvas): Paste, Unlock all, Add text / Add sticky note / Add comment, Set start view / Set current view as start, check rows for Show grid, Snap to grid, Snap objects, Show object size, Suggest object size, a "Mouse or trackpad" radio submenu, and Show all. `ContextMenuItem` actions gain `checked` (rendered as a leading check mark, `role="menuitemcheckbox"`). `<Diagram persistPreferences>` keeps `EditorPreferences` in `localStorage` (`bindPreferencesPersistence` / `loadPreferences` exported for hand-composed shells).
9
+ - 76463dd: Sticky reaction pills and the "+" add-reaction button are now painted by the canvas renderer (single visual source that tracks the shape 1:1 while dragging; pills also reach PNG / SVG exports); the DOM overlay only lays transparent click zones over the same rects (`stickyReactionLayout`) and hosts the emoji picker. Pills keep a constant on-screen size across zoom (low-zoom clamp `STICKY_REACTION_MIN_ZOOM`) and wrap onto new rows inline-block style instead of being dropped. The "+" button is hover-only chrome: shown for the sticky under the idle cursor (`Editor.hoveredStickyId` → `RenderSceneOptions.hoveredElement`), excluded from exports and read-only views. Static exports gained content switches (`RenderSceneOptions.content`, defaults in `EXPORT_CONTENT_DEFAULTS`) toggling sticky reactions / tags / author, wired to "Include in export" checkboxes in the Export… menu and to `downloadPng` / `downloadSvg` / `exportSceneToPng`.
10
+ - 66481cd: Context menu rows "Copy as PNG", "Copy as SVG" and "Copy as text" copy the selection to the clipboard (transparent retina PNG; fitted SVG markup as text; text / labels one per line). New editor exports `copySelectionAsPng` / `copySelectionAsSvg` / `copySelectionAsText`, `selectionText`, `sceneToSvgMarkup`, `subsetScene`, `sceneBounds`, `fitViewportTo`, registered as `copy-as-png` / `copy-as-svg` / `copy-as-text` actions. The react-ui context menu shows the rows when the host registered those actions.
11
+ - e202058: Drop any importable diagram file onto the canvas. `@oh-just-another/importers` now owns the formats table (`DIAGRAM_FORMATS`, `IMPORT_FORMATS`, `EXPORT_FORMATS`, `importSceneFrom`, `exportSceneAs`, `importFormatForFile`) and ships `diagramFileDropHandler` — native JSON, Excalidraw, Mermaid, JSON Canvas, Graphviz DOT and draw.io files are parsed and inserted at the drop point; the `Editor` component registers it by default (listed as "Diagrams" in the drop overlay). New `Editor.insertScene(fragment, worldPoint)` merges a scene fragment — elements, links and binary files, ids remapped, one undo step — into the current scene without replacing it.
12
+ - c25cb4e: `Diagram` gains `renderExportMenuExtras` — extra rows inside Board › Export after the built-in PNG / SVG entries, so hosts add their export formats to the same submenu instead of a second "Export as".
13
+ - 7318742: The main menu is compact and nested: Board › (Open, Save as JSON, Copy as image, Export ›, Start view, Set current view as start, Reset canvas), Edit › (Undo/Redo, Cut/Copy/Paste, Select all, Delete, Commands ⌘K, Find ⌘F), View › (Grid › None / Line grid / Dot grid + Snap to grid switch, Object dimensions, Minimap, Theme ›, Enter full screen), Preferences › (Mouse or trackpad ›, Snap objects, Suggest object size), with Hotkeys and GitHub as top-level rows. Zoom entries moved out (the zoom menu has them); segmented toggles became radio rows and switches. New `<Diagram renderBoardMenuExtras>` slot renders host rows inside Board › (the playground's Import / Export formats live there now).
14
+ - d8bf8c1: Zoom menu: clicking the zoom percentage in the bottom bar opens a view menu — Enter / Exit full screen, Hide / Show minimap (`M`), Grid › (None / Dot grid / Line grid), an Object dimensions switch, Fit to screen and zoom presets (50 % … 2000 %). `Editor.setZoom(level)` sets an absolute zoom about the viewport centre. react-ui adds the `Switch` primitive, the `useFullscreen` hook, and `MainMenu` options `ariaLabel` / `placement` / `triggerClassName` / `triggerStyle` plus `MainMenu.Item` `trailing`. The `minimap` prop now seeds the runtime-toggleable minimap.
15
+
16
+ ### Patch Changes
17
+
18
+ - bb08cc6: Every chrome control is now 40px — grouped toolbar buttons, the selection floating panel, panel headers, dialog and sidebar buttons — matching the menu row height (`--du-button-size-sm` is an alias of `--du-control-size`). Glyphs scale with them through shared icon presets exported from `@oh-just-another/react-ui`: `CONTROL_ICON` (20px, inside controls), `ROW_ICON` (16px, menu / list rows), `MARK_ICON` (14px checks / chevrons), `BADGE_ICON` (12px chips). Inputs grow to 36px, small inline controls to 28px, colour swatches to 32px, help-dialog key pills to 24px.
19
+ - 2105693: Crisp glyphs: icon presets moved to pixel-aligned lucide sizes — `CONTROL_ICON` 24 / 2 (the native grid, 2-px strokes), `ROW_ICON` and `MARK_ICON` 16 / 1.5 (1-px strokes), `BADGE_ICON` 12 / 2; `--du-icon-size` is 24. The vertical tool dock now sits on a whole-pixel offset (`top: round(50%, 1px); translate: 0 round(-50%, 1px)` on the new `.du-dock` wrapper) instead of a `translateY(-50%)` that landed on half pixels whenever the free space was odd and blurred every glyph in the dock.
20
+ - 8233dd1: Design tokens for the static chrome. The `:root` block of `styles.css` is now one documented token sheet grouped by type — colour (surfaces, text, accent, inverse), elevation, radius, spacing scale, control sizing, typography, layout (`--du-bar-height`, `--du-bar-clear`, `--du-side-panel-w`), menus, popovers, modals, toasts, tooltip, z-index scale and motion. Every hard-coded value in the mode toolbars, zoom controls, minimap, top bars, help / merge dialogs, `Modal`, `Toast`, `Tooltip`, `BottomSheet` and the tool-options dock now reads a token; their inline styles moved to classes (`du-modal-title/-subtitle/-close/-footer`, `du-toast*`, `du-sheet-*`, `du-minimap-dock`, `du-tool-options-dock`, `du-zoom-*`, `du-toolbar-divider`, `du-brand`). Removed the unused `TOOLBAR_SEPARATOR_HEIGHT` export — the separator height is `--du-icon-size`.
21
+ - 1b80b66: `<Diagram>`'s chrome shell no longer re-renders on every scene change: the whole-scene subscription (menus, toolbars, dialogs re-rendered on every frame of a drag, making element moves sluggish) is narrowed to the Grid / Snap toggle values only.
22
+ - 10eac46: Drop overlay: while an OS file is dragged over the canvas the editor shows a dashed frame, a drop glyph with "DROP" and a chip per accepted file kind. `FileDropHandler` gains presentation metadata — `label`, `kind` (`image` · `video` · `scene` · `text` · `data` · `file`) and `formats` — the built-in image and video handlers ship theirs; `Editor.getFileDropHandlers()` lists the registry. New `FileDropOverlay` component and `usePalettePlacement({ onFileDrag })` for hosts composing their own canvas.
23
+ - 0ed2288: Embed binary files in scene file exports. `serializeScene` / `stringifyScene` accept `{ includeFiles: true }` to inline `Scene.files` (base64) into the document, and `parseScene` / `deserializeScene` restore them — so a saved scene with images / GIFs / videos is self-contained and renders on any machine. The editor's Save action (Cmd+S) now embeds files; autosave documents still omit them (bytes stay in the host's binary store).
24
+ - 1a9bf66: Elements carrying a safe `href` now show a persistent link badge at their top-right corner (new `LinkBadges` overlay, mounted by the editor shell). Clicking the badge opens the link; the hover popup and Cmd/Ctrl-click behaviour are unchanged. Badges track pan/zoom and also render in read-only mode.
25
+ - f7cc2c0: `MainMenu.Item` gains `checked` — the row renders as `menuitemcheckbox` with a decorative trailing switch instead of nesting a `Switch` button inside the row button (invalid HTML, React warned on every open). `Switch` gains `presentational` for the same purpose.
26
+ - 64e97b9: Distance tokens for the chrome: `--du-dock-inset` (14px, canvas edge → vertical tool dock), `--du-flyout-gap` (14px, a bar → the menu / flyout it opens: Shapes and lines, main and zoom menus) and `--du-submenu-gap` (10px, parent menu column → nested menu). Nested menus no longer overlap their parent column after the tighter menu inset; the context-menu submenu reads its alignment from the live panel instead of a hard-coded 7px; the dock clears an open library by its real inset + width instead of a stale 12px constant.
27
+ - b90174d: One spacing system for every menu surface. New `--du-menu-*` tokens (panel padding 6, min-width 220, row height 36 = button size, row padding 10, icon / check gutter 20, gap 8, font 13 / shortcut 11, separator 6) and `--du-modal-*` tokens (16×20 padding, radius 14, gap 12), with shared `.du-menu-panel` / `.du-menu-row` / `.du-menu-gutter` / `.du-menu-shortcut` / `.du-menu-sep` / `.du-menu-group-title` / `.du-modal-header` / `.du-modal-body` classes. The context menu, `MainMenu` (main and zoom menus), the Shapes and lines flyout, popover list rows and the Help dialog all use them, so rows, gutters and separators line up across the UI. The zoom-percentage trigger is flat like its neighbours.
28
+ - 4df12dd: Style tokens aligned with the reference: radii 4 (items) / 8 (toolbars, dropdowns) / 12 (panels, dialogs); one elevation shadow for every floating surface; typography tokens `--du-font-size` 14 / `--du-font-size-sm` 12 / `--du-line-height` 20 used throughout; 40-px tool buttons with 4-px item radius inside 8-px groups; 16-px screen inset; menu rows 44 px high with 16-px padding, 24-px icon gutter and 240-px panels. The minimap container uses the same tokens.
29
+ - 67b98bb: "Shapes and lines" toolbar button (reference behaviour): replaces the separate rectangle / ellipse / connector buttons with one trigger opening a flyout beside the toolbar — Line / Arrow / Elbow arrow (connector presets: routing + arrowhead, applied to new links AND the live preview via `Editor.armLineTool`), Rectangle / Oval / Rhombus / Triangle (`Editor.armShapeTool` — diamond and triangle draw as inscribed polygons through the same rubber-band gesture), and "More shapes" opening the template library (the standalone library toggle is gone from the dock — "More shapes" is now its only toolbar entry point; `hideLibraryButton` removes that row). Hotkeys R / O / L keep arming the stock tools; any tool switch resets the armed variant.
30
+ - 321c4a3: Toolbar action buttons and the zoom controls no longer re-render on every editor change: action buttons re-render only when their pressed/disabled state actually flips, and the zoom pill subscribes to the zoom value alone — a whole-editor subscription re-rendered them on every frame of an element drag.
31
+ - 8163681: First review pass on the toolbar redesign. Locked elements are no longer captured by marquee selection. Embedded shape labels clip to the shape's padded body (extra lines aren't painted), the inline-edit caret sits exactly on its line, and shapes with a label show the full set of text controls (font, size, style, alignment, color, highlight) writing through the new `updateLabelStyle` / `updateLabelProps`. Replacing an image refits the shape's height to the new file's aspect ratio, image resize never mirrors on overshoot, and the crop button matches the toolbar style. Sticky notes look like paper (drop shadow, folded corner), support tags (toolbar editor + on-card pills) and emoji reactions with counters via a bottom-left reaction bar (`StickyReactions` overlay, `setStickyTags` / `addStickyReaction`). The hide-frame feature was removed.
32
+ - Updated dependencies [98070d8]
33
+ - Updated dependencies [f12caa8]
34
+ - Updated dependencies [b8f70d6]
35
+ - Updated dependencies [c989c1c]
36
+ - Updated dependencies [a1ea1b2]
37
+ - Updated dependencies [76463dd]
38
+ - Updated dependencies [bb08cc6]
39
+ - Updated dependencies [c26b729]
40
+ - Updated dependencies [2942fb9]
41
+ - Updated dependencies [ef7a237]
42
+ - Updated dependencies [9e12fca]
43
+ - Updated dependencies [ab5af20]
44
+ - Updated dependencies [2e9c5c5]
45
+ - Updated dependencies [d0eb799]
46
+ - Updated dependencies [66481cd]
47
+ - Updated dependencies [2105693]
48
+ - Updated dependencies [8233dd1]
49
+ - Updated dependencies [e202058]
50
+ - Updated dependencies [e0e4ea9]
51
+ - Updated dependencies [d658680]
52
+ - Updated dependencies [e66a8a5]
53
+ - Updated dependencies [10eac46]
54
+ - Updated dependencies [0ed2288]
55
+ - Updated dependencies [3e5d81f]
56
+ - Updated dependencies [a6fe14d]
57
+ - Updated dependencies [06a0625]
58
+ - Updated dependencies [3ff16ab]
59
+ - Updated dependencies [09bc11a]
60
+ - Updated dependencies [b965236]
61
+ - Updated dependencies [e2ff8df]
62
+ - Updated dependencies [5f08d13]
63
+ - Updated dependencies [3019bc7]
64
+ - Updated dependencies [2e2a9e7]
65
+ - Updated dependencies [f46e3da]
66
+ - Updated dependencies [ab44aa8]
67
+ - Updated dependencies [da647fc]
68
+ - Updated dependencies [1a9bf66]
69
+ - Updated dependencies [350c6d3]
70
+ - Updated dependencies [9b3bc01]
71
+ - Updated dependencies [129c8b5]
72
+ - Updated dependencies [f7cc2c0]
73
+ - Updated dependencies [64e97b9]
74
+ - Updated dependencies [0a4264b]
75
+ - Updated dependencies [b90174d]
76
+ - Updated dependencies [58c944b]
77
+ - Updated dependencies [6ca5ec9]
78
+ - Updated dependencies [5ffb5cc]
79
+ - Updated dependencies [518a6d1]
80
+ - Updated dependencies [3086875]
81
+ - Updated dependencies [3f45f83]
82
+ - Updated dependencies [26abd0c]
83
+ - Updated dependencies [3b994bc]
84
+ - Updated dependencies [1bbb5f9]
85
+ - Updated dependencies [4df12dd]
86
+ - Updated dependencies [3543dc7]
87
+ - Updated dependencies [b1e08de]
88
+ - Updated dependencies [e6057d1]
89
+ - Updated dependencies [8947a84]
90
+ - Updated dependencies [2cd199e]
91
+ - Updated dependencies [1abaca1]
92
+ - Updated dependencies [68f1e02]
93
+ - Updated dependencies [745d7a9]
94
+ - Updated dependencies [67b98bb]
95
+ - Updated dependencies [7d15a0c]
96
+ - Updated dependencies [59695d7]
97
+ - Updated dependencies [586b7ed]
98
+ - Updated dependencies [d4c2c2f]
99
+ - Updated dependencies [24c33b3]
100
+ - Updated dependencies [0767227]
101
+ - Updated dependencies [8f8846b]
102
+ - Updated dependencies [22c0f48]
103
+ - Updated dependencies [993b46a]
104
+ - Updated dependencies [ef7388f]
105
+ - Updated dependencies [e15fa56]
106
+ - Updated dependencies [ea5c6a3]
107
+ - Updated dependencies [22ecd4b]
108
+ - Updated dependencies [c22fb63]
109
+ - Updated dependencies [1b806ed]
110
+ - Updated dependencies [31ace39]
111
+ - Updated dependencies [321c4a3]
112
+ - Updated dependencies [8163681]
113
+ - Updated dependencies [97daf50]
114
+ - Updated dependencies [4c2b27b]
115
+ - Updated dependencies [d8bf8c1]
116
+ - @oh-just-another/state@0.63.0
117
+ - @oh-just-another/react-ui@0.62.0
118
+ - @oh-just-another/renderer-core@0.61.0
119
+ - @oh-just-another/importers@0.60.0
120
+ - @oh-just-another/renderer-canvas@0.62.0
121
+ - @oh-just-another/scene@0.62.0
122
+ - @oh-just-another/serialization@0.61.0
123
+ - @oh-just-another/renderer-svg@0.58.0
124
+ - @oh-just-another/templates@0.58.0
125
+ - @oh-just-another/raster-wasm@0.57.6
126
+ - @oh-just-another/text-wasm@0.57.6
127
+
3
128
  ## 0.61.1
4
129
 
5
130
  ### Patch Changes
package/README.md CHANGED
@@ -78,21 +78,24 @@ Anything not on the handle is reachable through `editor` — the full
78
78
 
79
79
  ## Props
80
80
 
81
- | Prop | Type | Purpose |
82
- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | --------------------------------------------------------------------------------------- |
83
- | `initialScene` | `Scene` | Seed scene (defaults to empty). |
84
- | `initialTool` | `Mode` | Initial tool mode (default `"select"`). |
85
- | `capabilities` | `CapabilityOverrides` | Force / disable renderer, WASM, workers, tiles. |
86
- | `templates` / `fileDropHandlers` / `layoutKinds` / `animationAdapters` | arrays | Plugins registered on mount. |
87
- | `onReady` / `onSceneChange` / `onSelectionChange` | callbacks | Lifecycle + change notifications. |
88
- | `theme` / `defaultTheme` / `onThemeChange` / `persistTheme` | theme | Controlled or self-managed theme; optional `localStorage` persistence. |
89
- | `hideTopBar` / `hideBottomBar` / `hideToolbar` / `hideMainMenu` / `hideLibraryButton` / `hideZoomControls` / `hideResetToContent` / `hideHelpButton` / `hideContextMenu` / `hideSelectionPanel` | `boolean` | Toggle chrome off. |
90
- | `renderTopBar{Left,Center,Right}` / `renderBottomBar{Left,Center,Right}` / `renderMainMenuExtras` | `() => ReactNode` | Inject custom content into the bars / menu. |
91
- | `onImportTemplates` | `() => void` | Library-panel "Import" click. |
92
- | `repositoryUrl` | `string \| null` | Help-menu link target; `null` hides it. |
93
- | `onConfirm` / `onNotify` | callbacks | Override the reset-confirm / error dialogs (default `window.confirm` / `window.alert`). |
94
- | `workerFactory` | `() => Worker` | Override the offscreen render-worker constructor. |
95
- | `className` / `style` | — | Applied to the editor root. |
81
+ | Prop | Type | Purpose |
82
+ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
83
+ | `initialScene` | `Scene` | Seed scene (defaults to empty). |
84
+ | `initialTool` | `Mode` | Initial tool mode (default `"select"`). |
85
+ | `capabilities` | `CapabilityOverrides` | Force / disable renderer, WASM, workers, tiles. |
86
+ | `templates` / `fileDropHandlers` / `layoutKinds` / `animationAdapters` | arrays | Plugins registered on mount. |
87
+ | `onReady` / `onSceneChange` / `onSelectionChange` | callbacks | Lifecycle + change notifications. |
88
+ | `theme` / `defaultTheme` / `onThemeChange` / `persistTheme` | theme | Controlled or self-managed theme; optional `localStorage` persistence. |
89
+ | `persistPreferences` | preferences | Keep `EditorPreferences` (snap objects, size readouts, wheel mode) in `localStorage`. |
90
+ | `minimap` | chrome | Show the minimap at startup; the zoom menu row and the `M` key toggle it at runtime. |
91
+ | `logo` | chrome | Brand cell at the start of the top bar; defaults to `BrandLogo` (light / dark artwork from `assets/logo*.svg`, regenerate with `pnpm gen:logo`); `null` drops the cell. |
92
+ | `hideTopBar` / `hideBottomBar` / `hideToolbar` / `hideMainMenu` / `hideLibraryButton` / `hideZoomControls` / `hideResetToContent` / `hideHelpButton` / `hideContextMenu` / `hideSelectionPanel` | `boolean` | Toggle chrome off. |
93
+ | `renderTopBar{Left,Center,Right}` / `renderBottomBar{Left,Center,Right}` / `renderMainMenuExtras` / `renderBoardMenuExtras` / `renderExportMenuExtras` | `() => ReactNode` | Inject custom content into the bars / menu. |
94
+ | `onImportTemplates` | `() => void` | Library-panel "Import" click. |
95
+ | `repositoryUrl` | `string \| null` | Help-menu link target; `null` hides it. |
96
+ | `onConfirm` / `onNotify` | callbacks | Override the reset-confirm / error dialogs (default `window.confirm` / `window.alert`). |
97
+ | `workerFactory` | `() => Worker` | Override the offscreen render-worker constructor. |
98
+ | `className` / `style` | — | Applied to the editor root. |
96
99
 
97
100
  ## Capabilities
98
101