kritzel-stencil 0.3.13 → 0.3.15

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 (40) hide show
  1. package/dist/cjs/index.cjs.js +1 -1
  2. package/dist/cjs/kritzel-active-users_42.cjs.entry.js +156 -25
  3. package/dist/cjs/loader.cjs.js +1 -1
  4. package/dist/cjs/{schema.constants-CMFOYyBj.js → schema.constants-DJQTjcy7.js} +62 -0
  5. package/dist/cjs/stencil.cjs.js +1 -1
  6. package/dist/collection/classes/core/viewport.class.js +81 -0
  7. package/dist/collection/classes/objects/image.class.js +62 -0
  8. package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +86 -18
  9. package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +169 -17
  10. package/dist/collection/constants/version.js +1 -1
  11. package/dist/components/index.js +1 -1
  12. package/dist/components/kritzel-controls.js +1 -1
  13. package/dist/components/kritzel-editor.js +1 -1
  14. package/dist/components/kritzel-engine.js +1 -1
  15. package/dist/components/kritzel-settings.js +1 -1
  16. package/dist/components/kritzel-tool-config.js +1 -1
  17. package/dist/components/p-BTEV1WwT.js +1 -0
  18. package/dist/components/{p-ijIqLY9g.js → p-CUFKqzMC.js} +1 -1
  19. package/dist/components/{p-B9hLySCl.js → p-CUPYGT8c.js} +1 -1
  20. package/dist/components/p-Dc0a_Hb-.js +9 -0
  21. package/dist/components/{p-CVzH1Oil.js → p-J9_SwObO.js} +1 -1
  22. package/dist/esm/index.js +2 -2
  23. package/dist/esm/kritzel-active-users_42.entry.js +156 -25
  24. package/dist/esm/loader.js +1 -1
  25. package/dist/esm/{schema.constants-NrtFvKER.js → schema.constants-DiCnmIYK.js} +62 -0
  26. package/dist/esm/stencil.js +1 -1
  27. package/dist/stencil/index.esm.js +1 -1
  28. package/dist/stencil/{p-NrtFvKER.js → p-DiCnmIYK.js} +1 -1
  29. package/dist/stencil/p-bbebe56c.entry.js +9 -0
  30. package/dist/stencil/stencil.esm.js +1 -1
  31. package/dist/types/classes/core/viewport.class.d.ts +30 -0
  32. package/dist/types/classes/objects/image.class.d.ts +15 -0
  33. package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts +11 -3
  34. package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts +33 -5
  35. package/dist/types/components.d.ts +28 -6
  36. package/dist/types/constants/version.d.ts +1 -1
  37. package/package.json +1 -1
  38. package/dist/components/p-C-aFOO5p.js +0 -1
  39. package/dist/components/p-DplAQ6jk.js +0 -9
  40. package/dist/stencil/p-9adee165.entry.js +0 -9
