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
@@ -1 +1 @@
1
- import{p as e,b as o}from"./p-Dhio9uis.js";export{s as setNonce}from"./p-Dhio9uis.js";import{g as t}from"./p-DQuL1Twl.js";(()=>{const o=import.meta.url,t={};return""!==o&&(t.resourcesUrl=new URL(".",o).href),e(t)})().then((async e=>(await t(),o(JSON.parse('[["p-9adee165",[[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]}]]],["p-fb32cd8f",[[513,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]]'),e))));
1
+ import{p as e,b as o}from"./p-Dhio9uis.js";export{s as setNonce}from"./p-Dhio9uis.js";import{g as t}from"./p-DQuL1Twl.js";(()=>{const o=import.meta.url,t={};return""!==o&&(t.resourcesUrl=new URL(".",o).href),e(t)})().then((async e=>(await t(),o(JSON.parse('[["p-bbebe56c",[[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]}]]],["p-fb32cd8f",[[513,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]]'),e))));
@@ -138,6 +138,36 @@ export declare class KritzelViewport {
138
138
  * @param worldY - Optional Y position in world coordinates to center on
139
139
  */
140
140
  zoomTo(scale: number, worldX?: number, worldY?: number): void;
141
+ /**
142
+ * Zooms in by a fixed step, centered on the current viewport center,
143
+ * with a smooth animation. The resulting scale is clamped to the allowed range.
144
+ * @param factor - Multiplicative zoom-in step
145
+ * @param duration - Animation duration in milliseconds
146
+ */
147
+ zoomIn(factor: number, duration: number): void;
148
+ /**
149
+ * Zooms out by a fixed step, centered on the current viewport center,
150
+ * with a smooth animation. The resulting scale is clamped to the allowed range.
151
+ * @param factor - Multiplicative zoom-out step
152
+ * @param duration - Animation duration in milliseconds
153
+ */
154
+ zoomOut(factor: number, duration: number): void;
155
+ /**
156
+ * Smoothly zooms around the viewport center, keeping the center world point
157
+ * fixed for the entire animation. The translation is recomputed from the fixed
158
+ * center point on every frame (rather than interpolated independently), which
159
+ * guarantees the center never drifts and the viewport does not jump.
160
+ * The resulting scale is clamped to the allowed range and the translation is
161
+ * clamped to the viewport boundaries.
162
+ * @param scaleFactor - Multiplicative scale factor (>1 zooms in, <1 zooms out)
163
+ * @param duration - Animation duration in milliseconds
164
+ */
165
+ private animateZoomAroundViewportCenter;
166
+ /**
167
+ * Applies a single zoom step that keeps the given world point anchored to the
168
+ * given screen point at the specified scale, clamped to the viewport boundaries.
169
+ */
170
+ private applyZoomAroundCenter;
141
171
  /**
142
172
  * Centers a given object in the viewport without changing the scale.
143
173
  * The object's center point will be positioned at the viewport center.
@@ -167,6 +167,21 @@ export declare class KritzelImage extends KritzelBaseObject<HTMLImageElement> {
167
167
  * start loading.
168
168
  */
169
169
  ensureLoaded(): void;
170
+ /**
171
+ * Prepares image objects for insertion into the canvas while preserving
172
+ * the standard object-first flow (`new KritzelImage(...); addObject(image)`).
173
+ *
174
+ * Behavior:
175
+ * - If `assetId` is already set, no-op.
176
+ * - If `src` is set (URL or data URL), uploads bytes through the asset
177
+ * resolver, fills `assetId`/`mimeType`, computes dimensions when needed,
178
+ * and seeds `resolvedSrc` for immediate rendering.
179
+ */
180
+ prepareForInsert(): Promise<void>;
181
+ /**
182
+ * Measures intrinsic image dimensions from a Blob.
183
+ */
184
+ private measureImageBlob;
170
185
  /**
171
186
  * Overrides base mount to kick off asset resolution the first time
172
187
  * the image is attached to the DOM. Legacy images persisted with an
@@ -106,6 +106,8 @@ export declare class KritzelEditor {
106
106
  setViewport(x: number, y: number, scale: number): Promise<void>;
107
107
  panTo(x: number, y: number): Promise<void>;
108
108
  zoomTo(scale: number, worldX?: number, worldY?: number): Promise<void>;
109
+ zoomIn(factor?: number, duration?: number): Promise<void>;
110
+ zoomOut(factor?: number, duration?: number): Promise<void>;
109
111
  getViewport(): Promise<KritzelViewportState>;
110
112
  screenToWorld(x: number, y: number): Promise<{
111
113
  x: number;
@@ -140,9 +142,15 @@ export declare class KritzelEditor {
140
142
  ungroup(): Promise<void>;
141
143
  undo(): Promise<void>;
142
144
  redo(): Promise<void>;
143
- getScreenshot(format?: 'png' | 'svg'): Promise<string | null>;
144
- exportViewportAsPng(): Promise<void>;
145
- exportViewportAsSvg(): Promise<void>;
145
+ getScreenshot(format?: 'png' | 'svg', options?: {
146
+ includeBackground?: boolean;
147
+ }): Promise<string | null>;
148
+ exportViewportAsPng(options?: {
149
+ includeBackground?: boolean;
150
+ }): Promise<void>;
151
+ exportViewportAsSvg(options?: {
152
+ includeBackground?: boolean;
153
+ }): Promise<void>;
146
154
  exportSelectedObjectsAsPng(): Promise<void>;
147
155
  exportSelectedObjectsAsSvg(): Promise<void>;
148
156
  downloadAsJson(filename?: string): Promise<void>;
@@ -364,6 +364,18 @@ export declare class KritzelEngine {
364
364
  * @param worldY - Optional Y position in world coordinates to center on.
365
365
  */
366
366
  zoomTo(scale: number, worldX?: number, worldY?: number): Promise<void>;
367
+ /**
368
+ * Zooms in by a fixed step, centered on the current viewport center, with a smooth animation.
369
+ * @param factor - Multiplicative zoom-in step.
370
+ * @param duration - Animation duration in milliseconds.
371
+ */
372
+ zoomIn(factor: number, duration: number): Promise<void>;
373
+ /**
374
+ * Zooms out by a fixed step, centered on the current viewport center, with a smooth animation.
375
+ * @param factor - Multiplicative zoom-out step.
376
+ * @param duration - Animation duration in milliseconds.
377
+ */
378
+ zoomOut(factor: number, duration: number): Promise<void>;
367
379
  /**
368
380
  * Returns the current viewport state including position, scale, and dimensions.
369
381
  * @returns The current viewport state.
@@ -396,13 +408,29 @@ export declare class KritzelEngine {
396
408
  /**
397
409
  * Captures a screenshot of the current viewport as a data URL.
398
410
  * @param format - The image format: `'png'` (default) or `'svg'`.
411
+ * @param options - Optional screenshot settings.
412
+ * @param options.includeBackground - Whether to include the canvas background in the export. Defaults to `true`. Set to `false` for a transparent background.
399
413
  * @returns A data URL string of the captured image.
400
414
  */
401
- getScreenshot(format?: 'png' | 'svg'): Promise<string | null>;
402
- /** Exports the current viewport as a PNG file and triggers a browser download. */
403
- exportViewportAsPng(): Promise<void>;
404
- /** Exports the current viewport as an SVG file and triggers a browser download. */
405
- exportViewportAsSvg(): Promise<void>;
415
+ getScreenshot(format?: 'png' | 'svg', options?: {
416
+ includeBackground?: boolean;
417
+ }): Promise<string | null>;
418
+ /**
419
+ * Exports the current viewport as a PNG file and triggers a browser download.
420
+ * @param options - Optional export settings.
421
+ * @param options.includeBackground - Whether to include the canvas background. Defaults to `true`.
422
+ */
423
+ exportViewportAsPng(options?: {
424
+ includeBackground?: boolean;
425
+ }): Promise<void>;
426
+ /**
427
+ * Exports the current viewport as an SVG file and triggers a browser download.
428
+ * @param options - Optional export settings.
429
+ * @param options.includeBackground - Whether to include the canvas background. Defaults to `true`.
430
+ */
431
+ exportViewportAsSvg(options?: {
432
+ includeBackground?: boolean;
433
+ }): Promise<void>;
406
434
  /**
407
435
  * Generates an SVG string from the currently selected objects.
408
436
  * Creates clean, standards-compliant SVG markup by directly serializing object properties.
@@ -31,6 +31,7 @@ import { KritzelAlignment } from "./enums/alignment.enum";
31
31
  import { Element, Event } from "./stencil-public-runtime";
32
32
  import { KritzelShortcut } from "./interfaces/shortcut.interface";
33
33
  import { KritzelEngineState } from "./interfaces/engine-state.interface";
34
+ import { KritzelImage } from "./classes/objects/image.class";
34
35
  import { KritzelText } from "./classes/objects/text.class";
35
36
  import { KritzelGroup } from "./classes/objects/group.class";
36
37
  import { KritzelLine } from "./classes/objects/line.class";
@@ -69,6 +70,7 @@ export { KritzelAlignment } from "./enums/alignment.enum";
69
70
  export { Element, Event } from "./stencil-public-runtime";
70
71
  export { KritzelShortcut } from "./interfaces/shortcut.interface";
71
72
  export { KritzelEngineState } from "./interfaces/engine-state.interface";
73
+ export { KritzelImage } from "./classes/objects/image.class";
72
74
  export { KritzelText } from "./classes/objects/text.class";
73
75
  export { KritzelGroup } from "./classes/objects/group.class";
74
76
  export { KritzelLine } from "./classes/objects/line.class";
@@ -376,8 +378,8 @@ export namespace Components {
376
378
  "enable": () => Promise<void>;
377
379
  "exportSelectedObjectsAsPng": () => Promise<void>;
378
380
  "exportSelectedObjectsAsSvg": () => Promise<void>;
379
- "exportViewportAsPng": () => Promise<void>;
380
- "exportViewportAsSvg": () => Promise<void>;
381
+ "exportViewportAsPng": (options?: { includeBackground?: boolean; }) => Promise<void>;
382
+ "exportViewportAsSvg": (options?: { includeBackground?: boolean; }) => Promise<void>;
381
383
  "findObjects": <T extends KritzelBaseObject>(predicate: (obj: KritzelBaseObject<Element>) => boolean) => Promise<T[]>;
382
384
  "getActiveWorkspace": () => Promise<KritzelWorkspace>;
383
385
  "getAllObjects": <T extends KritzelBaseObject>() => Promise<T[]>;
@@ -386,7 +388,7 @@ export namespace Components {
386
388
  "getObjectById": <T extends KritzelBaseObject>(id: string) => Promise<T | null>;
387
389
  "getObjectsInViewport": () => Promise<KritzelBaseObject[]>;
388
390
  "getObjectsTotalCount": () => Promise<number>;
389
- "getScreenshot": (format?: "png" | "svg") => Promise<string | null>;
391
+ "getScreenshot": (format?: "png" | "svg", options?: { includeBackground?: boolean; }) => Promise<string | null>;
390
392
  "getSelectedObjects": () => Promise<KritzelBaseObject[]>;
391
393
  "getViewport": () => Promise<KritzelViewportState>;
392
394
  "getWorkspaces": () => Promise<KritzelWorkspace[]>;
@@ -497,6 +499,8 @@ export namespace Components {
497
499
  */
498
500
  "wheelEnabled": boolean;
499
501
  "worldToScreen": (x: number, y: number) => Promise<{ x: number; y: number; }>;
502
+ "zoomIn": (factor?: number, duration?: number) => Promise<void>;
503
+ "zoomOut": (factor?: number, duration?: number) => Promise<void>;
500
504
  "zoomTo": (scale: number, worldX?: number, worldY?: number) => Promise<void>;
501
505
  }
