@zsviczian/excalidraw 0.15.3-obsidian → 0.15.3-obsidian-1

package/dist/excalidraw.development.js

@@ -2127,7 +2127,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"trackEvent\": () => (/* binding */ trackEvent)\n/* harmony export */ });\nconst trackEvent = (category, action, label, value) => {\n  try {\n    // place here categories that you want to track as events\n    // KEEP IN MIND THE PRICING\n    const ALLOWED_CATEGORIES_TO_TRACK = []; // Uncomment the next line to track locally\n    // console.log(\"Track Event\", { category, action, label, value });\n\n    if (typeof window === \"undefined\" || ({\"VITE_APP_BACKEND_V2_GET_URL\":\"https://json-dev.excalidraw.com/api/v2/\",\"VITE_APP_BACKEND_V2_POST_URL\":\"https://json-dev.excalidraw.com/api/v2/post/\",\"VITE_APP_LIBRARY_URL\":\"https://libraries.excalidraw.com\",\"VITE_APP_LIBRARY_BACKEND\":\"https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries\",\"VITE_APP_WS_SERVER_URL\":\"http://localhost:3002\",\"VITE_APP_PORTAL_URL\":\"\",\"VITE_APP_FIREBASE_CONFIG\":\"{\\\"apiKey\\\":\\\"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8\\\",\\\"authDomain\\\":\\\"excalidraw-oss-dev.firebaseapp.com\\\",\\\"projectId\\\":\\\"excalidraw-oss-dev\\\",\\\"storageBucket\\\":\\\"excalidraw-oss-dev.appspot.com\\\",\\\"messagingSenderId\\\":\\\"664559512677\\\",\\\"appId\\\":\\\"1:664559512677:web:a385181f2928d328a7aa8c\\\"}\",\"VITE_APP_DEV_ENABLE_SW\":\"\",\"VITE_APP_DEV_DISABLE_LIVE_RELOAD\":\"\",\"VITE_APP_DISABLE_TRACKING\":\"true\",\"FAST_REFRESH\":\"false\",\"VITE_APP_PORT\":\"3000\",\"VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX\":\"\",\"VITE_APP_COLLAPSE_OVERLAY\":\"true\",\"VITE_APP_ENABLE_ESLINT\":\"true\",\"VITE_PKG_NAME\":\"@zsviczian/excalidraw\",\"VITE_PKG_VERSION\":\"0.15.3-obsidian\",\"VITE_IS_EXCALIDRAW_NPM_PACKAGE\":true}).VITE_WORKER_ID) {\n      return;\n    }\n\n    if (!ALLOWED_CATEGORIES_TO_TRACK.includes(category)) {\n      return;\n    }\n\n    if (window.sa_event) {\n      window.sa_event(action, {\n        category,\n        label,\n        value\n      });\n    }\n  } catch (error) {\n    console.error(\"error during analytics\", error);\n  }\n};\n\n//# sourceURL=webpack://ExcalidrawLib/../../analytics.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"trackEvent\": () => (/* binding */ trackEvent)\n/* harmony export */ });\nconst trackEvent = (category, action, label, value) => {\n  try {\n    // place here categories that you want to track as events\n    // KEEP IN MIND THE PRICING\n    const ALLOWED_CATEGORIES_TO_TRACK = []; // Uncomment the next line to track locally\n    // console.log(\"Track Event\", { category, action, label, value });\n\n    if (typeof window === \"undefined\" || ({\"VITE_APP_BACKEND_V2_GET_URL\":\"https://json-dev.excalidraw.com/api/v2/\",\"VITE_APP_BACKEND_V2_POST_URL\":\"https://json-dev.excalidraw.com/api/v2/post/\",\"VITE_APP_LIBRARY_URL\":\"https://libraries.excalidraw.com\",\"VITE_APP_LIBRARY_BACKEND\":\"https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries\",\"VITE_APP_WS_SERVER_URL\":\"http://localhost:3002\",\"VITE_APP_PORTAL_URL\":\"\",\"VITE_APP_FIREBASE_CONFIG\":\"{\\\"apiKey\\\":\\\"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8\\\",\\\"authDomain\\\":\\\"excalidraw-oss-dev.firebaseapp.com\\\",\\\"projectId\\\":\\\"excalidraw-oss-dev\\\",\\\"storageBucket\\\":\\\"excalidraw-oss-dev.appspot.com\\\",\\\"messagingSenderId\\\":\\\"664559512677\\\",\\\"appId\\\":\\\"1:664559512677:web:a385181f2928d328a7aa8c\\\"}\",\"VITE_APP_DEV_ENABLE_SW\":\"\",\"VITE_APP_DEV_DISABLE_LIVE_RELOAD\":\"\",\"VITE_APP_DISABLE_TRACKING\":\"true\",\"FAST_REFRESH\":\"false\",\"VITE_APP_PORT\":\"3000\",\"VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX\":\"\",\"VITE_APP_COLLAPSE_OVERLAY\":\"true\",\"VITE_APP_ENABLE_ESLINT\":\"true\",\"VITE_PKG_NAME\":\"@zsviczian/excalidraw\",\"VITE_PKG_VERSION\":\"0.15.3-obsidian-1\",\"VITE_IS_EXCALIDRAW_NPM_PACKAGE\":true}).VITE_WORKER_ID) {\n      return;\n    }\n\n    if (!ALLOWED_CATEGORIES_TO_TRACK.includes(category)) {\n      return;\n    }\n\n    if (window.sa_event) {\n      window.sa_event(action, {\n        category,\n        label,\n        value\n      });\n    }\n  } catch (error) {\n    console.error(\"error during analytics\", error);\n  }\n};\n\n//# sourceURL=webpack://ExcalidrawLib/../../analytics.ts?");
 
 /***/ }),
 
@@ -3953,7 +3953,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../constants */ \"../../constants.ts\");\n\n\nif (\"development\" !== _constants__WEBPACK_IMPORTED_MODULE_0__.ENV.TEST) {\n  /* eslint-disable */\n\n  /* global __webpack_public_path__:writable */\n  __webpack_require__.p = window.EXCALIDRAW_ASSET_PATH || `https://unpkg.com/${\"@zsviczian/excalidraw\"}@${\"0.15.3-obsidian\"}/dist/`;\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./publicPath.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../constants */ \"../../constants.ts\");\n\n\nif (\"development\" !== _constants__WEBPACK_IMPORTED_MODULE_0__.ENV.TEST) {\n  /* eslint-disable */\n\n  /* global __webpack_public_path__:writable */\n  __webpack_require__.p = window.EXCALIDRAW_ASSET_PATH || `https://unpkg.com/${\"@zsviczian/excalidraw\"}@${\"0.15.3-obsidian-1\"}/dist/`;\n}\n\n//# sourceURL=webpack://ExcalidrawLib/./publicPath.js?");
 
 /***/ }),
 