@@ -19,7 +19,7 @@ var patchBrowser = () => {
19
19
 
20
20
  patchBrowser().then(async (options) => {
21
21
  await appGlobals.globalScripts();
22
- return index.bootstrapLazy(JSON.parse("[[\"kritzel-active-users_42.cjs\",[[512,\"kritzel-editor\",{\"scaleMax\":[1026,\"scale-max\"],\"scaleMin\":[1026,\"scale-min\"],\"lockDrawingScale\":[1028,\"lock-drawing-scale\"],\"viewportBoundaryLeft\":[1026,\"viewport-boundary-left\"],\"viewportBoundaryRight\":[1026,\"viewport-boundary-right\"],\"viewportBoundaryTop\":[1026,\"viewport-boundary-top\"],\"viewportBoundaryBottom\":[1026,\"viewport-boundary-bottom\"],\"wheelEnabled\":[1028,\"wheel-enabled\"],\"debugInfo\":[1040],\"user\":[16],\"activeUsers\":[16],\"controls\":[16],\"globalContextMenuItems\":[16],\"objectContextMenuItems\":[16],\"themes\":[16],\"theme\":[1025],\"customSvgIcons\":[16],\"isControlsVisible\":[4,\"is-controls-visible\"],\"isUtilityPanelVisible\":[4,\"is-utility-panel-visible\"],\"isWorkspaceManagerVisible\":[4,\"is-workspace-manager-visible\"],\"isMoreMenuVisible\":[4,\"is-more-menu-visible\"],\"isObjectDistanceFadingActive\":[4,\"is-object-distance-fading-active\"],\"syncConfig\":[16],\"assetStorageConfig\":[16],\"cursorTarget\":[16],\"loginConfig\":[16],\"isLoading\":[4,\"is-loading\"],\"editorId\":[1,\"editor-id\"],\"activeWorkspaceId\":[1,\"active-workspace-id\"],\"isEngineReady\":[32],\"isControlsReady\":[32],\"isWorkspaceManagerReady\":[32],\"workspaces\":[32],\"activeWorkspace\":[32],\"isVirtualKeyboardOpen\":[32],\"undoState\":[32],\"isBackToContentButtonVisible\":[32],\"shortcuts\":[32],\"currentIsPublic\":[32],\"isEditorVisible\":[32],\"getObjectById\":[64],\"addObject\":[64],\"addObjects\":[64],\"updateObject\":[64],\"removeObject\":[64],\"removeObjects\":[64],\"getSelectedObjects\":[64],\"selectObjects\":[64],\"selectAllObjectsInViewport\":[64],\"clearSelection\":[64],\"centerObjectInViewport\":[64],\"panToObject\":[64],\"backToContent\":[64],\"centerAllObjects\":[64],\"centerObjects\":[64],\"setViewport\":[64],\"panTo\":[64],\"zoomTo\":[64],\"getViewport\":[64],\"screenToWorld\":[64],\"worldToScreen\":[64],\"createWorkspace\":[64],\"updateWorkspace\":[64],\"deleteWorkspace\":[64],\"getWorkspaces\":[64],\"getActiveWorkspace\":[64],\"loadSharedWorkspace\":[64],\"reinitSync\":[64],\"registerTool\":[64],\"changeActiveTool\":[64],\"changeActiveToolByName\":[64],\"disable\":[64],\"enable\":[64],\"copy\":[64],\"cut\":[64],\"paste\":[64],\"delete\":[64],\"bringForward\":[64],\"sendBackward\":[64],\"bringToFront\":[64],\"sendToBack\":[64],\"alignObjects\":[64],\"group\":[64],\"ungroup\":[64],\"undo\":[64],\"redo\":[64],\"getScreenshot\":[64],\"exportViewportAsPng\":[64],\"exportViewportAsSvg\":[64],\"exportSelectedObjectsAsPng\":[64],\"exportSelectedObjectsAsSvg\":[64],\"downloadAsJson\":[64],\"importFromFile\":[64],\"loadObjectsFromJson\":[64],\"getObjectsTotalCount\":[64],\"getAllObjects\":[64],\"findObjects\":[64],\"getCopiedObjects\":[64],\"getObjectsInViewport\":[64],\"hideContextMenu\":[64],\"openContextMenu\":[64],\"triggerSelectionChange\":[64],\"getDisplayableShortcuts\":[64],\"openLoginDialog\":[64],\"setLoginLoading\":[64]},[[0,\"dblclick\",\"onTouchStart\"]],{\"isEngineReady\":[{\"onIsEngineReady\":0}],\"isControlsReady\":[{\"onIsControlsReady\":0}],\"workspaces\":[{\"onWorkspacesChange\":0}],\"activeWorkspace\":[{\"onActiveWorkspaceChange\":0}],\"activeWorkspaceId\":[{\"onActiveWorkspaceIdChange\":0}],\"theme\":[{\"onCurrentThemeChange\":0}],\"themes\":[{\"onThemesChange\":0}]}],[513,\"kritzel-controls\",{\"visible\":[4],\"controls\":[16],\"activeControl\":[1040],\"isUtilityPanelVisible\":[4,\"is-utility-panel-visible\"],\"undoState\":[16],\"theme\":[1],\"firstConfig\":[32],\"isTouchDevice\":[32],\"selectedSubOptions\":[32],\"canScrollLeft\":[32],\"canScrollRight\":[32],\"needsScrolling\":[32],\"displayValues\":[32],\"internalControls\":[32],\"closeTooltip\":[64]},[[8,\"keydown\",\"handleKeyDown\"]],{\"controls\":[{\"onControlsChange\":0}],\"theme\":[{\"onThemeChange\":0}]}],[513,\"kritzel-settings\",{\"availableThemes\":[16],\"shortcuts\":[16],\"settings\":[16],\"isDialogOpen\":[32],\"selectedCategoryId\":[32],\"scaleMin\":[32],\"scaleMax\":[32],\"lockDrawingScale\":[32],\"theme\":[32],\"viewportBoundaryLeft\":[32],\"viewportBoundaryRight\":[32],\"viewportBoundaryTop\":[32],\"viewportBoundaryBottom\":[32],\"debugInfo\":[32],\"open\":[64]},null,{\"settings\":[{\"onSettingsPropChange\":0}]}],[513,\"kritzel-export\",{\"workspaceName\":[1,\"workspace-name\"],\"isDialogOpen\":[32],\"previewUrl\":[32],\"isLoading\":[32],\"activeTab\":[32],\"exportFilename\":[32],\"viewportExportFormat\":[32],\"open\":[64]}],[513,\"kritzel-workspace-manager\",{\"visible\":[4],\"activeWorkspace\":[1040],\"workspaces\":[16],\"childMenuAnchor\":[32],\"openChildMenuItem\":[32],\"newWorkspace\":[32],\"editingItemId\":[32]},[[8,\"wheel\",\"handleWheel\"]]],[513,\"kritzel-engine\",{\"workspace\":[16],\"editorId\":[1,\"editor-id\"],\"activeWorkspaceId\":[1,\"active-workspace-id\"],\"syncConfig\":[16],\"assetStorageConfig\":[16],\"user\":[16],\"globalContextMenuItems\":[16],\"objectContextMenuItems\":[16],\"scaleMax\":[1026,\"scale-max\"],\"scaleMin\":[1026,\"scale-min\"],\"cursorTarget\":[16],\"lockDrawingScale\":[4,\"lock-drawing-scale\"],\"isObjectDistanceFadingActive\":[4,\"is-object-distance-fading-active\"],\"theme\":[1],\"themes\":[16],\"viewportBoundaryLeft\":[2,\"viewport-boundary-left\"],\"viewportBoundaryRight\":[2,\"viewport-boundary-right\"],\"viewportBoundaryTop\":[2,\"viewport-boundary-top\"],\"viewportBoundaryBottom\":[2,\"viewport-boundary-bottom\"],\"debugInfo\":[16],\"wheelEnabled\":[4,\"wheel-enabled\"],\"isLoading\":[4,\"is-loading\"],\"forceUpdate\":[32],\"triggerSelectionChange\":[64],\"registerTool\":[64],\"changeActiveTool\":[64],\"changeActiveToolByName\":[64],\"disable\":[64],\"enable\":[64],\"delete\":[64],\"copy\":[64],\"cut\":[64],\"paste\":[64],\"bringForward\":[64],\"sendBackward\":[64],\"bringToFront\":[64],\"sendToBack\":[64],\"alignObjects\":[64],\"group\":[64],\"ungroup\":[64],\"undo\":[64],\"redo\":[64],\"hideContextMenu\":[64],\"openContextMenu\":[64],\"getObjectById\":[64],\"getAllObjects\":[64],\"findObjects\":[64],\"getObjectsTotalCount\":[64],\"addObject\":[64],\"addObjects\":[64],\"updateObject\":[64],\"removeObject\":[64],\"removeObjects\":[64],\"getSelectedObjects\":[64],\"getDisplayableShortcuts\":[64],\"selectObjects\":[64],\"selectAllObjectsInViewport\":[64],\"clearSelection\":[64],\"centerObjectInViewport\":[64],\"panToObject\":[64],\"backToContent\":[64],\"centerAllObjects\":[64],\"centerObjects\":[64],\"setViewport\":[64],\"panTo\":[64],\"zoomTo\":[64],\"getViewport\":[64],\"screenToWorld\":[64],\"worldToScreen\":[64],\"getCopiedObjects\":[64],\"getObjectsInViewport\":[64],\"getScreenshot\":[64],\"exportViewportAsPng\":[64],\"exportViewportAsSvg\":[64],\"getSelectedObjectsAsSvgString\":[64],\"exportSelectedObjectsAsSvg\":[64],\"getSelectedObjectsAsPngDataUrl\":[64],\"exportSelectedObjectsAsPng\":[64],\"exportAsJson\":[64],\"importFromJson\":[64],\"loadObjectsFromJson\":[64],\"downloadAsJson\":[64],\"importFromFile\":[64],\"createWorkspace\":[64],\"updateWorkspace\":[64],\"deleteWorkspace\":[64],\"getWorkspaces\":[64],\"getActiveWorkspace\":[64],\"getIsPublic\":[64],\"loadSharedWorkspace\":[64],\"reinitSync\":[64],\"saveSettings\":[64],\"loadSettings\":[64]},[[1,\"wheel\",\"handleWheel\"],[0,\"pointerdown\",\"handlePointerDown\"],[0,\"pointermove\",\"handlePointerMove\"],[0,\"pointerup\",\"handlePointerUp\"],[0,\"pointercancel\",\"handlePointerCancel\"],[1,\"pointerleave\",\"handlePointerLeave\"],[1,\"longpress\",\"handleLongPress\"],[0,\"contextmenu\",\"handleContextMenu\"],[9,\"resize\",\"handleResize\"],[8,\"keydown\",\"handleKeyDown\"],[8,\"keyup\",\"handleKeyUp\"],[4,\"dblclick\",\"preventDoubleTapZoomOnTouchDevices\"]],{\"workspace\":[{\"onWorkspaceChange\":0}],\"activeWorkspaceId\":[{\"onActiveWorkspaceIdChange\":0}],\"syncConfig\":[{\"onSyncConfigChange\":0}],\"assetStorageConfig\":[{\"onAssetStorageConfigChange\":0}],\"user\":[{\"onUserChange\":0}],\"globalContextMenuItems\":[{\"onGlobalContextMenuItemsChange\":0}],\"objectContextMenuItems\":[{\"onObjectContextMenuItemsChange\":0}],\"scaleMax\":[{\"validateScaleMax\":0}],\"scaleMin\":[{\"validateScaleMin\":0}],\"cursorTarget\":[{\"onCursorTargetChange\":0}],\"lockDrawingScale\":[{\"onLockDrawingScaleChange\":0}],\"isObjectDistanceFadingActive\":[{\"onIsObjectDistanceFadingActiveChange\":0}],\"theme\":[{\"onThemeChange\":0}],\"themes\":[{\"onThemesChange\":0}],\"viewportBoundaryLeft\":[{\"onViewportBoundaryLeftChange\":0}],\"viewportBoundaryRight\":[{\"onViewportBoundaryRightChange\":0}],\"viewportBoundaryTop\":[{\"onViewportBoundaryTopChange\":0}],\"viewportBoundaryBottom\":[{\"onViewportBoundaryBottomChange\":0}],\"debugInfo\":[{\"onDebugInfoChange\":0}],\"isLoading\":[{\"onIsLoadingChange\":0}]}],[513,\"kritzel-more-menu\",{\"visible\":[4],\"items\":[16],\"icon\":[1],\"iconSize\":[2,\"icon-size\"],\"offsetY\":[2,\"offset-y\"],\"menuAnchor\":[32],\"isTouchDevice\":[32]}],[513,\"kritzel-current-user\",{\"user\":[16],\"avatarSize\":[2,\"avatar-size\"]}],[513,\"kritzel-share-dialog\",{\"isPublic\":[4,\"is-public\"],\"workspaceId\":[1,\"workspace-id\"],\"isDialogOpen\":[32],\"internalIsPublic\":[32],\"copySuccess\":[32],\"open\":[64],\"close\":[64]},null,{\"isPublic\":[{\"onIsPublicChange\":0}]}],[513,\"kritzel-login-dialog\",{\"providers\":[16],\"dialogTitle\":[1,\"dialog-title\"],\"subtitle\":[1],\"isDialogOpen\":[32],\"loadingProvider\":[32],\"open\":[64],\"close\":[64],\"setLoading\":[64]}],[513,\"kritzel-active-users\",{\"users\":[16],\"avatarSize\":[2,\"avatar-size\"],\"maxVisible\":[2,\"max-visible\"],\"overlap\":[2]}],[513,\"kritzel-back-to-content\",{\"visible\":[4],\"text\":[1]}],[769,\"kritzel-button\",{\"variant\":[1],\"disabled\":[4],\"type\":[1]}],[513,\"kritzel-tool-config\",{\"tool\":[1040],\"isExpanded\":[1028,\"is-expanded\"],\"theme\":[1],\"engine\":[16],\"config\":[32],\"palette\":[32],\"sizes\":[32],\"currentOpacity\":[32],\"updateTrigger\":[32]},null,{\"tool\":[{\"handleToolChange\":0}],\"theme\":[{\"onThemeChange\":0}],\"engine\":[{\"handleEngineChange\":0}]}],[513,\"kritzel-split-button\",{\"buttonIcon\":[1,\"button-icon\"],\"dropdownIcon\":[1,\"dropdown-icon\"],\"items\":[16],\"mainButtonDisabled\":[4,\"main-button-disabled\"],\"menuButtonDisabled\":[4,\"menu-button-disabled\"],\"isMenuOpen\":[32],\"isTouchDevice\":[32],\"anchorElement\":[32],\"menuScrollTop\":[32],\"open\":[64],\"focusMenu\":[64]}],[513,\"kritzel-current-user-dialog\",{\"user\":[16],\"isDialogOpen\":[32],\"open\":[64],\"close\":[64]}],[513,\"kritzel-context-menu\",{\"items\":[16],\"objects\":[16],\"processedItems\":[32],\"openSubmenuPath\":[32],\"submenuPositions\":[32]},[[9,\"pointerdown\",\"handleOutsideClick\"]],{\"items\":[{\"onItemsChanged\":0}]}],[769,\"kritzel-master-detail\",{\"items\":[16],\"selectedItemId\":[1,\"selected-item-id\"],\"focusedIndex\":[32],\"showMobileDetail\":[32]},null,{\"selectedItemId\":[{\"watchSelectedItemId\":0}]}],[513,\"kritzel-pill-tabs\",{\"tabs\":[16],\"value\":[1025]}],[513,\"kritzel-utility-panel\",{\"undoState\":[16]}],[513,\"kritzel-awareness-cursors\",{\"core\":[16],\"showEdgeIndicators\":[4,\"show-edge-indicators\"],\"edgeIndicatorPadding\":[2,\"edge-indicator-padding\"],\"remoteCursors\":[32],\"objectVersion\":[32]}],[513,\"kritzel-cursor-trail\",{\"core\":[16],\"cursorTrailPoints\":[32],\"isLeftButtonDown\":[32]},[[9,\"pointerdown\",\"handleMouseDown\"],[9,\"pointermove\",\"handlePointerMove\"],[9,\"pointerup\",\"handlePointerUp\"]]],[513,\"kritzel-input\",{\"value\":[1025],\"label\":[1],\"placeholder\":[1],\"suffix\":[1],\"type\":[1],\"disabled\":[4],\"inputValue\":[32]},null,{\"value\":[{\"onValueChange\":0}]}],[513,\"kritzel-numeric-input\",{\"value\":[1026],\"min\":[2],\"max\":[2],\"step\":[2],\"label\":[1],\"placeholder\":[1],\"inputValue\":[32]},null,{\"value\":[{\"onValueChange\":0}]}],[769,\"kritzel-tooltip\",{\"isVisible\":[1028,\"is-visible\"],\"anchorElement\":[16],\"triggerElement\":[16],\"offsetY\":[2,\"offset-y\"],\"positionX\":[32],\"positionY\":[32],\"open\":[64],\"close\":[64],\"toggle\":[64],\"focusContent\":[64]},[[4,\"click\",\"handleOutsideClick\"],[6,\"pointerdown\",\"handleOutsidePointerDown\"],[4,\"kritzelTooltipCloseAll\",\"handleCloseAll\"],[9,\"resize\",\"handleWindowResize\"]],{\"triggerElement\":[{\"handleTriggerElementChange\":0}],\"isVisible\":[{\"handleVisibilityChange\":0}]}],[513,\"kritzel-color-palette\",{\"colors\":[16],\"selectedColor\":[1040],\"isExpanded\":[4,\"is-expanded\"],\"isOpaque\":[4,\"is-opaque\"],\"opacity\":[2],\"theme\":[1]}],[513,\"kritzel-font-family\",{\"fontOptions\":[16],\"selectedFontFamily\":[1025,\"selected-font-family\"]}],[513,\"kritzel-font-size\",{\"sizes\":[16],\"selectedSize\":[1026,\"selected-size\"],\"fontFamily\":[1,\"font-family\"]}],[513,\"kritzel-stroke-size\",{\"sizes\":[16],\"selectedSize\":[1026,\"selected-size\"]}],[513,\"kritzel-line-endings\",{\"styles\":[16],\"value\":[1040]}],[513,\"kritzel-opacity-slider\",{\"value\":[1026],\"min\":[2],\"max\":[2],\"step\":[2],\"previewColor\":[1,\"preview-color\"]}],[513,\"kritzel-shape-fill\",{\"value\":[1025]}],[513,\"kritzel-slide-toggle\",{\"checked\":[1028],\"disabled\":[4],\"label\":[1]}],[513,\"kritzel-avatar\",{\"user\":[16],\"name\":[1],\"size\":[2],\"color\":[1],\"imageError\":[32]},null,{\"user\":[{\"userChanged\":0}],\"profileImageUrl\":[{\"profileImageUrlChanged\":0}]}],[513,\"kritzel-font\",{\"fontFamily\":[1,\"font-family\"],\"size\":[2],\"color\":[1]}],[513,\"kritzel-color\",{\"value\":[1],\"theme\":[1],\"size\":[2]}],[513,\"kritzel-menu\",{\"items\":[16],\"parent\":[16],\"selectedIndex\":[32],\"setScrollTop\":[64],\"setFocus\":[64]}],[513,\"kritzel-menu-item\",{\"item\":[16],\"parent\":[16],\"isDirty\":[32]},null,{\"item\":[{\"onItemChange\":0}]}],[769,\"kritzel-portal\",{\"anchor\":[16],\"offsetX\":[2,\"offset-x\"],\"offsetY\":[2,\"offset-y\"],\"autoFocus\":[4,\"auto-focus\"]},[[8,\"kritzel-dismiss-menus\",\"handleDismissMenus\"],[8,\"click\",\"handleOutsideClick\"],[6,\"pointerdown\",\"handleOutsidePointerDown\"],[8,\"keydown\",\"handleKeyDown\"],[11,\"resize\",\"handleResize\"],[11,\"scroll\",\"handleWindowScroll\"]],{\"anchor\":[{\"anchorChanged\":0}]}],[769,\"kritzel-dialog\",{\"isOpen\":[516,\"is-open\"],\"dialogTitle\":[1,\"dialog-title\"],\"closable\":[4],\"closeOnBackdrop\":[4,\"close-on-backdrop\"],\"closeOnEscape\":[4,\"close-on-escape\"],\"autoFocus\":[4,\"auto-focus\"],\"trapFocus\":[4,\"trap-focus\"],\"size\":[1],\"fullscreenOnMobile\":[4,\"fullscreen-on-mobile\"],\"contained\":[516],\"isAnimating\":[32],\"mobileLockedHeight\":[32],\"containerRect\":[32],\"containerBorderRadius\":[32],\"open\":[64],\"close\":[64],\"focusFirstElement\":[64]},[[8,\"keydown\",\"handleKeyDown\"],[9,\"resize\",\"handleWindowResize\"],[8,\"orientationchange\",\"handleOrientationChange\"]],{\"isOpen\":[{\"handleIsOpenChange\":0}]}],[769,\"kritzel-dropdown\",{\"options\":[16],\"value\":[1],\"width\":[1],\"selectStyles\":[16],\"forceOpenDirection\":[1,\"force-open-direction\"],\"internalValue\":[32],\"hasSuffixContent\":[32],\"hasPrefixContent\":[32],\"isOpen\":[32],\"focusedIndex\":[32],\"openDirection\":[32]},[[4,\"click\",\"handleDocumentClick\"],[4,\"keydown\",\"handleDocumentKeydown\"]],{\"options\":[{\"optionsChanged\":0}],\"value\":[{\"externalValueChanged\":0}]}],[513,\"kritzel-icon\",{\"name\":[1],\"label\":[1],\"size\":[2]}]]],[\"kritzel-brush-style.cjs\",[[513,\"kritzel-brush-style\",{\"type\":[1],\"brushOptions\":[16]}]]]]"), options);
22
+ return index.bootstrapLazy(JSON.parse("[[\"kritzel-active-users_42.cjs\",[[512,\"kritzel-editor\",{\"scaleMax\":[1026,\"scale-max\"],\"scaleMin\":[1026,\"scale-min\"],\"lockDrawingScale\":[1028,\"lock-drawing-scale\"],\"viewportBoundaryLeft\":[1026,\"viewport-boundary-left\"],\"viewportBoundaryRight\":[1026,\"viewport-boundary-right\"],\"viewportBoundaryTop\":[1026,\"viewport-boundary-top\"],\"viewportBoundaryBottom\":[1026,\"viewport-boundary-bottom\"],\"wheelEnabled\":[1028,\"wheel-enabled\"],\"debugInfo\":[1040],\"user\":[16],\"activeUsers\":[16],\"controls\":[16],\"globalContextMenuItems\":[16],\"objectContextMenuItems\":[16],\"themes\":[16],\"theme\":[1025],\"customSvgIcons\":[16],\"isControlsVisible\":[4,\"is-controls-visible\"],\"isUtilityPanelVisible\":[4,\"is-utility-panel-visible\"],\"isWorkspaceManagerVisible\":[4,\"is-workspace-manager-visible\"],\"isMoreMenuVisible\":[4,\"is-more-menu-visible\"],\"isObjectDistanceFadingActive\":[4,\"is-object-distance-fading-active\"],\"syncConfig\":[16],\"assetStorageConfig\":[16],\"cursorTarget\":[16],\"loginConfig\":[16],\"isLoading\":[4,\"is-loading\"],\"editorId\":[1,\"editor-id\"],\"activeWorkspaceId\":[1,\"active-workspace-id\"],\"isEngineReady\":[32],\"isControlsReady\":[32],\"isWorkspaceManagerReady\":[32],\"workspaces\":[32],\"activeWorkspace\":[32],\"isVirtualKeyboardOpen\":[32],\"undoState\":[32],\"isBackToContentButtonVisible\":[32],\"shortcuts\":[32],\"currentIsPublic\":[32],\"isEditorVisible\":[32],\"getObjectById\":[64],\"addObject\":[64],\"addObjects\":[64],\"updateObject\":[64],\"removeObject\":[64],\"removeObjects\":[64],\"getSelectedObjects\":[64],\"selectObjects\":[64],\"selectAllObjectsInViewport\":[64],\"clearSelection\":[64],\"centerObjectInViewport\":[64],\"panToObject\":[64],\"backToContent\":[64],\"centerAllObjects\":[64],\"centerObjects\":[64],\"setViewport\":[64],\"panTo\":[64],\"zoomTo\":[64],\"zoomIn\":[64],\"zoomOut\":[64],\"getViewport\":[64],\"screenToWorld\":[64],\"worldToScreen\":[64],\"createWorkspace\":[64],\"updateWorkspace\":[64],\"deleteWorkspace\":[64],\"getWorkspaces\":[64],\"getActiveWorkspace\":[64],\"loadSharedWorkspace\":[64],\"reinitSync\":[64],\"registerTool\":[64],\"changeActiveTool\":[64],\"changeActiveToolByName\":[64],\"disable\":[64],\"enable\":[64],\"copy\":[64],\"cut\":[64],\"paste\":[64],\"delete\":[64],\"bringForward\":[64],\"sendBackward\":[64],\"bringToFront\":[64],\"sendToBack\":[64],\"alignObjects\":[64],\"group\":[64],\"ungroup\":[64],\"undo\":[64],\"redo\":[64],\"getScreenshot\":[64],\"exportViewportAsPng\":[64],\"exportViewportAsSvg\":[64],\"exportSelectedObjectsAsPng\":[64],\"exportSelectedObjectsAsSvg\":[64],\"downloadAsJson\":[64],\"importFromFile\":[64],\"loadObjectsFromJson\":[64],\"getObjectsTotalCount\":[64],\"getAllObjects\":[64],\"findObjects\":[64],\"getCopiedObjects\":[64],\"getObjectsInViewport\":[64],\"hideContextMenu\":[64],\"openContextMenu\":[64],\"triggerSelectionChange\":[64],\"getDisplayableShortcuts\":[64],\"openLoginDialog\":[64],\"setLoginLoading\":[64]},[[0,\"dblclick\",\"onTouchStart\"]],{\"isEngineReady\":[{\"onIsEngineReady\":0}],\"isControlsReady\":[{\"onIsControlsReady\":0}],\"workspaces\":[{\"onWorkspacesChange\":0}],\"activeWorkspace\":[{\"onActiveWorkspaceChange\":0}],\"activeWorkspaceId\":[{\"onActiveWorkspaceIdChange\":0}],\"theme\":[{\"onCurrentThemeChange\":0}],\"themes\":[{\"onThemesChange\":0}]}],[513,\"kritzel-controls\",{\"visible\":[4],\"controls\":[16],\"activeControl\":[1040],\"isUtilityPanelVisible\":[4,\"is-utility-panel-visible\"],\"undoState\":[16],\"theme\":[1],\"firstConfig\":[32],\"isTouchDevice\":[32],\"selectedSubOptions\":[32],\"canScrollLeft\":[32],\"canScrollRight\":[32],\"needsScrolling\":[32],\"displayValues\":[32],\"internalControls\":[32],\"closeTooltip\":[64]},[[8,\"keydown\",\"handleKeyDown\"]],{\"controls\":[{\"onControlsChange\":0}],\"theme\":[{\"onThemeChange\":0}]}],[513,\"kritzel-settings\",{\"availableThemes\":[16],\"shortcuts\":[16],\"settings\":[16],\"isDialogOpen\":[32],\"selectedCategoryId\":[32],\"scaleMin\":[32],\"scaleMax\":[32],\"lockDrawingScale\":[32],\"theme\":[32],\"viewportBoundaryLeft\":[32],\"viewportBoundaryRight\":[32],\"viewportBoundaryTop\":[32],\"viewportBoundaryBottom\":[32],\"debugInfo\":[32],\"open\":[64]},null,{\"settings\":[{\"onSettingsPropChange\":0}]}],[513,\"kritzel-export\",{\"workspaceName\":[1,\"workspace-name\"],\"isDialogOpen\":[32],\"previewUrl\":[32],\"isLoading\":[32],\"activeTab\":[32],\"exportFilename\":[32],\"viewportExportFormat\":[32],\"open\":[64]}],[513,\"kritzel-workspace-manager\",{\"visible\":[4],\"activeWorkspace\":[1040],\"workspaces\":[16],\"childMenuAnchor\":[32],\"openChildMenuItem\":[32],\"newWorkspace\":[32],\"editingItemId\":[32]},[[8,\"wheel\",\"handleWheel\"]]],[513,\"kritzel-engine\",{\"workspace\":[16],\"editorId\":[1,\"editor-id\"],\"activeWorkspaceId\":[1,\"active-workspace-id\"],\"syncConfig\":[16],\"assetStorageConfig\":[16],\"user\":[16],\"globalContextMenuItems\":[16],\"objectContextMenuItems\":[16],\"scaleMax\":[1026,\"scale-max\"],\"scaleMin\":[1026,\"scale-min\"],\"cursorTarget\":[16],\"lockDrawingScale\":[4,\"lock-drawing-scale\"],\"isObjectDistanceFadingActive\":[4,\"is-object-distance-fading-active\"],\"theme\":[1],\"themes\":[16],\"viewportBoundaryLeft\":[2,\"viewport-boundary-left\"],\"viewportBoundaryRight\":[2,\"viewport-boundary-right\"],\"viewportBoundaryTop\":[2,\"viewport-boundary-top\"],\"viewportBoundaryBottom\":[2,\"viewport-boundary-bottom\"],\"debugInfo\":[16],\"wheelEnabled\":[4,\"wheel-enabled\"],\"isLoading\":[4,\"is-loading\"],\"forceUpdate\":[32],\"triggerSelectionChange\":[64],\"registerTool\":[64],\"changeActiveTool\":[64],\"changeActiveToolByName\":[64],\"disable\":[64],\"enable\":[64],\"delete\":[64],\"copy\":[64],\"cut\":[64],\"paste\":[64],\"bringForward\":[64],\"sendBackward\":[64],\"bringToFront\":[64],\"sendToBack\":[64],\"alignObjects\":[64],\"group\":[64],\"ungroup\":[64],\"undo\":[64],\"redo\":[64],\"hideContextMenu\":[64],\"openContextMenu\":[64],\"getObjectById\":[64],\"getAllObjects\":[64],\"findObjects\":[64],\"getObjectsTotalCount\":[64],\"addObject\":[64],\"addObjects\":[64],\"updateObject\":[64],\"removeObject\":[64],\"removeObjects\":[64],\"getSelectedObjects\":[64],\"getDisplayableShortcuts\":[64],\"selectObjects\":[64],\"selectAllObjectsInViewport\":[64],\"clearSelection\":[64],\"centerObjectInViewport\":[64],\"panToObject\":[64],\"backToContent\":[64],\"centerAllObjects\":[64],\"centerObjects\":[64],\"setViewport\":[64],\"panTo\":[64],\"zoomTo\":[64],\"zoomIn\":[64],\"zoomOut\":[64],\"getViewport\":[64],\"screenToWorld\":[64],\"worldToScreen\":[64],\"getCopiedObjects\":[64],\"getObjectsInViewport\":[64],\"getScreenshot\":[64],\"exportViewportAsPng\":[64],\"exportViewportAsSvg\":[64],\"getSelectedObjectsAsSvgString\":[64],\"exportSelectedObjectsAsSvg\":[64],\"getSelectedObjectsAsPngDataUrl\":[64],\"exportSelectedObjectsAsPng\":[64],\"exportAsJson\":[64],\"importFromJson\":[64],\"loadObjectsFromJson\":[64],\"downloadAsJson\":[64],\"importFromFile\":[64],\"createWorkspace\":[64],\"updateWorkspace\":[64],\"deleteWorkspace\":[64],\"getWorkspaces\":[64],\"getActiveWorkspace\":[64],\"getIsPublic\":[64],\"loadSharedWorkspace\":[64],\"reinitSync\":[64],\"saveSettings\":[64],\"loadSettings\":[64]},[[1,\"wheel\",\"handleWheel\"],[0,\"pointerdown\",\"handlePointerDown\"],[0,\"pointermove\",\"handlePointerMove\"],[0,\"pointerup\",\"handlePointerUp\"],[0,\"pointercancel\",\"handlePointerCancel\"],[1,\"pointerleave\",\"handlePointerLeave\"],[1,\"longpress\",\"handleLongPress\"],[0,\"contextmenu\",\"handleContextMenu\"],[9,\"resize\",\"handleResize\"],[8,\"keydown\",\"handleKeyDown\"],[8,\"keyup\",\"handleKeyUp\"],[4,\"dblclick\",\"preventDoubleTapZoomOnTouchDevices\"]],{\"workspace\":[{\"onWorkspaceChange\":0}],\"activeWorkspaceId\":[{\"onActiveWorkspaceIdChange\":0}],\"syncConfig\":[{\"onSyncConfigChange\":0}],\"assetStorageConfig\":[{\"onAssetStorageConfigChange\":0}],\"user\":[{\"onUserChange\":0}],\"globalContextMenuItems\":[{\"onGlobalContextMenuItemsChange\":0}],\"objectContextMenuItems\":[{\"onObjectContextMenuItemsChange\":0}],\"scaleMax\":[{\"validateScaleMax\":0}],\"scaleMin\":[{\"validateScaleMin\":0}],\"cursorTarget\":[{\"onCursorTargetChange\":0}],\"lockDrawingScale\":[{\"onLockDrawingScaleChange\":0}],\"isObjectDistanceFadingActive\":[{\"onIsObjectDistanceFadingActiveChange\":0}],\"theme\":[{\"onThemeChange\":0}],\"themes\":[{\"onThemesChange\":0}],\"viewportBoundaryLeft\":[{\"onViewportBoundaryLeftChange\":0}],\"viewportBoundaryRight\":[{\"onViewportBoundaryRightChange\":0}],\"viewportBoundaryTop\":[{\"onViewportBoundaryTopChange\":0}],\"viewportBoundaryBottom\":[{\"onViewportBoundaryBottomChange\":0}],\"debugInfo\":[{\"onDebugInfoChange\":0}],\"isLoading\":[{\"onIsLoadingChange\":0}]}],[513,\"kritzel-more-menu\",{\"visible\":[4],\"items\":[16],\"icon\":[1],\"iconSize\":[2,\"icon-size\"],\"offsetY\":[2,\"offset-y\"],\"menuAnchor\":[32],\"isTouchDevice\":[32]}],[513,\"kritzel-current-user\",{\"user\":[16],\"avatarSize\":[2,\"avatar-size\"]}],[513,\"kritzel-share-dialog\",{\"isPublic\":[4,\"is-public\"],\"workspaceId\":[1,\"workspace-id\"],\"isDialogOpen\":[32],\"internalIsPublic\":[32],\"copySuccess\":[32],\"open\":[64],\"close\":[64]},null,{\"isPublic\":[{\"onIsPublicChange\":0}]}],[513,\"kritzel-login-dialog\",{\"providers\":[16],\"dialogTitle\":[1,\"dialog-title\"],\"subtitle\":[1],\"isDialogOpen\":[32],\"loadingProvider\":[32],\"open\":[64],\"close\":[64],\"setLoading\":[64]}],[513,\"kritzel-active-users\",{\"users\":[16],\"avatarSize\":[2,\"avatar-size\"],\"maxVisible\":[2,\"max-visible\"],\"overlap\":[2]}],[513,\"kritzel-back-to-content\",{\"visible\":[4],\"text\":[1]}],[769,\"kritzel-button\",{\"variant\":[1],\"disabled\":[4],\"type\":[1]}],[513,\"kritzel-tool-config\",{\"tool\":[1040],\"isExpanded\":[1028,\"is-expanded\"],\"theme\":[1],\"engine\":[16],\"config\":[32],\"palette\":[32],\"sizes\":[32],\"currentOpacity\":[32],\"updateTrigger\":[32]},null,{\"tool\":[{\"handleToolChange\":0}],\"theme\":[{\"onThemeChange\":0}],\"engine\":[{\"handleEngineChange\":0}]}],[513,\"kritzel-split-button\",{\"buttonIcon\":[1,\"button-icon\"],\"dropdownIcon\":[1,\"dropdown-icon\"],\"items\":[16],\"mainButtonDisabled\":[4,\"main-button-disabled\"],\"menuButtonDisabled\":[4,\"menu-button-disabled\"],\"isMenuOpen\":[32],\"isTouchDevice\":[32],\"anchorElement\":[32],\"menuScrollTop\":[32],\"open\":[64],\"focusMenu\":[64]}],[513,\"kritzel-current-user-dialog\",{\"user\":[16],\"isDialogOpen\":[32],\"open\":[64],\"close\":[64]}],[513,\"kritzel-context-menu\",{\"items\":[16],\"objects\":[16],\"processedItems\":[32],\"openSubmenuPath\":[32],\"submenuPositions\":[32]},[[9,\"pointerdown\",\"handleOutsideClick\"]],{\"items\":[{\"onItemsChanged\":0}]}],[769,\"kritzel-master-detail\",{\"items\":[16],\"selectedItemId\":[1,\"selected-item-id\"],\"focusedIndex\":[32],\"showMobileDetail\":[32]},null,{\"selectedItemId\":[{\"watchSelectedItemId\":0}]}],[513,\"kritzel-pill-tabs\",{\"tabs\":[16],\"value\":[1025]}],[513,\"kritzel-utility-panel\",{\"undoState\":[16]}],[513,\"kritzel-awareness-cursors\",{\"core\":[16],\"showEdgeIndicators\":[4,\"show-edge-indicators\"],\"edgeIndicatorPadding\":[2,\"edge-indicator-padding\"],\"remoteCursors\":[32],\"objectVersion\":[32]}],[513,\"kritzel-cursor-trail\",{\"core\":[16],\"cursorTrailPoints\":[32],\"isLeftButtonDown\":[32]},[[9,\"pointerdown\",\"handleMouseDown\"],[9,\"pointermove\",\"handlePointerMove\"],[9,\"pointerup\",\"handlePointerUp\"]]],[513,\"kritzel-input\",{\"value\":[1025],\"label\":[1],\"placeholder\":[1],\"suffix\":[1],\"type\":[1],\"disabled\":[4],\"inputValue\":[32]},null,{\"value\":[{\"onValueChange\":0}]}],[513,\"kritzel-numeric-input\",{\"value\":[1026],\"min\":[2],\"max\":[2],\"step\":[2],\"label\":[1],\"placeholder\":[1],\"inputValue\":[32]},null,{\"value\":[{\"onValueChange\":0}]}],[769,\"kritzel-tooltip\",{\"isVisible\":[1028,\"is-visible\"],\"anchorElement\":[16],\"triggerElement\":[16],\"offsetY\":[2,\"offset-y\"],\"positionX\":[32],\"positionY\":[32],\"open\":[64],\"close\":[64],\"toggle\":[64],\"focusContent\":[64]},[[4,\"click\",\"handleOutsideClick\"],[6,\"pointerdown\",\"handleOutsidePointerDown\"],[4,\"kritzelTooltipCloseAll\",\"handleCloseAll\"],[9,\"resize\",\"handleWindowResize\"]],{\"triggerElement\":[{\"handleTriggerElementChange\":0}],\"isVisible\":[{\"handleVisibilityChange\":0}]}],[513,\"kritzel-color-palette\",{\"colors\":[16],\"selectedColor\":[1040],\"isExpanded\":[4,\"is-expanded\"],\"isOpaque\":[4,\"is-opaque\"],\"opacity\":[2],\"theme\":[1]}],[513,\"kritzel-font-family\",{\"fontOptions\":[16],\"selectedFontFamily\":[1025,\"selected-font-family\"]}],[513,\"kritzel-font-size\",{\"sizes\":[16],\"selectedSize\":[1026,\"selected-size\"],\"fontFamily\":[1,\"font-family\"]}],[513,\"kritzel-stroke-size\",{\"sizes\":[16],\"selectedSize\":[1026,\"selected-size\"]}],[513,\"kritzel-line-endings\",{\"styles\":[16],\"value\":[1040]}],[513,\"kritzel-opacity-slider\",{\"value\":[1026],\"min\":[2],\"max\":[2],\"step\":[2],\"previewColor\":[1,\"preview-color\"]}],[513,\"kritzel-shape-fill\",{\"value\":[1025]}],[513,\"kritzel-slide-toggle\",{\"checked\":[1028],\"disabled\":[4],\"label\":[1]}],[513,\"kritzel-avatar\",{\"user\":[16],\"name\":[1],\"size\":[2],\"color\":[1],\"imageError\":[32]},null,{\"user\":[{\"userChanged\":0}],\"profileImageUrl\":[{\"profileImageUrlChanged\":0}]}],[513,\"kritzel-font\",{\"fontFamily\":[1,\"font-family\"],\"size\":[2],\"color\":[1]}],[513,\"kritzel-color\",{\"value\":[1],\"theme\":[1],\"size\":[2]}],[513,\"kritzel-menu\",{\"items\":[16],\"parent\":[16],\"selectedIndex\":[32],\"setScrollTop\":[64],\"setFocus\":[64]}],[513,\"kritzel-menu-item\",{\"item\":[16],\"parent\":[16],\"isDirty\":[32]},null,{\"item\":[{\"onItemChange\":0}]}],[769,\"kritzel-portal\",{\"anchor\":[16],\"offsetX\":[2,\"offset-x\"],\"offsetY\":[2,\"offset-y\"],\"autoFocus\":[4,\"auto-focus\"]},[[8,\"kritzel-dismiss-menus\",\"handleDismissMenus\"],[8,\"click\",\"handleOutsideClick\"],[6,\"pointerdown\",\"handleOutsidePointerDown\"],[8,\"keydown\",\"handleKeyDown\"],[11,\"resize\",\"handleResize\"],[11,\"scroll\",\"handleWindowScroll\"]],{\"anchor\":[{\"anchorChanged\":0}]}],[769,\"kritzel-dialog\",{\"isOpen\":[516,\"is-open\"],\"dialogTitle\":[1,\"dialog-title\"],\"closable\":[4],\"closeOnBackdrop\":[4,\"close-on-backdrop\"],\"closeOnEscape\":[4,\"close-on-escape\"],\"autoFocus\":[4,\"auto-focus\"],\"trapFocus\":[4,\"trap-focus\"],\"size\":[1],\"fullscreenOnMobile\":[4,\"fullscreen-on-mobile\"],\"contained\":[516],\"isAnimating\":[32],\"mobileLockedHeight\":[32],\"containerRect\":[32],\"containerBorderRadius\":[32],\"open\":[64],\"close\":[64],\"focusFirstElement\":[64]},[[8,\"keydown\",\"handleKeyDown\"],[9,\"resize\",\"handleWindowResize\"],[8,\"orientationchange\",\"handleOrientationChange\"]],{\"isOpen\":[{\"handleIsOpenChange\":0}]}],[769,\"kritzel-dropdown\",{\"options\":[16],\"value\":[1],\"width\":[1],\"selectStyles\":[16],\"forceOpenDirection\":[1,\"force-open-direction\"],\"internalValue\":[32],\"hasSuffixContent\":[32],\"hasPrefixContent\":[32],\"isOpen\":[32],\"focusedIndex\":[32],\"openDirection\":[32]},[[4,\"click\",\"handleDocumentClick\"],[4,\"keydown\",\"handleDocumentKeydown\"]],{\"options\":[{\"optionsChanged\":0}],\"value\":[{\"externalValueChanged\":0}]}],[513,\"kritzel-icon\",{\"name\":[1],\"label\":[1],\"size\":[2]}]]],[\"kritzel-brush-style.cjs\",[[513,\"kritzel-brush-style\",{\"type\":[1],\"brushOptions\":[16]}]]]]"), options);
23
23
  });
24
24
 
25
25
  exports.setNonce = index.setNonce;
@@ -395,6 +395,87 @@ export class KritzelViewport {
395
395
  this.setViewport(centerWorldX, centerWorldY, scale);
396
396
  }
397
397
  }