502
506
  interface KritzelEngine {
@@ -638,12 +642,16 @@ export namespace Components {
638
642
  "exportSelectedObjectsAsSvg": (options?: { theme?: "light" | "dark"; padding?: number; }) => Promise<void>;
639
643
  /**
640
644
  * Exports the current viewport as a PNG file and triggers a browser download.
645
+ * @param options - Optional export settings.
646
+ * @param options.includeBackground - Whether to include the canvas background. Defaults to `true`.
641
647
  */
642
- "exportViewportAsPng": () => Promise<void>;
648
+ "exportViewportAsPng": (options?: { includeBackground?: boolean; }) => Promise<void>;
643
649
  /**
644
650
  * Exports the current viewport as an SVG file and triggers a browser download.
651
+ * @param options - Optional export settings.
652
+ * @param options.includeBackground - Whether to include the canvas background. Defaults to `true`.
645
653
  */
646
- "exportViewportAsSvg": () => Promise<void>;
654
+ "exportViewportAsSvg": (options?: { includeBackground?: boolean; }) => Promise<void>;
647
655
  /**
648
656
  * Returns all objects that match the given predicate function. Excludes internal selection-related objects (selection groups and selection boxes).
649
657
  * @param predicate - A filter function called for each object. Return `true` to include.
@@ -689,9 +697,11 @@ export namespace Components {
689
697
  /**
690
698
  * Captures a screenshot of the current viewport as a data URL.
691
699
  * @param format - The image format: `'png'` (default) or `'svg'`.
700
+ * @param options - Optional screenshot settings.
701
+ * @param options.includeBackground - Whether to include the canvas background in the export. Defaults to `true`. Set to `false` for a transparent background.
692
702
  * @returns A data URL string of the captured image.
693
703
  */
694
- "getScreenshot": (format?: "png" | "svg") => Promise<string | null>;
704
+ "getScreenshot": (format?: "png" | "svg", options?: { includeBackground?: boolean; }) => Promise<string | null>;
695
705
  /**
696
706
  * Returns the currently selected objects. Returns an empty array if nothing is selected.
697
707
  */
@@ -953,6 +963,18 @@ export namespace Components {
953
963
  * @returns Screen coordinates { x, y } relative to the engine element.
954
964
  */
955
965
  "worldToScreen": (x: number, y: number) => Promise<{ x: number; y: number; }>;
966
+ /**
967
+ * Zooms in by a fixed step, centered on the current viewport center, with a smooth animation.
968
+ * @param factor - Multiplicative zoom-in step.
969
+ * @param duration - Animation duration in milliseconds.
970
+ */
971
+ "zoomIn": (factor: number, duration: number) => Promise<void>;
972
+ /**
973
+ * Zooms out by a fixed step, centered on the current viewport center, with a smooth animation.
974
+ * @param factor - Multiplicative zoom-out step.
975
+ * @param duration - Animation duration in milliseconds.
976
+ */
977
+ "zoomOut": (factor: number, duration: number) => Promise<void>;
956
978
  /**
957
979
  * Zooms the viewport to the given scale level. Optionally centers on a world point; if omitted, zooms around the viewport center.
958
980
  * @param scale - Target scale level.
@@ -3,4 +3,4 @@
3
3
  * This file is auto-generated by the version bump scripts.
4
4
  * Do not modify manually.
5
5
  */
6
- export declare const KRITZEL_VERSION = "0.3.13";
6
+ export declare const KRITZEL_VERSION = "0.3.15";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kritzel-stencil",
3
- "version": "0.3.13",
3
+ "version": "0.3.15",
4
4
  "description": "Stencil Component Starter",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
@@ -1 +0,0 @@
1
- import{p as e,H as t,c as s,h as i,d as o,t as r}from"./p-B43upypT.js";import{e as n,d as l}from"./p-B9hLySCl.js";import{a}from"./p-2xYAGd0I.js";import{d as h}from"./p-skWUIStn.js";import{d as p}from"./p-BFoK4W--.js";import{d as c}from"./p-Df3BwVGy.js";import{d}from"./p-CmuNn1Tc.js";import{d as m}from"./p-JhOYwUOj.js";import{d as f}from"./p-FK7b3BGt.js";import{d as u}from"./p-DbB730vO.js";import{d as g}from"./p-CXpv9Rxe.js";import{d as y}from"./p-DEy7zJCe.js";import{d as z}from"./p-BFYtCsZu.js";import{d as k}from"./p-B2Os1ya_.js";class C{static getToolConfig(e){switch(e?.toolType){case"selection":return"getToolConfig"in e&&"function"==typeof e.getToolConfig?e.getToolConfig():null;case"brush":return{type:"brush",colorProperty:"color",sizeProperty:"size",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"stroke-size",propertyName:"size"}]};case"line":return{type:"line",colorProperty:"color",sizeProperty:"size",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"stroke-size",propertyName:"size"},{type:"line-endings",propertyName:"arrows",additionalProps:{}}]};case"shape":return{type:"shape",colorProperty:"strokeColor",sizeProperty:"strokeWidth",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"stroke-size",propertyName:"strokeWidth"},{type:"shape-fill",propertyName:"fillColor",additionalProps:{}}]};case"text":return{type:"text",colorProperty:"fontColor",sizeProperty:"fontSize",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"font-size",propertyName:"fontSize",additionalProps:{}},{type:"font-family",propertyName:"fontFamily"}]};default:return null}}}const x=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.toolChange=s(this,"toolChange"),this.displayValuesChange=s(this,"displayValuesChange")}tool;handleToolChange(e,t){const s=C.getToolConfig(e);if(t&&e&&"shape"===s?.type){const i=C.getToolConfig(t);"shape"===i?.type&&[s.colorProperty,s.sizeProperty,s.opacityProperty,"fillColor"].forEach((s=>{s&&void 0!==t[s]&&(e[s]=t[s])}))}this.config=s,this.config&&(this.updatePalette(),this.updateSizes(),this.currentOpacity=e[this.config.opacityProperty]??1,this.emitDisplayValues())}isExpanded=!1;theme;engine;handleSelectionChangeBound=this.handleSelectionChange.bind(this);onThemeChange(){this.emitDisplayValues()}handleEngineChange(e,t){t&&t.removeEventListener("objectsSelectionChange",this.handleSelectionChangeBound),e&&e.addEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}toolChange;displayValuesChange;config;palette=[];sizes=[];currentOpacity=1;updateTrigger=0;handleSelectionChange(){this.tool instanceof n&&(this.config=C.getToolConfig(this.tool),this.config&&(this.updatePalette(),this.updateSizes(),this.currentOpacity=this.tool[this.config.opacityProperty]??1,this.emitDisplayValues()))}disconnectedCallback(){this.engine&&this.engine.removeEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}componentWillLoad(){this.config=C.getToolConfig(this.tool),this.config&&(this.updatePalette(),this.updateSizes(),this.currentOpacity=this.tool[this.config.opacityProperty]??1,this.emitDisplayValues()),this.engine&&this.engine.addEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}emitDisplayValues(){if(!this.config)return;const e=this.tool[this.config.sizeProperty],t={color:a.applyOpacity(this.tool[this.config.colorProperty],this.currentOpacity,this.theme),size:e};this.tool instanceof l&&(t.fontFamily=this.tool.fontFamily),this.displayValuesChange.emit(t)}updatePalette(){this.config&&(this.palette="none"===this.config.paletteSource?[]:this.tool.palette||[])}updateSizes(){this.config&&(this.sizes="none"===this.config.sizesSource?[]:this.tool.sizes||[])}handleToggleExpand=()=>{this.isExpanded=!this.isExpanded};handleColorChange=e=>{if(this.tool[this.config.colorProperty]=e.detail,"shape"===this.config.type||"selection"===this.config.type){const t=this.tool;("string"==typeof t.fillColor?"transparent"===t.fillColor:"transparent"===t.fillColor.light&&"transparent"===t.fillColor.dark)||(t.fillColor=e.detail)}this.emitDisplayValues(),this.toolChange.emit(this.tool),this.updateTrigger++};handleSizeChange=e=>{this.tool[this.config.sizeProperty]=e.detail,this.emitDisplayValues(),this.toolChange.emit(this.tool),this.updateTrigger++};handleOpacityChange=e=>{this.tool[this.config.opacityProperty]=e.detail,this.currentOpacity=e.detail,this.emitDisplayValues(),this.toolChange.emit(this.tool)};handlePropertyChange=(e,t)=>{if("shape"!==this.config.type&&"selection"!==this.config.type||"fillColor"!==e)this.tool[e]=t,"fontFamily"===e&&this.emitDisplayValues();else{const e="filled"===t?this.tool[this.config.colorProperty]:{light:"transparent",dark:"transparent"};this.tool.fillColor=e,"filled"===t&&(this.tool[this.config.colorProperty]=e)}this.toolChange.emit(this.tool),this.updateTrigger++};getShapeFillValue(){const e=this.tool.fillColor;return("string"==typeof e?"transparent"===e:"transparent"===e.light&&"transparent"===e.dark)?"transparent":"filled"}renderControl(e){const t=this.tool[e.propertyName];switch(e.type){case"stroke-size":return i("kritzel-stroke-size",{key:e.type,sizes:this.sizes.length>0?this.sizes:void 0,selectedSize:t,onSizeChange:this.handleSizeChange});case"font-size":return i("kritzel-font-size",{key:e.type,sizes:this.sizes.length>0?this.sizes:void 0,selectedSize:t,fontFamily:this.tool.fontFamily,onSizeChange:this.handleSizeChange});case"line-endings":return i("kritzel-line-endings",{key:e.type,value:t,onValueChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});case"shape-fill":return i("kritzel-shape-fill",{key:e.type,value:this.getShapeFillValue(),onValueChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});case"font-family":return i("kritzel-font-family",{key:e.type,selectedFontFamily:t,onFontFamilyChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});default:return null}}render(){if(!this.config)return null;const e=this.palette.length>6||"text"===this.config.type,t=this.palette.length>0,s=this.config.controls.find((e=>"stroke-size"===e.type||"font-size"===e.type)),r=this.config.controls.filter((e=>"stroke-size"!==e.type&&"font-size"!==e.type));return i(o,null,i("div",{style:{display:"flex",flexDirection:"row",gap:"8px",width:"100%"}},i("div",{style:{display:"flex",flexDirection:"column",gap:"12px",flex:"1"}},t&&i("kritzel-color-palette",{colors:this.palette,selectedColor:this.tool[this.config.colorProperty],isExpanded:this.isExpanded,isOpaque:!0,opacity:this.currentOpacity,theme:this.theme,onColorChange:this.handleColorChange}),s&&this.renderControl(s),i("kritzel-opacity-slider",{value:this.tool[this.config.opacityProperty],previewColor:this.tool[this.config.colorProperty],onValueChange:this.handleOpacityChange}),r.map((e=>[i("div",{class:"divider"}),this.renderControl(e)]))),e&&i("div",{style:{display:"flex",alignItems:"flex-start"}},i("button",{class:"expand-toggle",onClick:this.handleToggleExpand,title:this.isExpanded?"Collapse":"Expand"},i("kritzel-icon",{name:this.isExpanded?"chevron-up":"chevron-down"})))))}static get watchers(){return{tool:[{handleToolChange:0}],theme:[{onThemeChange:0}],engine:[{handleEngineChange:0}]}}static get style(){return".expand-toggle{background:none;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--kritzel-icon-color, currentColor);transition:transform 0.2s ease}.expand-toggle:hover{opacity:0.7}.expand-toggle:focus{outline:none}.expand-toggle:focus-visible{outline:2px solid var(--kritzel-focus-color, #007acc);outline-offset:2px}.expand-toggle:active{transform:scale(0.95)}.divider{height:1px;background-color:var(--kritzel-divider-color, #e0e0e0);margin:4px 0;width:100%}"}},[513,"kritzel-tool-config",{tool:[1040],isExpanded:[1028,"is-expanded"],theme:[1],engine:[16],config:[32],palette:[32],sizes:[32],currentOpacity:[32],updateTrigger:[32]},void 0,{tool:[{handleToolChange:0}],theme:[{onThemeChange:0}],engine:[{handleEngineChange:0}]}]);function b(){"undefined"!=typeof customElements&&["kritzel-tool-config","kritzel-color","kritzel-color-palette","kritzel-dropdown","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-opacity-slider","kritzel-shape-fill","kritzel-stroke-size"].forEach((e=>{switch(e){case"kritzel-tool-config":customElements.get(r(e))||customElements.define(r(e),x);break;case"kritzel-color":customElements.get(r(e))||h();break;case"kritzel-color-palette":customElements.get(r(e))||p();break;case"kritzel-dropdown":customElements.get(r(e))||c();break;case"kritzel-font":customElements.get(r(e))||d();break;case"kritzel-font-family":customElements.get(r(e))||m();break;case"kritzel-font-size":customElements.get(r(e))||f();break;case"kritzel-icon":customElements.get(r(e))||u();break;case"kritzel-line-endings":customElements.get(r(e))||g();break;case"kritzel-opacity-slider":customElements.get(r(e))||y();break;case"kritzel-shape-fill":customElements.get(r(e))||z();break;case"kritzel-stroke-size":customElements.get(r(e))||k()}}))}export{C as K,x as a,b as d}