@zsviczian/excalidraw 0.18.113-beta.1 → 0.18.113-beta.2

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 (5) hide show
  1. package/dist/excalidraw.development.js +12 -1
  2. package/dist/excalidraw.production.min.js +1 -1
  3. package/package.json +1 -1
  4. package/types/excalidraw/components/Actions.d.ts +15 -3
  5. package/types/excalidraw/components/shapeActionPredicates.d.ts +37 -0
package/dist/excalidraw.development.js CHANGED
@@ -1705,7 +1705,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
1705
1705
  (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
1706
1706
 
1707
1707
  "use strict";
1708
- eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ CompactShapeActions: () => (/* binding */ CompactShapeActions),\n/* harmony export */ ExitViewModeButton: () => (/* binding */ ExitViewModeButton),\n/* harmony export */ ExitZenModeButton: () => (/* binding */ ExitZenModeButton),\n/* harmony export */ MobileShapeActions: () => (/* binding */ MobileShapeActions),\n/* harmony export */ SelectedShapeActions: () => (/* binding */ SelectedShapeActions),\n/* harmony export */ ShapesSwitcher: () => (/* binding */ ShapesSwitcher),\n/* harmony export */ UndoRedoActions: () => (/* binding */ UndoRedoActions),\n/* harmony export */ ZoomActions: () => (/* binding */ ZoomActions),\n/* harmony export */ canChangeBackgroundColor: () => (/* binding */ canChangeBackgroundColor),\n/* harmony export */ canChangeStrokeColor: () => (/* binding */ canChangeStrokeColor)\n/* harmony export */ });\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var radix_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! radix-ui */ \"../../node_modules/@radix-ui/react-popover/dist/index.mjs\");\n/* harmony import */ var _excalidraw_common__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @excalidraw/common */ \"../common/src/index.ts\");\n/* harmony import */ var _excalidraw_element__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @excalidraw/element */ \"../element/src/index.ts\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../actions */ \"./actions/index.ts\");\n/* harmony import */ var _actions_actionAlign__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../actions/actionAlign */ \"./actions/actionAlign.tsx\");\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../analytics */ \"./analytics.ts\");\n/* harmony import */ var _context_tunnels__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../context/tunnels */ \"./context/tunnels.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _actions_actionProperties__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../actions/actionProperties */ \"./actions/actionProperties.tsx\");\n/* harmony import */ var _hooks_useTextEditorFocus__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../hooks/useTextEditorFocus */ \"./hooks/useTextEditorFocus.ts\");\n/* harmony import */ var _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../actions/actionToggleViewMode */ \"./actions/actionToggleViewMode.tsx\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./shapes */ \"./components/shapes.tsx\");\n/* harmony import */ var _Actions_scss__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./Actions.scss */ \"./components/Actions.scss\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./App */ \"./components/App.tsx\");\n/* harmony import */ var _Stack__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./Stack */ \"./components/Stack.tsx\");\n/* harmony import */ var _ToolButton__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./ToolButton */ \"./components/ToolButton.tsx\");\n/* harmony import */ var _ToolPopover__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./ToolPopover */ \"./components/ToolPopover.tsx\");\n/* harmony import */ var _dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./dropdownMenu/DropdownMenu */ \"./components/dropdownMenu/DropdownMenu.tsx\");\n/* harmony import */ var _PropertiesPopover__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./PropertiesPopover */ \"./components/PropertiesPopover.tsx\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./icons */ \"./components/icons.tsx\");\n/* harmony import */ var _Island__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./Island */ \"./components/Island.tsx\");\n/* harmony import */ var _obsidianUtils__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ../obsidianUtils */ \"./obsidianUtils.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n //zsviczian\n// Common CSS class combinations\n\nconst PROPERTIES_CLASSES = (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])([_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.CLASSES.SHAPE_ACTIONS_THEME_SCOPE, \"properties-content\"]);\nconst canChangeStrokeColor = (appState, targetElements) => {\n var _a;\n\n let commonSelectedType = ((_a = targetElements[0]) === null || _a === void 0 ? void 0 : _a.type) || null;\n\n for (const element of targetElements) {\n if (element.type !== commonSelectedType) {\n commonSelectedType = null;\n break;\n }\n }\n\n return (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.hasStrokeColor)(appState.activeTool.type) && commonSelectedType !== \"image\" && commonSelectedType !== \"frame\" && commonSelectedType !== \"magicframe\" || targetElements.some(element => (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.hasStrokeColor)(element.type));\n};\nconst canChangeBackgroundColor = (appState, targetElements) => {\n return (0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasBackground)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasBackground)(element.type));\n};\nconst SelectedShapeActions = ({\n appState,\n elementsMap,\n renderAction,\n app\n}) => {\n var _a;\n\n const targetElements = (0,_scene__WEBPACK_IMPORTED_MODULE_10__.getTargetElements)(elementsMap, appState);\n let isSingleElementBoundContainer = false;\n\n if (targetElements.length === 2 && ((0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.hasBoundTextElement)(targetElements[0]) || (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.hasBoundTextElement)(targetElements[1]))) {\n isSingleElementBoundContainer = true;\n }\n\n const isEditingTextOrNewElement = Boolean(appState.editingTextElement || appState.newElement);\n const editorInterface = (0,_App__WEBPACK_IMPORTED_MODULE_16__.useEditorInterface)();\n const isRTL = document.documentElement.getAttribute(\"dir\") === \"rtl\";\n const showFillIcons = (0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasBackground)(appState.activeTool.type) && !(0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.isTransparent)(appState.currentItemBackgroundColor) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasBackground)(element.type) && !(0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.isTransparent)(element.backgroundColor));\n const showLinkIcon = targetElements.length === 1 || isSingleElementBoundContainer;\n const showLineEditorAction = !((_a = appState.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.isEditing) && targetElements.length === 1 && (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.isLinearElement)(targetElements[0]) && !(0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.isElbowArrow)(targetElements[0]);\n const showCropEditorAction = !appState.croppingElementId && targetElements.length === 1 && (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.isImageElement)(targetElements[0]);\n const showAlignActions = !isSingleElementBoundContainer && (0,_actions_actionAlign__WEBPACK_IMPORTED_MODULE_6__.alignActionsPredicate)(appState, app); // zsviczian\n\n const showToggleFrameRoleAction = targetElements.length > 0 && targetElements.every(el => el.type === \"frame\") || appState.activeTool.type === \"frame\";\n return React.createElement(\"div\", {\n className: \"selected-shape-actions\"\n }, React.createElement(\"div\", null, canChangeStrokeColor(appState, targetElements) && renderAction(\"changeStrokeColor\")), canChangeBackgroundColor(appState, targetElements) && React.createElement(\"div\", null, renderAction(\"changeBackgroundColor\")), showFillIcons && renderAction(\"changeFillStyle\"), ((0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasStrokeWidth)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasStrokeWidth)(element.type))) && renderAction(\"changeStrokeWidth\"), ((0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasFreedrawMode)(appState.activeTool.type) && !appState.currentStrokeOptions || //zsviczian\n targetElements.some(element => {\n var _a;\n\n return (0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasFreedrawMode)(element.type) && !((_a = element.customData) === null || _a === void 0 ? void 0 : _a.strokeOptions);\n })) && //zsviczian\n renderAction(\"changeFreedrawMode\"), ((0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasStrokeStyle)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasStrokeStyle)(element.type))) && React.createElement(React.Fragment, null, renderAction(\"changeStrokeStyle\"), renderAction(\"changeSloppiness\")), ((0,_scene__WEBPACK_IMPORTED_MODULE_10__.canChangeRoundness)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_10__.canChangeRoundness)(element.type))) && React.createElement(React.Fragment, null, renderAction(\"changeRoundness\")), ((0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.toolIsArrow)(appState.activeTool.type) || targetElements.some(element => (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.toolIsArrow)(element.type))) && React.createElement(React.Fragment, null, renderAction(\"changeArrowType\")), (appState.activeTool.type === \"text\" || targetElements.some(_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.isTextElement)) && React.createElement(React.Fragment, null, React.createElement(\"fieldset\", null, renderAction(\"changeFontFamily\")), renderAction(\"changeFontSize\"), (appState.activeTool.type === \"text\" || (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.suppportsHorizontalAlign)(targetElements, elementsMap)) && renderAction(\"changeTextAlign\")), (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.shouldAllowVerticalAlign)(targetElements, elementsMap) && renderAction(\"changeVerticalAlign\"), ((0,_scene__WEBPACK_IMPORTED_MODULE_10__.canHaveArrowheads)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_10__.canHaveArrowheads)(element.type))) && React.createElement(React.Fragment, null, renderAction(\"changeArrowhead\")), showToggleFrameRoleAction && React.createElement(\"fieldset\", null, React.createElement(\"legend\", null, (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.t2)(\"COMP_FRAME\")), React.createElement(\"div\", {\n className: \"buttonList\"\n }, renderAction(\"toggleFrameRole\"))), renderAction(\"changeOpacity\"), React.createElement(\"fieldset\", null, React.createElement(\"legend\", null, (0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"labels.layers\")), React.createElement(\"div\", {\n className: \"buttonList\"\n }, renderAction(\"sendToBack\"), renderAction(\"sendBackward\"), renderAction(\"bringForward\"), renderAction(\"bringToFront\"))), showAlignActions && !isSingleElementBoundContainer && React.createElement(\"fieldset\", null, React.createElement(\"legend\", null, (0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"labels.align\")), React.createElement(\"div\", {\n className: \"buttonList\"\n }, isRTL ? React.createElement(React.Fragment, null, renderAction(\"alignRight\"), renderAction(\"alignHorizontallyCentered\"), renderAction(\"alignLeft\")) : React.createElement(React.Fragment, null, renderAction(\"alignLeft\"), renderAction(\"alignHorizontallyCentered\"), renderAction(\"alignRight\")), targetElements.length > 2 && renderAction(\"distributeHorizontally\"), React.createElement(\"div\", {\n style: {\n flexBasis: \"100%\",\n height: 0\n }\n }), React.createElement(\"div\", {\n style: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \".5rem\",\n marginTop: \"-0.5rem\"\n }\n }, renderAction(\"alignTop\"), renderAction(\"alignVerticallyCentered\"), renderAction(\"alignBottom\"), targetElements.length > 2 && renderAction(\"distributeVertically\")))), !isEditingTextOrNewElement && targetElements.length > 0 && React.createElement(\"fieldset\", null, React.createElement(\"legend\", null, (0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"labels.actions\")), React.createElement(\"div\", {\n className: \"buttonList\"\n }, editorInterface.formFactor !== \"phone\" && renderAction(\"duplicateSelection\"), editorInterface.formFactor !== \"phone\" && renderAction(\"deleteSelectedElements\"), renderAction(\"group\"), renderAction(\"ungroup\"), showLinkIcon && renderAction(\"hyperlink\"), showCropEditorAction && renderAction(\"cropEditor\"), showLineEditorAction && renderAction(\"toggleLinearEditor\"))));\n};\n\nconst CombinedShapeProperties = ({\n appState,\n renderAction,\n setAppState,\n targetElements,\n container\n}) => {\n const showFillIcons = (0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasBackground)(appState.activeTool.type) && !(0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.isTransparent)(appState.currentItemBackgroundColor) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasBackground)(element.type) && !(0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.isTransparent)(element.backgroundColor)); // zsviczian\n\n const showToggleFrameRoleAction = targetElements.length > 0 && targetElements.every(el => el.type === \"frame\") || appState.activeTool.type === \"frame\";\n const shouldShowCombinedProperties = showToggleFrameRoleAction || // zsviczian\n targetElements.length > 0 || appState.activeTool.type !== \"selection\" && appState.activeTool.type !== \"eraser\" && appState.activeTool.type !== \"hand\" && appState.activeTool.type !== \"laser\" && appState.activeTool.type !== \"lasso\";\n const isOpen = appState.openPopup === \"compactStrokeStyles\";\n\n if (!shouldShowCombinedProperties) {\n return null;\n }\n\n return React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, React.createElement(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Root, {\n open: isOpen,\n onOpenChange: open => {\n if (open) {\n setAppState({\n openPopup: \"compactStrokeStyles\"\n });\n } else {\n setAppState({\n openPopup: null\n });\n }\n }\n }, React.createElement(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Trigger, {\n asChild: true\n }, React.createElement(\"button\", {\n type: \"button\",\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"compact-action-button properties-trigger\", {\n active: isOpen\n }),\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"labels.stroke\"),\n onClick: e => {\n e.preventDefault();\n e.stopPropagation();\n setAppState({\n openPopup: isOpen ? null : \"compactStrokeStyles\"\n });\n }\n }, _icons__WEBPACK_IMPORTED_MODULE_22__.adjustmentsIcon)), isOpen && React.createElement(_PropertiesPopover__WEBPACK_IMPORTED_MODULE_21__.PropertiesPopover, {\n className: PROPERTIES_CLASSES,\n container: container,\n style: {\n maxWidth: \"13rem\"\n },\n onClose: () => {}\n }, React.createElement(\"div\", {\n className: \"selected-shape-actions\"\n }, showFillIcons && renderAction(\"changeFillStyle\"), ((0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasStrokeWidth)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasStrokeWidth)(element.type))) && renderAction(\"changeStrokeWidth\"),\n /* in compact UI the freedraw pressure setting is rendered as a\n standalone cycle button in the compact actions list; we render\n it in the combined properties popup as well for clarity\n */\n ((0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasFreedrawMode)(appState.activeTool.type) && !appState.currentStrokeOptions || //zsviczian\n targetElements.some(element => {\n var _a;\n\n return (0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasFreedrawMode)(element.type) && !((_a = element.customData) === null || _a === void 0 ? void 0 : _a.strokeOptions);\n } //zsviczian\n )) && renderAction(\"changeFreedrawMode\"), ((0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasStrokeStyle)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasStrokeStyle)(element.type))) && React.createElement(React.Fragment, null, renderAction(\"changeStrokeStyle\"), renderAction(\"changeSloppiness\")), ((0,_scene__WEBPACK_IMPORTED_MODULE_10__.canChangeRoundness)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_10__.canChangeRoundness)(element.type))) && renderAction(\"changeRoundness\"), showToggleFrameRoleAction && React.createElement(\"fieldset\", null, React.createElement(\"legend\", null, (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.t2)(\"COMP_FRAME\")), React.createElement(\"div\", {\n className: \"buttonList\"\n }, renderAction(\"toggleFrameRole\"))), renderAction(\"changeOpacity\")))));\n};\n\nconst CombinedArrowProperties = ({\n appState,\n renderAction,\n setAppState,\n targetElements,\n container,\n app\n}) => {\n const showShowArrowProperties = (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.toolIsArrow)(appState.activeTool.type) || targetElements.some(element => (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.toolIsArrow)(element.type));\n const isOpen = appState.openPopup === \"compactArrowProperties\";\n\n if (!showShowArrowProperties) {\n return null;\n }\n\n return React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, React.createElement(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Root, {\n open: isOpen,\n onOpenChange: open => {\n if (open) {\n setAppState({\n openPopup: \"compactArrowProperties\"\n });\n } else {\n setAppState({\n openPopup: null\n });\n }\n }\n }, React.createElement(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Trigger, {\n asChild: true\n }, React.createElement(\"button\", {\n type: \"button\",\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"compact-action-button properties-trigger\", {\n active: isOpen\n }),\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"labels.arrowtypes\"),\n onClick: e => {\n e.preventDefault();\n e.stopPropagation();\n setAppState({\n openPopup: isOpen ? null : \"compactArrowProperties\"\n });\n }\n }, (() => {\n // Show an icon based on the current arrow type\n const arrowType = (0,_actions_actionProperties__WEBPACK_IMPORTED_MODULE_11__.getFormValue)(targetElements, app, element => {\n if ((0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.isArrowElement)(element)) {\n return element.elbowed ? \"elbow\" : element.roundness ? \"round\" : \"sharp\";\n }\n\n return null;\n }, element => (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.isArrowElement)(element), hasSelection => hasSelection ? null : appState.currentItemArrowType);\n\n if (arrowType === \"elbow\") {\n return _icons__WEBPACK_IMPORTED_MODULE_22__.elbowArrowIcon;\n }\n\n if (arrowType === \"round\") {\n return _icons__WEBPACK_IMPORTED_MODULE_22__.roundArrowIcon;\n }\n\n return _icons__WEBPACK_IMPORTED_MODULE_22__.sharpArrowIcon;\n })())), isOpen && React.createElement(_PropertiesPopover__WEBPACK_IMPORTED_MODULE_21__.PropertiesPopover, {\n container: container,\n className: \"properties-content\",\n style: {\n maxWidth: \"13rem\"\n },\n onClose: () => {}\n }, renderAction(\"changeArrowProperties\"))));\n};\n\nconst CombinedTextProperties = ({\n appState,\n renderAction,\n setAppState,\n targetElements,\n container,\n elementsMap\n}) => {\n const {\n saveCaretPosition,\n restoreCaretPosition\n } = (0,_hooks_useTextEditorFocus__WEBPACK_IMPORTED_MODULE_12__.useTextEditorFocus)();\n const isOpen = appState.openPopup === \"compactTextProperties\";\n return React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, React.createElement(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Root, {\n open: isOpen,\n onOpenChange: open => {\n if (open) {\n if (appState.editingTextElement) {\n saveCaretPosition();\n }\n\n setAppState({\n openPopup: \"compactTextProperties\"\n });\n } else {\n setAppState({\n openPopup: null\n });\n\n if (appState.editingTextElement) {\n restoreCaretPosition();\n }\n }\n }\n }, React.createElement(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Trigger, {\n asChild: true\n }, React.createElement(\"button\", {\n type: \"button\",\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"compact-action-button properties-trigger\", {\n active: isOpen\n }),\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"labels.textAlign\"),\n onClick: e => {\n e.preventDefault();\n e.stopPropagation();\n\n if (isOpen) {\n setAppState({\n openPopup: null\n });\n } else {\n if (appState.editingTextElement) {\n saveCaretPosition();\n }\n\n setAppState({\n openPopup: \"compactTextProperties\"\n });\n }\n }\n }, _icons__WEBPACK_IMPORTED_MODULE_22__.TextSizeIcon)), appState.openPopup === \"compactTextProperties\" && React.createElement(_PropertiesPopover__WEBPACK_IMPORTED_MODULE_21__.PropertiesPopover, {\n className: PROPERTIES_CLASSES,\n container: container,\n style: {\n maxWidth: \"13rem\"\n },\n // Improve focus handling for text editing scenarios\n preventAutoFocusOnTouch: !!appState.editingTextElement,\n onClose: () => {\n // Refocus text editor when popover closes with caret restoration\n if (appState.editingTextElement) {\n restoreCaretPosition();\n }\n }\n }, React.createElement(\"div\", {\n className: \"selected-shape-actions\"\n }, (appState.activeTool.type === \"text\" || targetElements.some(_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.isTextElement)) && renderAction(\"changeFontSize\"), (appState.activeTool.type === \"text\" || (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.suppportsHorizontalAlign)(targetElements, elementsMap)) && renderAction(\"changeTextAlign\"), (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.shouldAllowVerticalAlign)(targetElements, elementsMap) && renderAction(\"changeVerticalAlign\")))));\n};\n\nconst CombinedExtraActions = ({\n appState,\n renderAction,\n targetElements,\n setAppState,\n container,\n app,\n showDuplicate,\n showDelete\n}) => {\n const isEditingTextOrNewElement = Boolean(appState.editingTextElement || appState.newElement);\n const showCropEditorAction = !appState.croppingElementId && targetElements.length === 1 && (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.isImageElement)(targetElements[0]);\n const showLinkIcon = targetElements.length === 1;\n const showAlignActions = (0,_actions_actionAlign__WEBPACK_IMPORTED_MODULE_6__.alignActionsPredicate)(appState, app);\n let isSingleElementBoundContainer = false;\n\n if (targetElements.length === 2 && ((0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.hasBoundTextElement)(targetElements[0]) || (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.hasBoundTextElement)(targetElements[1]))) {\n isSingleElementBoundContainer = true;\n }\n\n const isRTL = document.documentElement.getAttribute(\"dir\") === \"rtl\";\n const isOpen = appState.openPopup === \"compactOtherProperties\";\n\n if (isEditingTextOrNewElement || targetElements.length === 0) {\n return null;\n }\n\n return React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, React.createElement(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Root, {\n open: isOpen,\n onOpenChange: open => {\n if (open) {\n setAppState({\n openPopup: \"compactOtherProperties\"\n });\n } else {\n setAppState({\n openPopup: null\n });\n }\n }\n }, React.createElement(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Trigger, {\n asChild: true\n }, React.createElement(\"button\", {\n type: \"button\",\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"compact-action-button properties-trigger\", {\n active: isOpen\n }),\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"labels.actions\"),\n onClick: e => {\n e.preventDefault();\n e.stopPropagation();\n setAppState({\n openPopup: isOpen ? null : \"compactOtherProperties\"\n });\n }\n }, _icons__WEBPACK_IMPORTED_MODULE_22__.DotsHorizontalIcon)), isOpen && React.createElement(_PropertiesPopover__WEBPACK_IMPORTED_MODULE_21__.PropertiesPopover, {\n className: PROPERTIES_CLASSES,\n container: container,\n style: {\n maxWidth: \"12rem\",\n justifyContent: \"center\",\n alignItems: \"center\"\n },\n onClose: () => {}\n }, React.createElement(\"div\", {\n className: \"selected-shape-actions\"\n }, React.createElement(\"fieldset\", null, React.createElement(\"legend\", null, (0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"labels.layers\")), React.createElement(\"div\", {\n className: \"buttonList\"\n }, renderAction(\"sendToBack\"), renderAction(\"sendBackward\"), renderAction(\"bringForward\"), renderAction(\"bringToFront\"))), showAlignActions && !isSingleElementBoundContainer && React.createElement(\"fieldset\", null, React.createElement(\"legend\", null, (0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"labels.align\")), React.createElement(\"div\", {\n className: \"buttonList\"\n }, isRTL ? React.createElement(React.Fragment, null, renderAction(\"alignRight\"), renderAction(\"alignHorizontallyCentered\"), renderAction(\"alignLeft\")) : React.createElement(React.Fragment, null, renderAction(\"alignLeft\"), renderAction(\"alignHorizontallyCentered\"), renderAction(\"alignRight\")), targetElements.length > 2 && renderAction(\"distributeHorizontally\"), React.createElement(\"div\", {\n style: {\n flexBasis: \"100%\",\n height: 0\n }\n }), React.createElement(\"div\", {\n style: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \".5rem\",\n marginTop: \"-0.5rem\"\n }\n }, renderAction(\"alignTop\"), renderAction(\"alignVerticallyCentered\"), renderAction(\"alignBottom\"), targetElements.length > 2 && renderAction(\"distributeVertically\")))), React.createElement(\"fieldset\", null, React.createElement(\"legend\", null, (0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"labels.actions\")), React.createElement(\"div\", {\n className: \"buttonList\"\n }, renderAction(\"group\"), renderAction(\"ungroup\"), showLinkIcon && renderAction(\"hyperlink\"), showCropEditorAction && renderAction(\"cropEditor\"), showDuplicate && renderAction(\"duplicateSelection\"), showDelete && renderAction(\"deleteSelectedElements\")))))));\n};\n\nconst LinearEditorAction = ({\n appState,\n renderAction,\n targetElements\n}) => {\n var _a;\n\n const showLineEditorAction = !((_a = appState.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.isEditing) && targetElements.length === 1 && (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.isLinearElement)(targetElements[0]) && !(0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.isElbowArrow)(targetElements[0]);\n\n if (!showLineEditorAction) {\n return null;\n }\n\n return React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"toggleLinearEditor\"));\n};\n\nconst CompactShapeActions = ({\n appState,\n elementsMap,\n renderAction,\n app,\n setAppState\n}) => {\n var _a;\n\n const targetElements = (0,_scene__WEBPACK_IMPORTED_MODULE_10__.getTargetElements)(elementsMap, appState);\n const {\n container\n } = (0,_App__WEBPACK_IMPORTED_MODULE_16__.useExcalidrawContainer)();\n const isEditingTextOrNewElement = Boolean(appState.editingTextElement || appState.newElement);\n const showLineEditorAction = !((_a = appState.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.isEditing) && targetElements.length === 1 && (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.isLinearElement)(targetElements[0]) && !(0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.isElbowArrow)(targetElements[0]);\n return React.createElement(\"div\", {\n className: \"compact-shape-actions\"\n }, canChangeStrokeColor(appState, targetElements) && React.createElement(\"div\", {\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"compact-action-item\")\n }, renderAction(\"changeStrokeColor\")), canChangeBackgroundColor(appState, targetElements) && React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"changeBackgroundColor\")), ((0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasFreedrawMode)(appState.activeTool.type) && !appState.currentStrokeOptions || //zsviczian\n targetElements.some(element => {\n var _a;\n\n return (0,_scene__WEBPACK_IMPORTED_MODULE_10__.hasFreedrawMode)(element.type) && !((_a = element.customData) === null || _a === void 0 ? void 0 : _a.strokeOptions);\n })) && //zsviczian\n React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"changeFreedrawMode\", {\n cycle: true\n })), React.createElement(CombinedShapeProperties, {\n appState: appState,\n renderAction: renderAction,\n setAppState: setAppState,\n targetElements: targetElements,\n container: container\n }), React.createElement(CombinedArrowProperties, {\n appState: appState,\n renderAction: renderAction,\n setAppState: setAppState,\n targetElements: targetElements,\n container: container,\n app: app\n }), showLineEditorAction && React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"toggleLinearEditor\")), (appState.activeTool.type === \"text\" || targetElements.some(_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.isTextElement)) && React.createElement(React.Fragment, null, React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"changeFontFamily\")), React.createElement(CombinedTextProperties, {\n appState: appState,\n renderAction: renderAction,\n setAppState: setAppState,\n targetElements: targetElements,\n container: container,\n elementsMap: elementsMap\n })), !isEditingTextOrNewElement && targetElements.length > 0 && React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"duplicateSelection\")), !isEditingTextOrNewElement && targetElements.length > 0 && React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"deleteSelectedElements\")), !!appState.multiElement && renderAction(\"finalize\")\n /*zsviczian*/\n , React.createElement(CombinedExtraActions, {\n appState: appState,\n renderAction: renderAction,\n targetElements: targetElements,\n setAppState: setAppState,\n container: container,\n app: app\n }));\n};\nconst MobileShapeActions = ({\n appState,\n elementsMap,\n renderAction,\n app,\n setAppState\n}) => {\n var _a, _b, _c;\n\n const targetElements = (0,_scene__WEBPACK_IMPORTED_MODULE_10__.getTargetElements)(elementsMap, appState);\n const {\n container\n } = (0,_App__WEBPACK_IMPORTED_MODULE_16__.useExcalidrawContainer)();\n const mobileActionsRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n const ACTIONS_WIDTH = (_c = (_b = (_a = mobileActionsRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 0; // 7 actions + 2 for undo/redo\n\n const MIN_ACTIONS = 9;\n const GAP = 6;\n const WIDTH = 32;\n const MIN_WIDTH = MIN_ACTIONS * WIDTH + (MIN_ACTIONS - 1) * GAP;\n const ADDITIONAL_WIDTH = WIDTH + GAP;\n const showDeleteOutside = ACTIONS_WIDTH >= MIN_WIDTH + ADDITIONAL_WIDTH;\n const showDuplicateOutside = ACTIONS_WIDTH >= MIN_WIDTH + 2 * ADDITIONAL_WIDTH;\n const showFinalizeMultiElement = !!appState.multiElement; //zsviczian\n\n return React.createElement(_Island__WEBPACK_IMPORTED_MODULE_23__.Island, {\n className: \"compact-shape-actions mobile-shape-actions\",\n style: {\n flexDirection: \"row\",\n boxShadow: \"none\",\n padding: 0,\n zIndex: 2,\n backgroundColor: \"transparent\",\n height: WIDTH * 1.35,\n marginBottom: 4,\n alignItems: \"center\",\n gap: GAP,\n pointerEvents: \"none\"\n },\n ref: mobileActionsRef\n }, React.createElement(\"div\", {\n style: {\n display: \"flex\",\n flexDirection: \"row\",\n gap: GAP,\n flex: 1\n }\n }, canChangeStrokeColor(appState, targetElements) && React.createElement(\"div\", {\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"compact-action-item\")\n }, renderAction(\"changeStrokeColor\")), canChangeBackgroundColor(appState, targetElements) && React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"changeBackgroundColor\")), React.createElement(CombinedShapeProperties, {\n appState: appState,\n renderAction: renderAction,\n setAppState: setAppState,\n targetElements: targetElements,\n container: container\n }), React.createElement(CombinedArrowProperties, {\n appState: appState,\n renderAction: renderAction,\n setAppState: setAppState,\n targetElements: targetElements,\n container: container,\n app: app\n }), React.createElement(LinearEditorAction, {\n appState: appState,\n renderAction: renderAction,\n targetElements: targetElements\n }), (appState.activeTool.type === \"text\" || targetElements.some(_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.isTextElement)) && React.createElement(React.Fragment, null, React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"changeFontFamily\")), React.createElement(CombinedTextProperties, {\n appState: appState,\n renderAction: renderAction,\n setAppState: setAppState,\n targetElements: targetElements,\n container: container,\n elementsMap: elementsMap\n })), React.createElement(CombinedExtraActions, {\n appState: appState,\n renderAction: renderAction,\n targetElements: targetElements,\n setAppState: setAppState,\n container: container,\n app: app,\n showDuplicate: !showDuplicateOutside,\n showDelete: !showDeleteOutside\n })), React.createElement(\"div\", {\n style: {\n display: \"flex\",\n flexDirection: \"row\",\n gap: GAP\n }\n }, React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"undo\")), React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"redo\")), showFinalizeMultiElement && renderAction(\"finalize\")\n /*zsviczian*/\n , showDuplicateOutside && React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"duplicateSelection\")), showDeleteOutside && React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"deleteSelectedElements\"))));\n};\nconst ShapesSwitcher = ({\n activeTool,\n setAppState,\n app,\n UIOptions\n}) => {\n const {\n renderMermaid\n } = (0,_App__WEBPACK_IMPORTED_MODULE_16__.useAppProps)(); //zsviczian\n\n const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\n const [isImageMenuOpen, setIsImageMenuOpen] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false); //zsviczian\n\n const stylesPanelMode = (0,_App__WEBPACK_IMPORTED_MODULE_16__.useStylesPanelMode)();\n const isFullStylesPanel = stylesPanelMode === \"full\";\n const isTrayModePanel = stylesPanelMode === \"tray\"; //zsviczian\n\n const isCompactStylesPanel = stylesPanelMode === \"compact\"; // a pen detected on a tool button's pointer-down, to be applied (enabling\n // pen mode) only after the tap's `change` has committed — see the tool\n // button handlers below\n\n const pendingPenDetectionRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);\n const SELECTION_TOOLS = [{\n type: \"selection\",\n icon: _icons__WEBPACK_IMPORTED_MODULE_22__.SelectionIcon,\n title: (0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.capitalizeString)((0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"toolBar.selection\"))\n }, {\n type: \"lasso\",\n icon: _icons__WEBPACK_IMPORTED_MODULE_22__.LassoIcon,\n title: (0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.capitalizeString)((0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"toolBar.lasso\"))\n }];\n const frameToolSelected = activeTool.type === \"frame\";\n const laserToolSelected = activeTool.type === \"laser\";\n const lassoToolSelected = isFullStylesPanel && activeTool.type === \"lasso\" && app.state.preferredSelectionTool.type !== \"lasso\";\n const embeddableToolSelected = activeTool.type === \"embeddable\";\n const {\n TTDDialogTriggerTunnel\n } = (0,_context_tunnels__WEBPACK_IMPORTED_MODULE_8__.useTunnels)();\n const showLassoTool = isFullStylesPanel || isCompactStylesPanel || isTrayModePanel; //zsviczian\n\n return React.createElement(React.Fragment, null, (0,_shapes__WEBPACK_IMPORTED_MODULE_14__.getToolbarTools)(app).map(({\n value,\n icon,\n key,\n numericKey,\n fillable,\n toolbar\n }) => {\n var _a;\n\n if (toolbar === false || ((_a = UIOptions.tools) === null || _a === void 0 ? void 0 : _a[value]) === false) {\n return null;\n }\n\n const label = (0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(`toolBar.${value}`);\n const letter = key && (0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.capitalizeString)(typeof key === \"string\" ? key : key[0]);\n const shortcut = letter ? `${letter} ${(0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"helpDialog.or\")} ${numericKey}` : `${numericKey}`;\n const keybindingLabel = value === \"hand\" ? undefined : numericKey || letter; // when in compact styles panel mode (tablet)\n // use a ToolPopover for selection/lasso toggle as well\n\n if ((value === \"selection\" || value === \"lasso\") && isCompactStylesPanel) {\n return React.createElement(_ToolPopover__WEBPACK_IMPORTED_MODULE_19__.ToolPopover, {\n key: \"selection-popover\",\n app: app,\n options: SELECTION_TOOLS,\n activeTool: activeTool,\n defaultOption: app.state.preferredSelectionTool.type,\n namePrefix: \"selectionType\",\n title: (0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.capitalizeString)((0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"toolBar.selection\")),\n \"data-testid\": \"toolbar-selection\",\n onToolChange: type => {\n if (type === \"selection\" || type === \"lasso\") {\n app.setActiveTool({\n type\n });\n setAppState({\n preferredSelectionTool: {\n type,\n initialized: true\n }\n });\n }\n },\n displayedOption: SELECTION_TOOLS.find(tool => tool.type === app.state.preferredSelectionTool.type) || SELECTION_TOOLS[0],\n fillable: activeTool.type === \"selection\"\n });\n }\n\n return React.createElement(_ToolButton__WEBPACK_IMPORTED_MODULE_18__.ToolButton, {\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"Shape\", {\n fillable\n }),\n key: value,\n type: \"radio\",\n icon: icon,\n checked: activeTool.type === value,\n name: \"editor-current-shape\",\n title: `${(0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.capitalizeString)(label)} — ${shortcut}`,\n keyBindingLabel: keybindingLabel,\n \"aria-label\": (0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.capitalizeString)(label),\n \"aria-keyshortcuts\": shortcut,\n \"data-testid\": `toolbar-${value}`,\n onPointerDown: ({\n pointerType\n }) => {\n // Detect the pen here (pointerType is reliable on pointer-down)\n // but DON'T enable pen mode yet: calling setState mid-gesture\n // re-renders the controlled radio and, on iOS/iPadOS, aborts\n // the ensuing click so the tool isn't selected on the first pen\n // tap. Defer it until the tap's `change` has committed (below).\n if (!app.state.penDetected && pointerType === \"pen\") {\n pendingPenDetectionRef.current = true;\n }\n\n if (value === \"selection\") {\n if (app.state.activeTool.type === \"selection\") {\n app.setActiveTool({\n type: \"lasso\"\n });\n } else {\n app.setActiveTool({\n type: \"selection\"\n });\n }\n }\n },\n onChange: () => {\n if (app.state.activeTool.type !== value) {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_7__.trackEvent)(\"toolbar\", value, \"ui\");\n }\n\n app.setActiveTool({\n type: value\n }); // Apply the pen detection captured on pointer-down now that the\n // tool is selected. rAF keeps the resulting re-render out of the\n // `change` event itself. We rely on the pointer-down detection\n // rather than this handler's pointerType because the latter is\n // unreliable on iOS (its backing ref is cleared before the\n // delayed click fires).\n\n if (pendingPenDetectionRef.current) {\n pendingPenDetectionRef.current = false;\n requestAnimationFrame(() => app.togglePenMode(true));\n }\n }\n });\n }), React.createElement(\"div\", {\n className: \"App-toolbar__divider\"\n }), React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_20__[\"default\"], {\n open: isImageMenuOpen\n }, React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Trigger, {\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"App-toolbar__extra-tools-trigger\"),\n onToggle: () => {\n if (!isImageMenuOpen) {\n setIsExtraToolsMenuOpen(false);\n }\n\n setIsImageMenuOpen(!isImageMenuOpen);\n },\n title: (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.t2)(\"COMP_IMG\")\n }, _icons__WEBPACK_IMPORTED_MODULE_22__.ImageIcon), React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Content, {\n onClickOutside: () => setIsImageMenuOpen(false),\n onSelect: () => setIsImageMenuOpen(false),\n className: \"App-toolbar__extra-tools-dropdown\"\n }, React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Item, {\n onSelect: () => app.setActiveTool({\n type: \"image\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_22__.ImageIcon,\n \"data-testid\": \"toolbar-image-import\"\n }, (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.t2)(\"COMP_IMG_FROM_SYSTEM\")), React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Item, {\n onSelect: () => (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.runAction)(\"anyFile\"),\n icon: _icons__WEBPACK_IMPORTED_MODULE_22__.InsertAnyFileIcon,\n \"data-testid\": \"toolbar-any-file\"\n }, (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.t2)(\"COMP_IMG_ANY_FILE\")), React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Item, {\n onSelect: () => (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.runAction)(\"card\"),\n icon: _icons__WEBPACK_IMPORTED_MODULE_22__.Card,\n \"data-testid\": \"toolbar-card\"\n }, (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.t2)(\"INSERT_CARD\")), React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Item, {\n onSelect: () => (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.runAction)(\"LaTeX\"),\n icon: _icons__WEBPACK_IMPORTED_MODULE_22__.LaTeXIcon,\n \"data-testid\": \"toolbar-latex\"\n }, (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.t2)(\"COMP_IMG_LaTeX\")))), React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_20__[\"default\"], {\n open: isExtraToolsMenuOpen\n }, React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Trigger, {\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"App-toolbar__extra-tools-trigger\", {\n \"App-toolbar__extra-tools-trigger--selected\": frameToolSelected || embeddableToolSelected || lassoToolSelected || // in collab we're already highlighting the laser button\n // outside toolbar, so let's not highlight extra-tools button\n // on top of it\n laserToolSelected && !app.props.isCollaborating\n }),\n onToggle: () => {\n if (!isExtraToolsMenuOpen) {\n setIsImageMenuOpen(false);\n }\n\n setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen);\n setAppState({\n openMenu: null,\n openPopup: null\n });\n },\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"toolBar.extraTools\")\n }, frameToolSelected ? _icons__WEBPACK_IMPORTED_MODULE_22__.frameToolIcon : embeddableToolSelected ? _icons__WEBPACK_IMPORTED_MODULE_22__.EmbedIcon : laserToolSelected && !app.props.isCollaborating ? _icons__WEBPACK_IMPORTED_MODULE_22__.laserPointerToolIcon : lassoToolSelected ? _icons__WEBPACK_IMPORTED_MODULE_22__.LassoIcon : _icons__WEBPACK_IMPORTED_MODULE_22__.extraToolsIcon), React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Content, {\n onClickOutside: () => setIsExtraToolsMenuOpen(false),\n onSelect: () => setIsExtraToolsMenuOpen(false),\n className: \"App-toolbar__extra-tools-dropdown\"\n }, React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Item, {\n onSelect: () => app.setActiveTool({\n type: \"frame\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_22__.frameToolIcon,\n shortcut: _excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.KEYS.F.toLocaleUpperCase(),\n \"data-testid\": \"toolbar-frame\",\n selected: frameToolSelected\n }, (0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"toolBar.frame\")), React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Item, {\n onSelect: () => app.setActiveTool({\n type: \"embeddable\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_22__.EmbedIcon,\n \"data-testid\": \"toolbar-embeddable\",\n selected: embeddableToolSelected\n }, (0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"toolBar.embeddable\")), React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Item, {\n onSelect: () => app.setActiveTool({\n type: \"laser\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_22__.laserPointerToolIcon,\n \"data-testid\": \"toolbar-laser\",\n selected: laserToolSelected,\n shortcut: _excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.KEYS.K.toLocaleUpperCase()\n }, (0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"toolBar.laser\")), showLassoTool && //zsviczian\n React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Item, {\n onSelect: () => app.setActiveTool({\n type: \"lasso\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_22__.LassoIcon,\n \"data-testid\": \"toolbar-lasso\",\n selected: lassoToolSelected\n }, (0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"toolBar.lasso\")), React.createElement(\"div\", {\n style: {\n margin: \"6px 0\",\n fontSize: 14,\n fontWeight: 600\n }\n }, \"Generate\"), app.props.aiEnabled !== false && React.createElement(TTDDialogTriggerTunnel.Out, null), renderMermaid && //zsviczian\n React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Item, {\n onSelect: () => app.setOpenDialog({\n name: \"ttd\",\n tab: \"mermaid\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_22__.mermaidLogoIcon,\n \"data-testid\": \"toolbar-embeddable\"\n }, (0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"toolBar.mermaidToExcalidraw\")), app.props.aiEnabled !== false && app.plugins.diagramToCode && React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Item, {\n onSelect: () => app.onMagicframeToolSelect(),\n icon: _icons__WEBPACK_IMPORTED_MODULE_22__.MagicIcon,\n \"data-testid\": \"toolbar-magicframe\",\n badge: React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_20__[\"default\"].Item.Badge, null, \"AI\")\n }, (0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"toolBar.magicframe\")))));\n};\nconst ZoomActions = ({\n renderAction,\n trayMode = false //zsviczian\n\n}) => React.createElement(_Stack__WEBPACK_IMPORTED_MODULE_17__[\"default\"].Col, {\n gap: 1,\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.CLASSES.ZOOM_ACTIONS, {\n \"tray-zoom\": trayMode\n })\n}, React.createElement(_Stack__WEBPACK_IMPORTED_MODULE_17__[\"default\"].Row, {\n align: \"center\"\n}, renderAction(\"zoomOut\"), renderAction(\"resetZoom\"), renderAction(\"zoomIn\")));\nconst UndoRedoActions = ({\n renderAction,\n className\n}) => React.createElement(\"div\", {\n className: `undo-redo-buttons ${className}`\n}, React.createElement(\"div\", {\n className: \"undo-button-container\"\n}, renderAction(\"undo\")\n/* //zsviczian */\n), React.createElement(\"div\", {\n className: \"redo-button-container\"\n}, renderAction(\"redo\")\n/* //zsviczian */\n));\nconst ExitZenModeButton = ({\n actionManager,\n showExitZenModeBtn\n}) => React.createElement(\"button\", {\n type: \"button\",\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"disable-zen-mode\", {\n \"disable-zen-mode--visible\": showExitZenModeBtn\n }),\n onClick: () => actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleZenMode)\n}, (0,_i18n__WEBPACK_IMPORTED_MODULE_9__.t)(\"buttons.exitZenMode\"));\nconst ExitViewModeButton = ({\n actionManager\n}) => React.createElement(\"button\", {\n type: \"button\",\n className: \"disable-view-mode\",\n onClick: () => actionManager.executeAction(_actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_13__.actionToggleViewMode)\n}, _icons__WEBPACK_IMPORTED_MODULE_22__.pencilIcon);\n\n//# sourceURL=webpack://ExcalidrawLib/./components/Actions.tsx?\n}");
1708
+ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ CompactShapeActions: () => (/* binding */ CompactShapeActions),\n/* harmony export */ ExitViewModeButton: () => (/* binding */ ExitViewModeButton),\n/* harmony export */ ExitZenModeButton: () => (/* binding */ ExitZenModeButton),\n/* harmony export */ MobileShapeActions: () => (/* binding */ MobileShapeActions),\n/* harmony export */ SelectedShapeActions: () => (/* binding */ SelectedShapeActions),\n/* harmony export */ ShapesSwitcher: () => (/* binding */ ShapesSwitcher),\n/* harmony export */ UndoRedoActions: () => (/* binding */ UndoRedoActions),\n/* harmony export */ ZoomActions: () => (/* binding */ ZoomActions),\n/* harmony export */ canChangeBackgroundColor: () => (/* reexport safe */ _shapeActionPredicates__WEBPACK_IMPORTED_MODULE_23__.canChangeBackgroundColor),\n/* harmony export */ canChangeStrokeColor: () => (/* reexport safe */ _shapeActionPredicates__WEBPACK_IMPORTED_MODULE_23__.canChangeStrokeColor)\n/* harmony export */ });\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! clsx */ \"../../node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var radix_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! radix-ui */ \"../../node_modules/@radix-ui/react-popover/dist/index.mjs\");\n/* harmony import */ var _excalidraw_common__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @excalidraw/common */ \"../common/src/index.ts\");\n/* harmony import */ var _excalidraw_element__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @excalidraw/element */ \"../element/src/index.ts\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../actions */ \"./actions/index.ts\");\n/* harmony import */ var _analytics__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../analytics */ \"./analytics.ts\");\n/* harmony import */ var _context_tunnels__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../context/tunnels */ \"./context/tunnels.ts\");\n/* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../i18n */ \"./i18n.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _actions_actionProperties__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../actions/actionProperties */ \"./actions/actionProperties.tsx\");\n/* harmony import */ var _hooks_useTextEditorFocus__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../hooks/useTextEditorFocus */ \"./hooks/useTextEditorFocus.ts\");\n/* harmony import */ var _actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../actions/actionToggleViewMode */ \"./actions/actionToggleViewMode.tsx\");\n/* harmony import */ var _shapes__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./shapes */ \"./components/shapes.tsx\");\n/* harmony import */ var _Actions_scss__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./Actions.scss */ \"./components/Actions.scss\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./App */ \"./components/App.tsx\");\n/* harmony import */ var _Stack__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./Stack */ \"./components/Stack.tsx\");\n/* harmony import */ var _ToolButton__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./ToolButton */ \"./components/ToolButton.tsx\");\n/* harmony import */ var _ToolPopover__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./ToolPopover */ \"./components/ToolPopover.tsx\");\n/* harmony import */ var _dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./dropdownMenu/DropdownMenu */ \"./components/dropdownMenu/DropdownMenu.tsx\");\n/* harmony import */ var _PropertiesPopover__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./PropertiesPopover */ \"./components/PropertiesPopover.tsx\");\n/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./icons */ \"./components/icons.tsx\");\n/* harmony import */ var _Island__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./Island */ \"./components/Island.tsx\");\n/* harmony import */ var _shapeActionPredicates__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./shapeActionPredicates */ \"./components/shapeActionPredicates.ts\");\n/* harmony import */ var _obsidianUtils__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ../obsidianUtils */ \"./obsidianUtils.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n //zsviczian\n// re-exported for consumers outside the styles panel (e.g. CommandPalette)\n\n // Common CSS class combinations\n\nconst PROPERTIES_CLASSES = (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])([_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.CLASSES.SHAPE_ACTIONS_THEME_SCOPE, \"properties-content\"]);\n/**\n * The \"arrange\" (z-order) fieldset, identical across every styles-panel layout.\n */\n\nconst LayersFieldset = ({\n renderAction\n}) => React.createElement(\"fieldset\", null, React.createElement(\"legend\", null, (0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"labels.layers\")), React.createElement(\"div\", {\n className: \"buttonList\"\n}, renderAction(\"sendToBack\"), renderAction(\"sendBackward\"), renderAction(\"bringForward\"), renderAction(\"bringToFront\")));\n/**\n * The align + distribute fieldset, identical across every styles-panel layout.\n * Button order is mirrored for RTL so the leftmost button always aligns left.\n */\n\n\nconst AlignFieldset = ({\n renderAction,\n showDistribute\n}) => {\n const isRTL = document.documentElement.getAttribute(\"dir\") === \"rtl\";\n return React.createElement(\"fieldset\", null, React.createElement(\"legend\", null, (0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"labels.align\")), React.createElement(\"div\", {\n className: \"buttonList\"\n }, isRTL ? React.createElement(React.Fragment, null, renderAction(\"alignRight\"), renderAction(\"alignHorizontallyCentered\"), renderAction(\"alignLeft\")) : React.createElement(React.Fragment, null, renderAction(\"alignLeft\"), renderAction(\"alignHorizontallyCentered\"), renderAction(\"alignRight\")), showDistribute && renderAction(\"distributeHorizontally\"), React.createElement(\"div\", {\n style: {\n flexBasis: \"100%\",\n height: 0\n }\n }), React.createElement(\"div\", {\n style: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \".5rem\",\n marginTop: \"-0.5rem\"\n }\n }, renderAction(\"alignTop\"), renderAction(\"alignVerticallyCentered\"), renderAction(\"alignBottom\"), showDistribute && renderAction(\"distributeVertically\"))));\n};\n/**\n * Full styles panel: the wide, always-expanded layout used on desktop when the\n * UI is in \"full\" mode.\n */\n\n\nconst SelectedShapeActions = ({\n appState,\n elementsMap,\n renderAction,\n app\n}) => {\n const targetElements = (0,_scene__WEBPACK_IMPORTED_MODULE_9__.getTargetElements)(elementsMap, appState);\n const predicates = (0,_shapeActionPredicates__WEBPACK_IMPORTED_MODULE_23__.getShapeActionPredicates)(appState, targetElements, elementsMap, app); // zsviczian\n\n const showToggleFrameRoleAction = targetElements.length > 0 && targetElements.every(el => el.type === \"frame\") || appState.activeTool.type === \"frame\";\n return React.createElement(\"div\", {\n className: \"selected-shape-actions\"\n }, React.createElement(\"div\", null, predicates.strokeColor && renderAction(\"changeStrokeColor\")), predicates.backgroundColor && React.createElement(\"div\", null, renderAction(\"changeBackgroundColor\")), predicates.fill && renderAction(\"changeFillStyle\"), predicates.strokeWidth && renderAction(\"changeStrokeWidth\"), predicates.freedrawMode && renderAction(\"changeFreedrawMode\"), predicates.strokeStyle && React.createElement(React.Fragment, null, renderAction(\"changeStrokeStyle\"), renderAction(\"changeSloppiness\")), predicates.roundness && React.createElement(React.Fragment, null, renderAction(\"changeRoundness\")), predicates.arrowType && React.createElement(React.Fragment, null, renderAction(\"changeArrowType\")), predicates.text && React.createElement(React.Fragment, null, React.createElement(\"fieldset\", null, renderAction(\"changeFontFamily\")), renderAction(\"changeFontSize\"), predicates.textAlign && renderAction(\"changeTextAlign\")), predicates.verticalAlign && renderAction(\"changeVerticalAlign\"), predicates.arrowheads && React.createElement(React.Fragment, null, renderAction(\"changeArrowhead\")), showToggleFrameRoleAction && React.createElement(\"fieldset\", null, React.createElement(\"legend\", null, (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.t2)(\"COMP_FRAME\")), React.createElement(\"div\", {\n className: \"buttonList\"\n }, renderAction(\"toggleFrameRole\"))), renderAction(\"changeOpacity\"), React.createElement(LayersFieldset, {\n renderAction: renderAction\n }), predicates.align && React.createElement(AlignFieldset, {\n renderAction: renderAction,\n showDistribute: predicates.distribute\n }), predicates.showExtraActions && React.createElement(\"fieldset\", null, React.createElement(\"legend\", null, (0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"labels.actions\")), React.createElement(\"div\", {\n className: \"buttonList\"\n }, renderAction(\"duplicateSelection\"), renderAction(\"deleteSelectedElements\"), renderAction(\"group\"), renderAction(\"ungroup\"), predicates.link && renderAction(\"hyperlink\"), predicates.cropEditor && renderAction(\"cropEditor\"), predicates.lineEditor && renderAction(\"toggleLinearEditor\"))));\n};\n\nconst CombinedShapeProperties = ({\n appState,\n renderAction,\n setAppState,\n predicates,\n container\n}) => {\n const shouldShowCombinedProperties = predicates.hasSelection || appState.activeTool.type !== \"selection\" && appState.activeTool.type !== \"eraser\" && appState.activeTool.type !== \"hand\" && appState.activeTool.type !== \"laser\" && appState.activeTool.type !== \"lasso\";\n const isOpen = appState.openPopup === \"compactStrokeStyles\";\n\n if (!shouldShowCombinedProperties) {\n return null;\n }\n\n return React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, React.createElement(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Root, {\n open: isOpen,\n onOpenChange: open => {\n if (open) {\n setAppState({\n openPopup: \"compactStrokeStyles\"\n });\n } else {\n setAppState({\n openPopup: null\n });\n }\n }\n }, React.createElement(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Trigger, {\n asChild: true\n }, React.createElement(\"button\", {\n type: \"button\",\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"compact-action-button properties-trigger\", {\n active: isOpen\n }),\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"labels.stroke\"),\n onClick: e => {\n e.preventDefault();\n e.stopPropagation();\n setAppState({\n openPopup: isOpen ? null : \"compactStrokeStyles\"\n });\n }\n }, _icons__WEBPACK_IMPORTED_MODULE_21__.adjustmentsIcon)), isOpen && React.createElement(_PropertiesPopover__WEBPACK_IMPORTED_MODULE_20__.PropertiesPopover, {\n className: PROPERTIES_CLASSES,\n container: container,\n style: {\n maxWidth: \"13rem\"\n },\n onClose: () => {}\n }, React.createElement(\"div\", {\n className: \"selected-shape-actions\"\n }, predicates.fill && renderAction(\"changeFillStyle\"), predicates.strokeWidth && renderAction(\"changeStrokeWidth\"),\n /* in compact UI the freedraw pressure setting is rendered as a\n standalone cycle button in the compact actions list; we render\n it in the combined properties popup as well for clarity\n */\n predicates.freedrawMode && renderAction(\"changeFreedrawMode\"), predicates.strokeStyle && React.createElement(React.Fragment, null, renderAction(\"changeStrokeStyle\"), renderAction(\"changeSloppiness\")), predicates.roundness && renderAction(\"changeRoundness\"), predicates.frameRole && //zsviczian\n React.createElement(\"fieldset\", null, React.createElement(\"legend\", null, (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.t2)(\"COMP_FRAME\")), React.createElement(\"div\", {\n className: \"buttonList\"\n }, renderAction(\"toggleFrameRole\"))), renderAction(\"changeOpacity\")))));\n};\n\nconst CombinedArrowProperties = ({\n appState,\n renderAction,\n setAppState,\n targetElements,\n predicates,\n container,\n app\n}) => {\n const isOpen = appState.openPopup === \"compactArrowProperties\";\n\n if (!predicates.arrowType) {\n return null;\n }\n\n return React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, React.createElement(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Root, {\n open: isOpen,\n onOpenChange: open => {\n if (open) {\n setAppState({\n openPopup: \"compactArrowProperties\"\n });\n } else {\n setAppState({\n openPopup: null\n });\n }\n }\n }, React.createElement(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Trigger, {\n asChild: true\n }, React.createElement(\"button\", {\n type: \"button\",\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"compact-action-button properties-trigger\", {\n active: isOpen\n }),\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"labels.arrowtypes\"),\n onClick: e => {\n e.preventDefault();\n e.stopPropagation();\n setAppState({\n openPopup: isOpen ? null : \"compactArrowProperties\"\n });\n }\n }, (() => {\n // Show an icon based on the current arrow type\n const arrowType = (0,_actions_actionProperties__WEBPACK_IMPORTED_MODULE_10__.getFormValue)(targetElements, app, element => {\n if ((0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.isArrowElement)(element)) {\n return element.elbowed ? \"elbow\" : element.roundness ? \"round\" : \"sharp\";\n }\n\n return null;\n }, element => (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_4__.isArrowElement)(element), hasSelection => hasSelection ? null : appState.currentItemArrowType);\n\n if (arrowType === \"elbow\") {\n return _icons__WEBPACK_IMPORTED_MODULE_21__.elbowArrowIcon;\n }\n\n if (arrowType === \"round\") {\n return _icons__WEBPACK_IMPORTED_MODULE_21__.roundArrowIcon;\n }\n\n return _icons__WEBPACK_IMPORTED_MODULE_21__.sharpArrowIcon;\n })())), isOpen && React.createElement(_PropertiesPopover__WEBPACK_IMPORTED_MODULE_20__.PropertiesPopover, {\n container: container,\n className: \"properties-content\",\n style: {\n maxWidth: \"13rem\"\n },\n onClose: () => {}\n }, renderAction(\"changeArrowProperties\"))));\n};\n\nconst CombinedTextProperties = ({\n appState,\n renderAction,\n setAppState,\n predicates,\n container\n}) => {\n const {\n saveCaretPosition,\n restoreCaretPosition\n } = (0,_hooks_useTextEditorFocus__WEBPACK_IMPORTED_MODULE_11__.useTextEditorFocus)();\n const isOpen = appState.openPopup === \"compactTextProperties\";\n return React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, React.createElement(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Root, {\n open: isOpen,\n onOpenChange: open => {\n if (open) {\n if (appState.editingTextElement) {\n saveCaretPosition();\n }\n\n setAppState({\n openPopup: \"compactTextProperties\"\n });\n } else {\n setAppState({\n openPopup: null\n });\n\n if (appState.editingTextElement) {\n restoreCaretPosition();\n }\n }\n }\n }, React.createElement(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Trigger, {\n asChild: true\n }, React.createElement(\"button\", {\n type: \"button\",\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"compact-action-button properties-trigger\", {\n active: isOpen\n }),\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"labels.textAlign\"),\n onClick: e => {\n e.preventDefault();\n e.stopPropagation();\n\n if (isOpen) {\n setAppState({\n openPopup: null\n });\n } else {\n if (appState.editingTextElement) {\n saveCaretPosition();\n }\n\n setAppState({\n openPopup: \"compactTextProperties\"\n });\n }\n }\n }, _icons__WEBPACK_IMPORTED_MODULE_21__.TextSizeIcon)), appState.openPopup === \"compactTextProperties\" && React.createElement(_PropertiesPopover__WEBPACK_IMPORTED_MODULE_20__.PropertiesPopover, {\n className: PROPERTIES_CLASSES,\n container: container,\n style: {\n maxWidth: \"13rem\"\n },\n // Improve focus handling for text editing scenarios\n preventAutoFocusOnTouch: !!appState.editingTextElement,\n onClose: () => {\n // Refocus text editor when popover closes with caret restoration\n if (appState.editingTextElement) {\n restoreCaretPosition();\n }\n }\n }, React.createElement(\"div\", {\n className: \"selected-shape-actions\"\n }, predicates.text && renderAction(\"changeFontSize\"), predicates.textAlign && renderAction(\"changeTextAlign\"), predicates.verticalAlign && renderAction(\"changeVerticalAlign\")))));\n};\n\nconst CombinedExtraActions = ({\n appState,\n renderAction,\n predicates,\n setAppState,\n container,\n showDuplicate,\n showDelete\n}) => {\n const isOpen = appState.openPopup === \"compactOtherProperties\";\n\n if (!predicates.showExtraActions) {\n return null;\n }\n\n return React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, React.createElement(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Root, {\n open: isOpen,\n onOpenChange: open => {\n if (open) {\n setAppState({\n openPopup: \"compactOtherProperties\"\n });\n } else {\n setAppState({\n openPopup: null\n });\n }\n }\n }, React.createElement(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Trigger, {\n asChild: true\n }, React.createElement(\"button\", {\n type: \"button\",\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"compact-action-button properties-trigger\", {\n active: isOpen\n }),\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"labels.actions\"),\n onClick: e => {\n e.preventDefault();\n e.stopPropagation();\n setAppState({\n openPopup: isOpen ? null : \"compactOtherProperties\"\n });\n }\n }, _icons__WEBPACK_IMPORTED_MODULE_21__.DotsHorizontalIcon)), isOpen && React.createElement(_PropertiesPopover__WEBPACK_IMPORTED_MODULE_20__.PropertiesPopover, {\n className: PROPERTIES_CLASSES,\n container: container,\n style: {\n maxWidth: \"12rem\",\n justifyContent: \"center\",\n alignItems: \"center\"\n },\n onClose: () => {}\n }, React.createElement(\"div\", {\n className: \"selected-shape-actions\"\n }, React.createElement(LayersFieldset, {\n renderAction: renderAction\n }), predicates.align && React.createElement(AlignFieldset, {\n renderAction: renderAction,\n showDistribute: predicates.distribute\n }), React.createElement(\"fieldset\", null, React.createElement(\"legend\", null, (0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"labels.actions\")), React.createElement(\"div\", {\n className: \"buttonList\"\n }, renderAction(\"group\"), renderAction(\"ungroup\"), predicates.linkSingleOnly && renderAction(\"hyperlink\"), predicates.cropEditor && renderAction(\"cropEditor\"), showDuplicate && renderAction(\"duplicateSelection\"), showDelete && renderAction(\"deleteSelectedElements\")))))));\n};\n\nconst LinearEditorAction = ({\n renderAction,\n predicates\n}) => {\n if (!predicates.lineEditor) {\n return null;\n }\n\n return React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"toggleLinearEditor\"));\n};\n/**\n * Compact styles panel — the collapsed, popover-driven layout used on tablets\n * and on desktop when the UI is in \"compact\" mode.\n */\n\n\nconst CompactShapeActions = ({\n appState,\n elementsMap,\n renderAction,\n app,\n setAppState\n}) => {\n const targetElements = (0,_scene__WEBPACK_IMPORTED_MODULE_9__.getTargetElements)(elementsMap, appState);\n const predicates = (0,_shapeActionPredicates__WEBPACK_IMPORTED_MODULE_23__.getShapeActionPredicates)(appState, targetElements, elementsMap, app);\n const {\n container\n } = (0,_App__WEBPACK_IMPORTED_MODULE_15__.useExcalidrawContainer)();\n return React.createElement(\"div\", {\n className: \"compact-shape-actions\"\n }, predicates.strokeColor && React.createElement(\"div\", {\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"compact-action-item\")\n }, renderAction(\"changeStrokeColor\")), predicates.backgroundColor && React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"changeBackgroundColor\")), predicates.freedrawMode && React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"changeFreedrawMode\", {\n cycle: true\n })), React.createElement(CombinedShapeProperties, {\n appState: appState,\n renderAction: renderAction,\n setAppState: setAppState,\n predicates: predicates,\n container: container\n }), React.createElement(CombinedArrowProperties, {\n appState: appState,\n renderAction: renderAction,\n setAppState: setAppState,\n targetElements: targetElements,\n predicates: predicates,\n container: container,\n app: app\n }), predicates.lineEditor && React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"toggleLinearEditor\")), predicates.text && React.createElement(React.Fragment, null, React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"changeFontFamily\")), React.createElement(CombinedTextProperties, {\n appState: appState,\n renderAction: renderAction,\n setAppState: setAppState,\n predicates: predicates,\n container: container\n })), predicates.showExtraActions && React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"duplicateSelection\")), predicates.showExtraActions && React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"deleteSelectedElements\")), !!appState.multiElement && renderAction(\"finalize\")\n /*zsviczian*/\n , React.createElement(CombinedExtraActions, {\n appState: appState,\n renderAction: renderAction,\n predicates: predicates,\n setAppState: setAppState,\n container: container\n }));\n};\n/**\n * Mobile styles panel — the horizontal action bar used on phones, with an\n * overflow measurement that promotes duplicate/delete out of the popover when\n * there is room.\n */\n\nconst MobileShapeActions = ({\n appState,\n elementsMap,\n renderAction,\n app,\n setAppState\n}) => {\n var _a, _b, _c;\n\n const targetElements = (0,_scene__WEBPACK_IMPORTED_MODULE_9__.getTargetElements)(elementsMap, appState);\n const predicates = (0,_shapeActionPredicates__WEBPACK_IMPORTED_MODULE_23__.getShapeActionPredicates)(appState, targetElements, elementsMap, app);\n const {\n container\n } = (0,_App__WEBPACK_IMPORTED_MODULE_15__.useExcalidrawContainer)();\n const mobileActionsRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n const ACTIONS_WIDTH = (_c = (_b = (_a = mobileActionsRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 0; // 7 actions + 2 for undo/redo\n\n const MIN_ACTIONS = 9;\n const GAP = 6;\n const WIDTH = 32;\n const MIN_WIDTH = MIN_ACTIONS * WIDTH + (MIN_ACTIONS - 1) * GAP;\n const ADDITIONAL_WIDTH = WIDTH + GAP;\n const showDeleteOutside = ACTIONS_WIDTH >= MIN_WIDTH + ADDITIONAL_WIDTH;\n const showDuplicateOutside = ACTIONS_WIDTH >= MIN_WIDTH + 2 * ADDITIONAL_WIDTH;\n const showFinalizeMultiElement = !!appState.multiElement; //zsviczian\n\n return React.createElement(_Island__WEBPACK_IMPORTED_MODULE_22__.Island, {\n className: \"compact-shape-actions mobile-shape-actions\",\n style: {\n flexDirection: \"row\",\n boxShadow: \"none\",\n padding: 0,\n zIndex: 2,\n backgroundColor: \"transparent\",\n height: WIDTH * 1.35,\n marginBottom: 4,\n alignItems: \"center\",\n gap: GAP,\n pointerEvents: \"none\"\n },\n ref: mobileActionsRef\n }, React.createElement(\"div\", {\n style: {\n display: \"flex\",\n flexDirection: \"row\",\n gap: GAP,\n flex: 1\n }\n }, predicates.strokeColor && React.createElement(\"div\", {\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"compact-action-item\")\n }, renderAction(\"changeStrokeColor\")), predicates.backgroundColor && React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"changeBackgroundColor\")), React.createElement(CombinedShapeProperties, {\n appState: appState,\n renderAction: renderAction,\n setAppState: setAppState,\n predicates: predicates,\n container: container\n }), React.createElement(CombinedArrowProperties, {\n appState: appState,\n renderAction: renderAction,\n setAppState: setAppState,\n targetElements: targetElements,\n predicates: predicates,\n container: container,\n app: app\n }), React.createElement(LinearEditorAction, {\n renderAction: renderAction,\n predicates: predicates\n }), predicates.text && React.createElement(React.Fragment, null, React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"changeFontFamily\")), React.createElement(CombinedTextProperties, {\n appState: appState,\n renderAction: renderAction,\n setAppState: setAppState,\n predicates: predicates,\n container: container\n })), React.createElement(CombinedExtraActions, {\n appState: appState,\n renderAction: renderAction,\n predicates: predicates,\n setAppState: setAppState,\n container: container,\n showDuplicate: !showDuplicateOutside,\n showDelete: !showDeleteOutside\n })), React.createElement(\"div\", {\n style: {\n display: \"flex\",\n flexDirection: \"row\",\n gap: GAP\n }\n }, React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"undo\")), React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"redo\")), showFinalizeMultiElement && renderAction(\"finalize\")\n /*zsviczian*/\n , showDuplicateOutside && React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"duplicateSelection\")), showDeleteOutside && React.createElement(\"div\", {\n className: \"compact-action-item\"\n }, renderAction(\"deleteSelectedElements\"))));\n};\nconst ShapesSwitcher = ({\n activeTool,\n setAppState,\n app,\n UIOptions\n}) => {\n const {\n renderMermaid\n } = (0,_App__WEBPACK_IMPORTED_MODULE_15__.useAppProps)(); //zsviczian\n\n const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\n const [isImageMenuOpen, setIsImageMenuOpen] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false); //zsviczian\n\n const stylesPanelMode = (0,_App__WEBPACK_IMPORTED_MODULE_15__.useStylesPanelMode)();\n const isFullStylesPanel = stylesPanelMode === \"full\";\n const isTrayModePanel = stylesPanelMode === \"tray\"; //zsviczian\n\n const isCompactStylesPanel = stylesPanelMode === \"compact\"; // a pen detected on a tool button's pointer-down, to be applied (enabling\n // pen mode) only after the tap's `change` has committed — see the tool\n // button handlers below\n\n const pendingPenDetectionRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);\n const SELECTION_TOOLS = [{\n type: \"selection\",\n icon: _icons__WEBPACK_IMPORTED_MODULE_21__.SelectionIcon,\n title: (0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.capitalizeString)((0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"toolBar.selection\"))\n }, {\n type: \"lasso\",\n icon: _icons__WEBPACK_IMPORTED_MODULE_21__.LassoIcon,\n title: (0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.capitalizeString)((0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"toolBar.lasso\"))\n }];\n const frameToolSelected = activeTool.type === \"frame\";\n const laserToolSelected = activeTool.type === \"laser\";\n const lassoToolSelected = isFullStylesPanel && activeTool.type === \"lasso\" && app.state.preferredSelectionTool.type !== \"lasso\";\n const embeddableToolSelected = activeTool.type === \"embeddable\";\n const {\n TTDDialogTriggerTunnel\n } = (0,_context_tunnels__WEBPACK_IMPORTED_MODULE_7__.useTunnels)();\n const showLassoTool = isFullStylesPanel || isCompactStylesPanel || isTrayModePanel; //zsviczian\n\n return React.createElement(React.Fragment, null, (0,_shapes__WEBPACK_IMPORTED_MODULE_13__.getToolbarTools)(app).map(({\n value,\n icon,\n key,\n numericKey,\n fillable,\n toolbar\n }) => {\n var _a;\n\n if (toolbar === false || ((_a = UIOptions.tools) === null || _a === void 0 ? void 0 : _a[value]) === false) {\n return null;\n }\n\n const label = (0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(`toolBar.${value}`);\n const letter = key && (0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.capitalizeString)(typeof key === \"string\" ? key : key[0]);\n const shortcut = letter ? `${letter} ${(0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"helpDialog.or\")} ${numericKey}` : `${numericKey}`;\n const keybindingLabel = value === \"hand\" ? undefined : numericKey || letter; // when in compact styles panel mode (tablet)\n // use a ToolPopover for selection/lasso toggle as well\n\n if ((value === \"selection\" || value === \"lasso\") && isCompactStylesPanel) {\n return React.createElement(_ToolPopover__WEBPACK_IMPORTED_MODULE_18__.ToolPopover, {\n key: \"selection-popover\",\n app: app,\n options: SELECTION_TOOLS,\n activeTool: activeTool,\n defaultOption: app.state.preferredSelectionTool.type,\n namePrefix: \"selectionType\",\n title: (0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.capitalizeString)((0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"toolBar.selection\")),\n \"data-testid\": \"toolbar-selection\",\n onToolChange: type => {\n if (type === \"selection\" || type === \"lasso\") {\n app.setActiveTool({\n type\n });\n setAppState({\n preferredSelectionTool: {\n type,\n initialized: true\n }\n });\n }\n },\n displayedOption: SELECTION_TOOLS.find(tool => tool.type === app.state.preferredSelectionTool.type) || SELECTION_TOOLS[0],\n fillable: activeTool.type === \"selection\"\n });\n }\n\n return React.createElement(_ToolButton__WEBPACK_IMPORTED_MODULE_17__.ToolButton, {\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"Shape\", {\n fillable\n }),\n key: value,\n type: \"radio\",\n icon: icon,\n checked: activeTool.type === value,\n name: \"editor-current-shape\",\n title: `${(0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.capitalizeString)(label)} — ${shortcut}`,\n keyBindingLabel: keybindingLabel,\n \"aria-label\": (0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.capitalizeString)(label),\n \"aria-keyshortcuts\": shortcut,\n \"data-testid\": `toolbar-${value}`,\n onPointerDown: ({\n pointerType\n }) => {\n // Detect the pen here (pointerType is reliable on pointer-down)\n // but DON'T enable pen mode yet: calling setState mid-gesture\n // re-renders the controlled radio and, on iOS/iPadOS, aborts\n // the ensuing click so the tool isn't selected on the first pen\n // tap. Defer it until the tap's `change` has committed (below).\n if (!app.state.penDetected && pointerType === \"pen\") {\n pendingPenDetectionRef.current = true;\n }\n\n if (value === \"selection\") {\n if (app.state.activeTool.type === \"selection\") {\n app.setActiveTool({\n type: \"lasso\"\n });\n } else {\n app.setActiveTool({\n type: \"selection\"\n });\n }\n }\n },\n onChange: () => {\n if (app.state.activeTool.type !== value) {\n (0,_analytics__WEBPACK_IMPORTED_MODULE_6__.trackEvent)(\"toolbar\", value, \"ui\");\n }\n\n app.setActiveTool({\n type: value\n }); // Apply the pen detection captured on pointer-down now that the\n // tool is selected. rAF keeps the resulting re-render out of the\n // `change` event itself. We rely on the pointer-down detection\n // rather than this handler's pointerType because the latter is\n // unreliable on iOS (its backing ref is cleared before the\n // delayed click fires).\n\n if (pendingPenDetectionRef.current) {\n pendingPenDetectionRef.current = false;\n requestAnimationFrame(() => app.togglePenMode(true));\n }\n }\n });\n }), React.createElement(\"div\", {\n className: \"App-toolbar__divider\"\n }), React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_19__[\"default\"], {\n open: isImageMenuOpen\n }, React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_19__[\"default\"].Trigger, {\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"App-toolbar__extra-tools-trigger\"),\n onToggle: () => {\n if (!isImageMenuOpen) {\n setIsExtraToolsMenuOpen(false);\n }\n\n setIsImageMenuOpen(!isImageMenuOpen);\n },\n title: (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.t2)(\"COMP_IMG\")\n }, _icons__WEBPACK_IMPORTED_MODULE_21__.ImageIcon), React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_19__[\"default\"].Content, {\n onClickOutside: () => setIsImageMenuOpen(false),\n onSelect: () => setIsImageMenuOpen(false),\n className: \"App-toolbar__extra-tools-dropdown\"\n }, React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_19__[\"default\"].Item, {\n onSelect: () => app.setActiveTool({\n type: \"image\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_21__.ImageIcon,\n \"data-testid\": \"toolbar-image-import\"\n }, (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.t2)(\"COMP_IMG_FROM_SYSTEM\")), React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_19__[\"default\"].Item, {\n onSelect: () => (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.runAction)(\"anyFile\"),\n icon: _icons__WEBPACK_IMPORTED_MODULE_21__.InsertAnyFileIcon,\n \"data-testid\": \"toolbar-any-file\"\n }, (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.t2)(\"COMP_IMG_ANY_FILE\")), React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_19__[\"default\"].Item, {\n onSelect: () => (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.runAction)(\"card\"),\n icon: _icons__WEBPACK_IMPORTED_MODULE_21__.Card,\n \"data-testid\": \"toolbar-card\"\n }, (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.t2)(\"INSERT_CARD\")), React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_19__[\"default\"].Item, {\n onSelect: () => (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.runAction)(\"LaTeX\"),\n icon: _icons__WEBPACK_IMPORTED_MODULE_21__.LaTeXIcon,\n \"data-testid\": \"toolbar-latex\"\n }, (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_24__.t2)(\"COMP_IMG_LaTeX\")))), React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_19__[\"default\"], {\n open: isExtraToolsMenuOpen\n }, React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_19__[\"default\"].Trigger, {\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"App-toolbar__extra-tools-trigger\", {\n \"App-toolbar__extra-tools-trigger--selected\": frameToolSelected || embeddableToolSelected || lassoToolSelected || // in collab we're already highlighting the laser button\n // outside toolbar, so let's not highlight extra-tools button\n // on top of it\n laserToolSelected && !app.props.isCollaborating\n }),\n onToggle: () => {\n if (!isExtraToolsMenuOpen) {\n setIsImageMenuOpen(false);\n }\n\n setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen);\n setAppState({\n openMenu: null,\n openPopup: null\n });\n },\n title: (0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"toolBar.extraTools\")\n }, frameToolSelected ? _icons__WEBPACK_IMPORTED_MODULE_21__.frameToolIcon : embeddableToolSelected ? _icons__WEBPACK_IMPORTED_MODULE_21__.EmbedIcon : laserToolSelected && !app.props.isCollaborating ? _icons__WEBPACK_IMPORTED_MODULE_21__.laserPointerToolIcon : lassoToolSelected ? _icons__WEBPACK_IMPORTED_MODULE_21__.LassoIcon : _icons__WEBPACK_IMPORTED_MODULE_21__.extraToolsIcon), React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_19__[\"default\"].Content, {\n onClickOutside: () => setIsExtraToolsMenuOpen(false),\n onSelect: () => setIsExtraToolsMenuOpen(false),\n className: \"App-toolbar__extra-tools-dropdown\"\n }, React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_19__[\"default\"].Item, {\n onSelect: () => app.setActiveTool({\n type: \"frame\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_21__.frameToolIcon,\n shortcut: _excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.KEYS.F.toLocaleUpperCase(),\n \"data-testid\": \"toolbar-frame\",\n selected: frameToolSelected\n }, (0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"toolBar.frame\")), React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_19__[\"default\"].Item, {\n onSelect: () => app.setActiveTool({\n type: \"embeddable\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_21__.EmbedIcon,\n \"data-testid\": \"toolbar-embeddable\",\n selected: embeddableToolSelected\n }, (0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"toolBar.embeddable\")), React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_19__[\"default\"].Item, {\n onSelect: () => app.setActiveTool({\n type: \"laser\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_21__.laserPointerToolIcon,\n \"data-testid\": \"toolbar-laser\",\n selected: laserToolSelected,\n shortcut: _excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.KEYS.K.toLocaleUpperCase()\n }, (0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"toolBar.laser\")), showLassoTool && //zsviczian\n React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_19__[\"default\"].Item, {\n onSelect: () => app.setActiveTool({\n type: \"lasso\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_21__.LassoIcon,\n \"data-testid\": \"toolbar-lasso\",\n selected: lassoToolSelected\n }, (0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"toolBar.lasso\")), React.createElement(\"div\", {\n style: {\n margin: \"6px 0\",\n fontSize: 14,\n fontWeight: 600\n }\n }, \"Generate\"), app.props.aiEnabled !== false && React.createElement(TTDDialogTriggerTunnel.Out, null), renderMermaid && //zsviczian\n React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_19__[\"default\"].Item, {\n onSelect: () => app.setOpenDialog({\n name: \"ttd\",\n tab: \"mermaid\"\n }),\n icon: _icons__WEBPACK_IMPORTED_MODULE_21__.mermaidLogoIcon,\n \"data-testid\": \"toolbar-embeddable\"\n }, (0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"toolBar.mermaidToExcalidraw\")), app.props.aiEnabled !== false && app.plugins.diagramToCode && React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_19__[\"default\"].Item, {\n onSelect: () => app.onMagicframeToolSelect(),\n icon: _icons__WEBPACK_IMPORTED_MODULE_21__.MagicIcon,\n \"data-testid\": \"toolbar-magicframe\",\n badge: React.createElement(_dropdownMenu_DropdownMenu__WEBPACK_IMPORTED_MODULE_19__[\"default\"].Item.Badge, null, \"AI\")\n }, (0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"toolBar.magicframe\")))));\n};\nconst ZoomActions = ({\n renderAction,\n trayMode = false //zsviczian\n\n}) => React.createElement(_Stack__WEBPACK_IMPORTED_MODULE_16__[\"default\"].Col, {\n gap: 1,\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(_excalidraw_common__WEBPACK_IMPORTED_MODULE_3__.CLASSES.ZOOM_ACTIONS, {\n \"tray-zoom\": trayMode\n })\n}, React.createElement(_Stack__WEBPACK_IMPORTED_MODULE_16__[\"default\"].Row, {\n align: \"center\"\n}, renderAction(\"zoomOut\"), renderAction(\"resetZoom\"), renderAction(\"zoomIn\")));\nconst UndoRedoActions = ({\n renderAction,\n className\n}) => React.createElement(\"div\", {\n className: `undo-redo-buttons ${className}`\n}, React.createElement(\"div\", {\n className: \"undo-button-container\"\n}, renderAction(\"undo\")\n/* //zsviczian */\n), React.createElement(\"div\", {\n className: \"redo-button-container\"\n}, renderAction(\"redo\")\n/* //zsviczian */\n));\nconst ExitZenModeButton = ({\n actionManager,\n showExitZenModeBtn\n}) => React.createElement(\"button\", {\n type: \"button\",\n className: (0,clsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(\"disable-zen-mode\", {\n \"disable-zen-mode--visible\": showExitZenModeBtn\n }),\n onClick: () => actionManager.executeAction(_actions__WEBPACK_IMPORTED_MODULE_5__.actionToggleZenMode)\n}, (0,_i18n__WEBPACK_IMPORTED_MODULE_8__.t)(\"buttons.exitZenMode\"));\nconst ExitViewModeButton = ({\n actionManager\n}) => React.createElement(\"button\", {\n type: \"button\",\n className: \"disable-view-mode\",\n onClick: () => actionManager.executeAction(_actions_actionToggleViewMode__WEBPACK_IMPORTED_MODULE_12__.actionToggleViewMode)\n}, _icons__WEBPACK_IMPORTED_MODULE_21__.pencilIcon);\n\n//# sourceURL=webpack://ExcalidrawLib/./components/Actions.tsx?\n}");
1709
1709
 