398
+ /**
399
+ * Zooms in by a fixed step, centered on the current viewport center,
400
+ * with a smooth animation. The resulting scale is clamped to the allowed range.
401
+ * @param factor - Multiplicative zoom-in step
402
+ * @param duration - Animation duration in milliseconds
403
+ */
404
+ zoomIn(factor, duration) {
405
+ this.animateZoomAroundViewportCenter(factor, duration);
406
+ }
407
+ /**
408
+ * Zooms out by a fixed step, centered on the current viewport center,
409
+ * with a smooth animation. The resulting scale is clamped to the allowed range.
410
+ * @param factor - Multiplicative zoom-out step
411
+ * @param duration - Animation duration in milliseconds
412
+ */
413
+ zoomOut(factor, duration) {
414
+ this.animateZoomAroundViewportCenter(1 / factor, duration);
415
+ }
416
+ /**
417
+ * Smoothly zooms around the viewport center, keeping the center world point
418
+ * fixed for the entire animation. The translation is recomputed from the fixed
419
+ * center point on every frame (rather than interpolated independently), which
420
+ * guarantees the center never drifts and the viewport does not jump.
421
+ * The resulting scale is clamped to the allowed range and the translation is
422
+ * clamped to the viewport boundaries.
423
+ * @param scaleFactor - Multiplicative scale factor (>1 zooms in, <1 zooms out)
424
+ * @param duration - Animation duration in milliseconds
425
+ */
426
+ animateZoomAroundViewportCenter(scaleFactor, duration) {
427
+ this.cancelViewportAnimation();
428
+ const state = this._core.store.state;
429
+ const startScale = state.scale;
430
+ const effectiveMinScale = this.getEffectiveMinScale();
431
+ const targetScale = Math.min(state.scaleMax, Math.max(effectiveMinScale, startScale * scaleFactor));
432
+ // The world point currently under the viewport center stays fixed.
433
+ const centerScreenX = state.viewportWidth / 2;
434
+ const centerScreenY = state.viewportHeight / 2;
435
+ const centerWorldX = (centerScreenX - state.translateX) / startScale;
436
+ const centerWorldY = (centerScreenY - state.translateY) / startScale;
437
+ if (targetScale === startScale || duration <= 0) {
438
+ this.applyZoomAroundCenter(targetScale, centerScreenX, centerScreenY, centerWorldX, centerWorldY);
439
+ state.isScaling = true;
440
+ this._core.rerender();
441
+ this._debounceUpdate();
442
+ this._debounceEndScaling();
443
+ return;
444
+ }
445
+ const startTime = performance.now();
446
+ state.isScaling = true;
447
+ const animate = (currentTime) => {
448
+ const elapsed = currentTime - startTime;
449
+ const progress = Math.min(elapsed / duration, 1);
450
+ // easeInOutCubic for a smooth ramp in and out
451
+ const eased = progress < 0.5 ? 4 * progress * progress * progress : 1 - Math.pow(-2 * progress + 2, 3) / 2;
452
+ const frameScale = startScale + (targetScale - startScale) * eased;
453
+ this.applyZoomAroundCenter(frameScale, centerScreenX, centerScreenY, centerWorldX, centerWorldY);
454
+ this._core.rerender();
455
+ if (progress < 1) {
456
+ this._animationFrameId = requestAnimationFrame(animate);
457
+ }
458
+ else {
459
+ this._animationFrameId = null;
460
+ state.isScaling = false;
461
+ this._core.rerender();
462
+ this._debounceUpdate();
463
+ }
464
+ };
465
+ this._animationFrameId = requestAnimationFrame(animate);
466
+ }
467
+ /**
468
+ * Applies a single zoom step that keeps the given world point anchored to the
469
+ * given screen point at the specified scale, clamped to the viewport boundaries.
470
+ */
471
+ applyZoomAroundCenter(scale, screenX, screenY, worldX, worldY) {
472
+ const state = this._core.store.state;
473
+ state.scale = scale;
474
+ const clamped = this.clampTranslate(screenX - worldX * scale, screenY - worldY * scale);
475
+ state.translateX = clamped.translateX;
476
+ state.translateY = clamped.translateY;
477
+ state.hasViewportChanged = true;
478
+ }
398
479
  /**
399
480
  * Centers a given object in the viewport without changing the scale.
400
481
  * The object's center point will be positioned at the viewport center.
@@ -328,6 +328,68 @@ export class KritzelImage extends KritzelBaseObject {
328
328
  this.migrateLegacyDataUrlIfNeeded();
329
329
  }
330
330
  }
331
+ /**
332
+ * Prepares image objects for insertion into the canvas while preserving
333
+ * the standard object-first flow (`new KritzelImage(...); addObject(image)`).
334
+ *
335
+ * Behavior:
336
+ * - If `assetId` is already set, no-op.
337
+ * - If `src` is set (URL or data URL), uploads bytes through the asset
338
+ * resolver, fills `assetId`/`mimeType`, computes dimensions when needed,
339
+ * and seeds `resolvedSrc` for immediate rendering.
340
+ */
341
+ async prepareForInsert() {
342
+ if (this.assetId || !this.src) {
343
+ return;
344
+ }
345
+ if (!this._core?.assetResolver) {
346
+ return;
347
+ }
348
+ const source = this.src;
349
+ const response = await fetch(source);
350
+ if (!response.ok) {
351
+ throw new Error(`Failed to load image source: ${source} (HTTP ${response.status})`);
352
+ }
353
+ const blob = await response.blob();
354
+ const mimeType = blob.type || 'image/png';
355
+ const { naturalWidth, naturalHeight } = await this.measureImageBlob(blob);
356
+ const asset = await this._core.assetResolver.put(blob, {
357
+ mimeType,
358
+ kind: 'image',
359
+ width: naturalWidth,
360
+ height: naturalHeight,
361
+ });
362
+ this.assetId = asset.id;
363
+ this.mimeType = asset.mimeType;
364
+ if (this.width <= 0 || this.height <= 0) {
365
+ const { scaledWidth, scaledHeight } = this.calculateScaledDimensions({
366
+ width: naturalWidth,
367
+ height: naturalHeight,
368
+ });
369
+ this.width = scaledWidth;
370
+ this.height = scaledHeight;
371
+ }
372
+ this.resolvedSrc = await this._core.assetResolver.resolve(asset.id);
373
+ this.loadState = 'ready';
374
+ this.src = '';
375
+ }
376
+ /**
377
+ * Measures intrinsic image dimensions from a Blob.
378
+ */
379
+ async measureImageBlob(blob) {
380
+ const objectUrl = URL.createObjectURL(blob);
381
+ try {
382
+ return await new Promise((resolve, reject) => {
383
+ const img = new Image();
384
+ img.onload = () => resolve({ naturalWidth: img.naturalWidth, naturalHeight: img.naturalHeight });
385
+ img.onerror = err => reject(err);
386
+ img.src = objectUrl;
387
+ });
388
+ }
389
+ finally {
390
+ URL.revokeObjectURL(objectUrl);
391
+ }
392
+ }
331
393
  /**
332
394
  * Overrides base mount to kick off asset resolution the first time
333
395
  * the image is attached to the DOM. Legacy images persisted with an
@@ -344,6 +344,12 @@ export class KritzelEditor {
344
344
  async zoomTo(scale, worldX, worldY) {
345
345
  return this.engineRef.zoomTo(scale, worldX, worldY);
346
346
  }
347
+ async zoomIn(factor = 1.6, duration = 200) {
348
+ return this.engineRef.zoomIn(factor, duration);
349
+ }
350
+ async zoomOut(factor = 1.6, duration = 200) {
351
+ return this.engineRef.zoomOut(factor, duration);
352
+ }
347
353
  async getViewport() {
348
354
  return this.engineRef.getViewport();
349
355
  }
@@ -429,14 +435,14 @@ export class KritzelEditor {
429
435
  async redo() {
430
436
  return this.engineRef.redo();
431
437
  }
432
- async getScreenshot(format = 'png') {
433
- return this.engineRef.getScreenshot(format);
438
+ async getScreenshot(format = 'png', options) {
439
+ return this.engineRef.getScreenshot(format, options);
434
440
  }
435
- async exportViewportAsPng() {
436
- return this.engineRef.exportViewportAsPng();
441
+ async exportViewportAsPng(options) {
442
+ return this.engineRef.exportViewportAsPng(options);
437
443
  }
438
- async exportViewportAsSvg() {
439
- return this.engineRef.exportViewportAsSvg();
444
+ async exportViewportAsSvg(options) {
445
+ return this.engineRef.exportViewportAsSvg(options);
440
446
  }
441
447
  async exportSelectedObjectsAsPng() {
442
448
  return this.engineRef.exportSelectedObjectsAsPng();
@@ -788,31 +794,31 @@ export class KritzelEditor {
788
794
  const isLoggedIn = this.isLoggedIn;
789
795
  const shouldShowCurrentUser = isLoggedIn;
790
796
  const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
791
- return (h(Host, { key: '673bfb4d2d5224c3c3a11bada8afb1c3b90aa03d', style: {
797
+ return (h(Host, { key: 'ffacaea5d3df12a3a8b448d31db3c5949053156c', style: {
792
798
  opacity: this.isEditorVisible ? '1' : '0',
793
799
  visibility: this.isEditorVisible ? 'visible' : 'hidden',
794
800
  transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
795
- } }, h("div", { key: 'cee9075de7a44953b3d017c334b19151ab7bb926', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'a7a6c246dabe3ddbab3d807a9f0c275bc621363f', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'b5452a22f7fd434b8816bdaa117d457b2f1879f3', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: 'a08648ec91f678724171238735b1073ffb53ca73', ref: el => {
801
+ } }, h("div", { key: '669eafee25b4f84c39469738a1337c21ab03e388', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'd6feb4a71c3286830fbe53a533f283c8af9a0385', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '5bd0e6263d51119b197292b69879c1ae437f92fc', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '468f17137c51c90fd61c9179d13c449b1ac8feb9', ref: el => {
796
802
  if (el) {
797
803
  this.engineRef = el;
798
804
  }
799
- }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.theme, themes: this.themes, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), h("kritzel-controls", { key: 'a7b78a31bda3fe2fe1def6be339894b83ea3ee38', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
805
+ }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.theme, themes: this.themes, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), h("kritzel-controls", { key: '848c30b27fb916c8480b41745bd6ec844e0b23a2', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
800
806
  if (el) {
801
807
  this.controlsRef = el;
802
808
  }
803
- }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '0b3f4879c44864661a5bf5f126da3a869fa808f5', class: "top-right-buttons" }, h("kritzel-settings", { key: '7da7fb709f2e4a31a6df1f7382a91f4d78dc6e35', ref: el => {
809
+ }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'e998d60679c767d15617bd7ecde5ee77e781a92f', class: "top-right-buttons" }, h("kritzel-settings", { key: '43b9cdb2d10de789cc03d2a9ef5df870b8ca7bfe', ref: el => {
804
810
  if (el) {
805
811
  this.settingsRef = el;
806
812
  }
807
- }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], settings: this.currentSettingsConfig, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: 'f362b0181231da30efc927cbebd818a9a64991b0', ref: el => {
813
+ }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], settings: this.currentSettingsConfig, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '74669624a1e5177125ef00e1667c880ce47cbce4', ref: el => {
808
814
  if (el) {
809
815
  this.exportRef = el;
810
816
  }
811
- }, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '1cf065fed9b27ffb19a3695425c797a3bc29fa51', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '7d6e8e227f36164daed7303645bdd490b362b4d0', user: this.user }), shouldShowLoginButton && (h("kritzel-button", { key: '1dcf1f5ae547f4c2c5b7ec88b34bcad0a2a4da28', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in")), h("kritzel-more-menu", { key: 'cb80dea4bb9861b6d627399c9aad64075cb8944b', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), h("kritzel-share-dialog", { key: 'd12bc96d7af23941e4e054dadfddcf6429de6208', ref: el => {
817
+ }, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '18d925f32d021ff6713accb22d0594d259d70f2e', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'bddd5c29c5f17cced47276c237c04cfdb711da38', user: this.user }), shouldShowLoginButton && (h("kritzel-button", { key: '4eb6c85459f59863d6e644ecf21c2295da71bafc', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in")), h("kritzel-more-menu", { key: 'a5a323ec248bebc7bc07898f344e0926fac8db17', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), h("kritzel-share-dialog", { key: '8cb3ddad95d36f5b7ad59d8c4f057df93cb2bfe3', ref: el => {
812
818
  if (el) {
813
819
  this.shareDialogRef = el;
814
820
  }
815
- }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '6c29a13069cd74972e94bbc245f26375fa95f4cc', ref: el => {
821
+ }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '35395d0faadcfeb021fba685aa46e180e47d2be2', ref: el => {
816
822
  if (el) {
817
823
  this.loginDialogRef = el;
818
824
  }
@@ -2270,6 +2276,56 @@ export class KritzelEditor {
2270
2276
  "tags": []
2271
2277
  }
2272
2278
  },
2279
+ "zoomIn": {
2280
+ "complexType": {
2281
+ "signature": "(factor?: number, duration?: number) => Promise<void>",
2282
+ "parameters": [{
2283
+ "name": "factor",
2284
+ "type": "number",
2285
+ "docs": ""
2286
+ }, {
2287
+ "name": "duration",
2288
+ "type": "number",
2289
+ "docs": ""
2290
+ }],
2291
+ "references": {
2292
+ "Promise": {
2293
+ "location": "global",
2294
+ "id": "global::Promise"
2295
+ }
2296
+ },
2297
+ "return": "Promise<void>"
2298
+ },
2299
+ "docs": {
2300
+ "text": "",
2301
+ "tags": []
2302
+ }
2303
+ },
2304
+ "zoomOut": {
2305
+ "complexType": {
2306
+ "signature": "(factor?: number, duration?: number) => Promise<void>",
2307
+ "parameters": [{
2308
+ "name": "factor",
2309
+ "type": "number",
2310
+ "docs": ""
2311
+ }, {
2312
+ "name": "duration",
2313
+ "type": "number",
2314
+ "docs": ""
2315
+ }],
2316
+ "references": {
2317
+ "Promise": {
2318
+ "location": "global",
2319
+ "id": "global::Promise"
2320
+ }
2321
+ },
2322
+ "return": "Promise<void>"
2323
+ },
2324
+ "docs": {
2325
+ "text": "",
2326
+ "tags": []
2327
+ }
2328
+ },
2273
2329
  "getViewport": {
2274
2330
  "complexType": {
2275
2331
  "signature": "() => Promise<KritzelViewportState>",
@@ -2930,11 +2986,15 @@ export class KritzelEditor {
2930
2986
  },
2931
2987
  "getScreenshot": {
2932
2988
  "complexType": {
2933
- "signature": "(format?: \"png\" | \"svg\") => Promise<string | null>",
2989
+ "signature": "(format?: \"png\" | \"svg\", options?: { includeBackground?: boolean; }) => Promise<string | null>",
2934
2990
  "parameters": [{
2935
2991
  "name": "format",
2936
2992
  "type": "\"svg\" | \"png\"",
2937
2993
  "docs": ""
2994
+ }, {
2995
+ "name": "options",
2996
+ "type": "{ includeBackground?: boolean; }",
2997
+ "docs": ""
2938
2998
  }],
2939
2999
  "references": {
2940
3000
  "Promise": {
@@ -2951,8 +3011,12 @@ export class KritzelEditor {
2951
3011
  },
2952
3012
  "exportViewportAsPng": {
2953
3013
  "complexType": {
2954
- "signature": "() => Promise<void>",
2955
- "parameters": [],
3014
+ "signature": "(options?: { includeBackground?: boolean; }) => Promise<void>",
3015
+ "parameters": [{
3016
+ "name": "options",
3017
+ "type": "{ includeBackground?: boolean; }",
3018
+ "docs": ""
3019
+ }],
2956
3020
  "references": {
2957
3021
  "Promise": {
2958
3022
  "location": "global",
@@ -2968,8 +3032,12 @@ export class KritzelEditor {
2968
3032
  },
2969
3033
  "exportViewportAsSvg": {
2970
3034
  "complexType": {
2971
- "signature": "() => Promise<void>",
2972
- "parameters": [],
3035
+ "signature": "(options?: { includeBackground?: boolean; }) => Promise<void>",
3036
+ "parameters": [{
3037
+ "name": "options",
3038
+ "type": "{ includeBackground?: boolean; }",
3039
+ "docs": ""
3040
+ }],
2973
3041
  "references": {
2974
3042
  "Promise": {
2975
3043
  "location": "global",