npm - @zsviczian/excalidraw - Versions diffs - 0.18.113-beta.3 → 0.18.113-beta.4 - Mend

@zsviczian/excalidraw 0.18.113-beta.3 → 0.18.113-beta.4

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

package/dist/excalidraw.development.js +1 -1
package/dist/excalidraw.production.min.js +1 -1
package/dist/styles.development.css +11 -0
package/dist/styles.production.css +1 -1
package/package.json +1 -1

package/dist/excalidraw.development.js CHANGED Viewed

@@ -2167,7 +2167,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 (__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 */   EyeDropper: () => (/* binding */ EyeDropper),\n/* harmony export */   activeEyeDropperAtom: () => (/* binding */ activeEyeDropperAtom)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _excalidraw_common__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @excalidraw/common */ \"../common/src/index.ts\");\n/* harmony import */ var _context_ui_appState__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../context/ui-appState */ \"./context/ui-appState.ts\");\n/* harmony import */ var _editor_jotai__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../editor-jotai */ \"./editor-jotai.ts\");\n/* harmony import */ var _hooks_useCreatePortalContainer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../hooks/useCreatePortalContainer */ \"./hooks/useCreatePortalContainer.ts\");\n/* harmony import */ var _hooks_useOutsideClick__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../hooks/useOutsideClick */ \"./hooks/useOutsideClick.ts\");\n/* harmony import */ var _hooks_useStable__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../hooks/useStable */ \"./hooks/useStable.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./App */ \"./components/App.tsx\");\n/* harmony import */ var _positionElementBesideCursor__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./positionElementBesideCursor */ \"./components/positionElementBesideCursor.ts\");\n/* harmony import */ var _EyeDropper_scss__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./EyeDropper.scss */ \"./components/EyeDropper.scss\");\n\n\n\n\n\n\n\n\n\n\n\n\nconst activeEyeDropperAtom = (0,_editor_jotai__WEBPACK_IMPORTED_MODULE_4__.atom)(null);\nconst EyeDropper = ({\n  onCancel,\n  onChange,\n  onSelect,\n  colorPickerType\n}) => {\n  const eyeDropperContainer = (0,_hooks_useCreatePortalContainer__WEBPACK_IMPORTED_MODULE_5__.useCreatePortalContainer)({\n    className: \"excalidraw-eye-dropper-backdrop\",\n    parentSelector: \".excalidraw-eye-dropper-container\"\n  });\n  const appState = (0,_context_ui_appState__WEBPACK_IMPORTED_MODULE_3__.useUIAppState)();\n  const elements = (0,_App__WEBPACK_IMPORTED_MODULE_9__.useExcalidrawElements)();\n  const app = (0,_App__WEBPACK_IMPORTED_MODULE_9__.useApp)();\n  const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_8__.getSelectedElements)(elements, appState);\n  const stableProps = (0,_hooks_useStable__WEBPACK_IMPORTED_MODULE_7__.useStable)({\n    app,\n    onCancel,\n    onChange,\n    onSelect,\n    selectedElements\n  });\n  const {\n    container: excalidrawContainer\n  } = (0,_App__WEBPACK_IMPORTED_MODULE_9__.useExcalidrawContainer)();\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const colorPreviewDiv = ref.current;\n\n    if (!colorPreviewDiv || !app.canvas || !eyeDropperContainer) {\n      return;\n    }\n\n    let isHoldingPointerDown = false;\n    const ctx = app.canvas.getContext(\"2d\");\n\n    const getCurrentColor = ({\n      clientX,\n      clientY\n    }) => {\n      const pixel = ctx.getImageData((clientX - appState.offsetLeft) * window.devicePixelRatio, (clientY - appState.offsetTop) * window.devicePixelRatio, 1, 1).data;\n      return (0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.rgbToHex)(pixel[0], pixel[1], pixel[2]);\n    };\n\n    const mouseMoveListener = ({\n      clientX,\n      clientY,\n      altKey\n    }) => {\n      const {\n        top,\n        left\n      } = (0,_positionElementBesideCursor__WEBPACK_IMPORTED_MODULE_10__.positionElementBesideCursor)({\n        cursor: {\n          x: clientX - appState.offsetLeft,\n          //zsviczian added offset\n          y: clientY - appState.offsetTop //zsviczian added offset\n\n        },\n        element: {\n          width: colorPreviewDiv.offsetWidth,\n          height: colorPreviewDiv.offsetHeight\n        },\n        container: eyeDropperContainer.getBoundingClientRect(),\n        gap: 20\n      });\n      colorPreviewDiv.style.top = `${top}px`;\n      colorPreviewDiv.style.left = `${left}px`;\n      const currentColor = getCurrentColor({\n        clientX,\n        clientY\n      });\n\n      if (isHoldingPointerDown) {\n        stableProps.onChange(colorPickerType, currentColor, stableProps.selectedElements, {\n          altKey\n        });\n      }\n\n      colorPreviewDiv.style.background = currentColor;\n    };\n\n    const onCancel = () => {\n      stableProps.onCancel();\n    };\n\n    const onSelect = (color, event) => {\n      stableProps.onSelect(color, event);\n    };\n\n    const pointerDownListener = event => {\n      isHoldingPointerDown = true; // NOTE we can't event.preventDefault() as that would stop\n      // pointermove events\n\n      event.stopImmediatePropagation();\n    };\n\n    const pointerUpListener = event => {\n      isHoldingPointerDown = false; // since we're not preventing default on pointerdown, the focus would\n      // goes back to `body` so we want to refocus the editor container instead\n\n      excalidrawContainer === null || excalidrawContainer === void 0 ? void 0 : excalidrawContainer.focus();\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      onSelect(getCurrentColor(event), event);\n    };\n\n    const keyDownListener = event => {\n      if (event.key === _excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.KEYS.ESCAPE) {\n        event.preventDefault();\n        event.stopImmediatePropagation();\n        onCancel();\n      }\n    }; // -------------------------------------------------------------------------\n\n\n    eyeDropperContainer.tabIndex = -1; // focus container so we can listen on keydown events\n\n    eyeDropperContainer.focus(); // init color preview else it would show only after the first mouse move\n\n    mouseMoveListener({\n      clientX: stableProps.app.viewport.lastPosition.x,\n      clientY: stableProps.app.viewport.lastPosition.y,\n      altKey: false\n    });\n    eyeDropperContainer.addEventListener(_excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.EVENT.KEYDOWN, keyDownListener);\n    eyeDropperContainer.addEventListener(_excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.EVENT.POINTER_DOWN, pointerDownListener);\n    eyeDropperContainer.addEventListener(_excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.EVENT.POINTER_UP, pointerUpListener);\n    window.addEventListener(\"pointermove\", mouseMoveListener, {\n      passive: true\n    });\n    window.addEventListener(_excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.EVENT.BLUR, onCancel);\n    return () => {\n      isHoldingPointerDown = false;\n      eyeDropperContainer.removeEventListener(_excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.EVENT.KEYDOWN, keyDownListener);\n      eyeDropperContainer.removeEventListener(_excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.EVENT.POINTER_DOWN, pointerDownListener);\n      eyeDropperContainer.removeEventListener(_excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.EVENT.POINTER_UP, pointerUpListener);\n      window.removeEventListener(\"pointermove\", mouseMoveListener);\n      window.removeEventListener(_excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.EVENT.BLUR, onCancel);\n    };\n  }, [stableProps, app.canvas, eyeDropperContainer, colorPickerType, excalidrawContainer, appState.offsetLeft, appState.offsetTop]);\n  const ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  (0,_hooks_useOutsideClick__WEBPACK_IMPORTED_MODULE_6__.useOutsideClick)(ref, () => {\n    onCancel();\n  }, event => {\n    if (event.target.closest(\".excalidraw-eye-dropper-trigger, .excalidraw-eye-dropper-backdrop\")) {\n      return true;\n    } // consider all other clicks as outside\n\n\n    return false;\n  });\n\n  if (!eyeDropperContainer) {\n    return null;\n  }\n\n  return /*#__PURE__*/(0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(React.createElement(\"div\", {\n    ref: ref,\n    className: \"excalidraw-eye-dropper-preview\"\n  }), eyeDropperContainer);\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./components/EyeDropper.tsx?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EyeDropper: () => (/* binding */ EyeDropper),\n/* harmony export */   activeEyeDropperAtom: () => (/* binding */ activeEyeDropperAtom)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _excalidraw_common__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @excalidraw/common */ \"../common/src/index.ts\");\n/* harmony import */ var _context_ui_appState__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../context/ui-appState */ \"./context/ui-appState.ts\");\n/* harmony import */ var _editor_jotai__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../editor-jotai */ \"./editor-jotai.ts\");\n/* harmony import */ var _hooks_useCreatePortalContainer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../hooks/useCreatePortalContainer */ \"./hooks/useCreatePortalContainer.ts\");\n/* harmony import */ var _hooks_useOutsideClick__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../hooks/useOutsideClick */ \"./hooks/useOutsideClick.ts\");\n/* harmony import */ var _hooks_useStable__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../hooks/useStable */ \"./hooks/useStable.ts\");\n/* harmony import */ var _scene__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../scene */ \"./scene/index.ts\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./App */ \"./components/App.tsx\");\n/* harmony import */ var _positionElementBesideCursor__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./positionElementBesideCursor */ \"./components/positionElementBesideCursor.ts\");\n/* harmony import */ var _EyeDropper_scss__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./EyeDropper.scss */ \"./components/EyeDropper.scss\");\n\n\n\n\n\n\n\n\n\n\n\n\nconst activeEyeDropperAtom = (0,_editor_jotai__WEBPACK_IMPORTED_MODULE_4__.atom)(null);\nconst EyeDropper = ({\n  onCancel,\n  onChange,\n  onSelect,\n  colorPickerType\n}) => {\n  const eyeDropperContainer = (0,_hooks_useCreatePortalContainer__WEBPACK_IMPORTED_MODULE_5__.useCreatePortalContainer)({\n    className: \"excalidraw-eye-dropper-backdrop\",\n    parentSelector: \".excalidraw-eye-dropper-container\"\n  });\n  const appState = (0,_context_ui_appState__WEBPACK_IMPORTED_MODULE_3__.useUIAppState)();\n  const elements = (0,_App__WEBPACK_IMPORTED_MODULE_9__.useExcalidrawElements)();\n  const app = (0,_App__WEBPACK_IMPORTED_MODULE_9__.useApp)();\n  const selectedElements = (0,_scene__WEBPACK_IMPORTED_MODULE_8__.getSelectedElements)(elements, appState);\n  const stableProps = (0,_hooks_useStable__WEBPACK_IMPORTED_MODULE_7__.useStable)({\n    app,\n    onCancel,\n    onChange,\n    onSelect,\n    selectedElements\n  });\n  const {\n    container: excalidrawContainer\n  } = (0,_App__WEBPACK_IMPORTED_MODULE_9__.useExcalidrawContainer)();\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const colorPreviewDiv = ref.current;\n\n    if (!colorPreviewDiv || !app.canvas || !eyeDropperContainer) {\n      return;\n    }\n\n    let isHoldingPointerDown = false;\n    const ctx = app.canvas.getContext(\"2d\");\n\n    const getCurrentColor = ({\n      clientX,\n      clientY\n    }) => {\n      const pixel = ctx.getImageData((clientX - appState.offsetLeft) * window.devicePixelRatio, (clientY - appState.offsetTop) * window.devicePixelRatio, 1, 1).data;\n      return (0,_excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.rgbToHex)(pixel[0], pixel[1], pixel[2]);\n    };\n\n    const mouseMoveListener = ({\n      clientX,\n      clientY,\n      altKey\n    }) => {\n      const {\n        top,\n        left\n      } = (0,_positionElementBesideCursor__WEBPACK_IMPORTED_MODULE_10__.positionElementBesideCursor)({\n        cursor: {\n          x: clientX,\n          // - appState.offsetLeft, //zsviczian added offset\n          y: clientY // - appState.offsetTop, //zsviczian added offset\n\n        },\n        element: {\n          width: colorPreviewDiv.offsetWidth,\n          height: colorPreviewDiv.offsetHeight\n        },\n        container: eyeDropperContainer.getBoundingClientRect(),\n        gap: 20\n      });\n      colorPreviewDiv.style.top = `${top}px`;\n      colorPreviewDiv.style.left = `${left}px`;\n      const currentColor = getCurrentColor({\n        clientX,\n        clientY\n      });\n\n      if (isHoldingPointerDown) {\n        stableProps.onChange(colorPickerType, currentColor, stableProps.selectedElements, {\n          altKey\n        });\n      }\n\n      colorPreviewDiv.style.background = currentColor;\n    };\n\n    const onCancel = () => {\n      stableProps.onCancel();\n    };\n\n    const onSelect = (color, event) => {\n      stableProps.onSelect(color, event);\n    };\n\n    const pointerDownListener = event => {\n      isHoldingPointerDown = true; // NOTE we can't event.preventDefault() as that would stop\n      // pointermove events\n\n      event.stopImmediatePropagation();\n    };\n\n    const pointerUpListener = event => {\n      isHoldingPointerDown = false; // since we're not preventing default on pointerdown, the focus would\n      // goes back to `body` so we want to refocus the editor container instead\n\n      excalidrawContainer === null || excalidrawContainer === void 0 ? void 0 : excalidrawContainer.focus();\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      onSelect(getCurrentColor(event), event);\n    };\n\n    const keyDownListener = event => {\n      if (event.key === _excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.KEYS.ESCAPE) {\n        event.preventDefault();\n        event.stopImmediatePropagation();\n        onCancel();\n      }\n    }; // -------------------------------------------------------------------------\n\n\n    eyeDropperContainer.tabIndex = -1; // focus container so we can listen on keydown events\n\n    eyeDropperContainer.focus(); // init color preview else it would show only after the first mouse move\n\n    mouseMoveListener({\n      clientX: stableProps.app.viewport.lastPosition.x,\n      clientY: stableProps.app.viewport.lastPosition.y,\n      altKey: false\n    });\n    eyeDropperContainer.addEventListener(_excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.EVENT.KEYDOWN, keyDownListener);\n    eyeDropperContainer.addEventListener(_excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.EVENT.POINTER_DOWN, pointerDownListener);\n    eyeDropperContainer.addEventListener(_excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.EVENT.POINTER_UP, pointerUpListener);\n    window.addEventListener(\"pointermove\", mouseMoveListener, {\n      passive: true\n    });\n    window.addEventListener(_excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.EVENT.BLUR, onCancel);\n    return () => {\n      isHoldingPointerDown = false;\n      eyeDropperContainer.removeEventListener(_excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.EVENT.KEYDOWN, keyDownListener);\n      eyeDropperContainer.removeEventListener(_excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.EVENT.POINTER_DOWN, pointerDownListener);\n      eyeDropperContainer.removeEventListener(_excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.EVENT.POINTER_UP, pointerUpListener);\n      window.removeEventListener(\"pointermove\", mouseMoveListener);\n      window.removeEventListener(_excalidraw_common__WEBPACK_IMPORTED_MODULE_2__.EVENT.BLUR, onCancel);\n    };\n  }, [stableProps, app.canvas, eyeDropperContainer, colorPickerType, excalidrawContainer, appState.offsetLeft, appState.offsetTop]);\n  const ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  (0,_hooks_useOutsideClick__WEBPACK_IMPORTED_MODULE_6__.useOutsideClick)(ref, () => {\n    onCancel();\n  }, event => {\n    if (event.target.closest(\".excalidraw-eye-dropper-trigger, .excalidraw-eye-dropper-backdrop\")) {\n      return true;\n    } // consider all other clicks as outside\n\n\n    return false;\n  });\n\n  if (!eyeDropperContainer) {\n    return null;\n  }\n\n  return /*#__PURE__*/(0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(React.createElement(\"div\", {\n    ref: ref,\n    className: \"excalidraw-eye-dropper-preview\"\n  }), eyeDropperContainer);\n};\n\n//# sourceURL=webpack://ExcalidrawLib/./components/EyeDropper.tsx?\n}");
 /***/ },