@@ -4030,7 +4030,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"DEFAULT_SPACING\": () => (/* binding */ DEFAULT_SPACING),\n/* harmony export */   \"cancelRender\": () => (/* binding */ cancelRender),\n/* harmony export */   \"renderInteractiveScene\": () => (/* binding */ renderInteractiveScene),\n/* harmony export */   \"renderSceneToSvg\": () => (/* binding */ renderSceneToSvg),\n/* harmony export */   \"renderStaticScene\": () => (/* binding */ renderStaticScene)\n/* harmony export */ });\n/* harmony import */ var open_color__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! open-color */ \"../../../node_modules/open-color/open-color.json\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element */ \"../../element/index.ts\");\n/* harmony import */ var _roundRect__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./roundRect */ \"../../renderer/roundRect.ts\");\n/* harmony import */ var _scene_scrollbars__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../scene/scrollbars */ \"../../scene/scrollbars.ts\");\n/* harmony import */ var _renderElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./renderElement */ \"../../renderer/renderElement.ts\");\n/* harmony import */ var _clients__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../clients */ \"../../clients.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/linearElementEditor */ \"../../element/linearElementEditor.ts\");\n/* harmony import */ var _groups__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../groups */ \"../../groups.ts\");\n/* harmony import */ var _element_collision__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../element/collision */ \"../../element/collision.ts\");\n/* harmony import */ var _element_transformHandles__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../element/transformHandles */ \"../../element/transformHandles.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../utils */ \"../../utils.ts\");\n/* harmony import */ var _types__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../types */ \"../../types.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../constants */ \"../../constants.ts\");\n/* harmony import */ var _element_Hyperlink__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../element/Hyperlink */ \"../../element/Hyperlink.tsx\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../element/typeChecks */ \"../../element/typeChecks.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../element/embeddable */ \"../../element/embeddable.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../frame */ \"../../frame.ts\");\n/* harmony import */ var canvas_roundrect_polyfill__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! canvas-roundrect-polyfill */ \"../../../node_modules/canvas-roundrect-polyfill/roundRect.js\");\n/* harmony import */ var canvas_roundrect_polyfill__WEBPACK_IMPORTED_MODULE_17___default = /*#__PURE__*/__webpack_require__.n(canvas_roundrect_polyfill__WEBPACK_IMPORTED_MODULE_17__);\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst DEFAULT_SPACING = 2;\n\nconst strokeRectWithRotation = (context, x, y, width, height, cx, cy, angle, fill = false,\n/** should account for zoom */\nradius = 0) => {\n  context.save();\n  context.translate(cx, cy);\n  context.rotate(angle);\n\n  if (fill) {\n    context.fillRect(x - cx, y - cy, width, height);\n  }\n\n  if (radius && context.roundRect) {\n    context.beginPath();\n    context.roundRect(x - cx, y - cy, width, height, radius);\n    context.stroke();\n    context.closePath();\n  } else {\n    context.strokeRect(x - cx, y - cy, width, height);\n  }\n\n  context.restore();\n};\n\nconst strokeDiamondWithRotation = (context, width, height, cx, cy, angle) => {\n  context.save();\n  context.translate(cx, cy);\n  context.rotate(angle);\n  context.beginPath();\n  context.moveTo(0, height / 2);\n  context.lineTo(width / 2, 0);\n  context.lineTo(0, -height / 2);\n  context.lineTo(-width / 2, 0);\n  context.closePath();\n  context.stroke();\n  context.restore();\n};\n\nconst strokeEllipseWithRotation = (context, width, height, cx, cy, angle) => {\n  context.beginPath();\n  context.ellipse(cx, cy, width / 2, height / 2, angle, 0, Math.PI * 2);\n  context.stroke();\n};\n\nconst fillCircle = (context, cx, cy, radius, stroke = true) => {\n  context.beginPath();\n  context.arc(cx, cy, radius, 0, Math.PI * 2);\n  context.fill();\n\n  if (stroke) {\n    context.stroke();\n  }\n};\n\nconst strokeGrid = (context, gridSize, scrollX, scrollY, zoom, width, height, GridLineColor) => {\n  const BOLD_LINE_FREQUENCY = 5;\n  /*enum GridLineColor {\r\n    Bold = \"#cccccc\",\r\n    Regular = \"#e5e5e5\",\r\n  }*/\n\n  const offsetX = -Math.round(zoom.value / gridSize) * gridSize + scrollX % gridSize;\n  const offsetY = -Math.round(zoom.value / gridSize) * gridSize + scrollY % gridSize;\n  const lineWidth = Math.min(1 / zoom.value, 1);\n  const spaceWidth = 1 / zoom.value;\n  const lineDash = [lineWidth * 3, spaceWidth + (lineWidth + spaceWidth)];\n  context.save();\n  context.lineWidth = lineWidth;\n\n  for (let x = offsetX; x < offsetX + width + gridSize * 2; x += gridSize) {\n    const isBold = Math.round(x - scrollX) % (BOLD_LINE_FREQUENCY * gridSize) === 0;\n    context.beginPath();\n    context.setLineDash(isBold ? [] : lineDash);\n    context.strokeStyle = isBold ? GridLineColor.Bold : GridLineColor.Regular;\n    context.moveTo(x, offsetY - gridSize);\n    context.lineTo(x, offsetY + height + gridSize * 2);\n    context.stroke();\n  }\n\n  for (let y = offsetY; y < offsetY + height + gridSize * 2; y += gridSize) {\n    const isBold = Math.round(y - scrollY) % (BOLD_LINE_FREQUENCY * gridSize) === 0;\n    context.beginPath();\n    context.setLineDash(isBold ? [] : lineDash);\n    context.strokeStyle = isBold ? GridLineColor.Bold : GridLineColor.Regular;\n    context.moveTo(offsetX - gridSize, y);\n    context.lineTo(offsetX + width + gridSize * 2, y);\n    context.stroke();\n  }\n\n  context.restore();\n};\n\nconst renderSingleLinearPoint = (context, appState, point, radius, isSelected, isPhantomPoint = false) => {\n  context.strokeStyle = \"#5e5ad8\";\n  context.setLineDash([]);\n  context.fillStyle = \"rgba(255, 255, 255, 0.9)\";\n\n  if (isSelected) {\n    context.fillStyle = \"rgba(134, 131, 226, 0.9)\";\n  } else if (isPhantomPoint) {\n    context.fillStyle = \"rgba(177, 151, 252, 0.7)\";\n  }\n\n  fillCircle(context, point[0], point[1], radius / appState.zoom.value, !isPhantomPoint);\n};\n\nconst renderLinearPointHandles = (context, appState, element) => {\n  if (!appState.selectedLinearElement) {\n    return;\n  }\n\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  context.lineWidth = 1 / appState.zoom.value;\n  const points = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getPointsGlobalCoordinates(element);\n  const {\n    POINT_HANDLE_SIZE\n  } = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor;\n  const radius = appState.editingLinearElement ? POINT_HANDLE_SIZE : POINT_HANDLE_SIZE / 2;\n  points.forEach((point, idx) => {\n    var _a, _b;\n\n    const isSelected = !!((_b = (_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.selectedPointsIndices) === null || _b === void 0 ? void 0 : _b.includes(idx));\n    renderSingleLinearPoint(context, appState, point, radius, isSelected);\n  }); //Rendering segment mid points\n\n  const midPoints = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getEditorMidPoints(element, appState).filter(midPoint => midPoint !== null);\n  midPoints.forEach(segmentMidPoint => {\n    var _a;\n\n    if (((_a = appState === null || appState === void 0 ? void 0 : appState.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.segmentMidPointHoveredCoords) && _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.arePointsEqual(segmentMidPoint, appState.selectedLinearElement.segmentMidPointHoveredCoords)) {\n      // The order of renderingSingleLinearPoint and highLight points is different\n      // inside vs outside editor as hover states are different,\n      // in editor when hovered the original point is not visible as hover state fully covers it whereas outside the\n      // editor original point is visible and hover state is just an outer circle.\n      if (appState.editingLinearElement) {\n        renderSingleLinearPoint(context, appState, segmentMidPoint, radius, false);\n        highlightPoint(segmentMidPoint, context, appState);\n      } else {\n        highlightPoint(segmentMidPoint, context, appState);\n        renderSingleLinearPoint(context, appState, segmentMidPoint, radius, false);\n      }\n    } else if (appState.editingLinearElement || points.length === 2) {\n      renderSingleLinearPoint(context, appState, segmentMidPoint, POINT_HANDLE_SIZE / 2, false, true);\n    }\n  });\n  context.restore();\n};\n\nconst highlightPoint = (point, context, appState) => {\n  context.fillStyle = \"rgba(105, 101, 219, 0.4)\";\n  fillCircle(context, point[0], point[1], _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.POINT_HANDLE_SIZE / appState.zoom.value, false);\n};\n\nconst renderLinearElementPointHighlight = (context, appState) => {\n  var _a, _b;\n\n  const {\n    elementId,\n    hoverPointIndex\n  } = appState.selectedLinearElement;\n\n  if ((_b = (_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.selectedPointsIndices) === null || _b === void 0 ? void 0 : _b.includes(hoverPointIndex)) {\n    return;\n  }\n\n  const element = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getElement(elementId);\n\n  if (!element) {\n    return;\n  }\n\n  const point = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getPointAtIndexGlobalCoordinates(element, hoverPointIndex);\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  highlightPoint(point, context, appState);\n  context.restore();\n};\n\nconst frameClip = (frame, context, renderConfig, appState) => {\n  context.translate(frame.x + appState.scrollX, frame.y + appState.scrollY);\n  context.beginPath();\n\n  if (context.roundRect && !renderConfig.isExporting) {\n    context.roundRect(0, 0, frame.width, frame.height, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.radius / appState.zoom.value);\n  } else {\n    context.rect(0, 0, frame.width, frame.height);\n  }\n\n  context.clip();\n  context.translate(-(frame.x + appState.scrollX), -(frame.y + appState.scrollY));\n};\n\nconst getNormalizedCanvasDimensions = (canvas, scale) => {\n  // When doing calculations based on canvas width we should used normalized one\n  return [canvas.width / scale, canvas.height / scale];\n};\n\nconst bootstrapCanvas = ({\n  canvas,\n  scale,\n  normalizedWidth,\n  normalizedHeight,\n  theme,\n  isExporting,\n  viewBackgroundColor\n}) => {\n  const context = canvas.getContext(\"2d\");\n  context.setTransform(1, 0, 0, 1, 0, 0);\n  context.scale(scale, scale);\n\n  if (isExporting && theme === \"dark\") {\n    context.filter = _constants__WEBPACK_IMPORTED_MODULE_12__.THEME_FILTER;\n  } // Paint background\n\n\n  if (typeof viewBackgroundColor === \"string\") {\n    const hasTransparence = viewBackgroundColor === \"transparent\" || viewBackgroundColor.length === 5 || // #RGBA\n    viewBackgroundColor.length === 9 || // #RRGGBBA\n    /(hsla|rgba)\\(/.test(viewBackgroundColor);\n\n    if (hasTransparence) {\n      context.clearRect(0, 0, normalizedWidth, normalizedHeight);\n    }\n\n    context.save();\n    context.fillStyle = viewBackgroundColor;\n    context.fillRect(0, 0, normalizedWidth, normalizedHeight);\n    context.restore();\n  } else {\n    context.clearRect(0, 0, normalizedWidth, normalizedHeight);\n  }\n\n  return context;\n};\n\nconst _renderInteractiveScene = ({\n  canvas,\n  elements,\n  visibleElements,\n  selectedElements,\n  scale,\n  appState,\n  renderConfig\n}) => {\n  var _a, _b;\n\n  if (canvas === null) {\n    return {\n      atLeastOneVisibleElement: false,\n      elements\n    };\n  }\n\n  const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(canvas, scale);\n  const context = bootstrapCanvas({\n    canvas,\n    scale,\n    normalizedWidth,\n    normalizedHeight\n  }); // Apply zoom\n\n  context.save();\n  context.scale(appState.zoom.value, appState.zoom.value);\n  let editingLinearElement = undefined;\n  visibleElements.forEach(element => {\n    var _a; // Getting the element using LinearElementEditor during collab mismatches version - being one head of visible elements due to\n    // ShapeCache returns empty hence making sure that we get the\n    // correct element from visible elements\n\n\n    if (((_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) === element.id) {\n      if (element) {\n        editingLinearElement = element;\n      }\n    }\n  });\n\n  if (editingLinearElement) {\n    renderLinearPointHandles(context, appState, editingLinearElement);\n  } // Paint selection element\n\n\n  if (appState.selectionElement) {\n    try {\n      (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderSelectionElement)(appState.selectionElement, context, appState);\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  if (appState.isBindingEnabled) {\n    appState.suggestedBindings.filter(binding => binding != null).forEach(suggestedBinding => {\n      renderBindingHighlight(context, appState, suggestedBinding);\n    });\n  }\n\n  if (appState.frameToHighlight) {\n    renderFrameHighlight(context, appState, appState.frameToHighlight);\n  }\n\n  if (appState.elementsToHighlight) {\n    renderElementsBoxHighlight(context, appState, appState.elementsToHighlight);\n  }\n\n  const isFrameSelected = selectedElements.some(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isFrameElement)(element)); // Getting the element using LinearElementEditor during collab mismatches version - being one head of visible elements due to\n  // ShapeCache returns empty hence making sure that we get the\n  // correct element from visible elements\n\n  if (selectedElements.length === 1 && ((_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) === selectedElements[0].id) {\n    renderLinearPointHandles(context, appState, selectedElements[0]);\n  }\n\n  if (appState.selectedLinearElement && appState.selectedLinearElement.hoverPointIndex >= 0) {\n    renderLinearElementPointHighlight(context, appState);\n  } // Paint selected elements\n\n\n  if (!appState.multiElement && !appState.editingLinearElement) {\n    const showBoundingBox = (0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_9__.shouldShowBoundingBox)(selectedElements, appState);\n    const isSingleLinearElementSelected = selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isLinearElement)(selectedElements[0]); // render selected linear element points\n\n    if (isSingleLinearElementSelected && ((_b = appState.selectedLinearElement) === null || _b === void 0 ? void 0 : _b.elementId) === selectedElements[0].id && !selectedElements[0].locked) {\n      renderLinearPointHandles(context, appState, selectedElements[0]);\n    }\n\n    const selectionColor = renderConfig.selectionColor || open_color__WEBPACK_IMPORTED_MODULE_0__.black;\n\n    if (showBoundingBox) {\n      // Optimisation for finding quickly relevant element ids\n      const locallySelectedIds = selectedElements.reduce((acc, element) => {\n        acc[element.id] = true;\n        return acc;\n      }, {});\n      const selections = elements.reduce((acc, element) => {\n        var _a;\n\n        const selectionColors = []; // local user\n\n        if (locallySelectedIds[element.id] && !(0,_groups__WEBPACK_IMPORTED_MODULE_7__.isSelectedViaGroup)(appState, element)) {\n          selectionColors.push(selectionColor);\n        } // remote users\n\n\n        if (renderConfig.remoteSelectedElementIds[element.id]) {\n          selectionColors.push(...renderConfig.remoteSelectedElementIds[element.id].map(socketId => {\n            const background = (0,_clients__WEBPACK_IMPORTED_MODULE_5__.getClientColor)(socketId);\n            return background;\n          }));\n        }\n\n        if (selectionColors.length) {\n          const [elementX1, elementY1, elementX2, elementY2, cx, cy] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element, true);\n          acc.push({\n            angle: element.angle,\n            elementX1,\n            elementY1,\n            elementX2,\n            elementY2,\n            selectionColors,\n            dashed: !!renderConfig.remoteSelectedElementIds[element.id],\n            cx,\n            cy,\n            activeEmbeddable: ((_a = appState.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.element) === element && appState.activeEmbeddable.state === \"active\"\n          });\n        }\n\n        return acc;\n      }, []);\n\n      const addSelectionForGroupId = groupId => {\n        const groupElements = (0,_groups__WEBPACK_IMPORTED_MODULE_7__.getElementsInGroup)(elements, groupId);\n        const [elementX1, elementY1, elementX2, elementY2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getCommonBounds)(groupElements);\n        selections.push({\n          angle: 0,\n          elementX1,\n          elementX2,\n          elementY1,\n          elementY2,\n          selectionColors: [open_color__WEBPACK_IMPORTED_MODULE_0__.black],\n          dashed: true,\n          cx: elementX1 + (elementX2 - elementX1) / 2,\n          cy: elementY1 + (elementY2 - elementY1) / 2,\n          activeEmbeddable: false\n        });\n      };\n\n      for (const groupId of (0,_groups__WEBPACK_IMPORTED_MODULE_7__.getSelectedGroupIds)(appState)) {\n        // TODO: support multiplayer selected group IDs\n        addSelectionForGroupId(groupId);\n      }\n\n      if (appState.editingGroupId) {\n        addSelectionForGroupId(appState.editingGroupId);\n      }\n\n      selections.forEach(selection => renderSelectionBorder(context, appState, selection));\n    } // Paint resize transformHandles\n\n\n    context.save();\n    context.translate(appState.scrollX, appState.scrollY);\n\n    if (selectedElements.length === 1) {\n      context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n      const transformHandles = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getTransformHandles)(selectedElements[0], appState.zoom, \"mouse\");\n\n      if (!appState.viewModeEnabled && showBoundingBox) {\n        renderTransformHandles(context, renderConfig, appState, transformHandles, selectedElements[0].angle);\n      }\n    } else if (selectedElements.length > 1 && !appState.isRotating) {\n      const dashedLinePadding = DEFAULT_SPACING * 2 / appState.zoom.value;\n      context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n      const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getCommonBounds)(selectedElements);\n      const initialLineDash = context.getLineDash();\n      context.setLineDash([2 / appState.zoom.value]);\n      const lineWidth = context.lineWidth;\n      context.lineWidth = 1 / appState.zoom.value;\n      context.strokeStyle = selectionColor;\n      strokeRectWithRotation(context, x1 - dashedLinePadding, y1 - dashedLinePadding, x2 - x1 + dashedLinePadding * 2, y2 - y1 + dashedLinePadding * 2, (x1 + x2) / 2, (y1 + y2) / 2, 0);\n      context.lineWidth = lineWidth;\n      context.setLineDash(initialLineDash);\n      const transformHandles = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getTransformHandlesFromCoords)([x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2], 0, appState.zoom, \"mouse\", isFrameSelected ? _element_transformHandles__WEBPACK_IMPORTED_MODULE_9__.OMIT_SIDES_FOR_FRAME : _element__WEBPACK_IMPORTED_MODULE_1__.OMIT_SIDES_FOR_MULTIPLE_ELEMENTS);\n\n      if (selectedElements.some(element => !element.locked)) {\n        renderTransformHandles(context, renderConfig, appState, transformHandles, 0);\n      }\n    }\n\n    context.restore();\n  } // Reset zoom\n\n\n  context.restore(); // Paint remote pointers\n\n  for (const clientId in renderConfig.remotePointerViewportCoords) {\n    let {\n      x,\n      y\n    } = renderConfig.remotePointerViewportCoords[clientId];\n    x -= appState.offsetLeft;\n    y -= appState.offsetTop;\n    const width = 11;\n    const height = 14;\n    const isOutOfBounds = x < 0 || x > normalizedWidth - width || y < 0 || y > normalizedHeight - height;\n    x = Math.max(x, 0);\n    x = Math.min(x, normalizedWidth - width);\n    y = Math.max(y, 0);\n    y = Math.min(y, normalizedHeight - height);\n    const background = (0,_clients__WEBPACK_IMPORTED_MODULE_5__.getClientColor)(clientId);\n    context.save();\n    context.strokeStyle = background;\n    context.fillStyle = background;\n    const userState = renderConfig.remotePointerUserStates[clientId];\n    const isInactive = isOutOfBounds || userState === _types__WEBPACK_IMPORTED_MODULE_11__.UserIdleState.IDLE || userState === _types__WEBPACK_IMPORTED_MODULE_11__.UserIdleState.AWAY;\n\n    if (isInactive) {\n      context.globalAlpha = 0.3;\n    }\n\n    if (renderConfig.remotePointerButton && renderConfig.remotePointerButton[clientId] === \"down\") {\n      context.beginPath();\n      context.arc(x, y, 15, 0, 2 * Math.PI, false);\n      context.lineWidth = 3;\n      context.strokeStyle = \"#ffffff88\";\n      context.stroke();\n      context.closePath();\n      context.beginPath();\n      context.arc(x, y, 15, 0, 2 * Math.PI, false);\n      context.lineWidth = 1;\n      context.strokeStyle = background;\n      context.stroke();\n      context.closePath();\n    } // Background (white outline) for arrow\n\n\n    context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n    context.strokeStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n    context.lineWidth = 6;\n    context.lineJoin = \"round\";\n    context.beginPath();\n    context.moveTo(x, y);\n    context.lineTo(x + 0, y + 14);\n    context.lineTo(x + 4, y + 9);\n    context.lineTo(x + 11, y + 8);\n    context.closePath();\n    context.stroke();\n    context.fill(); // Arrow\n\n    context.fillStyle = background;\n    context.strokeStyle = background;\n    context.lineWidth = 2;\n    context.lineJoin = \"round\";\n    context.beginPath();\n\n    if (isInactive) {\n      context.moveTo(x - 1, y - 1);\n      context.lineTo(x - 1, y + 15);\n      context.lineTo(x + 5, y + 10);\n      context.lineTo(x + 12, y + 9);\n      context.closePath();\n      context.fill();\n    } else {\n      context.moveTo(x, y);\n      context.lineTo(x + 0, y + 14);\n      context.lineTo(x + 4, y + 9);\n      context.lineTo(x + 11, y + 8);\n      context.closePath();\n      context.fill();\n      context.stroke();\n    }\n\n    const username = renderConfig.remotePointerUsernames[clientId] || \"\";\n\n    if (!isOutOfBounds && username) {\n      context.font = \"600 12px sans-serif\"; // font has to be set before context.measureText()\n\n      const offsetX = x + width / 2;\n      const offsetY = y + height + 2;\n      const paddingHorizontal = 5;\n      const paddingVertical = 3;\n      const measure = context.measureText(username);\n      const measureHeight = measure.actualBoundingBoxDescent + measure.actualBoundingBoxAscent;\n      const finalHeight = Math.max(measureHeight, 12);\n      const boxX = offsetX - 1;\n      const boxY = offsetY - 1;\n      const boxWidth = measure.width + 2 + paddingHorizontal * 2 + 2;\n      const boxHeight = finalHeight + 2 + paddingVertical * 2 + 2;\n\n      if (context.roundRect) {\n        context.beginPath();\n        context.roundRect(boxX, boxY, boxWidth, boxHeight, 8);\n        context.fillStyle = background;\n        context.fill();\n        context.strokeStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n        context.stroke();\n      } else {\n        (0,_roundRect__WEBPACK_IMPORTED_MODULE_2__.roundRect)(context, boxX, boxY, boxWidth, boxHeight, 8, open_color__WEBPACK_IMPORTED_MODULE_0__.white);\n      }\n\n      context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.black;\n      context.fillText(username, offsetX + paddingHorizontal + 1, offsetY + paddingVertical + measure.actualBoundingBoxAscent + Math.floor((finalHeight - measureHeight) / 2) + 2);\n    }\n\n    context.restore();\n    context.closePath();\n  } // Paint scrollbars\n\n\n  let scrollBars;\n\n  if (renderConfig.renderScrollbars) {\n    scrollBars = (0,_scene_scrollbars__WEBPACK_IMPORTED_MODULE_3__.getScrollBars)(elements, normalizedWidth, normalizedHeight, appState);\n    context.save();\n    context.fillStyle = _scene_scrollbars__WEBPACK_IMPORTED_MODULE_3__.SCROLLBAR_COLOR;\n    context.strokeStyle = \"rgba(255,255,255,0.8)\";\n    [scrollBars.horizontal, scrollBars.vertical].forEach(scrollBar => {\n      if (scrollBar) {\n        (0,_roundRect__WEBPACK_IMPORTED_MODULE_2__.roundRect)(context, scrollBar.x, scrollBar.y, scrollBar.width, scrollBar.height, _scene_scrollbars__WEBPACK_IMPORTED_MODULE_3__.SCROLLBAR_WIDTH / 2);\n      }\n    });\n    context.restore();\n  }\n\n  return {\n    scrollBars,\n    atLeastOneVisibleElement: visibleElements.length > 0,\n    elements\n  };\n};\n\nconst _renderStaticScene = ({\n  canvas,\n  rc,\n  elements,\n  visibleElements,\n  scale,\n  appState,\n  renderConfig\n}) => {\n  if (canvas === null) {\n    return;\n  }\n\n  const {\n    renderGrid = true,\n    isExporting\n  } = renderConfig;\n  const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(canvas, scale);\n  const context = bootstrapCanvas({\n    canvas,\n    scale,\n    normalizedWidth,\n    normalizedHeight,\n    theme: appState.theme,\n    isExporting,\n    viewBackgroundColor: appState.viewBackgroundColor\n  }); // Apply zoom\n\n  context.scale(appState.zoom.value, appState.zoom.value); // Grid\n\n  if (renderGrid && appState.gridSize) {\n    strokeGrid(context, appState.gridSize, appState.scrollX, appState.scrollY, appState.zoom, normalizedWidth / appState.zoom.value, normalizedHeight / appState.zoom.value, appState.gridColor);\n  }\n\n  const groupsToBeAddedToFrame = new Set();\n  visibleElements.forEach(element => {\n    if (element.groupIds.length > 0 && appState.frameToHighlight && appState.selectedElementIds[element.id] && ((0,_frame__WEBPACK_IMPORTED_MODULE_16__.elementOverlapsWithFrame)(element, appState.frameToHighlight) || element.groupIds.find(groupId => groupsToBeAddedToFrame.has(groupId)))) {\n      element.groupIds.forEach(groupId => groupsToBeAddedToFrame.add(groupId));\n    }\n  }); // Paint visible elements\n\n  visibleElements.filter(el => !(0,_element_embeddable__WEBPACK_IMPORTED_MODULE_15__.isEmbeddableOrFrameLabel)(el)).forEach(element => {\n    var _a;\n\n    try {\n      // - when exporting the whole canvas, we DO NOT apply clipping\n      // - when we are exporting a particular frame, apply clipping\n      //   if the containing frame is not selected, apply clipping\n      const frameId = element.frameId || ((_a = appState.frameToHighlight) === null || _a === void 0 ? void 0 : _a.id);\n\n      if (frameId && (renderConfig.isExporting && (0,_utils__WEBPACK_IMPORTED_MODULE_10__.isOnlyExportingSingleFrame)(elements) || !renderConfig.isExporting && appState.frameRendering.enabled && appState.frameRendering.clip)) {\n        context.save();\n        const frame = (0,_frame__WEBPACK_IMPORTED_MODULE_16__.getTargetFrame)(element, appState); // TODO do we need to check isElementInFrame here?\n\n        if (frame && (0,_frame__WEBPACK_IMPORTED_MODULE_16__.isElementInFrame)(element, elements, appState)) {\n          frameClip(frame, context, renderConfig, appState);\n        }\n\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElement)(element, rc, context, renderConfig, appState);\n        context.restore();\n      } else {\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElement)(element, rc, context, renderConfig, appState);\n      }\n\n      if (!isExporting) {\n        renderLinkIcon(element, context, appState);\n      }\n    } catch (error) {\n      console.error(error);\n    }\n  }); // render embeddables on top\n\n  visibleElements.filter(el => (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_15__.isEmbeddableOrFrameLabel)(el)).forEach(element => {\n    var _a;\n\n    try {\n      const render = () => {\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElement)(element, rc, context, renderConfig, appState);\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isEmbeddableElement)(element) && (isExporting || !element.validated) && element.width && element.height) {\n          const label = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_15__.createPlaceholderEmbeddableLabel)(element);\n          (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElement)(label, rc, context, renderConfig, appState);\n        }\n\n        if (!isExporting) {\n          renderLinkIcon(element, context, appState);\n        }\n      }; // - when exporting the whole canvas, we DO NOT apply clipping\n      // - when we are exporting a particular frame, apply clipping\n      //   if the containing frame is not selected, apply clipping\n\n\n      const frameId = element.frameId || ((_a = appState.frameToHighlight) === null || _a === void 0 ? void 0 : _a.id);\n\n      if (frameId && (renderConfig.isExporting && (0,_utils__WEBPACK_IMPORTED_MODULE_10__.isOnlyExportingSingleFrame)(elements) || !renderConfig.isExporting && appState.frameRendering.enabled && appState.frameRendering.clip)) {\n        context.save();\n        const frame = (0,_frame__WEBPACK_IMPORTED_MODULE_16__.getTargetFrame)(element, appState);\n\n        if (frame && (0,_frame__WEBPACK_IMPORTED_MODULE_16__.isElementInFrame)(element, elements, appState)) {\n          frameClip(frame, context, renderConfig, appState);\n        }\n\n        render();\n        context.restore();\n      } else {\n        render();\n      }\n    } catch (error) {\n      console.error(error);\n    }\n  });\n};\n/** throttled to animation framerate */\n\n\nconst renderInteractiveSceneThrottled = (0,_utils__WEBPACK_IMPORTED_MODULE_10__.throttleRAF)(config => {\n  var _a;\n\n  const ret = _renderInteractiveScene(config);\n\n  (_a = config.callback) === null || _a === void 0 ? void 0 : _a.call(config, ret);\n}, {\n  trailing: true\n});\n/**\r\n * Interactive scene is the ui-canvas where we render boundinb boxes, selections\r\n * and other ui stuff.\r\n */\n\nconst renderInteractiveScene = (renderConfig, throttle) => {\n  if (throttle) {\n    renderInteractiveSceneThrottled(renderConfig);\n    return undefined;\n  }\n\n  const ret = _renderInteractiveScene(renderConfig);\n\n  renderConfig.callback(ret);\n  return ret;\n};\n/** throttled to animation framerate */\n\nconst renderStaticSceneThrottled = (0,_utils__WEBPACK_IMPORTED_MODULE_10__.throttleRAF)(config => {\n  _renderStaticScene(config);\n}, {\n  trailing: true\n});\n/**\r\n * Static scene is the non-ui canvas where we render elements.\r\n */\n\nconst renderStaticScene = (renderConfig, throttle) => {\n  if (throttle) {\n    renderStaticSceneThrottled(renderConfig);\n    return;\n  }\n\n  _renderStaticScene(renderConfig);\n};\nconst cancelRender = () => {\n  renderInteractiveSceneThrottled.cancel();\n  renderStaticSceneThrottled.cancel();\n};\n\nconst renderTransformHandles = (context, renderConfig, appState, transformHandles, angle) => {\n  Object.keys(transformHandles).forEach(key => {\n    const transformHandle = transformHandles[key];\n\n    if (transformHandle !== undefined) {\n      const [x, y, width, height] = transformHandle;\n      context.save();\n      context.lineWidth = 1 / appState.zoom.value;\n\n      if (renderConfig.selectionColor) {\n        context.strokeStyle = renderConfig.selectionColor;\n      }\n\n      if (key === \"rotation\") {\n        fillCircle(context, x + width / 2, y + height / 2, width / 2); // prefer round corners if roundRect API is available\n      } else if (context.roundRect) {\n        context.beginPath();\n        context.roundRect(x, y, width, height, 2 / appState.zoom.value);\n        context.fill();\n        context.stroke();\n      } else {\n        strokeRectWithRotation(context, x, y, width, height, x + width / 2, y + height / 2, angle, true);\n      }\n\n      context.restore();\n    }\n  });\n};\n\nconst renderSelectionBorder = (context, appState, elementProperties, padding = DEFAULT_SPACING * 2) => {\n  const {\n    angle,\n    elementX1,\n    elementY1,\n    elementX2,\n    elementY2,\n    selectionColors,\n    cx,\n    cy,\n    dashed,\n    activeEmbeddable\n  } = elementProperties;\n  const elementWidth = elementX2 - elementX1;\n  const elementHeight = elementY2 - elementY1;\n  const linePadding = padding / appState.zoom.value;\n  const lineWidth = 8 / appState.zoom.value;\n  const spaceWidth = 4 / appState.zoom.value;\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  context.lineWidth = (activeEmbeddable ? 4 : 1) / appState.zoom.value;\n  const count = selectionColors.length;\n\n  for (let index = 0; index < count; ++index) {\n    context.strokeStyle = selectionColors[index];\n\n    if (dashed) {\n      context.setLineDash([lineWidth, spaceWidth + (lineWidth + spaceWidth) * (count - 1)]);\n    }\n\n    context.lineDashOffset = (lineWidth + spaceWidth) * index;\n    strokeRectWithRotation(context, elementX1 - linePadding, elementY1 - linePadding, elementWidth + linePadding * 2, elementHeight + linePadding * 2, cx, cy, angle);\n  }\n\n  context.restore();\n};\n\nconst renderBindingHighlight = (context, appState, suggestedBinding) => {\n  const renderHighlight = Array.isArray(suggestedBinding) ? renderBindingHighlightForSuggestedPointBinding : renderBindingHighlightForBindableElement;\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  renderHighlight(context, suggestedBinding);\n  context.restore();\n};\n\nconst renderBindingHighlightForBindableElement = (context, element) => {\n  const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element);\n  const width = x2 - x1;\n  const height = y2 - y1;\n  const threshold = (0,_element_collision__WEBPACK_IMPORTED_MODULE_8__.maxBindingGap)(element, width, height); // So that we don't overlap the element itself\n\n  const strokeOffset = 4;\n  context.strokeStyle = \"rgba(128,128,128,.1)\"; //zsviczian\n\n  context.lineWidth = threshold - strokeOffset;\n  const padding = strokeOffset / 2 + threshold / 2;\n\n  switch (element.type) {\n    case \"rectangle\":\n    case \"text\":\n    case \"image\":\n    case \"embeddable\":\n    case \"frame\":\n      strokeRectWithRotation(context, x1 - padding, y1 - padding, width + padding * 2, height + padding * 2, x1 + width / 2, y1 + height / 2, element.angle);\n      break;\n\n    case \"diamond\":\n      const side = Math.hypot(width, height);\n      const wPadding = padding * side / height;\n      const hPadding = padding * side / width;\n      strokeDiamondWithRotation(context, width + wPadding * 2, height + hPadding * 2, x1 + width / 2, y1 + height / 2, element.angle);\n      break;\n\n    case \"ellipse\":\n      strokeEllipseWithRotation(context, width + padding * 2, height + padding * 2, x1 + width / 2, y1 + height / 2, element.angle);\n      break;\n  }\n};\n\nconst renderFrameHighlight = (context, appState, frame) => {\n  const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(frame);\n  const width = x2 - x1;\n  const height = y2 - y1;\n  context.strokeStyle = \"rgb(0,118,255)\";\n  context.lineWidth = _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.strokeWidth * 2 / appState.zoom.value;\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  strokeRectWithRotation(context, x1, y1, width, height, x1 + width / 2, y1 + height / 2, frame.angle, false, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.radius / appState.zoom.value);\n  context.restore();\n};\n\nconst renderElementsBoxHighlight = (context, appState, elements) => {\n  const individualElements = elements.filter(element => element.groupIds.length === 0);\n  const elementsInGroups = elements.filter(element => element.groupIds.length > 0);\n\n  const getSelectionFromElements = elements => {\n    const [elementX1, elementY1, elementX2, elementY2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getCommonBounds)(elements);\n    return {\n      angle: 0,\n      elementX1,\n      elementX2,\n      elementY1,\n      elementY2,\n      selectionColors: [\"rgb(0,118,255)\"],\n      dashed: false,\n      cx: elementX1 + (elementX2 - elementX1) / 2,\n      cy: elementY1 + (elementY2 - elementY1) / 2,\n      activeEmbeddable: false\n    };\n  };\n\n  const getSelectionForGroupId = groupId => {\n    const groupElements = (0,_groups__WEBPACK_IMPORTED_MODULE_7__.getElementsInGroup)(elements, groupId);\n    return getSelectionFromElements(groupElements);\n  };\n\n  Object.entries((0,_groups__WEBPACK_IMPORTED_MODULE_7__.selectGroupsFromGivenElements)(elementsInGroups, appState)).filter(([id, isSelected]) => isSelected).map(([id, isSelected]) => id).map(groupId => getSelectionForGroupId(groupId)).concat(individualElements.map(element => getSelectionFromElements([element]))).forEach(selection => renderSelectionBorder(context, appState, selection));\n};\n\nconst renderBindingHighlightForSuggestedPointBinding = (context, suggestedBinding) => {\n  const [element, startOrEnd, bindableElement] = suggestedBinding;\n  const threshold = (0,_element_collision__WEBPACK_IMPORTED_MODULE_8__.maxBindingGap)(bindableElement, bindableElement.width, bindableElement.height);\n  context.strokeStyle = \"rgba(0,0,0,0)\";\n  context.fillStyle = \"rgba(128,128,128,.1)\"; //zsviczian \"rgba(0,0,0,.05)\";\n\n  const pointIndices = startOrEnd === \"both\" ? [0, -1] : startOrEnd === \"start\" ? [0] : [-1];\n  pointIndices.forEach(index => {\n    const [x, y] = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getPointAtIndexGlobalCoordinates(element, index);\n    fillCircle(context, x, y, threshold);\n  });\n};\n\nlet linkCanvasCache;\n\nconst renderLinkIcon = (element, context, appState) => {\n  if (element.link && !appState.selectedElementIds[element.id]) {\n    const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element);\n    const [x, y, width, height] = (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_13__.getLinkHandleFromCoords)([x1, y1, x2, y2], element.angle, appState);\n    const centerX = x + width / 2;\n    const centerY = y + height / 2;\n    context.save();\n    context.translate(appState.scrollX + centerX, appState.scrollY + centerY);\n    context.rotate(element.angle);\n\n    if (!linkCanvasCache || linkCanvasCache.zoom !== appState.zoom.value) {\n      linkCanvasCache = document.createElement(\"canvas\");\n      linkCanvasCache.zoom = appState.zoom.value;\n      linkCanvasCache.width = width * window.devicePixelRatio * appState.zoom.value;\n      linkCanvasCache.height = height * window.devicePixelRatio * appState.zoom.value;\n      const linkCanvasCacheContext = linkCanvasCache.getContext(\"2d\");\n      linkCanvasCacheContext.scale(window.devicePixelRatio * appState.zoom.value, window.devicePixelRatio * appState.zoom.value);\n      /*linkCanvasCacheContext.fillStyle = \"#fff\"; //zsviczian\r\n      linkCanvasCacheContext.fillRect(0, 0, width, height);*/\n      //zsviczian\n      //linkCanvasCacheContext.globalAlpha = appState.linkOpacity; //zsviczian\n\n      linkCanvasCacheContext.drawImage(_element_Hyperlink__WEBPACK_IMPORTED_MODULE_13__.EXTERNAL_LINK_IMG, 0, 0, width, height);\n      linkCanvasCacheContext.restore();\n      context.globalAlpha = appState.linkOpacity; //zsviczian\n\n      context.drawImage(linkCanvasCache, x - centerX, y - centerY, width, height);\n    } else {\n      context.globalAlpha = appState.linkOpacity; //zsviczian\n\n      context.drawImage(linkCanvasCache, x - centerX, y - centerY, width, height);\n    }\n\n    context.restore();\n  }\n}; // This should be only called for exporting purposes\n\n\nconst renderSceneToSvg = (elements, rsvg, svgRoot, files, {\n  offsetX = 0,\n  offsetY = 0,\n  exportWithDarkMode = false,\n  exportingFrameId = null,\n  renderEmbeddables\n} = {}) => {\n  if (!svgRoot) {\n    return;\n  } // render elements\n\n\n  elements.filter(el => !(0,_element_embeddable__WEBPACK_IMPORTED_MODULE_15__.isEmbeddableOrFrameLabel)(el)).forEach(element => {\n    if (!element.isDeleted) {\n      try {\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElementToSvg)(element, rsvg, svgRoot, files, element.x + offsetX, element.y + offsetY, exportWithDarkMode, exportingFrameId, renderEmbeddables);\n      } catch (error) {\n        console.error(error);\n      }\n    }\n  }); // render embeddables on top\n\n  elements.filter(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isEmbeddableElement)(el)).forEach(element => {\n    if (!element.isDeleted) {\n      try {\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElementToSvg)(element, rsvg, svgRoot, files, element.x + offsetX, element.y + offsetY, exportWithDarkMode, exportingFrameId, renderEmbeddables);\n      } catch (error) {\n        console.error(error);\n      }\n    }\n  });\n};\n\n//# sourceURL=webpack://ExcalidrawLib/../../renderer/renderScene.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"DEFAULT_SPACING\": () => (/* binding */ DEFAULT_SPACING),\n/* harmony export */   \"cancelRender\": () => (/* binding */ cancelRender),\n/* harmony export */   \"renderInteractiveScene\": () => (/* binding */ renderInteractiveScene),\n/* harmony export */   \"renderSceneToSvg\": () => (/* binding */ renderSceneToSvg),\n/* harmony export */   \"renderStaticScene\": () => (/* binding */ renderStaticScene)\n/* harmony export */ });\n/* harmony import */ var open_color__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! open-color */ \"../../../node_modules/open-color/open-color.json\");\n/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element */ \"../../element/index.ts\");\n/* harmony import */ var _roundRect__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./roundRect */ \"../../renderer/roundRect.ts\");\n/* harmony import */ var _scene_scrollbars__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../scene/scrollbars */ \"../../scene/scrollbars.ts\");\n/* harmony import */ var _renderElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./renderElement */ \"../../renderer/renderElement.ts\");\n/* harmony import */ var _clients__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../clients */ \"../../clients.ts\");\n/* harmony import */ var _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../element/linearElementEditor */ \"../../element/linearElementEditor.ts\");\n/* harmony import */ var _groups__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../groups */ \"../../groups.ts\");\n/* harmony import */ var _element_collision__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../element/collision */ \"../../element/collision.ts\");\n/* harmony import */ var _element_transformHandles__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../element/transformHandles */ \"../../element/transformHandles.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../utils */ \"../../utils.ts\");\n/* harmony import */ var _types__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../types */ \"../../types.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../constants */ \"../../constants.ts\");\n/* harmony import */ var _element_Hyperlink__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../element/Hyperlink */ \"../../element/Hyperlink.tsx\");\n/* harmony import */ var _element_typeChecks__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../element/typeChecks */ \"../../element/typeChecks.ts\");\n/* harmony import */ var _element_embeddable__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../element/embeddable */ \"../../element/embeddable.ts\");\n/* harmony import */ var _frame__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../frame */ \"../../frame.ts\");\n/* harmony import */ var canvas_roundrect_polyfill__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! canvas-roundrect-polyfill */ \"../../../node_modules/canvas-roundrect-polyfill/roundRect.js\");\n/* harmony import */ var canvas_roundrect_polyfill__WEBPACK_IMPORTED_MODULE_17___default = /*#__PURE__*/__webpack_require__.n(canvas_roundrect_polyfill__WEBPACK_IMPORTED_MODULE_17__);\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst DEFAULT_SPACING = 2;\n\nconst strokeRectWithRotation = (context, x, y, width, height, cx, cy, angle, fill = false,\n/** should account for zoom */\nradius = 0) => {\n  context.save();\n  context.translate(cx, cy);\n  context.rotate(angle);\n\n  if (fill) {\n    context.fillRect(x - cx, y - cy, width, height);\n  }\n\n  if (radius && context.roundRect) {\n    context.beginPath();\n    context.roundRect(x - cx, y - cy, width, height, radius);\n    context.stroke();\n    context.closePath();\n  } else {\n    context.strokeRect(x - cx, y - cy, width, height);\n  }\n\n  context.restore();\n};\n\nconst strokeDiamondWithRotation = (context, width, height, cx, cy, angle) => {\n  context.save();\n  context.translate(cx, cy);\n  context.rotate(angle);\n  context.beginPath();\n  context.moveTo(0, height / 2);\n  context.lineTo(width / 2, 0);\n  context.lineTo(0, -height / 2);\n  context.lineTo(-width / 2, 0);\n  context.closePath();\n  context.stroke();\n  context.restore();\n};\n\nconst strokeEllipseWithRotation = (context, width, height, cx, cy, angle) => {\n  context.beginPath();\n  context.ellipse(cx, cy, width / 2, height / 2, angle, 0, Math.PI * 2);\n  context.stroke();\n};\n\nconst fillCircle = (context, cx, cy, radius, stroke = true) => {\n  context.beginPath();\n  context.arc(cx, cy, radius, 0, Math.PI * 2);\n  context.fill();\n\n  if (stroke) {\n    context.stroke();\n  }\n};\n\nconst strokeGrid = (context, gridSize, scrollX, scrollY, zoom, width, height, GridLineColor) => {\n  var _a;\n\n  let BOLD_LINE_FREQUENCY = (_a = GridLineColor === null || GridLineColor === void 0 ? void 0 : GridLineColor.MajorGridFrequency) !== null && _a !== void 0 ? _a : 5; //zsviczian\n\n  /*enum GridLineColor {\r\n    Bold = \"#cccccc\",\r\n    Regular = \"#e5e5e5\",\r\n  }*/\n\n  const offsetX = -Math.round(zoom.value / gridSize) * gridSize + scrollX % gridSize;\n  const offsetY = -Math.round(zoom.value / gridSize) * gridSize + scrollY % gridSize;\n  const lineWidth = Math.min(1 / zoom.value, 1);\n  const spaceWidth = 1 / zoom.value;\n  const lineDash = [lineWidth * 3, spaceWidth + (lineWidth + spaceWidth)];\n  context.save();\n  context.lineWidth = lineWidth;\n\n  for (let x = offsetX; x < offsetX + width + gridSize * 2; x += gridSize) {\n    const isBold = Math.round(x - scrollX) % (BOLD_LINE_FREQUENCY * gridSize) === 0;\n    context.beginPath();\n    context.setLineDash(isBold ? [] : lineDash);\n    context.strokeStyle = isBold ? GridLineColor.Bold : GridLineColor.Regular;\n    context.moveTo(x, offsetY - gridSize);\n    context.lineTo(x, offsetY + height + gridSize * 2);\n    context.stroke();\n  }\n\n  for (let y = offsetY; y < offsetY + height + gridSize * 2; y += gridSize) {\n    const isBold = Math.round(y - scrollY) % (BOLD_LINE_FREQUENCY * gridSize) === 0;\n    context.beginPath();\n    context.setLineDash(isBold ? [] : lineDash);\n    context.strokeStyle = isBold ? GridLineColor.Bold : GridLineColor.Regular;\n    context.moveTo(offsetX - gridSize, y);\n    context.lineTo(offsetX + width + gridSize * 2, y);\n    context.stroke();\n  }\n\n  context.restore();\n};\n\nconst renderSingleLinearPoint = (context, appState, point, radius, isSelected, isPhantomPoint = false) => {\n  context.strokeStyle = \"#5e5ad8\";\n  context.setLineDash([]);\n  context.fillStyle = \"rgba(255, 255, 255, 0.9)\";\n\n  if (isSelected) {\n    context.fillStyle = \"rgba(134, 131, 226, 0.9)\";\n  } else if (isPhantomPoint) {\n    context.fillStyle = \"rgba(177, 151, 252, 0.7)\";\n  }\n\n  fillCircle(context, point[0], point[1], radius / appState.zoom.value, !isPhantomPoint);\n};\n\nconst renderLinearPointHandles = (context, appState, element) => {\n  if (!appState.selectedLinearElement) {\n    return;\n  }\n\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  context.lineWidth = 1 / appState.zoom.value;\n  const points = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getPointsGlobalCoordinates(element);\n  const {\n    POINT_HANDLE_SIZE\n  } = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor;\n  const radius = appState.editingLinearElement ? POINT_HANDLE_SIZE : POINT_HANDLE_SIZE / 2;\n  points.forEach((point, idx) => {\n    var _a, _b;\n\n    const isSelected = !!((_b = (_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.selectedPointsIndices) === null || _b === void 0 ? void 0 : _b.includes(idx));\n    renderSingleLinearPoint(context, appState, point, radius, isSelected);\n  }); //Rendering segment mid points\n\n  const midPoints = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getEditorMidPoints(element, appState).filter(midPoint => midPoint !== null);\n  midPoints.forEach(segmentMidPoint => {\n    var _a;\n\n    if (((_a = appState === null || appState === void 0 ? void 0 : appState.selectedLinearElement) === null || _a === void 0 ? void 0 : _a.segmentMidPointHoveredCoords) && _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.arePointsEqual(segmentMidPoint, appState.selectedLinearElement.segmentMidPointHoveredCoords)) {\n      // The order of renderingSingleLinearPoint and highLight points is different\n      // inside vs outside editor as hover states are different,\n      // in editor when hovered the original point is not visible as hover state fully covers it whereas outside the\n      // editor original point is visible and hover state is just an outer circle.\n      if (appState.editingLinearElement) {\n        renderSingleLinearPoint(context, appState, segmentMidPoint, radius, false);\n        highlightPoint(segmentMidPoint, context, appState);\n      } else {\n        highlightPoint(segmentMidPoint, context, appState);\n        renderSingleLinearPoint(context, appState, segmentMidPoint, radius, false);\n      }\n    } else if (appState.editingLinearElement || points.length === 2) {\n      renderSingleLinearPoint(context, appState, segmentMidPoint, POINT_HANDLE_SIZE / 2, false, true);\n    }\n  });\n  context.restore();\n};\n\nconst highlightPoint = (point, context, appState) => {\n  context.fillStyle = \"rgba(105, 101, 219, 0.4)\";\n  fillCircle(context, point[0], point[1], _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.POINT_HANDLE_SIZE / appState.zoom.value, false);\n};\n\nconst renderLinearElementPointHighlight = (context, appState) => {\n  var _a, _b;\n\n  const {\n    elementId,\n    hoverPointIndex\n  } = appState.selectedLinearElement;\n\n  if ((_b = (_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.selectedPointsIndices) === null || _b === void 0 ? void 0 : _b.includes(hoverPointIndex)) {\n    return;\n  }\n\n  const element = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getElement(elementId);\n\n  if (!element) {\n    return;\n  }\n\n  const point = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getPointAtIndexGlobalCoordinates(element, hoverPointIndex);\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  highlightPoint(point, context, appState);\n  context.restore();\n};\n\nconst frameClip = (frame, context, renderConfig, appState) => {\n  context.translate(frame.x + appState.scrollX, frame.y + appState.scrollY);\n  context.beginPath();\n\n  if (context.roundRect && !renderConfig.isExporting) {\n    context.roundRect(0, 0, frame.width, frame.height, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.radius / appState.zoom.value);\n  } else {\n    context.rect(0, 0, frame.width, frame.height);\n  }\n\n  context.clip();\n  context.translate(-(frame.x + appState.scrollX), -(frame.y + appState.scrollY));\n};\n\nconst getNormalizedCanvasDimensions = (canvas, scale) => {\n  // When doing calculations based on canvas width we should used normalized one\n  return [canvas.width / scale, canvas.height / scale];\n};\n\nconst bootstrapCanvas = ({\n  canvas,\n  scale,\n  normalizedWidth,\n  normalizedHeight,\n  theme,\n  isExporting,\n  viewBackgroundColor\n}) => {\n  const context = canvas.getContext(\"2d\");\n  context.setTransform(1, 0, 0, 1, 0, 0);\n  context.scale(scale, scale);\n\n  if (isExporting && theme === \"dark\") {\n    context.filter = _constants__WEBPACK_IMPORTED_MODULE_12__.THEME_FILTER;\n  } // Paint background\n\n\n  if (typeof viewBackgroundColor === \"string\") {\n    const hasTransparence = viewBackgroundColor === \"transparent\" || viewBackgroundColor.length === 5 || // #RGBA\n    viewBackgroundColor.length === 9 || // #RRGGBBA\n    /(hsla|rgba)\\(/.test(viewBackgroundColor);\n\n    if (hasTransparence) {\n      context.clearRect(0, 0, normalizedWidth, normalizedHeight);\n    }\n\n    context.save();\n    context.fillStyle = viewBackgroundColor;\n    context.fillRect(0, 0, normalizedWidth, normalizedHeight);\n    context.restore();\n  } else {\n    context.clearRect(0, 0, normalizedWidth, normalizedHeight);\n  }\n\n  return context;\n};\n\nconst _renderInteractiveScene = ({\n  canvas,\n  elements,\n  visibleElements,\n  selectedElements,\n  scale,\n  appState,\n  renderConfig\n}) => {\n  var _a, _b;\n\n  if (canvas === null) {\n    return {\n      atLeastOneVisibleElement: false,\n      elements\n    };\n  }\n\n  const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(canvas, scale);\n  const context = bootstrapCanvas({\n    canvas,\n    scale,\n    normalizedWidth,\n    normalizedHeight\n  }); // Apply zoom\n\n  context.save();\n  context.scale(appState.zoom.value, appState.zoom.value);\n  let editingLinearElement = undefined;\n  visibleElements.forEach(element => {\n    var _a; // Getting the element using LinearElementEditor during collab mismatches version - being one head of visible elements due to\n    // ShapeCache returns empty hence making sure that we get the\n    // correct element from visible elements\n\n\n    if (((_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) === element.id) {\n      if (element) {\n        editingLinearElement = element;\n      }\n    }\n  });\n\n  if (editingLinearElement) {\n    renderLinearPointHandles(context, appState, editingLinearElement);\n  } // Paint selection element\n\n\n  if (appState.selectionElement) {\n    try {\n      (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderSelectionElement)(appState.selectionElement, context, appState);\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  if (appState.isBindingEnabled) {\n    appState.suggestedBindings.filter(binding => binding != null).forEach(suggestedBinding => {\n      renderBindingHighlight(context, appState, suggestedBinding);\n    });\n  }\n\n  if (appState.frameToHighlight) {\n    renderFrameHighlight(context, appState, appState.frameToHighlight);\n  }\n\n  if (appState.elementsToHighlight) {\n    renderElementsBoxHighlight(context, appState, appState.elementsToHighlight);\n  }\n\n  const isFrameSelected = selectedElements.some(element => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isFrameElement)(element)); // Getting the element using LinearElementEditor during collab mismatches version - being one head of visible elements due to\n  // ShapeCache returns empty hence making sure that we get the\n  // correct element from visible elements\n\n  if (selectedElements.length === 1 && ((_a = appState.editingLinearElement) === null || _a === void 0 ? void 0 : _a.elementId) === selectedElements[0].id) {\n    renderLinearPointHandles(context, appState, selectedElements[0]);\n  }\n\n  if (appState.selectedLinearElement && appState.selectedLinearElement.hoverPointIndex >= 0) {\n    renderLinearElementPointHighlight(context, appState);\n  } // Paint selected elements\n\n\n  if (!appState.multiElement && !appState.editingLinearElement) {\n    const showBoundingBox = (0,_element_transformHandles__WEBPACK_IMPORTED_MODULE_9__.shouldShowBoundingBox)(selectedElements, appState);\n    const isSingleLinearElementSelected = selectedElements.length === 1 && (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isLinearElement)(selectedElements[0]); // render selected linear element points\n\n    if (isSingleLinearElementSelected && ((_b = appState.selectedLinearElement) === null || _b === void 0 ? void 0 : _b.elementId) === selectedElements[0].id && !selectedElements[0].locked) {\n      renderLinearPointHandles(context, appState, selectedElements[0]);\n    }\n\n    const selectionColor = renderConfig.selectionColor || open_color__WEBPACK_IMPORTED_MODULE_0__.black;\n\n    if (showBoundingBox) {\n      // Optimisation for finding quickly relevant element ids\n      const locallySelectedIds = selectedElements.reduce((acc, element) => {\n        acc[element.id] = true;\n        return acc;\n      }, {});\n      const selections = elements.reduce((acc, element) => {\n        var _a;\n\n        const selectionColors = []; // local user\n\n        if (locallySelectedIds[element.id] && !(0,_groups__WEBPACK_IMPORTED_MODULE_7__.isSelectedViaGroup)(appState, element)) {\n          selectionColors.push(selectionColor);\n        } // remote users\n\n\n        if (renderConfig.remoteSelectedElementIds[element.id]) {\n          selectionColors.push(...renderConfig.remoteSelectedElementIds[element.id].map(socketId => {\n            const background = (0,_clients__WEBPACK_IMPORTED_MODULE_5__.getClientColor)(socketId);\n            return background;\n          }));\n        }\n\n        if (selectionColors.length) {\n          const [elementX1, elementY1, elementX2, elementY2, cx, cy] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element, true);\n          acc.push({\n            angle: element.angle,\n            elementX1,\n            elementY1,\n            elementX2,\n            elementY2,\n            selectionColors,\n            dashed: !!renderConfig.remoteSelectedElementIds[element.id],\n            cx,\n            cy,\n            activeEmbeddable: ((_a = appState.activeEmbeddable) === null || _a === void 0 ? void 0 : _a.element) === element && appState.activeEmbeddable.state === \"active\"\n          });\n        }\n\n        return acc;\n      }, []);\n\n      const addSelectionForGroupId = groupId => {\n        const groupElements = (0,_groups__WEBPACK_IMPORTED_MODULE_7__.getElementsInGroup)(elements, groupId);\n        const [elementX1, elementY1, elementX2, elementY2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getCommonBounds)(groupElements);\n        selections.push({\n          angle: 0,\n          elementX1,\n          elementX2,\n          elementY1,\n          elementY2,\n          selectionColors: [open_color__WEBPACK_IMPORTED_MODULE_0__.black],\n          dashed: true,\n          cx: elementX1 + (elementX2 - elementX1) / 2,\n          cy: elementY1 + (elementY2 - elementY1) / 2,\n          activeEmbeddable: false\n        });\n      };\n\n      for (const groupId of (0,_groups__WEBPACK_IMPORTED_MODULE_7__.getSelectedGroupIds)(appState)) {\n        // TODO: support multiplayer selected group IDs\n        addSelectionForGroupId(groupId);\n      }\n\n      if (appState.editingGroupId) {\n        addSelectionForGroupId(appState.editingGroupId);\n      }\n\n      selections.forEach(selection => renderSelectionBorder(context, appState, selection));\n    } // Paint resize transformHandles\n\n\n    context.save();\n    context.translate(appState.scrollX, appState.scrollY);\n\n    if (selectedElements.length === 1) {\n      context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n      const transformHandles = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getTransformHandles)(selectedElements[0], appState.zoom, \"mouse\");\n\n      if (!appState.viewModeEnabled && showBoundingBox) {\n        renderTransformHandles(context, renderConfig, appState, transformHandles, selectedElements[0].angle);\n      }\n    } else if (selectedElements.length > 1 && !appState.isRotating) {\n      const dashedLinePadding = DEFAULT_SPACING * 2 / appState.zoom.value;\n      context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n      const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getCommonBounds)(selectedElements);\n      const initialLineDash = context.getLineDash();\n      context.setLineDash([2 / appState.zoom.value]);\n      const lineWidth = context.lineWidth;\n      context.lineWidth = 1 / appState.zoom.value;\n      context.strokeStyle = selectionColor;\n      strokeRectWithRotation(context, x1 - dashedLinePadding, y1 - dashedLinePadding, x2 - x1 + dashedLinePadding * 2, y2 - y1 + dashedLinePadding * 2, (x1 + x2) / 2, (y1 + y2) / 2, 0);\n      context.lineWidth = lineWidth;\n      context.setLineDash(initialLineDash);\n      const transformHandles = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getTransformHandlesFromCoords)([x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2], 0, appState.zoom, \"mouse\", isFrameSelected ? _element_transformHandles__WEBPACK_IMPORTED_MODULE_9__.OMIT_SIDES_FOR_FRAME : _element__WEBPACK_IMPORTED_MODULE_1__.OMIT_SIDES_FOR_MULTIPLE_ELEMENTS);\n\n      if (selectedElements.some(element => !element.locked)) {\n        renderTransformHandles(context, renderConfig, appState, transformHandles, 0);\n      }\n    }\n\n    context.restore();\n  } // Reset zoom\n\n\n  context.restore(); // Paint remote pointers\n\n  for (const clientId in renderConfig.remotePointerViewportCoords) {\n    let {\n      x,\n      y\n    } = renderConfig.remotePointerViewportCoords[clientId];\n    x -= appState.offsetLeft;\n    y -= appState.offsetTop;\n    const width = 11;\n    const height = 14;\n    const isOutOfBounds = x < 0 || x > normalizedWidth - width || y < 0 || y > normalizedHeight - height;\n    x = Math.max(x, 0);\n    x = Math.min(x, normalizedWidth - width);\n    y = Math.max(y, 0);\n    y = Math.min(y, normalizedHeight - height);\n    const background = (0,_clients__WEBPACK_IMPORTED_MODULE_5__.getClientColor)(clientId);\n    context.save();\n    context.strokeStyle = background;\n    context.fillStyle = background;\n    const userState = renderConfig.remotePointerUserStates[clientId];\n    const isInactive = isOutOfBounds || userState === _types__WEBPACK_IMPORTED_MODULE_11__.UserIdleState.IDLE || userState === _types__WEBPACK_IMPORTED_MODULE_11__.UserIdleState.AWAY;\n\n    if (isInactive) {\n      context.globalAlpha = 0.3;\n    }\n\n    if (renderConfig.remotePointerButton && renderConfig.remotePointerButton[clientId] === \"down\") {\n      context.beginPath();\n      context.arc(x, y, 15, 0, 2 * Math.PI, false);\n      context.lineWidth = 3;\n      context.strokeStyle = \"#ffffff88\";\n      context.stroke();\n      context.closePath();\n      context.beginPath();\n      context.arc(x, y, 15, 0, 2 * Math.PI, false);\n      context.lineWidth = 1;\n      context.strokeStyle = background;\n      context.stroke();\n      context.closePath();\n    } // Background (white outline) for arrow\n\n\n    context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n    context.strokeStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n    context.lineWidth = 6;\n    context.lineJoin = \"round\";\n    context.beginPath();\n    context.moveTo(x, y);\n    context.lineTo(x + 0, y + 14);\n    context.lineTo(x + 4, y + 9);\n    context.lineTo(x + 11, y + 8);\n    context.closePath();\n    context.stroke();\n    context.fill(); // Arrow\n\n    context.fillStyle = background;\n    context.strokeStyle = background;\n    context.lineWidth = 2;\n    context.lineJoin = \"round\";\n    context.beginPath();\n\n    if (isInactive) {\n      context.moveTo(x - 1, y - 1);\n      context.lineTo(x - 1, y + 15);\n      context.lineTo(x + 5, y + 10);\n      context.lineTo(x + 12, y + 9);\n      context.closePath();\n      context.fill();\n    } else {\n      context.moveTo(x, y);\n      context.lineTo(x + 0, y + 14);\n      context.lineTo(x + 4, y + 9);\n      context.lineTo(x + 11, y + 8);\n      context.closePath();\n      context.fill();\n      context.stroke();\n    }\n\n    const username = renderConfig.remotePointerUsernames[clientId] || \"\";\n\n    if (!isOutOfBounds && username) {\n      context.font = \"600 12px sans-serif\"; // font has to be set before context.measureText()\n\n      const offsetX = x + width / 2;\n      const offsetY = y + height + 2;\n      const paddingHorizontal = 5;\n      const paddingVertical = 3;\n      const measure = context.measureText(username);\n      const measureHeight = measure.actualBoundingBoxDescent + measure.actualBoundingBoxAscent;\n      const finalHeight = Math.max(measureHeight, 12);\n      const boxX = offsetX - 1;\n      const boxY = offsetY - 1;\n      const boxWidth = measure.width + 2 + paddingHorizontal * 2 + 2;\n      const boxHeight = finalHeight + 2 + paddingVertical * 2 + 2;\n\n      if (context.roundRect) {\n        context.beginPath();\n        context.roundRect(boxX, boxY, boxWidth, boxHeight, 8);\n        context.fillStyle = background;\n        context.fill();\n        context.strokeStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.white;\n        context.stroke();\n      } else {\n        (0,_roundRect__WEBPACK_IMPORTED_MODULE_2__.roundRect)(context, boxX, boxY, boxWidth, boxHeight, 8, open_color__WEBPACK_IMPORTED_MODULE_0__.white);\n      }\n\n      context.fillStyle = open_color__WEBPACK_IMPORTED_MODULE_0__.black;\n      context.fillText(username, offsetX + paddingHorizontal + 1, offsetY + paddingVertical + measure.actualBoundingBoxAscent + Math.floor((finalHeight - measureHeight) / 2) + 2);\n    }\n\n    context.restore();\n    context.closePath();\n  } // Paint scrollbars\n\n\n  let scrollBars;\n\n  if (renderConfig.renderScrollbars) {\n    scrollBars = (0,_scene_scrollbars__WEBPACK_IMPORTED_MODULE_3__.getScrollBars)(elements, normalizedWidth, normalizedHeight, appState);\n    context.save();\n    context.fillStyle = _scene_scrollbars__WEBPACK_IMPORTED_MODULE_3__.SCROLLBAR_COLOR;\n    context.strokeStyle = \"rgba(255,255,255,0.8)\";\n    [scrollBars.horizontal, scrollBars.vertical].forEach(scrollBar => {\n      if (scrollBar) {\n        (0,_roundRect__WEBPACK_IMPORTED_MODULE_2__.roundRect)(context, scrollBar.x, scrollBar.y, scrollBar.width, scrollBar.height, _scene_scrollbars__WEBPACK_IMPORTED_MODULE_3__.SCROLLBAR_WIDTH / 2);\n      }\n    });\n    context.restore();\n  }\n\n  return {\n    scrollBars,\n    atLeastOneVisibleElement: visibleElements.length > 0,\n    elements\n  };\n};\n\nconst _renderStaticScene = ({\n  canvas,\n  rc,\n  elements,\n  visibleElements,\n  scale,\n  appState,\n  renderConfig\n}) => {\n  if (canvas === null) {\n    return;\n  }\n\n  const {\n    renderGrid = true,\n    isExporting\n  } = renderConfig;\n  const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(canvas, scale);\n  const context = bootstrapCanvas({\n    canvas,\n    scale,\n    normalizedWidth,\n    normalizedHeight,\n    theme: appState.theme,\n    isExporting,\n    viewBackgroundColor: appState.viewBackgroundColor\n  }); // Apply zoom\n\n  context.scale(appState.zoom.value, appState.zoom.value); // Grid\n\n  if (renderGrid && appState.gridSize) {\n    strokeGrid(context, appState.gridSize, appState.scrollX, appState.scrollY, appState.zoom, normalizedWidth / appState.zoom.value, normalizedHeight / appState.zoom.value, appState.gridColor);\n  }\n\n  const groupsToBeAddedToFrame = new Set();\n  visibleElements.forEach(element => {\n    if (element.groupIds.length > 0 && appState.frameToHighlight && appState.selectedElementIds[element.id] && ((0,_frame__WEBPACK_IMPORTED_MODULE_16__.elementOverlapsWithFrame)(element, appState.frameToHighlight) || element.groupIds.find(groupId => groupsToBeAddedToFrame.has(groupId)))) {\n      element.groupIds.forEach(groupId => groupsToBeAddedToFrame.add(groupId));\n    }\n  }); // Paint visible elements\n\n  visibleElements.filter(el => !(0,_element_embeddable__WEBPACK_IMPORTED_MODULE_15__.isEmbeddableOrFrameLabel)(el)).forEach(element => {\n    var _a;\n\n    try {\n      // - when exporting the whole canvas, we DO NOT apply clipping\n      // - when we are exporting a particular frame, apply clipping\n      //   if the containing frame is not selected, apply clipping\n      const frameId = element.frameId || ((_a = appState.frameToHighlight) === null || _a === void 0 ? void 0 : _a.id);\n\n      if (frameId && (renderConfig.isExporting && (0,_utils__WEBPACK_IMPORTED_MODULE_10__.isOnlyExportingSingleFrame)(elements) || !renderConfig.isExporting && appState.frameRendering.enabled && appState.frameRendering.clip)) {\n        context.save();\n        const frame = (0,_frame__WEBPACK_IMPORTED_MODULE_16__.getTargetFrame)(element, appState); // TODO do we need to check isElementInFrame here?\n\n        if (frame && (0,_frame__WEBPACK_IMPORTED_MODULE_16__.isElementInFrame)(element, elements, appState)) {\n          frameClip(frame, context, renderConfig, appState);\n        }\n\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElement)(element, rc, context, renderConfig, appState);\n        context.restore();\n      } else {\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElement)(element, rc, context, renderConfig, appState);\n      }\n\n      if (!isExporting) {\n        renderLinkIcon(element, context, appState);\n      }\n    } catch (error) {\n      console.error(error);\n    }\n  }); // render embeddables on top\n\n  visibleElements.filter(el => (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_15__.isEmbeddableOrFrameLabel)(el)).forEach(element => {\n    var _a;\n\n    try {\n      const render = () => {\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElement)(element, rc, context, renderConfig, appState);\n\n        if ((0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isEmbeddableElement)(element) && (isExporting || !element.validated) && element.width && element.height) {\n          const label = (0,_element_embeddable__WEBPACK_IMPORTED_MODULE_15__.createPlaceholderEmbeddableLabel)(element);\n          (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElement)(label, rc, context, renderConfig, appState);\n        }\n\n        if (!isExporting) {\n          renderLinkIcon(element, context, appState);\n        }\n      }; // - when exporting the whole canvas, we DO NOT apply clipping\n      // - when we are exporting a particular frame, apply clipping\n      //   if the containing frame is not selected, apply clipping\n\n\n      const frameId = element.frameId || ((_a = appState.frameToHighlight) === null || _a === void 0 ? void 0 : _a.id);\n\n      if (frameId && (renderConfig.isExporting && (0,_utils__WEBPACK_IMPORTED_MODULE_10__.isOnlyExportingSingleFrame)(elements) || !renderConfig.isExporting && appState.frameRendering.enabled && appState.frameRendering.clip)) {\n        context.save();\n        const frame = (0,_frame__WEBPACK_IMPORTED_MODULE_16__.getTargetFrame)(element, appState);\n\n        if (frame && (0,_frame__WEBPACK_IMPORTED_MODULE_16__.isElementInFrame)(element, elements, appState)) {\n          frameClip(frame, context, renderConfig, appState);\n        }\n\n        render();\n        context.restore();\n      } else {\n        render();\n      }\n    } catch (error) {\n      console.error(error);\n    }\n  });\n};\n/** throttled to animation framerate */\n\n\nconst renderInteractiveSceneThrottled = (0,_utils__WEBPACK_IMPORTED_MODULE_10__.throttleRAF)(config => {\n  var _a;\n\n  const ret = _renderInteractiveScene(config);\n\n  (_a = config.callback) === null || _a === void 0 ? void 0 : _a.call(config, ret);\n}, {\n  trailing: true\n});\n/**\r\n * Interactive scene is the ui-canvas where we render boundinb boxes, selections\r\n * and other ui stuff.\r\n */\n\nconst renderInteractiveScene = (renderConfig, throttle) => {\n  if (throttle) {\n    renderInteractiveSceneThrottled(renderConfig);\n    return undefined;\n  }\n\n  const ret = _renderInteractiveScene(renderConfig);\n\n  renderConfig.callback(ret);\n  return ret;\n};\n/** throttled to animation framerate */\n\nconst renderStaticSceneThrottled = (0,_utils__WEBPACK_IMPORTED_MODULE_10__.throttleRAF)(config => {\n  _renderStaticScene(config);\n}, {\n  trailing: true\n});\n/**\r\n * Static scene is the non-ui canvas where we render elements.\r\n */\n\nconst renderStaticScene = (renderConfig, throttle) => {\n  if (throttle) {\n    renderStaticSceneThrottled(renderConfig);\n    return;\n  }\n\n  _renderStaticScene(renderConfig);\n};\nconst cancelRender = () => {\n  renderInteractiveSceneThrottled.cancel();\n  renderStaticSceneThrottled.cancel();\n};\n\nconst renderTransformHandles = (context, renderConfig, appState, transformHandles, angle) => {\n  Object.keys(transformHandles).forEach(key => {\n    const transformHandle = transformHandles[key];\n\n    if (transformHandle !== undefined) {\n      const [x, y, width, height] = transformHandle;\n      context.save();\n      context.lineWidth = 1 / appState.zoom.value;\n\n      if (renderConfig.selectionColor) {\n        context.strokeStyle = renderConfig.selectionColor;\n      }\n\n      if (key === \"rotation\") {\n        fillCircle(context, x + width / 2, y + height / 2, width / 2); // prefer round corners if roundRect API is available\n      } else if (context.roundRect) {\n        context.beginPath();\n        context.roundRect(x, y, width, height, 2 / appState.zoom.value);\n        context.fill();\n        context.stroke();\n      } else {\n        strokeRectWithRotation(context, x, y, width, height, x + width / 2, y + height / 2, angle, true);\n      }\n\n      context.restore();\n    }\n  });\n};\n\nconst renderSelectionBorder = (context, appState, elementProperties, padding = DEFAULT_SPACING * 2) => {\n  const {\n    angle,\n    elementX1,\n    elementY1,\n    elementX2,\n    elementY2,\n    selectionColors,\n    cx,\n    cy,\n    dashed,\n    activeEmbeddable\n  } = elementProperties;\n  const elementWidth = elementX2 - elementX1;\n  const elementHeight = elementY2 - elementY1;\n  const linePadding = padding / appState.zoom.value;\n  const lineWidth = 8 / appState.zoom.value;\n  const spaceWidth = 4 / appState.zoom.value;\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  context.lineWidth = (activeEmbeddable ? 4 : 1) / appState.zoom.value;\n  const count = selectionColors.length;\n\n  for (let index = 0; index < count; ++index) {\n    context.strokeStyle = selectionColors[index];\n\n    if (dashed) {\n      context.setLineDash([lineWidth, spaceWidth + (lineWidth + spaceWidth) * (count - 1)]);\n    }\n\n    context.lineDashOffset = (lineWidth + spaceWidth) * index;\n    strokeRectWithRotation(context, elementX1 - linePadding, elementY1 - linePadding, elementWidth + linePadding * 2, elementHeight + linePadding * 2, cx, cy, angle);\n  }\n\n  context.restore();\n};\n\nconst renderBindingHighlight = (context, appState, suggestedBinding) => {\n  const renderHighlight = Array.isArray(suggestedBinding) ? renderBindingHighlightForSuggestedPointBinding : renderBindingHighlightForBindableElement;\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  renderHighlight(context, suggestedBinding);\n  context.restore();\n};\n\nconst renderBindingHighlightForBindableElement = (context, element) => {\n  const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element);\n  const width = x2 - x1;\n  const height = y2 - y1;\n  const threshold = (0,_element_collision__WEBPACK_IMPORTED_MODULE_8__.maxBindingGap)(element, width, height); // So that we don't overlap the element itself\n\n  const strokeOffset = 4;\n  context.strokeStyle = \"rgba(128,128,128,.1)\"; //zsviczian\n\n  context.lineWidth = threshold - strokeOffset;\n  const padding = strokeOffset / 2 + threshold / 2;\n\n  switch (element.type) {\n    case \"rectangle\":\n    case \"text\":\n    case \"image\":\n    case \"embeddable\":\n    case \"frame\":\n      strokeRectWithRotation(context, x1 - padding, y1 - padding, width + padding * 2, height + padding * 2, x1 + width / 2, y1 + height / 2, element.angle);\n      break;\n\n    case \"diamond\":\n      const side = Math.hypot(width, height);\n      const wPadding = padding * side / height;\n      const hPadding = padding * side / width;\n      strokeDiamondWithRotation(context, width + wPadding * 2, height + hPadding * 2, x1 + width / 2, y1 + height / 2, element.angle);\n      break;\n\n    case \"ellipse\":\n      strokeEllipseWithRotation(context, width + padding * 2, height + padding * 2, x1 + width / 2, y1 + height / 2, element.angle);\n      break;\n  }\n};\n\nconst renderFrameHighlight = (context, appState, frame) => {\n  const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(frame);\n  const width = x2 - x1;\n  const height = y2 - y1;\n  context.strokeStyle = \"rgb(0,118,255)\";\n  context.lineWidth = _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.strokeWidth * 2 / appState.zoom.value;\n  context.save();\n  context.translate(appState.scrollX, appState.scrollY);\n  strokeRectWithRotation(context, x1, y1, width, height, x1 + width / 2, y1 + height / 2, frame.angle, false, _constants__WEBPACK_IMPORTED_MODULE_12__.FRAME_STYLE.radius / appState.zoom.value);\n  context.restore();\n};\n\nconst renderElementsBoxHighlight = (context, appState, elements) => {\n  const individualElements = elements.filter(element => element.groupIds.length === 0);\n  const elementsInGroups = elements.filter(element => element.groupIds.length > 0);\n\n  const getSelectionFromElements = elements => {\n    const [elementX1, elementY1, elementX2, elementY2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getCommonBounds)(elements);\n    return {\n      angle: 0,\n      elementX1,\n      elementX2,\n      elementY1,\n      elementY2,\n      selectionColors: [\"rgb(0,118,255)\"],\n      dashed: false,\n      cx: elementX1 + (elementX2 - elementX1) / 2,\n      cy: elementY1 + (elementY2 - elementY1) / 2,\n      activeEmbeddable: false\n    };\n  };\n\n  const getSelectionForGroupId = groupId => {\n    const groupElements = (0,_groups__WEBPACK_IMPORTED_MODULE_7__.getElementsInGroup)(elements, groupId);\n    return getSelectionFromElements(groupElements);\n  };\n\n  Object.entries((0,_groups__WEBPACK_IMPORTED_MODULE_7__.selectGroupsFromGivenElements)(elementsInGroups, appState)).filter(([id, isSelected]) => isSelected).map(([id, isSelected]) => id).map(groupId => getSelectionForGroupId(groupId)).concat(individualElements.map(element => getSelectionFromElements([element]))).forEach(selection => renderSelectionBorder(context, appState, selection));\n};\n\nconst renderBindingHighlightForSuggestedPointBinding = (context, suggestedBinding) => {\n  const [element, startOrEnd, bindableElement] = suggestedBinding;\n  const threshold = (0,_element_collision__WEBPACK_IMPORTED_MODULE_8__.maxBindingGap)(bindableElement, bindableElement.width, bindableElement.height);\n  context.strokeStyle = \"rgba(0,0,0,0)\";\n  context.fillStyle = \"rgba(128,128,128,.1)\"; //zsviczian \"rgba(0,0,0,.05)\";\n\n  const pointIndices = startOrEnd === \"both\" ? [0, -1] : startOrEnd === \"start\" ? [0] : [-1];\n  pointIndices.forEach(index => {\n    const [x, y] = _element_linearElementEditor__WEBPACK_IMPORTED_MODULE_6__.LinearElementEditor.getPointAtIndexGlobalCoordinates(element, index);\n    fillCircle(context, x, y, threshold);\n  });\n};\n\nlet linkCanvasCache;\n\nconst renderLinkIcon = (element, context, appState) => {\n  if (element.link && !appState.selectedElementIds[element.id]) {\n    const [x1, y1, x2, y2] = (0,_element__WEBPACK_IMPORTED_MODULE_1__.getElementAbsoluteCoords)(element);\n    const [x, y, width, height] = (0,_element_Hyperlink__WEBPACK_IMPORTED_MODULE_13__.getLinkHandleFromCoords)([x1, y1, x2, y2], element.angle, appState);\n    const centerX = x + width / 2;\n    const centerY = y + height / 2;\n    context.save();\n    context.translate(appState.scrollX + centerX, appState.scrollY + centerY);\n    context.rotate(element.angle);\n\n    if (!linkCanvasCache || linkCanvasCache.zoom !== appState.zoom.value) {\n      linkCanvasCache = document.createElement(\"canvas\");\n      linkCanvasCache.zoom = appState.zoom.value;\n      linkCanvasCache.width = width * window.devicePixelRatio * appState.zoom.value;\n      linkCanvasCache.height = height * window.devicePixelRatio * appState.zoom.value;\n      const linkCanvasCacheContext = linkCanvasCache.getContext(\"2d\");\n      linkCanvasCacheContext.scale(window.devicePixelRatio * appState.zoom.value, window.devicePixelRatio * appState.zoom.value);\n      /*linkCanvasCacheContext.fillStyle = \"#fff\"; //zsviczian\r\n      linkCanvasCacheContext.fillRect(0, 0, width, height);*/\n      //zsviczian\n      //linkCanvasCacheContext.globalAlpha = appState.linkOpacity; //zsviczian\n\n      linkCanvasCacheContext.drawImage(_element_Hyperlink__WEBPACK_IMPORTED_MODULE_13__.EXTERNAL_LINK_IMG, 0, 0, width, height);\n      linkCanvasCacheContext.restore();\n      context.globalAlpha = appState.linkOpacity; //zsviczian\n\n      context.drawImage(linkCanvasCache, x - centerX, y - centerY, width, height);\n    } else {\n      context.globalAlpha = appState.linkOpacity; //zsviczian\n\n      context.drawImage(linkCanvasCache, x - centerX, y - centerY, width, height);\n    }\n\n    context.restore();\n  }\n}; // This should be only called for exporting purposes\n\n\nconst renderSceneToSvg = (elements, rsvg, svgRoot, files, {\n  offsetX = 0,\n  offsetY = 0,\n  exportWithDarkMode = false,\n  exportingFrameId = null,\n  renderEmbeddables\n} = {}) => {\n  if (!svgRoot) {\n    return;\n  } // render elements\n\n\n  elements.filter(el => !(0,_element_embeddable__WEBPACK_IMPORTED_MODULE_15__.isEmbeddableOrFrameLabel)(el)).forEach(element => {\n    if (!element.isDeleted) {\n      try {\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElementToSvg)(element, rsvg, svgRoot, files, element.x + offsetX, element.y + offsetY, exportWithDarkMode, exportingFrameId, renderEmbeddables);\n      } catch (error) {\n        console.error(error);\n      }\n    }\n  }); // render embeddables on top\n\n  elements.filter(el => (0,_element_typeChecks__WEBPACK_IMPORTED_MODULE_14__.isEmbeddableElement)(el)).forEach(element => {\n    if (!element.isDeleted) {\n      try {\n        (0,_renderElement__WEBPACK_IMPORTED_MODULE_4__.renderElementToSvg)(element, rsvg, svgRoot, files, element.x + offsetX, element.y + offsetY, exportWithDarkMode, exportingFrameId, renderEmbeddables);\n      } catch (error) {\n        console.error(error);\n      }\n    }\n  });\n};\n\n//# sourceURL=webpack://ExcalidrawLib/../../renderer/renderScene.ts?");
 
 /***/ }),