@zsviczian/excalidraw 0.17.1-obsidian-31 → 0.17.1-obsidian-32

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 +2 -2
  2. package/dist/excalidraw.production.min.js +1 -1
  3. package/package.json +1 -1
  4. package/types/excalidraw/renderer/renderElement.d.ts +1 -0
  5. package/types/excalidraw/types.d.ts +1 -0
package/dist/excalidraw.development.js CHANGED
@@ -2113,7 +2113,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
2113
2113
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
2114
2114
 
2115
2115
  "use strict";
2116
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.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 _renderer_staticScene__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../renderer/staticScene */ \"./renderer/staticScene.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils */ \"./utils.ts\");\n/* harmony import */ var _reactUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../reactUtils */ \"./reactUtils.ts\");\n\n\n\n\n\n\nconst StaticCanvas = props => {\n const wrapperRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n const isComponentMounted = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n const wrapper = wrapperRef.current;\n\n if (!wrapper) {\n return;\n }\n\n const canvas = props.canvas;\n\n if (!isComponentMounted.current) {\n isComponentMounted.current = true;\n wrapper.replaceChildren(canvas);\n canvas.classList.add(\"excalidraw__canvas\", \"static\");\n }\n\n const widthString = `${props.appState.width}px`;\n const heightString = `${props.appState.height}px`;\n\n if (canvas.style.width !== widthString) {\n canvas.style.width = widthString;\n }\n\n if (canvas.style.height !== heightString) {\n canvas.style.height = heightString;\n }\n\n const scaledWidth = props.appState.width * props.scale;\n const scaledHeight = props.appState.height * props.scale; // setting width/height resets the canvas even if dimensions not changed,\n // which would cause flicker when we skip frame (due to throttling)\n\n if (canvas.width !== scaledWidth) {\n canvas.width = scaledWidth;\n }\n\n if (canvas.height !== scaledHeight) {\n canvas.height = scaledHeight;\n }\n\n (0,_renderer_staticScene__WEBPACK_IMPORTED_MODULE_2__.renderStaticScene)({\n canvas,\n rc: props.rc,\n scale: props.scale,\n elementsMap: props.elementsMap,\n allElementsMap: props.allElementsMap,\n visibleElements: props.visibleElements,\n appState: props.appState,\n renderConfig: props.renderConfig\n }, (0,_reactUtils__WEBPACK_IMPORTED_MODULE_4__.isRenderThrottlingEnabled)());\n });\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"excalidraw__canvas-wrapper\",\n ref: wrapperRef\n });\n};\n\nconst getRelevantAppStateProps = appState => ({\n zoom: appState.zoom,\n scrollX: appState.scrollX,\n scrollY: appState.scrollY,\n width: appState.width,\n height: appState.height,\n viewModeEnabled: appState.viewModeEnabled,\n offsetLeft: appState.offsetLeft,\n offsetTop: appState.offsetTop,\n theme: appState.theme,\n pendingImageElementId: appState.pendingImageElementId,\n shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,\n viewBackgroundColor: appState.viewBackgroundColor,\n exportScale: appState.exportScale,\n selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,\n gridSize: appState.gridSize,\n frameRendering: appState.frameRendering,\n linkOpacity: appState.linkOpacity,\n gridColor: appState.gridColor,\n frameColor: appState.frameColor,\n selectedElementIds: appState.selectedElementIds,\n frameToHighlight: appState.frameToHighlight,\n editingGroupId: appState.editingGroupId\n});\n\nconst areEqual = (prevProps, nextProps) => {\n if (prevProps.sceneNonce !== nextProps.sceneNonce || prevProps.scale !== nextProps.scale || // we need to memoize on elementsMap because they may have renewed\n // even if sceneNonce didn't change (e.g. we filter elements out based\n // on appState)\n prevProps.elementsMap !== nextProps.elementsMap || prevProps.visibleElements !== nextProps.visibleElements) {\n return false;\n }\n\n return (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isShallowEqual)( // asserting AppState because we're being passed the whole AppState\n // but resolve to only the StaticCanvas-relevant props\n getRelevantAppStateProps(prevProps.appState), getRelevantAppStateProps(nextProps.appState)) && (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isShallowEqual)(prevProps.renderConfig, nextProps.renderConfig);\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (react__WEBPACK_IMPORTED_MODULE_1___default().memo(StaticCanvas, areEqual));\n\n//# sourceURL=webpack://ExcalidrawLib/./components/canvases/StaticCanvas.tsx?");
2116
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"../../node_modules/react/jsx-runtime.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 _renderer_staticScene__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../renderer/staticScene */ \"./renderer/staticScene.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils */ \"./utils.ts\");\n/* harmony import */ var _reactUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../reactUtils */ \"./reactUtils.ts\");\n\n\n\n\n\n\nconst StaticCanvas = props => {\n const wrapperRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n const isComponentMounted = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n const wrapper = wrapperRef.current;\n\n if (!wrapper) {\n return;\n }\n\n const canvas = props.canvas;\n\n if (!isComponentMounted.current) {\n isComponentMounted.current = true;\n wrapper.replaceChildren(canvas);\n canvas.classList.add(\"excalidraw__canvas\", \"static\");\n }\n\n const widthString = `${props.appState.width}px`;\n const heightString = `${props.appState.height}px`;\n\n if (canvas.style.width !== widthString) {\n canvas.style.width = widthString;\n }\n\n if (canvas.style.height !== heightString) {\n canvas.style.height = heightString;\n }\n\n const scaledWidth = props.appState.width * props.scale;\n const scaledHeight = props.appState.height * props.scale; // setting width/height resets the canvas even if dimensions not changed,\n // which would cause flicker when we skip frame (due to throttling)\n\n if (canvas.width !== scaledWidth) {\n canvas.width = scaledWidth;\n }\n\n if (canvas.height !== scaledHeight) {\n canvas.height = scaledHeight;\n }\n\n (0,_renderer_staticScene__WEBPACK_IMPORTED_MODULE_2__.renderStaticScene)({\n canvas,\n rc: props.rc,\n scale: props.scale,\n elementsMap: props.elementsMap,\n allElementsMap: props.allElementsMap,\n visibleElements: props.visibleElements,\n appState: props.appState,\n renderConfig: props.renderConfig\n }, (0,_reactUtils__WEBPACK_IMPORTED_MODULE_4__.isRenderThrottlingEnabled)());\n });\n return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", {\n className: \"excalidraw__canvas-wrapper\",\n ref: wrapperRef\n });\n};\n\nconst getRelevantAppStateProps = appState => ({\n zoom: appState.zoom,\n scrollX: appState.scrollX,\n scrollY: appState.scrollY,\n width: appState.width,\n height: appState.height,\n viewModeEnabled: appState.viewModeEnabled,\n offsetLeft: appState.offsetLeft,\n offsetTop: appState.offsetTop,\n theme: appState.theme,\n pendingImageElementId: appState.pendingImageElementId,\n shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,\n viewBackgroundColor: appState.viewBackgroundColor,\n exportScale: appState.exportScale,\n selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,\n gridSize: appState.gridSize,\n frameRendering: appState.frameRendering,\n linkOpacity: appState.linkOpacity,\n gridColor: appState.gridColor,\n frameColor: appState.frameColor,\n selectedElementIds: appState.selectedElementIds,\n frameToHighlight: appState.frameToHighlight,\n editingGroupId: appState.editingGroupId,\n isRotating: appState.isRotating\n});\n\nconst areEqual = (prevProps, nextProps) => {\n if (prevProps.sceneNonce !== nextProps.sceneNonce || prevProps.scale !== nextProps.scale || // we need to memoize on elementsMap because they may have renewed\n // even if sceneNonce didn't change (e.g. we filter elements out based\n // on appState)\n prevProps.elementsMap !== nextProps.elementsMap || prevProps.visibleElements !== nextProps.visibleElements) {\n return false;\n }\n\n return (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isShallowEqual)( // asserting AppState because we're being passed the whole AppState\n // but resolve to only the StaticCanvas-relevant props\n getRelevantAppStateProps(prevProps.appState), getRelevantAppStateProps(nextProps.appState)) && (0,_utils__WEBPACK_IMPORTED_MODULE_3__.isShallowEqual)(prevProps.renderConfig, nextProps.renderConfig);\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (react__WEBPACK_IMPORTED_MODULE_1___default().memo(StaticCanvas, areEqual));\n\n//# sourceURL=webpack://ExcalidrawLib/./components/canvases/StaticCanvas.tsx?");
2117
2117
 
2118
2118
  /***/ }),
2119
2119
 
@@ -3290,7 +3290,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
3290
3290
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
3291
3291
 
3292
3292
  "use strict";