1710
1710
  /***/ },
1711
1711
 
@@ -3744,6 +3744,17 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
3744
3744
 
3745
3745
  /***/ },
3746
3746
 
3747
+ /***/ "./components/shapeActionPredicates.ts"
3748
+ /*!*********************************************!*\
3749
+ !*** ./components/shapeActionPredicates.ts ***!
3750
+ \*********************************************/
3751
+ (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
3752
+
3753
+ "use strict";
3754
+ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ canChangeBackgroundColor: () => (/* binding */ canChangeBackgroundColor),\n/* harmony export */ canChangeStrokeColor: () => (/* binding */ canChangeStrokeColor),\n/* harmony export */ getShapeActionPredicates: () => (/* binding */ getShapeActionPredicates)\n/* harmony export */ });\n/* harmony import */ var _excalidraw_common__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @excalidraw/common */ \"../common/src/index.ts\");\n/* harmony import */ var _excalidraw_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @excalidraw/element */ \"../element/src/index.ts\");\n/* harmony import */ var _actions_actionAlign__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../actions/actionAlign */ \"./actions/actionAlign.tsx\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n\n\n\n\nconst canChangeStrokeColor = (appState, targetElements) => {\n var _a;\n\n let commonSelectedType = ((_a = targetElements[0]) === null || _a === void 0 ? void 0 : _a.type) || null;\n\n for (const element of targetElements) {\n if (element.type !== commonSelectedType) {\n commonSelectedType = null;\n break;\n }\n }\n\n return (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_1__.hasStrokeColor)(appState.activeTool.type) && commonSelectedType !== \"image\" && commonSelectedType !== \"frame\" && commonSelectedType !== \"magicframe\" || targetElements.some(element => (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_1__.hasStrokeColor)(element.type));\n};\nconst canChangeBackgroundColor = (appState, targetElements) => {\n return (0,_scene__WEBPACK_IMPORTED_MODULE_3__.hasBackground)(appState.activeTool.type) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_3__.hasBackground)(element.type));\n};\n/**\n * Single source of truth for \"which shape-action controls are relevant right\n * now\". Each flag answers whether a given control should be shown, given the\n * active tool and the current selection. All three styles-panel layouts\n * (full / compact / mobile) and the compact popovers consume these flags so\n * that visibility logic lives in one place and layout stays pure.\n */\n\nconst getShapeActionPredicates = (appState, targetElements, elementsMap, app) => {\n var _a;\n\n const activeToolType = appState.activeTool.type; // A property is relevant when it applies to the active tool (so it can be\n // preconfigured before drawing) or to any currently selected element.\n\n const forToolOrSelection = predicate => predicate(activeToolType) || targetElements.some(element => predicate(element.type)); //zsviczian\n\n\n const forFreedrawToolOrSelection = predicate => predicate(activeToolType) && !appState.currentStrokeOptions || targetElements.some(element => {\n var _a;\n\n return predicate(element.type) && !((_a = element.customData) === null || _a === void 0 ? void 0 : _a.strokeOptions);\n });\n\n const singleSelected = targetElements.length === 1; // a container + its bound text read as a single logical element (2 selected)\n\n const isSingleElementBoundContainer = targetElements.length === 2 && ((0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_1__.hasBoundTextElement)(targetElements[0]) || (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_1__.hasBoundTextElement)(targetElements[1]));\n const isEditingTextOrNewElement = Boolean(appState.editingTextElement || appState.newElement);\n const hasSelection = targetElements.length > 0;\n return {\n /** some element(s) selected */\n hasSelection,\n\n /** actions on selected elements (delete/duplicate/...) */\n showExtraActions: hasSelection && !isEditingTextOrNewElement,\n // color\n strokeColor: canChangeStrokeColor(appState, targetElements),\n backgroundColor: canChangeBackgroundColor(appState, targetElements),\n fill: (0,_scene__WEBPACK_IMPORTED_MODULE_3__.hasBackground)(activeToolType) && !(0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_0__.isTransparent)(appState.currentItemBackgroundColor) || targetElements.some(element => (0,_scene__WEBPACK_IMPORTED_MODULE_3__.hasBackground)(element.type) && !(0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_0__.isTransparent)(element.backgroundColor)),\n // stroke / shape properties\n strokeWidth: forToolOrSelection(_scene__WEBPACK_IMPORTED_MODULE_3__.hasStrokeWidth),\n freedrawMode: forFreedrawToolOrSelection(_scene__WEBPACK_IMPORTED_MODULE_3__.hasFreedrawMode),\n //zsviczian\n strokeStyle: forToolOrSelection(_scene__WEBPACK_IMPORTED_MODULE_3__.hasStrokeStyle),\n roundness: forToolOrSelection(_scene__WEBPACK_IMPORTED_MODULE_3__.canChangeRoundness),\n arrowType: forToolOrSelection(_excalidraw_element__WEBPACK_IMPORTED_MODULE_1__.toolIsArrow),\n arrowheads: forToolOrSelection(_scene__WEBPACK_IMPORTED_MODULE_3__.canHaveArrowheads),\n frameRole: forToolOrSelection(type => type === \"frame\"),\n //zsviczian\n // text\n text: activeToolType === \"text\" || targetElements.some(_excalidraw_element__WEBPACK_IMPORTED_MODULE_1__.isTextElement),\n textAlign: activeToolType === \"text\" || (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_1__.suppportsHorizontalAlign)(targetElements, elementsMap),\n verticalAlign: (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_1__.shouldAllowVerticalAlign)(targetElements, elementsMap),\n // arrangement\n align: !isSingleElementBoundContainer && (0,_actions_actionAlign__WEBPACK_IMPORTED_MODULE_2__.alignActionsPredicate)(appState, app),\n distribute: targetElements.length > 2,\n // per-element actions\n // NOTE: the full panel treats a bound container as linkable; the compact /\n // mobile layouts only link a truly single selection. Both are preserved via\n // the two flags below.\n link: singleSelected || isSingleElementBoundContainer,\n linkSingleOnly: singleSelected,\n cropEditor: !appState.croppingElementId && singleSelected && (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_1__.isImageElement)(targetElements[0]),\n lineEditor: !((_a = appState.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.isEditing) && singleSelected && (0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_1__.isLinearElement)(targetElements[0]) && !(0,_excalidraw_element__WEBPACK_IMPORTED_MODULE_1__.isElbowArrow)(targetElements[0])\n };\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./components/shapeActionPredicates.ts?\n}");
3755
+
3756
+ /***/ },
3757
+
3747
3758
  /***/ "./components/shapes.tsx"
3748
3759
  /*!*******************************!*\
3749
3760
  !*** ./components/shapes.tsx ***!