3293
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"DEFAULT_LINK_SIZE\": () => (/* binding */ DEFAULT_LINK_SIZE),\n/* harmony export */ \"IMAGE_INVERT_FILTER\": () => (/* binding */ IMAGE_INVERT_FILTER),\n/* harmony export */ \"elementWithCanvasCache\": () => (/* binding */ elementWithCanvasCache),\n/* harmony export */ \"generateFreeDrawShape\": () => (/* binding */ generateFreeDrawShape),\n/* harmony export */ \"getFreeDrawPath2D\": () => (/* binding */ getFreeDrawPath2D),\n/* harmony export */ \"getFreeDrawSvgPath\": () => (/* binding */ getFreeDrawSvgPath),\n/* harmony export */ \"getRenderOpacity\": () => (/* binding */ getRenderOpacity),\n/* harmony export */ \"pathsCache\": () => (/* binding */ pathsCache),\n/* harmony export */ \"renderElement\": () => (/* binding */ renderElement),\n/* harmony export */ \"renderSelectionElement\": () => (/* binding */ renderSelectionElement)\n/* harmony export */ });\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _element_bounds__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element/bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../math */ \"./math.ts\");\n/* harmony import */ var roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! roughjs/bin/rough */ \"../../node_modules/roughjs/bin/rough.js\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var perfect_freehand__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! perfect-freehand */ \"../../node_modules/perfect-freehand/dist/esm/index.js\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _easingFunctions__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./easingFunctions */ \"./renderer/easingFunctions.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../scene/ShapeCache */ \"./scene/ShapeCache.ts\");\n/* harmony import */ var _obsidianUtils__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../obsidianUtils */ \"./obsidianUtils.ts\");\n\n\n\n\n\n\n\n\n\n\n //zsviczian\n\n\n\n // using a stronger invert (100% vs our regular 93%) and saturate\n// as a temp hack to make images in dark theme look closer to original\n// color scheme (it's still not quite there and the colors look slightly\n// desatured, alas...)\n\nconst IMAGE_INVERT_FILTER = \"invert(100%) hue-rotate(180deg) saturate(1.25)\";\nconst defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_5__.getDefaultAppState)();\n\nconst isPendingImageElement = (element, renderConfig) => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isInitializedImageElement)(element) && !renderConfig.imageCache.has(element.fileId);\n\nconst shouldResetImageFilter = (element, renderConfig, appState) => {\n var _a;\n\n return appState.theme === _constants__WEBPACK_IMPORTED_MODULE_6__.THEME.DARK && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isInitializedImageElement)(element) && !isPendingImageElement(element, renderConfig) && ((_a = renderConfig.imageCache.get(element.fileId)) === null || _a === void 0 ? void 0 : _a.mimeType) !== _constants__WEBPACK_IMPORTED_MODULE_6__.MIME_TYPES.svg;\n};\n\nconst getCanvasPadding = element => element.type === \"freedraw\" ? element.strokeWidth * 12 : 200;\n\nconst getRenderOpacity = (element, containingFrame, elementsPendingErasure) => {\n var _a; // multiplying frame opacity with element opacity to combine them\n // (e.g. frame 50% and element 50% opacity should result in 25% opacity)\n\n\n let opacity = ((_a = containingFrame === null || containingFrame === void 0 ? void 0 : containingFrame.opacity) !== null && _a !== void 0 ? _a : 100) * element.opacity / 10000; // if pending erasure, multiply again to combine further\n // (so that erasing always results in lower opacity than original)\n\n if (elementsPendingErasure.has(element.id) || containingFrame && elementsPendingErasure.has(containingFrame.id)) {\n opacity *= _constants__WEBPACK_IMPORTED_MODULE_6__.ELEMENT_READY_TO_ERASE_OPACITY / 100;\n }\n\n return opacity;\n};\n\nconst cappedElementCanvasSize = (element, elementsMap, zoom) => {\n // these limits are ballpark, they depend on specific browsers and device.\n // We've chosen lower limits to be safe. We might want to change these limits\n // based on browser/device type, if we get reports of low quality rendering\n // on zoom.\n //\n // ~ safari mobile canvas area limit\n const AREA_LIMIT = (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_13__.getAreaLimit)(); //zsviczian\n // ~ safari width/height limit based on developer.mozilla.org.\n\n const WIDTH_HEIGHT_LIMIT = (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_13__.getWidthHeightLimit)(); //zsviczian\n\n const padding = getCanvasPadding(element);\n const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element, elementsMap);\n const elementWidth = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isLinearElement)(element) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isFreeDrawElement)(element) ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(x1, x2) : element.width;\n const elementHeight = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isLinearElement)(element) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isFreeDrawElement)(element) ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(y1, y2) : element.height;\n let width = elementWidth * window.devicePixelRatio + padding * 2;\n let height = elementHeight * window.devicePixelRatio + padding * 2;\n let scale = zoom.value; // rescale to ensure width and height is within limits\n\n if (width * scale > WIDTH_HEIGHT_LIMIT || height * scale > WIDTH_HEIGHT_LIMIT) {\n scale = Math.min(WIDTH_HEIGHT_LIMIT / width, WIDTH_HEIGHT_LIMIT / height);\n } // rescale to ensure canvas area is within limits\n\n\n if (width * height * scale * scale > AREA_LIMIT) {\n scale = Math.sqrt(AREA_LIMIT / (width * height));\n }\n\n width = Math.floor(width * scale);\n height = Math.floor(height * scale);\n return {\n width,\n height,\n scale\n };\n};\n\nconst generateElementCanvas = (element, elementsMap, zoom, renderConfig, appState) => {\n var _a, _b;\n\n const canvas = document.createElement(\"canvas\");\n const context = canvas.getContext(\"2d\");\n const padding = getCanvasPadding(element);\n const {\n width,\n height,\n scale\n } = cappedElementCanvasSize(element, elementsMap, zoom);\n canvas.width = width;\n canvas.height = height;\n let canvasOffsetX = 0;\n let canvasOffsetY = 0;\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isLinearElement)(element) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isFreeDrawElement)(element)) {\n const [x1, y1] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element, elementsMap);\n canvasOffsetX = element.x > x1 ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(element.x, x1) * window.devicePixelRatio * scale : 0;\n canvasOffsetY = element.y > y1 ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(element.y, y1) * window.devicePixelRatio * scale : 0;\n context.translate(canvasOffsetX, canvasOffsetY);\n }\n\n context.save();\n context.translate(padding * scale, padding * scale);\n context.scale(window.devicePixelRatio * scale, window.devicePixelRatio * scale);\n const rc = roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_4__[\"default\"].canvas(canvas); // in dark theme, revert the image color filter\n\n if (shouldResetImageFilter(element, renderConfig, appState)) {\n context.filter = IMAGE_INVERT_FILTER;\n }\n\n drawElementOnCanvas(element, rc, context, renderConfig, appState);\n context.restore();\n return {\n element,\n canvas,\n theme: appState.theme,\n scale,\n zoomValue: zoom.value,\n canvasOffsetX,\n canvasOffsetY,\n boundTextElementVersion: ((_a = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element, elementsMap)) === null || _a === void 0 ? void 0 : _a.version) || null,\n containingFrameOpacity: ((_b = (0,_frame__WEBPACK_IMPORTED_MODULE_11__.getContainingFrame)(element, elementsMap)) === null || _b === void 0 ? void 0 : _b.opacity) || 100\n };\n};\n\nconst DEFAULT_LINK_SIZE = 14;\nconst IMAGE_PLACEHOLDER_IMG = document.createElement(\"img\");\nIMAGE_PLACEHOLDER_IMG.src = `data:${_constants__WEBPACK_IMPORTED_MODULE_6__.MIME_TYPES.svg},${encodeURIComponent(`<svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"image\" class=\"svg-inline--fa fa-image fa-w-16\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"#888\" d=\"M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z\"></path></svg>`)}`;\nconst IMAGE_ERROR_PLACEHOLDER_IMG = document.createElement(\"img\");\nIMAGE_ERROR_PLACEHOLDER_IMG.src = `data:${_constants__WEBPACK_IMPORTED_MODULE_6__.MIME_TYPES.svg},${encodeURIComponent(`<svg viewBox=\"0 0 668 668\" xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" style=\"fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2\"><path d=\"M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48ZM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56ZM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48Z\" style=\"fill:#888;fill-rule:nonzero\" transform=\"matrix(.81709 0 0 .81709 124.825 145.825)\"/><path d=\"M256 8C119.034 8 8 119.033 8 256c0 136.967 111.034 248 248 248s248-111.034 248-248S392.967 8 256 8Zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676ZM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676Z\" style=\"fill:#888;fill-rule:nonzero\" transform=\"matrix(.30366 0 0 .30366 506.822 60.065)\"/></svg>`)}`;\n\nconst drawImagePlaceholder = (element, context) => {\n context.fillStyle = \"#E7E7E7\";\n context.fillRect(0, 0, element.width, element.height);\n const imageMinWidthOrHeight = Math.min(element.width, element.height);\n const size = Math.min(imageMinWidthOrHeight, Math.min(imageMinWidthOrHeight * 0.4, 100));\n context.drawImage(element.status === \"error\" ? IMAGE_ERROR_PLACEHOLDER_IMG : IMAGE_PLACEHOLDER_IMG, element.width / 2 - size / 2, element.height / 2 - size / 2, size, size);\n};\n\nconst drawElementOnCanvas = (element, rc, context, renderConfig, appState) => {\n var _a, _b, _c, _d;\n\n switch (element.type) {\n case \"rectangle\":\n case \"iframe\":\n case \"embeddable\":\n case \"diamond\":\n case \"ellipse\":\n {\n context.lineJoin = \"round\";\n context.lineCap = \"round\";\n rc.draw(_scene_ShapeCache__WEBPACK_IMPORTED_MODULE_12__.ShapeCache.get(element));\n break;\n }\n\n case \"arrow\":\n case \"line\":\n {\n context.lineJoin = \"round\";\n context.lineCap = \"round\";\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_12__.ShapeCache.get(element).forEach(shape => {\n rc.draw(shape);\n });\n break;\n }\n\n case \"freedraw\":\n {\n // Draw directly to canvas\n context.save();\n context.fillStyle = element.strokeColor;\n const path = getFreeDrawPath2D(element);\n const fillShape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_12__.ShapeCache.get(element);\n\n if (fillShape) {\n rc.draw(fillShape);\n } //zsviczian\n\n\n if ((_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.strokeOptions) === null || _b === void 0 ? void 0 : _b.hasOutline) {\n context.lineWidth = element.strokeWidth * ((_c = element.customData.strokeOptions.outlineWidth) !== null && _c !== void 0 ? _c : 1);\n context.strokeStyle = element.strokeColor;\n context.stroke(path);\n context.fillStyle = element.backgroundColor;\n } else {\n context.fillStyle = element.strokeColor;\n }\n\n context.fill(path);\n context.restore();\n break;\n }\n\n case \"image\":\n {\n const img = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isInitializedImageElement)(element) ? (_d = renderConfig.imageCache.get(element.fileId)) === null || _d === void 0 ? void 0 : _d.image : undefined;\n\n if (img != null && !(img instanceof Promise)) {\n if (element.roundness && context.roundRect) {\n context.beginPath();\n context.roundRect(0, 0, element.width, element.height, (0,_math__WEBPACK_IMPORTED_MODULE_3__.getCornerRadius)(Math.min(element.width, element.height), element));\n context.clip();\n }\n\n context.drawImage(img, 0\n /* hardcoded for the selection box*/\n , 0, element.width, element.height);\n } else {\n drawImagePlaceholder(element, context);\n }\n\n break;\n }\n\n default:\n {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isTextElement)(element)) {\n const rtl = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.isRTL)(element.text);\n const shouldTemporarilyAttach = rtl && !context.canvas.isConnected;\n\n if (shouldTemporarilyAttach) {\n // to correctly render RTL text mixed with LTR, we have to append it\n // to the DOM\n document.body.appendChild(context.canvas);\n }\n\n context.canvas.setAttribute(\"dir\", rtl ? \"rtl\" : \"ltr\");\n context.save();\n context.font = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getFontString)(element);\n context.fillStyle = element.strokeColor;\n context.textAlign = element.textAlign; // Canvas does not support multiline text by default\n\n const lines = element.text.replace(/\\r\\n?/g, \"\\n\").split(\"\\n\");\n const horizontalOffset = element.textAlign === \"center\" ? element.width / 2 : element.textAlign === \"right\" ? element.width : 0;\n const lineHeightPx = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getLineHeightInPx)(element.fontSize, element.lineHeight);\n const verticalOffset = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getVerticalOffset)(element.fontFamily, element.fontSize, lineHeightPx);\n\n for (let index = 0; index < lines.length; index++) {\n context.fillText(lines[index], horizontalOffset, index * lineHeightPx + verticalOffset);\n }\n\n context.restore();\n\n if (shouldTemporarilyAttach) {\n context.canvas.remove();\n }\n } else {\n throw new Error(`Unimplemented type ${element.type}`);\n }\n }\n }\n};\n\nconst elementWithCanvasCache = new WeakMap();\n\nconst generateElementWithCanvas = (element, elementsMap, renderConfig, appState) => {\n var _a, _b;\n\n const zoom = renderConfig ? appState.zoom : defaultAppState.zoom;\n const prevElementWithCanvas = elementWithCanvasCache.get(element);\n const shouldRegenerateBecauseZoom = prevElementWithCanvas && prevElementWithCanvas.zoomValue !== zoom.value && !(appState === null || appState === void 0 ? void 0 : appState.shouldCacheIgnoreZoom);\n const boundTextElementVersion = ((_a = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element, elementsMap)) === null || _a === void 0 ? void 0 : _a.version) || null;\n const containingFrameOpacity = ((_b = (0,_frame__WEBPACK_IMPORTED_MODULE_11__.getContainingFrame)(element, elementsMap)) === null || _b === void 0 ? void 0 : _b.opacity) || 100;\n\n if (!prevElementWithCanvas || shouldRegenerateBecauseZoom || prevElementWithCanvas.theme !== appState.theme || prevElementWithCanvas.boundTextElementVersion !== boundTextElementVersion || prevElementWithCanvas.containingFrameOpacity !== containingFrameOpacity) {\n const elementWithCanvas = generateElementCanvas(element, elementsMap, zoom, renderConfig, appState);\n elementWithCanvasCache.set(element, elementWithCanvas);\n return elementWithCanvas;\n }\n\n return prevElementWithCanvas;\n};\n\nconst drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appState, allElementsMap) => {\n const element = elementWithCanvas.element;\n const padding = getCanvasPadding(element);\n const zoom = elementWithCanvas.scale;\n const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element, allElementsMap);\n const cx = ((x1 + x2) / 2 + appState.scrollX) * window.devicePixelRatio;\n const cy = ((y1 + y2) / 2 + appState.scrollY) * window.devicePixelRatio;\n context.save();\n context.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio);\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element, allElementsMap);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isArrowElement)(element) && boundTextElement) {\n const tempCanvas = document.createElement(\"canvas\");\n const tempCanvasContext = tempCanvas.getContext(\"2d\"); // Take max dimensions of arrow canvas so that when canvas is rotated\n // the arrow doesn't get clipped\n\n const maxDim = Math.max((0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(x1, x2), (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(y1, y2));\n tempCanvas.width = maxDim * window.devicePixelRatio * zoom + padding * elementWithCanvas.scale * 10;\n tempCanvas.height = maxDim * window.devicePixelRatio * zoom + padding * elementWithCanvas.scale * 10;\n const offsetX = (tempCanvas.width - elementWithCanvas.canvas.width) / 2;\n const offsetY = (tempCanvas.height - elementWithCanvas.canvas.height) / 2;\n tempCanvasContext.translate(tempCanvas.width / 2, tempCanvas.height / 2);\n tempCanvasContext.rotate(element.angle);\n tempCanvasContext.drawImage(elementWithCanvas.canvas, -elementWithCanvas.canvas.width / 2, -elementWithCanvas.canvas.height / 2, elementWithCanvas.canvas.width, elementWithCanvas.canvas.height);\n const [,,,, boundTextCx, boundTextCy] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(boundTextElement, allElementsMap);\n tempCanvasContext.rotate(-element.angle); // Shift the canvas to the center of the bound text element\n\n const shiftX = tempCanvas.width / 2 - (boundTextCx - x1) * window.devicePixelRatio * zoom - offsetX - padding * zoom;\n const shiftY = tempCanvas.height / 2 - (boundTextCy - y1) * window.devicePixelRatio * zoom - offsetY - padding * zoom;\n tempCanvasContext.translate(-shiftX, -shiftY); // Clear the bound text area\n\n tempCanvasContext.clearRect(-(boundTextElement.width / 2 + _constants__WEBPACK_IMPORTED_MODULE_6__.BOUND_TEXT_PADDING) * window.devicePixelRatio * zoom, -(boundTextElement.height / 2 + _constants__WEBPACK_IMPORTED_MODULE_6__.BOUND_TEXT_PADDING) * window.devicePixelRatio * zoom, (boundTextElement.width + _constants__WEBPACK_IMPORTED_MODULE_6__.BOUND_TEXT_PADDING * 2) * window.devicePixelRatio * zoom, (boundTextElement.height + _constants__WEBPACK_IMPORTED_MODULE_6__.BOUND_TEXT_PADDING * 2) * window.devicePixelRatio * zoom);\n context.translate(cx, cy);\n context.drawImage(tempCanvas, -(x2 - x1) / 2 * window.devicePixelRatio - offsetX / zoom - padding, -(y2 - y1) / 2 * window.devicePixelRatio - offsetY / zoom - padding, tempCanvas.width / zoom, tempCanvas.height / zoom);\n } else {\n // we translate context to element center so that rotation and scale\n // originates from the element center\n context.translate(cx, cy);\n context.rotate(element.angle);\n\n if (\"scale\" in elementWithCanvas.element && !isPendingImageElement(element, renderConfig) && !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isIframeLikeElement)(element) //zsviczian\n ) {\n context.scale(elementWithCanvas.element.scale[0], elementWithCanvas.element.scale[1]);\n } // revert afterwards we don't have account for it during drawing\n\n\n context.translate(-cx, -cy);\n context.drawImage(elementWithCanvas.canvas, (x1 + appState.scrollX) * window.devicePixelRatio - padding * elementWithCanvas.scale / elementWithCanvas.scale, (y1 + appState.scrollY) * window.devicePixelRatio - padding * elementWithCanvas.scale / elementWithCanvas.scale, elementWithCanvas.canvas.width / elementWithCanvas.scale, elementWithCanvas.canvas.height / elementWithCanvas.scale);\n\n if (false) {}\n }\n\n context.restore(); // Clear the nested element we appended to the DOM\n};\n\nconst renderSelectionElement = (element, context, appState, selectionColor) => {\n context.save();\n context.translate(element.x + appState.scrollX, element.y + appState.scrollY);\n context.fillStyle = \"rgba(0, 0, 200, 0.04)\"; // render from 0.5px offset to get 1px wide line\n // https://stackoverflow.com/questions/7530593/html5-canvas-and-line-width/7531540#7531540\n // TODO can be be improved by offseting to the negative when user selects\n // from right to left\n\n const offset = 0.5 / appState.zoom.value;\n context.fillRect(offset, offset, element.width, element.height);\n context.lineWidth = 1 / appState.zoom.value;\n context.strokeStyle = selectionColor;\n context.strokeRect(offset, offset, element.width, element.height);\n context.restore();\n};\nconst renderElement = (element, elementsMap, allElementsMap, rc, context, renderConfig, appState) => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;\n\n context.globalAlpha = getRenderOpacity(element, (0,_frame__WEBPACK_IMPORTED_MODULE_11__.getContainingFrame)(element, elementsMap), renderConfig.elementsPendingErasure);\n\n switch (element.type) {\n case \"magicframe\":\n case \"frame\":\n {\n if (appState.frameRendering.enabled && appState.frameRendering.outline) {\n context.save();\n context.translate(element.x + appState.scrollX, element.y + appState.scrollY);\n context.fillStyle = (_e = (_c = (_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.frameColor) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = appState === null || appState === void 0 ? void 0 : appState.frameColor) === null || _d === void 0 ? void 0 : _d.fill) !== null && _e !== void 0 ? _e : \"rgba(0, 0, 200, 0.04)\"; //zsviczian\n\n context.lineWidth = _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.strokeWidth / appState.zoom.value;\n context.strokeStyle = (_k = (_h = (_g = (_f = element.customData) === null || _f === void 0 ? void 0 : _f.frameColor) === null || _g === void 0 ? void 0 : _g.stroke) !== null && _h !== void 0 ? _h : (_j = appState === null || appState === void 0 ? void 0 : appState.frameColor) === null || _j === void 0 ? void 0 : _j.stroke) !== null && _k !== void 0 ? _k : _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.strokeColor; //zsviczian\n // TODO change later to only affect AI frames\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isMagicFrameElement)(element)) {\n context.strokeStyle = appState.theme === _constants__WEBPACK_IMPORTED_MODULE_6__.THEME.LIGHT ? \"#7affd7\" : \"#1d8264\";\n }\n\n if (_constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.radius && context.roundRect) {\n context.beginPath();\n context.roundRect(0, 0, element.width, element.height, _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.radius / appState.zoom.value);\n context.stroke();\n context.closePath();\n } else {\n context.strokeRect(0, 0, element.width, element.height);\n }\n\n context.restore();\n }\n\n break;\n }\n\n case \"freedraw\":\n {\n // TODO investigate if we can do this in situ. Right now we need to call\n // beforehand because math helpers (such as getElementAbsoluteCoords)\n // rely on existing shapes\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_12__.ShapeCache.generateElementShape(element, null);\n\n if (renderConfig.isExporting) {\n const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2 + appState.scrollX;\n const cy = (y1 + y2) / 2 + appState.scrollY;\n const shiftX = (x2 - x1) / 2 - (element.x - x1);\n const shiftY = (y2 - y1) / 2 - (element.y - y1);\n context.save();\n context.translate(cx, cy);\n context.rotate(element.angle);\n context.translate(-shiftX, -shiftY);\n drawElementOnCanvas(element, rc, context, renderConfig, appState);\n context.restore();\n } else {\n const elementWithCanvas = generateElementWithCanvas(element, elementsMap, renderConfig, appState);\n drawElementFromCanvas(elementWithCanvas, context, renderConfig, appState, allElementsMap);\n }\n\n break;\n }\n\n case \"rectangle\":\n case \"diamond\":\n case \"ellipse\":\n case \"line\":\n case \"arrow\":\n case \"image\":\n case \"text\":\n case \"iframe\":\n case \"embeddable\":\n {\n // TODO investigate if we can do this in situ. Right now we need to call\n // beforehand because math helpers (such as getElementAbsoluteCoords)\n // rely on existing shapes\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_12__.ShapeCache.generateElementShape(element, renderConfig);\n\n if (renderConfig.isExporting) {\n const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2 + appState.scrollX;\n const cy = (y1 + y2) / 2 + appState.scrollY;\n let shiftX = (x2 - x1) / 2 - (element.x - x1);\n let shiftY = (y2 - y1) / 2 - (element.y - y1);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isTextElement)(element)) {\n const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getContainerElement)(element, elementsMap);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isArrowElement)(container)) {\n const boundTextCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__.LinearElementEditor.getBoundTextElementPosition(container, element, elementsMap);\n shiftX = (x2 - x1) / 2 - (boundTextCoords.x - x1);\n shiftY = (y2 - y1) / 2 - (boundTextCoords.y - y1);\n }\n }\n\n context.save();\n context.translate(cx, cy);\n\n if (shouldResetImageFilter(element, renderConfig, appState)) {\n context.filter = \"none\";\n }\n\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element, elementsMap);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isArrowElement)(element) && boundTextElement) {\n const tempCanvas = document.createElement(\"canvas\");\n const tempCanvasContext = tempCanvas.getContext(\"2d\"); // Take max dimensions of arrow canvas so that when canvas is rotated\n // the arrow doesn't get clipped\n\n const maxDim = Math.max((0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(x1, x2), (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(y1, y2));\n const padding = getCanvasPadding(element);\n tempCanvas.width = maxDim * appState.exportScale + padding * 10 * appState.exportScale;\n tempCanvas.height = maxDim * appState.exportScale + padding * 10 * appState.exportScale;\n tempCanvasContext.translate(tempCanvas.width / 2, tempCanvas.height / 2);\n tempCanvasContext.scale(appState.exportScale, appState.exportScale); // Shift the canvas to left most point of the arrow\n\n shiftX = element.width / 2 - (element.x - x1);\n shiftY = element.height / 2 - (element.y - y1);\n tempCanvasContext.rotate(element.angle);\n const tempRc = roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_4__[\"default\"].canvas(tempCanvas);\n tempCanvasContext.translate(-shiftX, -shiftY);\n drawElementOnCanvas(element, tempRc, tempCanvasContext, renderConfig, appState);\n tempCanvasContext.translate(shiftX, shiftY);\n tempCanvasContext.rotate(-element.angle); // Shift the canvas to center of bound text\n\n const [,,,, boundTextCx, boundTextCy] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(boundTextElement, elementsMap);\n const boundTextShiftX = (x1 + x2) / 2 - boundTextCx;\n const boundTextShiftY = (y1 + y2) / 2 - boundTextCy;\n tempCanvasContext.translate(-boundTextShiftX, -boundTextShiftY); // Clear the bound text area\n\n tempCanvasContext.clearRect(-boundTextElement.width / 2, -boundTextElement.height / 2, boundTextElement.width, boundTextElement.height);\n context.scale(1 / appState.exportScale, 1 / appState.exportScale);\n context.drawImage(tempCanvas, -tempCanvas.width / 2, -tempCanvas.height / 2, tempCanvas.width, tempCanvas.height);\n } else {\n context.rotate(element.angle);\n\n if (element.type === \"image\") {\n // note: scale must be applied *after* rotating\n context.scale(element.scale[0], element.scale[1]);\n }\n\n context.translate(-shiftX, -shiftY);\n drawElementOnCanvas(element, rc, context, renderConfig, appState);\n }\n\n context.restore(); // not exporting → optimized rendering (cache & render from element\n // canvases)\n } else {\n const elementWithCanvas = generateElementWithCanvas(element, elementsMap, renderConfig, appState);\n const currentImageSmoothingStatus = context.imageSmoothingEnabled;\n\n if ( // do not disable smoothing during zoom as blurry shapes look better\n // on low resolution (while still zooming in) than sharp ones\n !(appState === null || appState === void 0 ? void 0 : appState.shouldCacheIgnoreZoom) && ( // angle is 0 -> always disable smoothing\n !element.angle || // or check if angle is a right angle in which case we can still\n // disable smoothing without adversely affecting the result\n (0,_math__WEBPACK_IMPORTED_MODULE_3__.isRightAngle)(element.angle))) {\n // Disabling smoothing makes output much sharper, especially for\n // text. Unless for non-right angles, where the aliasing is really\n // terrible on Chromium.\n //\n // Note that `context.imageSmoothingQuality=\"high\"` has almost\n // zero effect.\n //\n context.imageSmoothingEnabled = false;\n }\n\n drawElementFromCanvas(elementWithCanvas, context, renderConfig, appState, allElementsMap); // reset\n\n context.imageSmoothingEnabled = currentImageSmoothingStatus;\n }\n\n break;\n }\n\n default:\n {\n // @ts-ignore\n throw new Error(`Unimplemented type ${element.type}`);\n }\n }\n\n context.globalAlpha = 1;\n};\nconst pathsCache = new WeakMap([]);\nfunction generateFreeDrawShape(element) {\n const svgPathData = getFreeDrawSvgPath(element);\n const path = new Path2D(svgPathData);\n pathsCache.set(element, path);\n return path;\n}\nfunction getFreeDrawPath2D(element) {\n return pathsCache.get(element);\n}\nfunction getFreeDrawSvgPath(element) {\n var _a, _b, _c, _d, _e, _f, _g, _h; // If input points are empty (should they ever be?) return a dot\n\n\n const inputPoints = element.simulatePressure ? element.points : element.points.length ? element.points.map(([x, y], i) => [x, y, element.pressures[i]]) : [[0, 0, 0.5]]; // Consider changing the options for simulated pressure vs real pressure\n\n const customOptions = (_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.strokeOptions) === null || _b === void 0 ? void 0 : _b.options; //zsviczian\n\n const options = customOptions //zsviczian\n ? Object.assign(Object.assign(Object.assign(Object.assign({}, customOptions), {\n simulatePressure: (_c = customOptions.simulatePressure) !== null && _c !== void 0 ? _c : element.simulatePressure,\n size: element.strokeWidth * 4.25,\n last: !!element.lastCommittedPoint,\n easing: (_d = _easingFunctions__WEBPACK_IMPORTED_MODULE_10__[\"default\"][customOptions.easing]) !== null && _d !== void 0 ? _d : t => t\n }), ((_e = customOptions.start) === null || _e === void 0 ? void 0 : _e.easing) ? {\n start: Object.assign(Object.assign({}, customOptions.start), {\n easing: (_f = _easingFunctions__WEBPACK_IMPORTED_MODULE_10__[\"default\"][customOptions.start.easing]) !== null && _f !== void 0 ? _f : t => t\n })\n } : {\n start: customOptions.start\n }), ((_g = customOptions.end) === null || _g === void 0 ? void 0 : _g.easing) ? {\n end: Object.assign(Object.assign({}, customOptions.end), {\n easing: (_h = _easingFunctions__WEBPACK_IMPORTED_MODULE_10__[\"default\"][customOptions.end.easing]) !== null && _h !== void 0 ? _h : t => t\n })\n } : {\n end: customOptions.end\n }) : {\n simulatePressure: element.simulatePressure,\n size: element.strokeWidth * 4.25,\n thinning: 0.6,\n smoothing: 0.5,\n streamline: 0.5,\n easing: _easingFunctions__WEBPACK_IMPORTED_MODULE_10__[\"default\"].easeOutSine,\n last: !!element.lastCommittedPoint // LastCommittedPoint is added on pointerup\n\n };\n return getSvgPathFromStroke((0,perfect_freehand__WEBPACK_IMPORTED_MODULE_7__.getStroke)(inputPoints, options));\n}\n\nfunction med(A, B) {\n return [(A[0] + B[0]) / 2, (A[1] + B[1]) / 2];\n} // Trim SVG path data so number are each two decimal points. This\n// improves SVG exports, and prevents rendering errors on points\n// with long decimals.\n\n\nconst TO_FIXED_PRECISION = /(\\s?[A-Z]?,?-?[0-9]*\\.[0-9]{0,2})(([0-9]|e|-)*)/g;\n\nfunction getSvgPathFromStroke(points) {\n if (!points.length) {\n return \"\";\n }\n\n const max = points.length - 1;\n return points.reduce((acc, point, i, arr) => {\n if (i === max) {\n acc.push(point, med(point, arr[0]), \"L\", arr[0], \"Z\");\n } else {\n acc.push(point, med(point, arr[i + 1]));\n }\n\n return acc;\n }, [\"M\", points[0], \"Q\"]).join(\" \").replace(TO_FIXED_PRECISION, \"$1\");\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./renderer/renderElement.ts?");
3293
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"DEFAULT_LINK_SIZE\": () => (/* binding */ DEFAULT_LINK_SIZE),\n/* harmony export */ \"IMAGE_INVERT_FILTER\": () => (/* binding */ IMAGE_INVERT_FILTER),\n/* harmony export */ \"elementWithCanvasCache\": () => (/* binding */ elementWithCanvasCache),\n/* harmony export */ \"generateFreeDrawShape\": () => (/* binding */ generateFreeDrawShape),\n/* harmony export */ \"getFreeDrawPath2D\": () => (/* binding */ getFreeDrawPath2D),\n/* harmony export */ \"getFreeDrawSvgPath\": () => (/* binding */ getFreeDrawSvgPath),\n/* harmony export */ \"getRenderOpacity\": () => (/* binding */ getRenderOpacity),\n/* harmony export */ \"pathsCache\": () => (/* binding */ pathsCache),\n/* harmony export */ \"renderElement\": () => (/* binding */ renderElement),\n/* harmony export */ \"renderSelectionElement\": () => (/* binding */ renderSelectionElement)\n/* harmony export */ });\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../element/typeChecks */ \"./element/typeChecks.ts\");\n/* harmony import */ var _element_bounds__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element/bounds */ \"./element/bounds.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils */ \"./utils.ts\");\n/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../math */ \"./math.ts\");\n/* harmony import */ var roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! roughjs/bin/rough */ \"../../node_modules/roughjs/bin/rough.js\");\n/* harmony import */ var _appState__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../appState */ \"./appState.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../constants */ \"./constants.ts\");\n/* harmony import */ var perfect_freehand__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! perfect-freehand */ \"../../node_modules/perfect-freehand/dist/esm/index.js\");\n/* harmony import */ var _element_textElement__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../element/textElement */ \"./element/textElement.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../element/linearElementEditor */ \"./element/linearElementEditor.ts\");\n/* harmony import */ var _easingFunctions__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./easingFunctions */ \"./renderer/easingFunctions.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../frame */ \"./frame.ts\");\n/* harmony import */ var _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../scene/ShapeCache */ \"./scene/ShapeCache.ts\");\n/* harmony import */ var _obsidianUtils__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../obsidianUtils */ \"./obsidianUtils.ts\");\n\n\n\n\n\n\n\n\n\n\n //zsviczian\n\n\n\n // using a stronger invert (100% vs our regular 93%) and saturate\n// as a temp hack to make images in dark theme look closer to original\n// color scheme (it's still not quite there and the colors look slightly\n// desatured, alas...)\n\nconst IMAGE_INVERT_FILTER = \"invert(100%) hue-rotate(180deg) saturate(1.25)\";\nconst defaultAppState = (0,_appState__WEBPACK_IMPORTED_MODULE_5__.getDefaultAppState)();\n\nconst isPendingImageElement = (element, renderConfig) => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isInitializedImageElement)(element) && !renderConfig.imageCache.has(element.fileId);\n\nconst shouldResetImageFilter = (element, renderConfig, appState) => {\n var _a;\n\n return appState.theme === _constants__WEBPACK_IMPORTED_MODULE_6__.THEME.DARK && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isInitializedImageElement)(element) && !isPendingImageElement(element, renderConfig) && ((_a = renderConfig.imageCache.get(element.fileId)) === null || _a === void 0 ? void 0 : _a.mimeType) !== _constants__WEBPACK_IMPORTED_MODULE_6__.MIME_TYPES.svg;\n};\n\nconst getCanvasPadding = element => element.type === \"freedraw\" ? element.strokeWidth * 12 : 20;\n\nconst getRenderOpacity = (element, containingFrame, elementsPendingErasure) => {\n var _a; // multiplying frame opacity with element opacity to combine them\n // (e.g. frame 50% and element 50% opacity should result in 25% opacity)\n\n\n let opacity = ((_a = containingFrame === null || containingFrame === void 0 ? void 0 : containingFrame.opacity) !== null && _a !== void 0 ? _a : 100) * element.opacity / 10000; // if pending erasure, multiply again to combine further\n // (so that erasing always results in lower opacity than original)\n\n if (elementsPendingErasure.has(element.id) || containingFrame && elementsPendingErasure.has(containingFrame.id)) {\n opacity *= _constants__WEBPACK_IMPORTED_MODULE_6__.ELEMENT_READY_TO_ERASE_OPACITY / 100;\n }\n\n return opacity;\n};\n\nconst cappedElementCanvasSize = (element, elementsMap, zoom) => {\n // these limits are ballpark, they depend on specific browsers and device.\n // We've chosen lower limits to be safe. We might want to change these limits\n // based on browser/device type, if we get reports of low quality rendering\n // on zoom.\n //\n // ~ safari mobile canvas area limit\n const AREA_LIMIT = (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_13__.getAreaLimit)(); //zsviczian\n // ~ safari width/height limit based on developer.mozilla.org.\n\n const WIDTH_HEIGHT_LIMIT = (0,_obsidianUtils__WEBPACK_IMPORTED_MODULE_13__.getWidthHeightLimit)(); //zsviczian\n\n const padding = getCanvasPadding(element);\n const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element, elementsMap);\n const elementWidth = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isLinearElement)(element) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isFreeDrawElement)(element) ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(x1, x2) : element.width;\n const elementHeight = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isLinearElement)(element) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isFreeDrawElement)(element) ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(y1, y2) : element.height;\n let width = elementWidth * window.devicePixelRatio + padding * 2;\n let height = elementHeight * window.devicePixelRatio + padding * 2;\n let scale = zoom.value; // rescale to ensure width and height is within limits\n\n if (width * scale > WIDTH_HEIGHT_LIMIT || height * scale > WIDTH_HEIGHT_LIMIT) {\n scale = Math.min(WIDTH_HEIGHT_LIMIT / width, WIDTH_HEIGHT_LIMIT / height);\n } // rescale to ensure canvas area is within limits\n\n\n if (width * height * scale * scale > AREA_LIMIT) {\n scale = Math.sqrt(AREA_LIMIT / (width * height));\n }\n\n width = Math.floor(width * scale);\n height = Math.floor(height * scale);\n return {\n width,\n height,\n scale\n };\n};\n\nconst generateElementCanvas = (element, elementsMap, zoom, renderConfig, appState) => {\n var _a, _b;\n\n const canvas = document.createElement(\"canvas\");\n const context = canvas.getContext(\"2d\");\n const padding = getCanvasPadding(element);\n const {\n width,\n height,\n scale\n } = cappedElementCanvasSize(element, elementsMap, zoom);\n canvas.width = width;\n canvas.height = height;\n let canvasOffsetX = 0;\n let canvasOffsetY = 0;\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isLinearElement)(element) || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isFreeDrawElement)(element)) {\n const [x1, y1] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element, elementsMap);\n canvasOffsetX = element.x > x1 ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(element.x, x1) * window.devicePixelRatio * scale : 0;\n canvasOffsetY = element.y > y1 ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(element.y, y1) * window.devicePixelRatio * scale : 0;\n context.translate(canvasOffsetX, canvasOffsetY);\n }\n\n context.save();\n context.translate(padding * scale, padding * scale);\n context.scale(window.devicePixelRatio * scale, window.devicePixelRatio * scale);\n const rc = roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_4__[\"default\"].canvas(canvas); // in dark theme, revert the image color filter\n\n if (shouldResetImageFilter(element, renderConfig, appState)) {\n context.filter = IMAGE_INVERT_FILTER;\n }\n\n drawElementOnCanvas(element, rc, context, renderConfig, appState);\n context.restore();\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element, elementsMap);\n const boundTextCanvas = document.createElement(\"canvas\");\n const boundTextCanvasContext = boundTextCanvas.getContext(\"2d\");\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isArrowElement)(element) && boundTextElement) {\n const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element, elementsMap); // Take max dimensions of arrow canvas so that when canvas is rotated\n // the arrow doesn't get clipped\n\n const maxDim = Math.max((0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(x1, x2), (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(y1, y2));\n boundTextCanvas.width = maxDim * window.devicePixelRatio * scale + padding * scale * 10;\n boundTextCanvas.height = maxDim * window.devicePixelRatio * scale + padding * scale * 10;\n boundTextCanvasContext.translate(boundTextCanvas.width / 2, boundTextCanvas.height / 2);\n boundTextCanvasContext.rotate(element.angle);\n boundTextCanvasContext.drawImage(canvas, -canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);\n const [,,,, boundTextCx, boundTextCy] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(boundTextElement, elementsMap);\n boundTextCanvasContext.rotate(-element.angle);\n const offsetX = (boundTextCanvas.width - canvas.width) / 2;\n const offsetY = (boundTextCanvas.height - canvas.height) / 2;\n const shiftX = boundTextCanvas.width / 2 - (boundTextCx - x1) * window.devicePixelRatio * scale - offsetX - padding * scale;\n const shiftY = boundTextCanvas.height / 2 - (boundTextCy - y1) * window.devicePixelRatio * scale - offsetY - padding * scale;\n boundTextCanvasContext.translate(-shiftX, -shiftY); // Clear the bound text area\n\n boundTextCanvasContext.clearRect(-(boundTextElement.width / 2 + _constants__WEBPACK_IMPORTED_MODULE_6__.BOUND_TEXT_PADDING) * window.devicePixelRatio * scale, -(boundTextElement.height / 2 + _constants__WEBPACK_IMPORTED_MODULE_6__.BOUND_TEXT_PADDING) * window.devicePixelRatio * scale, (boundTextElement.width + _constants__WEBPACK_IMPORTED_MODULE_6__.BOUND_TEXT_PADDING * 2) * window.devicePixelRatio * scale, (boundTextElement.height + _constants__WEBPACK_IMPORTED_MODULE_6__.BOUND_TEXT_PADDING * 2) * window.devicePixelRatio * scale);\n }\n\n return {\n element,\n canvas,\n theme: appState.theme,\n scale,\n zoomValue: zoom.value,\n canvasOffsetX,\n canvasOffsetY,\n boundTextElementVersion: ((_a = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element, elementsMap)) === null || _a === void 0 ? void 0 : _a.version) || null,\n containingFrameOpacity: ((_b = (0,_frame__WEBPACK_IMPORTED_MODULE_11__.getContainingFrame)(element, elementsMap)) === null || _b === void 0 ? void 0 : _b.opacity) || 100,\n boundTextCanvas\n };\n};\n\nconst DEFAULT_LINK_SIZE = 14;\nconst IMAGE_PLACEHOLDER_IMG = document.createElement(\"img\");\nIMAGE_PLACEHOLDER_IMG.src = `data:${_constants__WEBPACK_IMPORTED_MODULE_6__.MIME_TYPES.svg},${encodeURIComponent(`<svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"image\" class=\"svg-inline--fa fa-image fa-w-16\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"#888\" d=\"M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z\"></path></svg>`)}`;\nconst IMAGE_ERROR_PLACEHOLDER_IMG = document.createElement(\"img\");\nIMAGE_ERROR_PLACEHOLDER_IMG.src = `data:${_constants__WEBPACK_IMPORTED_MODULE_6__.MIME_TYPES.svg},${encodeURIComponent(`<svg viewBox=\"0 0 668 668\" xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" style=\"fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2\"><path d=\"M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48ZM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56ZM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48Z\" style=\"fill:#888;fill-rule:nonzero\" transform=\"matrix(.81709 0 0 .81709 124.825 145.825)\"/><path d=\"M256 8C119.034 8 8 119.033 8 256c0 136.967 111.034 248 248 248s248-111.034 248-248S392.967 8 256 8Zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676ZM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676Z\" style=\"fill:#888;fill-rule:nonzero\" transform=\"matrix(.30366 0 0 .30366 506.822 60.065)\"/></svg>`)}`;\n\nconst drawImagePlaceholder = (element, context) => {\n context.fillStyle = \"#E7E7E7\";\n context.fillRect(0, 0, element.width, element.height);\n const imageMinWidthOrHeight = Math.min(element.width, element.height);\n const size = Math.min(imageMinWidthOrHeight, Math.min(imageMinWidthOrHeight * 0.4, 100));\n context.drawImage(element.status === \"error\" ? IMAGE_ERROR_PLACEHOLDER_IMG : IMAGE_PLACEHOLDER_IMG, element.width / 2 - size / 2, element.height / 2 - size / 2, size, size);\n};\n\nconst drawElementOnCanvas = (element, rc, context, renderConfig, appState) => {\n var _a, _b, _c, _d;\n\n switch (element.type) {\n case \"rectangle\":\n case \"iframe\":\n case \"embeddable\":\n case \"diamond\":\n case \"ellipse\":\n {\n context.lineJoin = \"round\";\n context.lineCap = \"round\";\n rc.draw(_scene_ShapeCache__WEBPACK_IMPORTED_MODULE_12__.ShapeCache.get(element));\n break;\n }\n\n case \"arrow\":\n case \"line\":\n {\n context.lineJoin = \"round\";\n context.lineCap = \"round\";\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_12__.ShapeCache.get(element).forEach(shape => {\n rc.draw(shape);\n });\n break;\n }\n\n case \"freedraw\":\n {\n // Draw directly to canvas\n context.save();\n context.fillStyle = element.strokeColor;\n const path = getFreeDrawPath2D(element);\n const fillShape = _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_12__.ShapeCache.get(element);\n\n if (fillShape) {\n rc.draw(fillShape);\n } //zsviczian\n\n\n if ((_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.strokeOptions) === null || _b === void 0 ? void 0 : _b.hasOutline) {\n context.lineWidth = element.strokeWidth * ((_c = element.customData.strokeOptions.outlineWidth) !== null && _c !== void 0 ? _c : 1);\n context.strokeStyle = element.strokeColor;\n context.stroke(path);\n context.fillStyle = element.backgroundColor;\n } else {\n context.fillStyle = element.strokeColor;\n }\n\n context.fill(path);\n context.restore();\n break;\n }\n\n case \"image\":\n {\n const img = (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isInitializedImageElement)(element) ? (_d = renderConfig.imageCache.get(element.fileId)) === null || _d === void 0 ? void 0 : _d.image : undefined;\n\n if (img != null && !(img instanceof Promise)) {\n if (element.roundness && context.roundRect) {\n context.beginPath();\n context.roundRect(0, 0, element.width, element.height, (0,_math__WEBPACK_IMPORTED_MODULE_3__.getCornerRadius)(Math.min(element.width, element.height), element));\n context.clip();\n }\n\n context.drawImage(img, 0\n /* hardcoded for the selection box*/\n , 0, element.width, element.height);\n } else {\n drawImagePlaceholder(element, context);\n }\n\n break;\n }\n\n default:\n {\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isTextElement)(element)) {\n const rtl = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.isRTL)(element.text);\n const shouldTemporarilyAttach = rtl && !context.canvas.isConnected;\n\n if (shouldTemporarilyAttach) {\n // to correctly render RTL text mixed with LTR, we have to append it\n // to the DOM\n document.body.appendChild(context.canvas);\n }\n\n context.canvas.setAttribute(\"dir\", rtl ? \"rtl\" : \"ltr\");\n context.save();\n context.font = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getFontString)(element);\n context.fillStyle = element.strokeColor;\n context.textAlign = element.textAlign; // Canvas does not support multiline text by default\n\n const lines = element.text.replace(/\\r\\n?/g, \"\\n\").split(\"\\n\");\n const horizontalOffset = element.textAlign === \"center\" ? element.width / 2 : element.textAlign === \"right\" ? element.width : 0;\n const lineHeightPx = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getLineHeightInPx)(element.fontSize, element.lineHeight);\n const verticalOffset = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getVerticalOffset)(element.fontFamily, element.fontSize, lineHeightPx);\n\n for (let index = 0; index < lines.length; index++) {\n context.fillText(lines[index], horizontalOffset, index * lineHeightPx + verticalOffset);\n }\n\n context.restore();\n\n if (shouldTemporarilyAttach) {\n context.canvas.remove();\n }\n } else {\n throw new Error(`Unimplemented type ${element.type}`);\n }\n }\n }\n};\n\nconst elementWithCanvasCache = new WeakMap();\n\nconst generateElementWithCanvas = (element, elementsMap, renderConfig, appState) => {\n var _a;\n\n const zoom = renderConfig ? appState.zoom : defaultAppState.zoom;\n const prevElementWithCanvas = elementWithCanvasCache.get(element);\n const shouldRegenerateBecauseZoom = prevElementWithCanvas && prevElementWithCanvas.zoomValue !== zoom.value && !(appState === null || appState === void 0 ? void 0 : appState.shouldCacheIgnoreZoom);\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element, elementsMap);\n const boundTextElementVersion = (boundTextElement === null || boundTextElement === void 0 ? void 0 : boundTextElement.version) || null;\n const containingFrameOpacity = ((_a = (0,_frame__WEBPACK_IMPORTED_MODULE_11__.getContainingFrame)(element, elementsMap)) === null || _a === void 0 ? void 0 : _a.opacity) || 100;\n\n if (!prevElementWithCanvas || shouldRegenerateBecauseZoom || prevElementWithCanvas.theme !== appState.theme || prevElementWithCanvas.boundTextElementVersion !== boundTextElementVersion || prevElementWithCanvas.containingFrameOpacity !== containingFrameOpacity || (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isArrowElement)(element) && boundTextElement && appState.isRotating) {\n const elementWithCanvas = generateElementCanvas(element, elementsMap, zoom, renderConfig, appState);\n elementWithCanvasCache.set(element, elementWithCanvas);\n return elementWithCanvas;\n }\n\n return prevElementWithCanvas;\n};\n\nconst drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appState, allElementsMap) => {\n const element = elementWithCanvas.element;\n const padding = getCanvasPadding(element);\n const zoom = elementWithCanvas.scale;\n const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element, allElementsMap);\n const cx = ((x1 + x2) / 2 + appState.scrollX) * window.devicePixelRatio;\n const cy = ((y1 + y2) / 2 + appState.scrollY) * window.devicePixelRatio;\n context.save();\n context.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio);\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element, allElementsMap);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isArrowElement)(element) && boundTextElement) {\n const offsetX = (elementWithCanvas.boundTextCanvas.width - elementWithCanvas.canvas.width) / 2;\n const offsetY = (elementWithCanvas.boundTextCanvas.height - elementWithCanvas.canvas.height) / 2;\n context.translate(cx, cy);\n context.drawImage(elementWithCanvas.boundTextCanvas, -(x2 - x1) / 2 * window.devicePixelRatio - offsetX / zoom - padding, -(y2 - y1) / 2 * window.devicePixelRatio - offsetY / zoom - padding, elementWithCanvas.boundTextCanvas.width / zoom, elementWithCanvas.boundTextCanvas.height / zoom);\n } else {\n // we translate context to element center so that rotation and scale\n // originates from the element center\n context.translate(cx, cy);\n context.rotate(element.angle);\n\n if (\"scale\" in elementWithCanvas.element && !isPendingImageElement(element, renderConfig) && !(0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isIframeLikeElement)(element) //zsviczian\n ) {\n context.scale(elementWithCanvas.element.scale[0], elementWithCanvas.element.scale[1]);\n } // revert afterwards we don't have account for it during drawing\n\n\n context.translate(-cx, -cy);\n context.drawImage(elementWithCanvas.canvas, (x1 + appState.scrollX) * window.devicePixelRatio - padding * elementWithCanvas.scale / elementWithCanvas.scale, (y1 + appState.scrollY) * window.devicePixelRatio - padding * elementWithCanvas.scale / elementWithCanvas.scale, elementWithCanvas.canvas.width / elementWithCanvas.scale, elementWithCanvas.canvas.height / elementWithCanvas.scale);\n\n if (false) {}\n }\n\n context.restore(); // Clear the nested element we appended to the DOM\n};\n\nconst renderSelectionElement = (element, context, appState, selectionColor) => {\n context.save();\n context.translate(element.x + appState.scrollX, element.y + appState.scrollY);\n context.fillStyle = \"rgba(0, 0, 200, 0.04)\"; // render from 0.5px offset to get 1px wide line\n // https://stackoverflow.com/questions/7530593/html5-canvas-and-line-width/7531540#7531540\n // TODO can be be improved by offseting to the negative when user selects\n // from right to left\n\n const offset = 0.5 / appState.zoom.value;\n context.fillRect(offset, offset, element.width, element.height);\n context.lineWidth = 1 / appState.zoom.value;\n context.strokeStyle = selectionColor;\n context.strokeRect(offset, offset, element.width, element.height);\n context.restore();\n};\nconst renderElement = (element, elementsMap, allElementsMap, rc, context, renderConfig, appState) => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;\n\n context.globalAlpha = getRenderOpacity(element, (0,_frame__WEBPACK_IMPORTED_MODULE_11__.getContainingFrame)(element, elementsMap), renderConfig.elementsPendingErasure);\n\n switch (element.type) {\n case \"magicframe\":\n case \"frame\":\n {\n if (appState.frameRendering.enabled && appState.frameRendering.outline) {\n context.save();\n context.translate(element.x + appState.scrollX, element.y + appState.scrollY);\n context.fillStyle = (_e = (_c = (_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.frameColor) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = appState === null || appState === void 0 ? void 0 : appState.frameColor) === null || _d === void 0 ? void 0 : _d.fill) !== null && _e !== void 0 ? _e : \"rgba(0, 0, 200, 0.04)\"; //zsviczian\n\n context.lineWidth = _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.strokeWidth / appState.zoom.value;\n context.strokeStyle = (_k = (_h = (_g = (_f = element.customData) === null || _f === void 0 ? void 0 : _f.frameColor) === null || _g === void 0 ? void 0 : _g.stroke) !== null && _h !== void 0 ? _h : (_j = appState === null || appState === void 0 ? void 0 : appState.frameColor) === null || _j === void 0 ? void 0 : _j.stroke) !== null && _k !== void 0 ? _k : _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.strokeColor; //zsviczian\n // TODO change later to only affect AI frames\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isMagicFrameElement)(element)) {\n context.strokeStyle = appState.theme === _constants__WEBPACK_IMPORTED_MODULE_6__.THEME.LIGHT ? \"#7affd7\" : \"#1d8264\";\n }\n\n if (_constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.radius && context.roundRect) {\n context.beginPath();\n context.roundRect(0, 0, element.width, element.height, _constants__WEBPACK_IMPORTED_MODULE_6__.FRAME_STYLE.radius / appState.zoom.value);\n context.stroke();\n context.closePath();\n } else {\n context.strokeRect(0, 0, element.width, element.height);\n }\n\n context.restore();\n }\n\n break;\n }\n\n case \"freedraw\":\n {\n // TODO investigate if we can do this in situ. Right now we need to call\n // beforehand because math helpers (such as getElementAbsoluteCoords)\n // rely on existing shapes\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_12__.ShapeCache.generateElementShape(element, null);\n\n if (renderConfig.isExporting) {\n const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2 + appState.scrollX;\n const cy = (y1 + y2) / 2 + appState.scrollY;\n const shiftX = (x2 - x1) / 2 - (element.x - x1);\n const shiftY = (y2 - y1) / 2 - (element.y - y1);\n context.save();\n context.translate(cx, cy);\n context.rotate(element.angle);\n context.translate(-shiftX, -shiftY);\n drawElementOnCanvas(element, rc, context, renderConfig, appState);\n context.restore();\n } else {\n const elementWithCanvas = generateElementWithCanvas(element, allElementsMap, renderConfig, appState);\n drawElementFromCanvas(elementWithCanvas, context, renderConfig, appState, allElementsMap);\n }\n\n break;\n }\n\n case \"rectangle\":\n case \"diamond\":\n case \"ellipse\":\n case \"line\":\n case \"arrow\":\n case \"image\":\n case \"text\":\n case \"iframe\":\n case \"embeddable\":\n {\n // TODO investigate if we can do this in situ. Right now we need to call\n // beforehand because math helpers (such as getElementAbsoluteCoords)\n // rely on existing shapes\n _scene_ShapeCache__WEBPACK_IMPORTED_MODULE_12__.ShapeCache.generateElementShape(element, renderConfig);\n\n if (renderConfig.isExporting) {\n const [x1, y1, x2, y2] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element, elementsMap);\n const cx = (x1 + x2) / 2 + appState.scrollX;\n const cy = (y1 + y2) / 2 + appState.scrollY;\n let shiftX = (x2 - x1) / 2 - (element.x - x1);\n let shiftY = (y2 - y1) / 2 - (element.y - y1);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isTextElement)(element)) {\n const container = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getContainerElement)(element, elementsMap);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isArrowElement)(container)) {\n const boundTextCoords = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_9__.LinearElementEditor.getBoundTextElementPosition(container, element, elementsMap);\n shiftX = (x2 - x1) / 2 - (boundTextCoords.x - x1);\n shiftY = (y2 - y1) / 2 - (boundTextCoords.y - y1);\n }\n }\n\n context.save();\n context.translate(cx, cy);\n\n if (shouldResetImageFilter(element, renderConfig, appState)) {\n context.filter = \"none\";\n }\n\n const boundTextElement = (0,_element_textElement__WEBPACK_IMPORTED_MODULE_8__.getBoundTextElement)(element, elementsMap);\n\n if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_0__.isArrowElement)(element) && boundTextElement) {\n const tempCanvas = document.createElement(\"canvas\");\n const tempCanvasContext = tempCanvas.getContext(\"2d\"); // Take max dimensions of arrow canvas so that when canvas is rotated\n // the arrow doesn't get clipped\n\n const maxDim = Math.max((0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(x1, x2), (0,_utils__WEBPACK_IMPORTED_MODULE_2__.distance)(y1, y2));\n const padding = getCanvasPadding(element);\n tempCanvas.width = maxDim * appState.exportScale + padding * 10 * appState.exportScale;\n tempCanvas.height = maxDim * appState.exportScale + padding * 10 * appState.exportScale;\n tempCanvasContext.translate(tempCanvas.width / 2, tempCanvas.height / 2);\n tempCanvasContext.scale(appState.exportScale, appState.exportScale); // Shift the canvas to left most point of the arrow\n\n shiftX = element.width / 2 - (element.x - x1);\n shiftY = element.height / 2 - (element.y - y1);\n tempCanvasContext.rotate(element.angle);\n const tempRc = roughjs_bin_rough__WEBPACK_IMPORTED_MODULE_4__[\"default\"].canvas(tempCanvas);\n tempCanvasContext.translate(-shiftX, -shiftY);\n drawElementOnCanvas(element, tempRc, tempCanvasContext, renderConfig, appState);\n tempCanvasContext.translate(shiftX, shiftY);\n tempCanvasContext.rotate(-element.angle); // Shift the canvas to center of bound text\n\n const [,,,, boundTextCx, boundTextCy] = (0,_element_bounds__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(boundTextElement, elementsMap);\n const boundTextShiftX = (x1 + x2) / 2 - boundTextCx;\n const boundTextShiftY = (y1 + y2) / 2 - boundTextCy;\n tempCanvasContext.translate(-boundTextShiftX, -boundTextShiftY); // Clear the bound text area\n\n tempCanvasContext.clearRect(-boundTextElement.width / 2, -boundTextElement.height / 2, boundTextElement.width, boundTextElement.height);\n context.scale(1 / appState.exportScale, 1 / appState.exportScale);\n context.drawImage(tempCanvas, -tempCanvas.width / 2, -tempCanvas.height / 2, tempCanvas.width, tempCanvas.height);\n } else {\n context.rotate(element.angle);\n\n if (element.type === \"image\") {\n // note: scale must be applied *after* rotating\n context.scale(element.scale[0], element.scale[1]);\n }\n\n context.translate(-shiftX, -shiftY);\n drawElementOnCanvas(element, rc, context, renderConfig, appState);\n }\n\n context.restore(); // not exporting → optimized rendering (cache & render from element\n // canvases)\n } else {\n const elementWithCanvas = generateElementWithCanvas(element, allElementsMap, renderConfig, appState);\n const currentImageSmoothingStatus = context.imageSmoothingEnabled;\n\n if ( // do not disable smoothing during zoom as blurry shapes look better\n // on low resolution (while still zooming in) than sharp ones\n !(appState === null || appState === void 0 ? void 0 : appState.shouldCacheIgnoreZoom) && ( // angle is 0 -> always disable smoothing\n !element.angle || // or check if angle is a right angle in which case we can still\n // disable smoothing without adversely affecting the result\n (0,_math__WEBPACK_IMPORTED_MODULE_3__.isRightAngle)(element.angle))) {\n // Disabling smoothing makes output much sharper, especially for\n // text. Unless for non-right angles, where the aliasing is really\n // terrible on Chromium.\n //\n // Note that `context.imageSmoothingQuality=\"high\"` has almost\n // zero effect.\n //\n context.imageSmoothingEnabled = false;\n }\n\n drawElementFromCanvas(elementWithCanvas, context, renderConfig, appState, allElementsMap); // reset\n\n context.imageSmoothingEnabled = currentImageSmoothingStatus;\n }\n\n break;\n }\n\n default:\n {\n // @ts-ignore\n throw new Error(`Unimplemented type ${element.type}`);\n }\n }\n\n context.globalAlpha = 1;\n};\nconst pathsCache = new WeakMap([]);\nfunction generateFreeDrawShape(element) {\n const svgPathData = getFreeDrawSvgPath(element);\n const path = new Path2D(svgPathData);\n pathsCache.set(element, path);\n return path;\n}\nfunction getFreeDrawPath2D(element) {\n return pathsCache.get(element);\n}\nfunction getFreeDrawSvgPath(element) {\n var _a, _b, _c, _d, _e, _f, _g, _h; // If input points are empty (should they ever be?) return a dot\n\n\n const inputPoints = element.simulatePressure ? element.points : element.points.length ? element.points.map(([x, y], i) => [x, y, element.pressures[i]]) : [[0, 0, 0.5]]; // Consider changing the options for simulated pressure vs real pressure\n\n const customOptions = (_b = (_a = element.customData) === null || _a === void 0 ? void 0 : _a.strokeOptions) === null || _b === void 0 ? void 0 : _b.options; //zsviczian\n\n const options = customOptions //zsviczian\n ? Object.assign(Object.assign(Object.assign(Object.assign({}, customOptions), {\n simulatePressure: (_c = customOptions.simulatePressure) !== null && _c !== void 0 ? _c : element.simulatePressure,\n size: element.strokeWidth * 4.25,\n last: !!element.lastCommittedPoint,\n easing: (_d = _easingFunctions__WEBPACK_IMPORTED_MODULE_10__[\"default\"][customOptions.easing]) !== null && _d !== void 0 ? _d : t => t\n }), ((_e = customOptions.start) === null || _e === void 0 ? void 0 : _e.easing) ? {\n start: Object.assign(Object.assign({}, customOptions.start), {\n easing: (_f = _easingFunctions__WEBPACK_IMPORTED_MODULE_10__[\"default\"][customOptions.start.easing]) !== null && _f !== void 0 ? _f : t => t\n })\n } : {\n start: customOptions.start\n }), ((_g = customOptions.end) === null || _g === void 0 ? void 0 : _g.easing) ? {\n end: Object.assign(Object.assign({}, customOptions.end), {\n easing: (_h = _easingFunctions__WEBPACK_IMPORTED_MODULE_10__[\"default\"][customOptions.end.easing]) !== null && _h !== void 0 ? _h : t => t\n })\n } : {\n end: customOptions.end\n }) : {\n simulatePressure: element.simulatePressure,\n size: element.strokeWidth * 4.25,\n thinning: 0.6,\n smoothing: 0.5,\n streamline: 0.5,\n easing: _easingFunctions__WEBPACK_IMPORTED_MODULE_10__[\"default\"].easeOutSine,\n last: !!element.lastCommittedPoint // LastCommittedPoint is added on pointerup\n\n };\n return getSvgPathFromStroke((0,perfect_freehand__WEBPACK_IMPORTED_MODULE_7__.getStroke)(inputPoints, options));\n}\n\nfunction med(A, B) {\n return [(A[0] + B[0]) / 2, (A[1] + B[1]) / 2];\n} // Trim SVG path data so number are each two decimal points. This\n// improves SVG exports, and prevents rendering errors on points\n// with long decimals.\n\n\nconst TO_FIXED_PRECISION = /(\\s?[A-Z]?,?-?[0-9]*\\.[0-9]{0,2})(([0-9]|e|-)*)/g;\n\nfunction getSvgPathFromStroke(points) {\n if (!points.length) {\n return \"\";\n }\n\n const max = points.length - 1;\n return points.reduce((acc, point, i, arr) => {\n if (i === max) {\n acc.push(point, med(point, arr[0]), \"L\", arr[0], \"Z\");\n } else {\n acc.push(point, med(point, arr[i + 1]));\n }\n\n return acc;\n }, [\"M\", points[0], \"Q\"]).join(\" \").replace(TO_FIXED_PRECISION, \"$1\");\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./renderer/renderElement.ts?");
3294
3294
 
3295
3295
  /***/ }),
3296
3296