js-draw 1.21.2 → 1.22.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +103 -75
- package/build-config.json +2 -2
- package/dist/Editor.css +29 -16
- package/dist/bundle.js +2 -2
- package/dist/bundledStyles.js +1 -1
- package/dist/cjs/Editor.js +36 -22
- package/dist/cjs/EventDispatcher.js +1 -1
- package/dist/cjs/Pointer.js +3 -3
- package/dist/cjs/SVGLoader/SVGLoader.js +13 -6
- package/dist/cjs/UndoRedoHistory.js +1 -1
- package/dist/cjs/Viewport.js +4 -2
- package/dist/cjs/commands/Command.js +7 -5
- package/dist/cjs/commands/Duplicate.js +2 -2
- package/dist/cjs/commands/Erase.js +3 -4
- package/dist/cjs/commands/invertCommand.js +4 -4
- package/dist/cjs/commands/lib.d.ts +1 -1
- package/dist/cjs/commands/uniteCommands.js +4 -4
- package/dist/cjs/components/AbstractComponent.d.ts +1 -1
- package/dist/cjs/components/AbstractComponent.js +3 -3
- package/dist/cjs/components/BackgroundComponent.js +8 -6
- package/dist/cjs/components/ImageComponent.js +12 -5
- package/dist/cjs/components/RestylableComponent.js +1 -1
- package/dist/cjs/components/SVGGlobalAttributesObject.js +1 -2
- package/dist/cjs/components/Stroke.js +37 -24
- package/dist/cjs/components/TextComponent.js +13 -10
- package/dist/cjs/components/UnknownSVGObject.js +2 -3
- package/dist/cjs/components/builders/ArrowBuilder.d.ts +6 -0
- package/dist/cjs/components/builders/ArrowBuilder.js +9 -3
- package/dist/cjs/components/builders/CircleBuilder.d.ts +6 -0
- package/dist/cjs/components/builders/CircleBuilder.js +11 -4
- package/dist/cjs/components/builders/FreehandLineBuilder.d.ts +6 -0
- package/dist/cjs/components/builders/FreehandLineBuilder.js +10 -4
- package/dist/cjs/components/builders/LineBuilder.d.ts +6 -0
- package/dist/cjs/components/builders/LineBuilder.js +8 -4
- package/dist/cjs/components/builders/PolylineBuilder.d.ts +4 -1
- package/dist/cjs/components/builders/PolylineBuilder.js +9 -5
- package/dist/cjs/components/builders/PressureSensitiveFreehandLineBuilder.js +16 -10
- package/dist/cjs/components/builders/RectangleBuilder.d.ts +12 -0
- package/dist/cjs/components/builders/RectangleBuilder.js +17 -3
- package/dist/cjs/components/builders/autocorrect/makeShapeFitAutocorrect.js +5 -8
- package/dist/cjs/components/builders/autocorrect/makeSnapToGridAutocorrect.js +1 -1
- package/dist/cjs/components/builders/lib.d.ts +7 -0
- package/dist/cjs/components/builders/lib.js +18 -0
- package/dist/cjs/components/lib.d.ts +1 -4
- package/dist/cjs/components/lib.js +2 -9
- package/dist/cjs/components/util/StrokeSmoother.js +5 -6
- package/dist/cjs/dialogs/makeAboutDialog.js +1 -1
- package/dist/cjs/dialogs/makeMessageDialog.js +2 -2
- package/dist/cjs/image/EditorImage.js +13 -15
- package/dist/cjs/image/export/editorImageToSVG.js +1 -1
- package/dist/cjs/inputEvents.js +3 -3
- package/dist/cjs/lib.d.ts +2 -2
- package/dist/cjs/localizations/de.js +2 -2
- package/dist/cjs/localizations/es.js +7 -3
- package/dist/cjs/rendering/Display.js +7 -3
- package/dist/cjs/rendering/RenderablePathSpec.js +26 -11
- package/dist/cjs/rendering/RenderingStyle.js +22 -15
- package/dist/cjs/rendering/TextRenderingStyle.js +1 -1
- package/dist/cjs/rendering/caching/CacheRecord.js +1 -1
- package/dist/cjs/rendering/caching/CacheRecordManager.js +1 -1
- package/dist/cjs/rendering/caching/RenderingCache.js +1 -1
- package/dist/cjs/rendering/caching/RenderingCacheNode.js +26 -15
- package/dist/cjs/rendering/caching/testUtils.js +2 -2
- package/dist/cjs/rendering/renderers/AbstractRenderer.js +3 -1
- package/dist/cjs/rendering/renderers/CanvasRenderer.js +4 -3
- package/dist/cjs/rendering/renderers/DummyRenderer.js +1 -1
- package/dist/cjs/rendering/renderers/SVGRenderer.js +37 -19
- package/dist/cjs/rendering/renderers/TextOnlyRenderer.js +13 -15
- package/dist/cjs/shortcuts/KeyBinding.js +6 -12
- package/dist/cjs/shortcuts/KeyboardShortcutManager.js +2 -2
- package/dist/cjs/testing/createEditor.js +6 -1
- package/dist/cjs/testing/findNodeWithText.d.ts +4 -1
- package/dist/cjs/testing/findNodeWithText.js +12 -3
- package/dist/cjs/testing/getUniquePointerId.js +1 -1
- package/dist/cjs/testing/sendHtmlSwipe.js +7 -3
- package/dist/cjs/testing/sendPenEvent.js +1 -3
- package/dist/cjs/testing/sendTouchEvent.js +1 -4
- package/dist/cjs/testing/startPinchGesture.js +3 -1
- package/dist/cjs/toolbar/AbstractToolbar.js +7 -11
- package/dist/cjs/toolbar/EdgeToolbar.js +11 -15
- package/dist/cjs/toolbar/IconProvider.js +5 -3
- package/dist/cjs/toolbar/localization.js +3 -3
- package/dist/cjs/toolbar/utils/HelpDisplay.js +8 -6
- package/dist/cjs/toolbar/utils/makeDraggable.js +4 -7
- package/dist/cjs/toolbar/widgets/BaseToolWidget.js +3 -2
- package/dist/cjs/toolbar/widgets/BaseWidget.js +7 -7
- package/dist/cjs/toolbar/widgets/DocumentPropertiesWidget.js +2 -2
- package/dist/cjs/toolbar/widgets/EraserToolWidget.js +5 -3
- package/dist/cjs/toolbar/widgets/HandToolWidget.js +8 -6
- package/dist/cjs/toolbar/widgets/InsertImageWidget/InsertImageWidget.js +9 -10
- package/dist/cjs/toolbar/widgets/PenToolWidget.js +22 -13
- package/dist/cjs/toolbar/widgets/SelectionToolWidget.js +2 -2
- package/dist/cjs/toolbar/widgets/TextToolWidget.js +5 -5
- package/dist/cjs/toolbar/widgets/components/makeFileInput.js +7 -7
- package/dist/cjs/toolbar/widgets/components/makeGridSelector.js +5 -5
- package/dist/cjs/toolbar/widgets/components/makeSnappedList.js +9 -5
- package/dist/cjs/toolbar/widgets/keybindings.js +2 -2
- package/dist/cjs/toolbar/widgets/layout/DropdownLayoutManager.js +6 -6
- package/dist/cjs/tools/BaseTool.d.ts +61 -0
- package/dist/cjs/tools/BaseTool.js +181 -0
- package/dist/cjs/tools/Eraser.d.ts +60 -0
- package/dist/cjs/tools/Eraser.js +304 -0
- package/dist/cjs/tools/Eraser.test.d.ts +1 -0
- package/dist/cjs/tools/FindTool.d.ts +21 -0
- package/dist/cjs/tools/FindTool.js +137 -0
- package/dist/cjs/tools/FindTool.test.d.ts +1 -0
- package/dist/cjs/tools/InputFilter/ContextMenuRecognizer.d.ts +17 -0
- package/dist/cjs/tools/InputFilter/ContextMenuRecognizer.js +103 -0
- package/dist/cjs/tools/InputFilter/ContextMenuRecognizer.test.d.ts +1 -0
- package/dist/cjs/tools/InputFilter/FunctionMapper.d.ts +12 -0
- package/dist/cjs/tools/InputFilter/FunctionMapper.js +21 -0
- package/dist/cjs/tools/InputFilter/InputMapper.d.ts +23 -0
- package/dist/cjs/tools/InputFilter/InputMapper.js +38 -0
- package/dist/cjs/tools/InputFilter/InputPipeline.d.ts +15 -0
- package/dist/cjs/tools/InputFilter/InputPipeline.js +54 -0
- package/dist/cjs/tools/InputFilter/InputPipeline.test.d.ts +1 -0
- package/dist/cjs/tools/InputFilter/InputStabilizer.d.ts +29 -0
- package/dist/cjs/tools/InputFilter/InputStabilizer.js +188 -0
- package/dist/cjs/tools/InputFilter/StrokeKeyboardControl.d.ts +21 -0
- package/dist/cjs/tools/InputFilter/StrokeKeyboardControl.js +87 -0
- package/dist/cjs/tools/PanZoom.d.ts +125 -0
- package/dist/cjs/tools/PanZoom.js +522 -0
- package/dist/cjs/tools/PanZoom.test.d.ts +1 -0
- package/dist/cjs/tools/PasteHandler.d.ts +23 -0
- package/dist/cjs/tools/PasteHandler.js +115 -0
- package/dist/cjs/tools/Pen.d.ts +54 -0
- package/dist/cjs/tools/Pen.js +343 -0
- package/dist/cjs/tools/Pen.test.d.ts +1 -0
- package/dist/cjs/tools/PipetteTool.d.ts +28 -0
- package/dist/cjs/tools/PipetteTool.js +69 -0
- package/dist/cjs/tools/ScrollbarTool.d.ts +18 -0
- package/dist/cjs/tools/ScrollbarTool.js +86 -0
- package/dist/cjs/tools/SelectionTool/SelectAllShortcutHandler.d.ts +9 -0
- package/dist/cjs/tools/SelectionTool/SelectAllShortcutHandler.js +32 -0
- package/dist/cjs/tools/SelectionTool/Selection.d.ts +72 -0
- package/dist/cjs/tools/SelectionTool/Selection.js +638 -0
- package/dist/cjs/tools/SelectionTool/SelectionHandle.d.ts +62 -0
- package/dist/cjs/tools/SelectionTool/SelectionHandle.js +144 -0
- package/dist/cjs/tools/SelectionTool/SelectionMenuShortcut.d.ts +32 -0
- package/dist/cjs/tools/SelectionTool/SelectionMenuShortcut.js +88 -0
- package/dist/cjs/tools/SelectionTool/SelectionTool.d.ts +42 -0
- package/dist/cjs/tools/SelectionTool/SelectionTool.js +509 -0
- package/dist/cjs/tools/SelectionTool/SelectionTool.selecting.test.d.ts +1 -0
- package/dist/cjs/tools/SelectionTool/SelectionTool.test.d.ts +1 -0
- package/dist/cjs/tools/SelectionTool/ToPointerAutoscroller.d.ts +23 -0
- package/dist/cjs/tools/SelectionTool/ToPointerAutoscroller.js +83 -0
- package/dist/cjs/tools/SelectionTool/TransformMode.d.ts +42 -0
- package/dist/cjs/tools/SelectionTool/TransformMode.js +154 -0
- package/dist/cjs/tools/SelectionTool/keybindings.d.ts +15 -0
- package/dist/cjs/tools/SelectionTool/keybindings.js +38 -0
- package/dist/cjs/tools/SelectionTool/types.d.ts +35 -0
- package/dist/cjs/tools/SelectionTool/types.js +14 -0
- package/dist/cjs/tools/SelectionTool/util/makeClipboardErrorHandlers.d.ts +6 -0
- package/dist/cjs/tools/SelectionTool/util/makeClipboardErrorHandlers.js +71 -0
- package/dist/cjs/tools/SelectionTool/util/showSelectionContextMenu.d.ts +5 -0
- package/dist/cjs/tools/SelectionTool/util/showSelectionContextMenu.js +52 -0
- package/dist/cjs/tools/SoundUITool.d.ts +26 -0
- package/dist/cjs/tools/SoundUITool.js +173 -0
- package/dist/cjs/tools/TextTool.d.ts +36 -0
- package/dist/cjs/tools/TextTool.js +287 -0
- package/dist/cjs/tools/TextTool.test.d.ts +1 -0
- package/dist/cjs/tools/ToolController.d.ts +73 -0
- package/dist/cjs/tools/ToolController.js +310 -0
- package/dist/cjs/tools/ToolController.test.d.ts +1 -0
- package/dist/cjs/tools/ToolEnabledGroup.d.ts +6 -0
- package/dist/cjs/tools/ToolEnabledGroup.js +13 -0
- package/dist/cjs/tools/ToolSwitcherShortcut.d.ts +16 -0
- package/dist/cjs/tools/ToolSwitcherShortcut.js +40 -0
- package/dist/cjs/tools/ToolbarShortcutHandler.d.ts +12 -0
- package/dist/cjs/tools/ToolbarShortcutHandler.js +34 -0
- package/dist/cjs/tools/UndoRedoShortcut.d.ts +8 -0
- package/dist/cjs/tools/UndoRedoShortcut.js +27 -0
- package/dist/cjs/tools/UndoRedoShortcut.test.d.ts +1 -0
- package/dist/cjs/tools/keybindings.d.ts +16 -0
- package/dist/cjs/tools/keybindings.js +58 -0
- package/dist/cjs/tools/lib.d.ts +14 -0
- package/dist/cjs/tools/lib.js +36 -0
- package/dist/cjs/tools/localization.d.ts +45 -0
- package/dist/cjs/tools/localization.js +47 -0
- package/dist/cjs/tools/util/StationaryPenDetector.d.ts +25 -0
- package/dist/cjs/tools/util/StationaryPenDetector.js +107 -0
- package/dist/cjs/tools/util/createMenuOverlay.d.ts +10 -0
- package/dist/cjs/tools/util/createMenuOverlay.js +126 -0
- package/dist/cjs/tools/util/createMenuOverlay.test.d.ts +1 -0
- package/dist/cjs/util/ClipboardHandler.d.ts +1 -1
- package/dist/cjs/util/ClipboardHandler.js +19 -18
- package/dist/cjs/util/ReactiveValue.js +16 -12
- package/dist/cjs/util/adjustEditorThemeForContrast.js +6 -2
- package/dist/cjs/util/guessKeyCodeFromKey.js +1 -1
- package/dist/cjs/util/listenForKeyboardEventsFrom.js +8 -6
- package/dist/cjs/util/waitForAll.js +3 -3
- package/dist/cjs/util/waitForImageLoaded.js +3 -3
- package/dist/cjs/util/waitForTimeout.js +1 -1
- package/dist/cjs/version.js +1 -1
- package/dist/mjs/Editor.mjs +37 -23
- package/dist/mjs/EventDispatcher.mjs +1 -1
- package/dist/mjs/Pointer.mjs +3 -3
- package/dist/mjs/SVGLoader/SVGLoader.mjs +14 -7
- package/dist/mjs/UndoRedoHistory.mjs +1 -1
- package/dist/mjs/Viewport.mjs +4 -2
- package/dist/mjs/commands/Command.mjs +7 -5
- package/dist/mjs/commands/Duplicate.mjs +2 -2
- package/dist/mjs/commands/Erase.mjs +3 -4
- package/dist/mjs/commands/invertCommand.mjs +4 -4
- package/dist/mjs/commands/lib.d.ts +1 -1
- package/dist/mjs/commands/lib.mjs +1 -1
- package/dist/mjs/commands/uniteCommands.mjs +4 -4
- package/dist/mjs/components/AbstractComponent.d.ts +1 -1
- package/dist/mjs/components/AbstractComponent.mjs +3 -3
- package/dist/mjs/components/BackgroundComponent.mjs +10 -8
- package/dist/mjs/components/ImageComponent.mjs +12 -5
- package/dist/mjs/components/RestylableComponent.mjs +2 -2
- package/dist/mjs/components/SVGGlobalAttributesObject.mjs +1 -2
- package/dist/mjs/components/Stroke.mjs +40 -27
- package/dist/mjs/components/TextComponent.mjs +15 -12
- package/dist/mjs/components/UnknownSVGObject.mjs +2 -3
- package/dist/mjs/components/builders/ArrowBuilder.d.ts +6 -0
- package/dist/mjs/components/builders/ArrowBuilder.mjs +9 -3
- package/dist/mjs/components/builders/CircleBuilder.d.ts +6 -0
- package/dist/mjs/components/builders/CircleBuilder.mjs +11 -4
- package/dist/mjs/components/builders/FreehandLineBuilder.d.ts +6 -0
- package/dist/mjs/components/builders/FreehandLineBuilder.mjs +10 -4
- package/dist/mjs/components/builders/LineBuilder.d.ts +6 -0
- package/dist/mjs/components/builders/LineBuilder.mjs +8 -4
- package/dist/mjs/components/builders/PolylineBuilder.d.ts +4 -1
- package/dist/mjs/components/builders/PolylineBuilder.mjs +10 -6
- package/dist/mjs/components/builders/PressureSensitiveFreehandLineBuilder.mjs +17 -11
- package/dist/mjs/components/builders/RectangleBuilder.d.ts +12 -0
- package/dist/mjs/components/builders/RectangleBuilder.mjs +17 -3
- package/dist/mjs/components/builders/autocorrect/makeShapeFitAutocorrect.mjs +5 -8
- package/dist/mjs/components/builders/autocorrect/makeSnapToGridAutocorrect.mjs +1 -1
- package/dist/mjs/components/builders/lib.d.ts +7 -0
- package/dist/mjs/components/builders/lib.mjs +7 -0
- package/dist/mjs/components/lib.d.ts +1 -4
- package/dist/mjs/components/lib.mjs +2 -5
- package/dist/mjs/components/util/StrokeSmoother.mjs +5 -6
- package/dist/mjs/dialogs/makeAboutDialog.mjs +1 -1
- package/dist/mjs/dialogs/makeMessageDialog.mjs +2 -2
- package/dist/mjs/image/EditorImage.mjs +13 -15
- package/dist/mjs/image/export/editorImageToSVG.mjs +1 -1
- package/dist/mjs/inputEvents.mjs +3 -3
- package/dist/mjs/lib.d.ts +2 -2
- package/dist/mjs/lib.mjs +2 -2
- package/dist/mjs/localization.mjs +2 -2
- package/dist/mjs/localizations/de.mjs +2 -2
- package/dist/mjs/localizations/es.mjs +7 -3
- package/dist/mjs/rendering/Display.mjs +7 -3
- package/dist/mjs/rendering/RenderablePathSpec.mjs +26 -11
- package/dist/mjs/rendering/RenderingStyle.mjs +22 -15
- package/dist/mjs/rendering/TextRenderingStyle.mjs +1 -1
- package/dist/mjs/rendering/caching/CacheRecord.mjs +1 -1
- package/dist/mjs/rendering/caching/CacheRecordManager.mjs +1 -1
- package/dist/mjs/rendering/caching/RenderingCache.mjs +1 -1
- package/dist/mjs/rendering/caching/RenderingCacheNode.mjs +26 -15
- package/dist/mjs/rendering/caching/testUtils.mjs +2 -2
- package/dist/mjs/rendering/renderers/AbstractRenderer.mjs +3 -1
- package/dist/mjs/rendering/renderers/CanvasRenderer.mjs +4 -3
- package/dist/mjs/rendering/renderers/DummyRenderer.mjs +1 -1
- package/dist/mjs/rendering/renderers/SVGRenderer.mjs +38 -20
- package/dist/mjs/rendering/renderers/TextOnlyRenderer.mjs +13 -15
- package/dist/mjs/shortcuts/KeyBinding.mjs +6 -12
- package/dist/mjs/shortcuts/KeyboardShortcutManager.mjs +2 -2
- package/dist/mjs/testing/createEditor.mjs +6 -1
- package/dist/mjs/testing/findNodeWithText.d.ts +4 -1
- package/dist/mjs/testing/findNodeWithText.mjs +12 -3
- package/dist/mjs/testing/getUniquePointerId.mjs +1 -1
- package/dist/mjs/testing/sendHtmlSwipe.mjs +7 -3
- package/dist/mjs/testing/sendPenEvent.mjs +1 -3
- package/dist/mjs/testing/sendTouchEvent.mjs +1 -4
- package/dist/mjs/testing/startPinchGesture.mjs +3 -1
- package/dist/mjs/toolbar/AbstractToolbar.mjs +7 -11
- package/dist/mjs/toolbar/EdgeToolbar.mjs +11 -15
- package/dist/mjs/toolbar/IconProvider.mjs +5 -3
- package/dist/mjs/toolbar/localization.mjs +3 -3
- package/dist/mjs/toolbar/utils/HelpDisplay.mjs +8 -6
- package/dist/mjs/toolbar/utils/makeDraggable.mjs +4 -7
- package/dist/mjs/toolbar/widgets/BaseToolWidget.mjs +3 -2
- package/dist/mjs/toolbar/widgets/BaseWidget.mjs +8 -8
- package/dist/mjs/toolbar/widgets/DocumentPropertiesWidget.mjs +2 -2
- package/dist/mjs/toolbar/widgets/EraserToolWidget.mjs +5 -3
- package/dist/mjs/toolbar/widgets/HandToolWidget.mjs +8 -6
- package/dist/mjs/toolbar/widgets/InsertImageWidget/InsertImageWidget.mjs +9 -10
- package/dist/mjs/toolbar/widgets/PenToolWidget.mjs +23 -14
- package/dist/mjs/toolbar/widgets/SelectionToolWidget.mjs +2 -2
- package/dist/mjs/toolbar/widgets/TextToolWidget.mjs +5 -5
- package/dist/mjs/toolbar/widgets/components/makeFileInput.mjs +7 -7
- package/dist/mjs/toolbar/widgets/components/makeGridSelector.mjs +5 -5
- package/dist/mjs/toolbar/widgets/components/makeSnappedList.mjs +9 -5
- package/dist/mjs/toolbar/widgets/keybindings.mjs +2 -2
- package/dist/mjs/toolbar/widgets/layout/DropdownLayoutManager.mjs +6 -6
- package/dist/mjs/tools/BaseTool.d.ts +61 -0
- package/dist/mjs/tools/BaseTool.mjs +179 -0
- package/dist/mjs/tools/Eraser.d.ts +60 -0
- package/dist/mjs/tools/Eraser.mjs +297 -0
- package/dist/mjs/tools/Eraser.test.d.ts +1 -0
- package/dist/mjs/tools/FindTool.d.ts +21 -0
- package/dist/mjs/tools/FindTool.mjs +131 -0
- package/dist/mjs/tools/FindTool.test.d.ts +1 -0
- package/dist/mjs/tools/InputFilter/ContextMenuRecognizer.d.ts +17 -0
- package/dist/mjs/tools/InputFilter/ContextMenuRecognizer.mjs +74 -0
- package/dist/mjs/tools/InputFilter/ContextMenuRecognizer.test.d.ts +1 -0
- package/dist/mjs/tools/InputFilter/FunctionMapper.d.ts +12 -0
- package/dist/mjs/tools/InputFilter/FunctionMapper.mjs +15 -0
- package/dist/mjs/tools/InputFilter/InputMapper.d.ts +23 -0
- package/dist/mjs/tools/InputFilter/InputMapper.mjs +36 -0
- package/dist/mjs/tools/InputFilter/InputPipeline.d.ts +15 -0
- package/dist/mjs/tools/InputFilter/InputPipeline.mjs +49 -0
- package/dist/mjs/tools/InputFilter/InputPipeline.test.d.ts +1 -0
- package/dist/mjs/tools/InputFilter/InputStabilizer.d.ts +29 -0
- package/dist/mjs/tools/InputFilter/InputStabilizer.mjs +182 -0
- package/dist/mjs/tools/InputFilter/StrokeKeyboardControl.d.ts +21 -0
- package/dist/mjs/tools/InputFilter/StrokeKeyboardControl.mjs +81 -0
- package/dist/mjs/tools/PanZoom.d.ts +125 -0
- package/dist/mjs/tools/PanZoom.mjs +515 -0
- package/dist/mjs/tools/PanZoom.test.d.ts +1 -0
- package/dist/mjs/tools/PasteHandler.d.ts +23 -0
- package/dist/mjs/tools/PasteHandler.mjs +109 -0
- package/dist/mjs/tools/Pen.d.ts +54 -0
- package/dist/mjs/tools/Pen.mjs +314 -0
- package/dist/mjs/tools/Pen.test.d.ts +1 -0
- package/dist/mjs/tools/PipetteTool.d.ts +28 -0
- package/dist/mjs/tools/PipetteTool.mjs +63 -0
- package/dist/mjs/tools/ScrollbarTool.d.ts +18 -0
- package/dist/mjs/tools/ScrollbarTool.mjs +80 -0
- package/dist/mjs/tools/SelectionTool/SelectAllShortcutHandler.d.ts +9 -0
- package/dist/mjs/tools/SelectionTool/SelectAllShortcutHandler.mjs +26 -0
- package/dist/mjs/tools/SelectionTool/Selection.d.ts +72 -0
- package/dist/mjs/tools/SelectionTool/Selection.mjs +610 -0
- package/dist/mjs/tools/SelectionTool/SelectionHandle.d.ts +62 -0
- package/dist/mjs/tools/SelectionTool/SelectionHandle.mjs +140 -0
- package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.d.ts +32 -0
- package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.mjs +85 -0
- package/dist/mjs/tools/SelectionTool/SelectionTool.d.ts +42 -0
- package/dist/mjs/tools/SelectionTool/SelectionTool.mjs +502 -0
- package/dist/mjs/tools/SelectionTool/SelectionTool.selecting.test.d.ts +1 -0
- package/dist/mjs/tools/SelectionTool/SelectionTool.test.d.ts +1 -0
- package/dist/mjs/tools/SelectionTool/ToPointerAutoscroller.d.ts +23 -0
- package/dist/mjs/tools/SelectionTool/ToPointerAutoscroller.mjs +77 -0
- package/dist/mjs/tools/SelectionTool/TransformMode.d.ts +42 -0
- package/dist/mjs/tools/SelectionTool/TransformMode.mjs +145 -0
- package/dist/mjs/tools/SelectionTool/keybindings.d.ts +15 -0
- package/dist/mjs/tools/SelectionTool/keybindings.mjs +32 -0
- package/dist/mjs/tools/SelectionTool/types.d.ts +35 -0
- package/dist/mjs/tools/SelectionTool/types.mjs +11 -0
- package/dist/mjs/tools/SelectionTool/util/makeClipboardErrorHandlers.d.ts +6 -0
- package/dist/mjs/tools/SelectionTool/util/makeClipboardErrorHandlers.mjs +66 -0
- package/dist/mjs/tools/SelectionTool/util/showSelectionContextMenu.d.ts +5 -0
- package/dist/mjs/tools/SelectionTool/util/showSelectionContextMenu.mjs +47 -0
- package/dist/mjs/tools/SoundUITool.d.ts +26 -0
- package/dist/mjs/tools/SoundUITool.mjs +167 -0
- package/dist/mjs/tools/TextTool.d.ts +36 -0
- package/dist/mjs/tools/TextTool.mjs +281 -0
- package/dist/mjs/tools/TextTool.test.d.ts +1 -0
- package/dist/mjs/tools/ToolController.d.ts +73 -0
- package/dist/mjs/tools/ToolController.mjs +281 -0
- package/dist/mjs/tools/ToolController.test.d.ts +1 -0
- package/dist/mjs/tools/ToolEnabledGroup.d.ts +6 -0
- package/dist/mjs/tools/ToolEnabledGroup.mjs +10 -0
- package/dist/mjs/tools/ToolSwitcherShortcut.d.ts +16 -0
- package/dist/mjs/tools/ToolSwitcherShortcut.mjs +34 -0
- package/dist/mjs/tools/ToolbarShortcutHandler.d.ts +12 -0
- package/dist/mjs/tools/ToolbarShortcutHandler.mjs +28 -0
- package/dist/mjs/tools/UndoRedoShortcut.d.ts +8 -0
- package/dist/mjs/tools/UndoRedoShortcut.mjs +21 -0
- package/dist/mjs/tools/UndoRedoShortcut.test.d.ts +1 -0
- package/dist/mjs/tools/keybindings.d.ts +16 -0
- package/dist/mjs/tools/keybindings.mjs +38 -0
- package/dist/mjs/tools/lib.d.ts +14 -0
- package/dist/mjs/tools/lib.mjs +14 -0
- package/dist/mjs/tools/localization.d.ts +45 -0
- package/dist/mjs/tools/localization.mjs +44 -0
- package/dist/mjs/tools/util/StationaryPenDetector.d.ts +25 -0
- package/dist/mjs/tools/util/StationaryPenDetector.mjs +103 -0
- package/dist/mjs/tools/util/createMenuOverlay.d.ts +10 -0
- package/dist/mjs/tools/util/createMenuOverlay.mjs +121 -0
- package/dist/mjs/tools/util/createMenuOverlay.test.d.ts +1 -0
- package/dist/mjs/util/ClipboardHandler.d.ts +1 -1
- package/dist/mjs/util/ClipboardHandler.mjs +19 -18
- package/dist/mjs/util/ReactiveValue.mjs +16 -12
- package/dist/mjs/util/adjustEditorThemeForContrast.mjs +6 -2
- package/dist/mjs/util/guessKeyCodeFromKey.mjs +1 -1
- package/dist/mjs/util/listenForKeyboardEventsFrom.mjs +8 -6
- package/dist/mjs/util/waitForAll.mjs +3 -3
- package/dist/mjs/util/waitForImageLoaded.mjs +3 -3
- package/dist/mjs/util/waitForTimeout.mjs +1 -1
- package/dist/mjs/version.mjs +1 -1
- package/package.json +88 -88
- package/src/Coloris.css +6 -6
- package/src/Editor.scss +7 -5
- package/src/dialogs/dialogs.scss +3 -4
- package/src/dialogs/makeAboutDialog.scss +2 -2
- package/src/dialogs/makeMessageDialog.scss +11 -7
- package/src/styles.js +1 -1
- package/src/toolbar/AbstractToolbar.scss +20 -12
- package/src/toolbar/DropdownToolbar.scss +5 -4
- package/src/toolbar/EdgeToolbar.scss +65 -31
- package/src/toolbar/toolbar.scss +5 -5
- package/src/toolbar/utils/HelpDisplay.scss +48 -25
- package/src/toolbar/utils/labelVisibleOnHover.scss +39 -16
- package/src/toolbar/widgets/DocumentPropertiesWidget.scss +0 -1
- package/src/toolbar/widgets/HandToolWidget.scss +0 -1
- package/src/toolbar/widgets/InsertImageWidget/InsertImageWidget.scss +2 -3
- package/src/toolbar/widgets/OverflowWidget.css +1 -2
- package/src/toolbar/widgets/PenToolWidget.scss +0 -2
- package/src/toolbar/widgets/SelectionToolWidget.scss +1 -2
- package/src/toolbar/widgets/components/components.scss +6 -6
- package/src/toolbar/widgets/components/makeColorInput.scss +0 -2
- package/src/toolbar/widgets/components/makeFileInput.scss +5 -7
- package/src/toolbar/widgets/components/makeGridSelector.scss +6 -9
- package/src/toolbar/widgets/components/makeSnappedList.scss +3 -4
- package/src/toolbar/widgets/components/makeThicknessSlider.scss +1 -2
- package/src/toolbar/widgets/widgets.scss +7 -7
- package/src/tools/FindTool.css +6 -0
- package/src/tools/ScrollbarTool.scss +61 -0
- package/src/tools/SelectionTool/SelectionTool.scss +173 -0
- package/src/tools/SelectionTool/util/makeClipboardErrorHandlers.scss +14 -0
- package/src/tools/SoundUITool.scss +22 -0
- package/src/tools/tools.scss +5 -0
- package/src/tools/util/createMenuOverlay.scss +73 -0
- package/tsconfig.json +1 -3
- package/typedoc.json +1 -1
@@ -0,0 +1,304 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
|
+
};
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
+
exports.EraserMode = void 0;
|
7
|
+
const types_1 = require("../types");
|
8
|
+
const BaseTool_1 = __importDefault(require("./BaseTool"));
|
9
|
+
const math_1 = require("@js-draw/math");
|
10
|
+
const Erase_1 = __importDefault(require("../commands/Erase"));
|
11
|
+
const Pointer_1 = require("../Pointer");
|
12
|
+
const keybindings_1 = require("./keybindings");
|
13
|
+
const ReactiveValue_1 = require("../util/ReactiveValue");
|
14
|
+
const EditorImage_1 = __importDefault(require("../image/EditorImage"));
|
15
|
+
const uniteCommands_1 = __importDefault(require("../commands/uniteCommands"));
|
16
|
+
const RenderablePathSpec_1 = require("../rendering/RenderablePathSpec");
|
17
|
+
var EraserMode;
|
18
|
+
(function (EraserMode) {
|
19
|
+
EraserMode["PartialStroke"] = "partial-stroke";
|
20
|
+
EraserMode["FullStroke"] = "full-stroke";
|
21
|
+
})(EraserMode || (exports.EraserMode = EraserMode = {}));
|
22
|
+
/** Handles switching from other primary tools to the eraser and back */
|
23
|
+
class EraserSwitcher extends BaseTool_1.default {
|
24
|
+
constructor(editor, eraser) {
|
25
|
+
super(editor.notifier, editor.localization.changeTool);
|
26
|
+
this.editor = editor;
|
27
|
+
this.eraser = eraser;
|
28
|
+
}
|
29
|
+
onPointerDown(event) {
|
30
|
+
if (event.allPointers.length === 1 && event.current.device === Pointer_1.PointerDevice.Eraser) {
|
31
|
+
const toolController = this.editor.toolController;
|
32
|
+
const enabledPrimaryTools = toolController
|
33
|
+
.getPrimaryTools()
|
34
|
+
.filter((tool) => tool.isEnabled());
|
35
|
+
if (enabledPrimaryTools.length) {
|
36
|
+
this.previousEnabledTool = enabledPrimaryTools[0];
|
37
|
+
}
|
38
|
+
else {
|
39
|
+
this.previousEnabledTool = null;
|
40
|
+
}
|
41
|
+
this.previousEraserEnabledState = this.eraser.isEnabled();
|
42
|
+
this.eraser.setEnabled(true);
|
43
|
+
if (this.eraser.onPointerDown(event)) {
|
44
|
+
return true;
|
45
|
+
}
|
46
|
+
else {
|
47
|
+
this.restoreOriginalTool();
|
48
|
+
}
|
49
|
+
}
|
50
|
+
return false;
|
51
|
+
}
|
52
|
+
onPointerMove(event) {
|
53
|
+
this.eraser.onPointerMove(event);
|
54
|
+
}
|
55
|
+
restoreOriginalTool() {
|
56
|
+
this.eraser.setEnabled(this.previousEraserEnabledState);
|
57
|
+
if (this.previousEnabledTool) {
|
58
|
+
this.previousEnabledTool.setEnabled(true);
|
59
|
+
}
|
60
|
+
}
|
61
|
+
onPointerUp(event) {
|
62
|
+
this.eraser.onPointerUp(event);
|
63
|
+
this.restoreOriginalTool();
|
64
|
+
}
|
65
|
+
onGestureCancel(event) {
|
66
|
+
this.eraser.onGestureCancel(event);
|
67
|
+
this.restoreOriginalTool();
|
68
|
+
}
|
69
|
+
}
|
70
|
+
/**
|
71
|
+
* A tool that allows a user to erase parts of an image.
|
72
|
+
*/
|
73
|
+
class Eraser extends BaseTool_1.default {
|
74
|
+
constructor(editor, description, options) {
|
75
|
+
super(editor.notifier, description);
|
76
|
+
this.editor = editor;
|
77
|
+
this.lastPoint = null;
|
78
|
+
this.isFirstEraseEvt = true;
|
79
|
+
this.toAdd = new Set();
|
80
|
+
// Commands that each remove one element
|
81
|
+
this.eraseCommands = [];
|
82
|
+
this.addCommands = [];
|
83
|
+
this.thickness = options?.thickness ?? 10;
|
84
|
+
this.thicknessValue = ReactiveValue_1.ReactiveValue.fromInitialValue(this.thickness);
|
85
|
+
this.thicknessValue.onUpdate((value) => {
|
86
|
+
this.thickness = value;
|
87
|
+
this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
|
88
|
+
kind: types_1.EditorEventType.ToolUpdated,
|
89
|
+
tool: this,
|
90
|
+
});
|
91
|
+
});
|
92
|
+
this.modeValue = ReactiveValue_1.ReactiveValue.fromInitialValue(options?.mode ?? EraserMode.FullStroke);
|
93
|
+
this.modeValue.onUpdate((_value) => {
|
94
|
+
this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
|
95
|
+
kind: types_1.EditorEventType.ToolUpdated,
|
96
|
+
tool: this,
|
97
|
+
});
|
98
|
+
});
|
99
|
+
}
|
100
|
+
/**
|
101
|
+
* @returns a tool that briefly enables the eraser when a physical eraser is used.
|
102
|
+
* This tool should be added to the tool list after the primary tools.
|
103
|
+
*/
|
104
|
+
makeEraserSwitcherTool() {
|
105
|
+
return new EraserSwitcher(this.editor, this);
|
106
|
+
}
|
107
|
+
clearPreview() {
|
108
|
+
this.editor.clearWetInk();
|
109
|
+
}
|
110
|
+
getSizeOnCanvas() {
|
111
|
+
return this.thickness / this.editor.viewport.getScaleFactor();
|
112
|
+
}
|
113
|
+
drawPreviewAt(point) {
|
114
|
+
this.clearPreview();
|
115
|
+
const size = this.getSizeOnCanvas();
|
116
|
+
const renderer = this.editor.display.getWetInkRenderer();
|
117
|
+
const rect = this.getEraserRect(point);
|
118
|
+
const rect2 = this.getEraserRect(this.lastPoint ?? point);
|
119
|
+
const fill = {
|
120
|
+
fill: math_1.Color4.transparent,
|
121
|
+
stroke: { width: size / 10, color: math_1.Color4.gray },
|
122
|
+
};
|
123
|
+
renderer.drawPath((0, RenderablePathSpec_1.pathToRenderable)(math_1.Path.fromConvexHullOf([...rect.corners, ...rect2.corners]), fill));
|
124
|
+
}
|
125
|
+
/**
|
126
|
+
* @returns the eraser rectangle in canvas coordinates.
|
127
|
+
*
|
128
|
+
* For now, all erasers are rectangles or points.
|
129
|
+
*/
|
130
|
+
getEraserRect(centerPoint) {
|
131
|
+
const size = this.getSizeOnCanvas();
|
132
|
+
const halfSize = math_1.Vec2.of(size / 2, size / 2);
|
133
|
+
return math_1.Rect2.fromCorners(centerPoint.minus(halfSize), centerPoint.plus(halfSize));
|
134
|
+
}
|
135
|
+
/** Erases in a line from the last point to the current. */
|
136
|
+
eraseTo(currentPoint) {
|
137
|
+
if (!this.isFirstEraseEvt && currentPoint.distanceTo(this.lastPoint) === 0) {
|
138
|
+
return;
|
139
|
+
}
|
140
|
+
this.isFirstEraseEvt = false;
|
141
|
+
// Currently only objects within eraserRect or that intersect a straight line
|
142
|
+
// from the center of the current rect to the previous are erased. TODO: Erase
|
143
|
+
// all objects as if there were pointerMove events between the two points.
|
144
|
+
const eraserRect = this.getEraserRect(currentPoint);
|
145
|
+
const line = new math_1.LineSegment2(this.lastPoint, currentPoint);
|
146
|
+
const region = math_1.Rect2.union(line.bbox, eraserRect);
|
147
|
+
const intersectingElems = this.editor.image
|
148
|
+
.getElementsIntersectingRegion(region)
|
149
|
+
.filter((component) => {
|
150
|
+
return component.intersects(line) || component.intersectsRect(eraserRect);
|
151
|
+
});
|
152
|
+
// Only erase components that could be selected (and thus interacted with)
|
153
|
+
// by the user.
|
154
|
+
const eraseableElems = intersectingElems.filter((elem) => elem.isSelectable());
|
155
|
+
if (this.modeValue.get() === EraserMode.FullStroke) {
|
156
|
+
// Remove any intersecting elements.
|
157
|
+
this.toRemove.push(...eraseableElems);
|
158
|
+
// Create new Erase commands for the now-to-be-erased elements and apply them.
|
159
|
+
const newPartialCommands = eraseableElems.map((elem) => new Erase_1.default([elem]));
|
160
|
+
newPartialCommands.forEach((cmd) => cmd.apply(this.editor));
|
161
|
+
this.eraseCommands.push(...newPartialCommands);
|
162
|
+
}
|
163
|
+
else {
|
164
|
+
const toErase = [];
|
165
|
+
const toAdd = [];
|
166
|
+
for (const targetElem of eraseableElems) {
|
167
|
+
toErase.push(targetElem);
|
168
|
+
// Completely delete items that can't be divided.
|
169
|
+
if (!targetElem.withRegionErased) {
|
170
|
+
continue;
|
171
|
+
}
|
172
|
+
// Completely delete items that are completely or almost completely
|
173
|
+
// contained within the eraser.
|
174
|
+
const grownRect = eraserRect.grownBy(eraserRect.maxDimension / 3);
|
175
|
+
if (grownRect.containsRect(targetElem.getExactBBox())) {
|
176
|
+
continue;
|
177
|
+
}
|
178
|
+
// Join the current and previous rectangles so that points between events are also
|
179
|
+
// erased.
|
180
|
+
const erasePath = math_1.Path.fromConvexHullOf([
|
181
|
+
...eraserRect.corners,
|
182
|
+
...this.getEraserRect(this.lastPoint ?? currentPoint).corners,
|
183
|
+
].map((p) => this.editor.viewport.roundPoint(p)));
|
184
|
+
toAdd.push(...targetElem.withRegionErased(erasePath, this.editor.viewport));
|
185
|
+
}
|
186
|
+
const eraseCommand = new Erase_1.default(toErase);
|
187
|
+
const newAddCommands = toAdd.map((elem) => EditorImage_1.default.addElement(elem));
|
188
|
+
eraseCommand.apply(this.editor);
|
189
|
+
newAddCommands.forEach((command) => command.apply(this.editor));
|
190
|
+
const finalToErase = [];
|
191
|
+
for (const item of toErase) {
|
192
|
+
if (this.toAdd.has(item)) {
|
193
|
+
this.toAdd.delete(item);
|
194
|
+
}
|
195
|
+
else {
|
196
|
+
finalToErase.push(item);
|
197
|
+
}
|
198
|
+
}
|
199
|
+
this.toRemove.push(...finalToErase);
|
200
|
+
for (const item of toAdd) {
|
201
|
+
this.toAdd.add(item);
|
202
|
+
}
|
203
|
+
this.eraseCommands.push(new Erase_1.default(finalToErase));
|
204
|
+
this.addCommands.push(...newAddCommands);
|
205
|
+
}
|
206
|
+
this.drawPreviewAt(currentPoint);
|
207
|
+
this.lastPoint = currentPoint;
|
208
|
+
}
|
209
|
+
onPointerDown(event) {
|
210
|
+
if (event.allPointers.length === 1 || event.current.device === Pointer_1.PointerDevice.Eraser) {
|
211
|
+
this.lastPoint = event.current.canvasPos;
|
212
|
+
this.toRemove = [];
|
213
|
+
this.toAdd.clear();
|
214
|
+
this.isFirstEraseEvt = true;
|
215
|
+
this.drawPreviewAt(event.current.canvasPos);
|
216
|
+
return true;
|
217
|
+
}
|
218
|
+
return false;
|
219
|
+
}
|
220
|
+
onPointerMove(event) {
|
221
|
+
const currentPoint = event.current.canvasPos;
|
222
|
+
this.eraseTo(currentPoint);
|
223
|
+
}
|
224
|
+
onPointerUp(event) {
|
225
|
+
this.eraseTo(event.current.canvasPos);
|
226
|
+
const commands = [];
|
227
|
+
if (this.addCommands.length > 0) {
|
228
|
+
this.addCommands.forEach((cmd) => cmd.unapply(this.editor));
|
229
|
+
// Remove items from toAdd that are also present in toRemove -- adding, then
|
230
|
+
// removing these does nothing, and can break undo/redo.
|
231
|
+
for (const item of this.toAdd) {
|
232
|
+
if (this.toRemove.includes(item)) {
|
233
|
+
this.toAdd.delete(item);
|
234
|
+
this.toRemove = this.toRemove.filter((other) => other !== item);
|
235
|
+
}
|
236
|
+
}
|
237
|
+
for (const item of this.toRemove) {
|
238
|
+
if (this.toAdd.has(item)) {
|
239
|
+
this.toAdd.delete(item);
|
240
|
+
this.toRemove = this.toRemove.filter((other) => other !== item);
|
241
|
+
}
|
242
|
+
}
|
243
|
+
commands.push(...[...this.toAdd].map((a) => EditorImage_1.default.addElement(a)));
|
244
|
+
this.addCommands = [];
|
245
|
+
}
|
246
|
+
if (this.eraseCommands.length > 0) {
|
247
|
+
// Undo commands for each individual component and unite into a single command.
|
248
|
+
this.eraseCommands.forEach((cmd) => cmd.unapply(this.editor));
|
249
|
+
this.eraseCommands = [];
|
250
|
+
const command = new Erase_1.default(this.toRemove);
|
251
|
+
commands.push(command);
|
252
|
+
}
|
253
|
+
if (commands.length === 1) {
|
254
|
+
this.editor.dispatch(commands[0]); // dispatch: Makes undo-able.
|
255
|
+
}
|
256
|
+
else {
|
257
|
+
this.editor.dispatch((0, uniteCommands_1.default)(commands));
|
258
|
+
}
|
259
|
+
this.clearPreview();
|
260
|
+
}
|
261
|
+
onGestureCancel(_event) {
|
262
|
+
this.addCommands.forEach((cmd) => cmd.unapply(this.editor));
|
263
|
+
this.eraseCommands.forEach((cmd) => cmd.unapply(this.editor));
|
264
|
+
this.eraseCommands = [];
|
265
|
+
this.addCommands = [];
|
266
|
+
this.clearPreview();
|
267
|
+
}
|
268
|
+
onKeyPress(event) {
|
269
|
+
const shortcuts = this.editor.shortcuts;
|
270
|
+
let newThickness;
|
271
|
+
if (shortcuts.matchesShortcut(keybindings_1.decreaseSizeKeyboardShortcutId, event)) {
|
272
|
+
newThickness = (this.getThickness() * 2) / 3;
|
273
|
+
}
|
274
|
+
else if (shortcuts.matchesShortcut(keybindings_1.increaseSizeKeyboardShortcutId, event)) {
|
275
|
+
newThickness = (this.getThickness() * 3) / 2;
|
276
|
+
}
|
277
|
+
if (newThickness !== undefined) {
|
278
|
+
newThickness = Math.min(Math.max(1, newThickness), 200);
|
279
|
+
this.setThickness(newThickness);
|
280
|
+
return true;
|
281
|
+
}
|
282
|
+
return false;
|
283
|
+
}
|
284
|
+
/** Returns the side-length of the tip of this eraser. */
|
285
|
+
getThickness() {
|
286
|
+
return this.thickness;
|
287
|
+
}
|
288
|
+
/** Sets the side-length of this' tip. */
|
289
|
+
setThickness(thickness) {
|
290
|
+
this.thicknessValue.set(thickness);
|
291
|
+
}
|
292
|
+
/**
|
293
|
+
* Returns a {@link MutableReactiveValue} that can be used to watch
|
294
|
+
* this tool's thickness.
|
295
|
+
*/
|
296
|
+
getThicknessValue() {
|
297
|
+
return this.thicknessValue;
|
298
|
+
}
|
299
|
+
/** @returns An object that allows switching between a full stroke and a partial stroke eraser. */
|
300
|
+
getModeValue() {
|
301
|
+
return this.modeValue;
|
302
|
+
}
|
303
|
+
}
|
304
|
+
exports.default = Eraser;
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import Editor from '../Editor';
|
2
|
+
import { KeyPressEvent } from '../inputEvents';
|
3
|
+
import BaseTool from './BaseTool';
|
4
|
+
export default class FindTool extends BaseTool {
|
5
|
+
private editor;
|
6
|
+
private overlay;
|
7
|
+
private searchInput;
|
8
|
+
private currentMatchIdx;
|
9
|
+
constructor(editor: Editor);
|
10
|
+
canReceiveInputInReadOnlyEditor(): boolean;
|
11
|
+
private getMatches;
|
12
|
+
private focusCurrentMatch;
|
13
|
+
private toNextMatch;
|
14
|
+
private toPrevMatch;
|
15
|
+
private fillOverlay;
|
16
|
+
private isVisible;
|
17
|
+
private setVisible;
|
18
|
+
private toggleVisible;
|
19
|
+
onKeyPress(event: KeyPressEvent): boolean;
|
20
|
+
setEnabled(enabled: boolean): void;
|
21
|
+
}
|
@@ -0,0 +1,137 @@
|
|
1
|
+
"use strict";
|
2
|
+
// Displays a find dialog that allows the user to search for and focus text.
|
3
|
+
//
|
4
|
+
// @packageDocumentation
|
5
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
6
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
7
|
+
};
|
8
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
9
|
+
const TextComponent_1 = __importDefault(require("../components/TextComponent"));
|
10
|
+
const ImageComponent_1 = __importDefault(require("../components/ImageComponent"));
|
11
|
+
const BaseTool_1 = __importDefault(require("./BaseTool"));
|
12
|
+
const keybindings_1 = require("./keybindings");
|
13
|
+
const cssPrefix = 'find-tool';
|
14
|
+
class FindTool extends BaseTool_1.default {
|
15
|
+
constructor(editor) {
|
16
|
+
super(editor.notifier, editor.localization.findLabel);
|
17
|
+
this.editor = editor;
|
18
|
+
this.currentMatchIdx = 0;
|
19
|
+
this.overlay = document.createElement('div');
|
20
|
+
this.fillOverlay();
|
21
|
+
editor.createHTMLOverlay(this.overlay);
|
22
|
+
this.overlay.style.display = 'none';
|
23
|
+
this.overlay.classList.add(`${cssPrefix}-overlay`);
|
24
|
+
}
|
25
|
+
canReceiveInputInReadOnlyEditor() {
|
26
|
+
return true;
|
27
|
+
}
|
28
|
+
getMatches(searchFor) {
|
29
|
+
const lowerSearchFor = searchFor.toLocaleLowerCase();
|
30
|
+
const matchingComponents = this.editor.image.getAllElements().filter((component) => {
|
31
|
+
let text = '';
|
32
|
+
if (component instanceof TextComponent_1.default) {
|
33
|
+
text = component.getText();
|
34
|
+
}
|
35
|
+
else if (component instanceof ImageComponent_1.default) {
|
36
|
+
text = component.getAltText() ?? '';
|
37
|
+
}
|
38
|
+
else {
|
39
|
+
return false;
|
40
|
+
}
|
41
|
+
const hasLowercaseMatch = text.toLocaleLowerCase().indexOf(lowerSearchFor) !== -1;
|
42
|
+
const hasSameCaseMatch = text.indexOf(searchFor) !== -1;
|
43
|
+
return hasLowercaseMatch || hasSameCaseMatch;
|
44
|
+
});
|
45
|
+
return matchingComponents.map((match) => match.getBBox());
|
46
|
+
}
|
47
|
+
focusCurrentMatch() {
|
48
|
+
const matches = this.getMatches(this.searchInput.value);
|
49
|
+
let matchIdx = this.currentMatchIdx % matches.length;
|
50
|
+
if (matchIdx < 0) {
|
51
|
+
matchIdx = matches.length + matchIdx;
|
52
|
+
}
|
53
|
+
if (matchIdx < matches.length) {
|
54
|
+
const undoable = false;
|
55
|
+
void this.editor.dispatch(this.editor.viewport.zoomTo(matches[matchIdx], true, true), undoable);
|
56
|
+
this.editor.announceForAccessibility(this.editor.localization.focusedFoundText(matchIdx + 1, matches.length));
|
57
|
+
}
|
58
|
+
}
|
59
|
+
toNextMatch() {
|
60
|
+
this.currentMatchIdx++;
|
61
|
+
this.focusCurrentMatch();
|
62
|
+
}
|
63
|
+
toPrevMatch() {
|
64
|
+
this.currentMatchIdx--;
|
65
|
+
this.focusCurrentMatch();
|
66
|
+
}
|
67
|
+
fillOverlay() {
|
68
|
+
const label = document.createElement('label');
|
69
|
+
this.searchInput = document.createElement('input');
|
70
|
+
const nextBtn = document.createElement('button');
|
71
|
+
const closeBtn = document.createElement('button');
|
72
|
+
// Math.random() ensures that the ID is unique (to allow us to refer to it
|
73
|
+
// with an htmlFor).
|
74
|
+
this.searchInput.setAttribute('id', `${cssPrefix}-searchInput-${Math.random()}`);
|
75
|
+
label.htmlFor = this.searchInput.getAttribute('id');
|
76
|
+
label.innerText = this.editor.localization.findLabel;
|
77
|
+
nextBtn.innerText = this.editor.localization.toNextMatch;
|
78
|
+
closeBtn.innerText = this.editor.localization.closeDialog;
|
79
|
+
this.searchInput.onkeydown = (ev) => {
|
80
|
+
if (ev.key === 'Enter') {
|
81
|
+
if (ev.shiftKey) {
|
82
|
+
this.toPrevMatch();
|
83
|
+
}
|
84
|
+
else {
|
85
|
+
this.toNextMatch();
|
86
|
+
}
|
87
|
+
}
|
88
|
+
else if (ev.key === 'Escape') {
|
89
|
+
this.setVisible(false);
|
90
|
+
}
|
91
|
+
else if (this.editor.shortcuts.matchesShortcut(keybindings_1.toggleFindVisibleShortcutId, ev)) {
|
92
|
+
ev.preventDefault();
|
93
|
+
this.toggleVisible();
|
94
|
+
}
|
95
|
+
};
|
96
|
+
nextBtn.onclick = () => {
|
97
|
+
this.toNextMatch();
|
98
|
+
};
|
99
|
+
closeBtn.onclick = () => {
|
100
|
+
this.setVisible(false);
|
101
|
+
};
|
102
|
+
this.overlay.replaceChildren(label, this.searchInput, nextBtn, closeBtn);
|
103
|
+
}
|
104
|
+
isVisible() {
|
105
|
+
return this.overlay.style.display !== 'none';
|
106
|
+
}
|
107
|
+
setVisible(visible) {
|
108
|
+
if (visible !== this.isVisible()) {
|
109
|
+
this.overlay.style.display = visible ? 'block' : 'none';
|
110
|
+
if (visible) {
|
111
|
+
this.searchInput.focus();
|
112
|
+
this.editor.announceForAccessibility(this.editor.localization.findDialogShown);
|
113
|
+
}
|
114
|
+
else {
|
115
|
+
this.editor.focus();
|
116
|
+
this.editor.announceForAccessibility(this.editor.localization.findDialogHidden);
|
117
|
+
}
|
118
|
+
}
|
119
|
+
}
|
120
|
+
toggleVisible() {
|
121
|
+
this.setVisible(!this.isVisible());
|
122
|
+
}
|
123
|
+
onKeyPress(event) {
|
124
|
+
if (this.editor.shortcuts.matchesShortcut(keybindings_1.toggleFindVisibleShortcutId, event)) {
|
125
|
+
this.toggleVisible();
|
126
|
+
return true;
|
127
|
+
}
|
128
|
+
return false;
|
129
|
+
}
|
130
|
+
setEnabled(enabled) {
|
131
|
+
super.setEnabled(enabled);
|
132
|
+
if (this.isEnabled()) {
|
133
|
+
this.setVisible(false);
|
134
|
+
}
|
135
|
+
}
|
136
|
+
}
|
137
|
+
exports.default = FindTool;
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import { InputEvt } from '../../inputEvents';
|
2
|
+
import InputMapper from './InputMapper';
|
3
|
+
export default class ContextMenuRecognizer extends InputMapper {
|
4
|
+
private canShowContextMenu;
|
5
|
+
private contextMenuTriggerPointer;
|
6
|
+
private contextMenuStartPoint;
|
7
|
+
private stationaryDetector;
|
8
|
+
private clickTolerance;
|
9
|
+
constructor();
|
10
|
+
/**
|
11
|
+
* In general, only certain events (i.e. touchscreens) are expected to be able to
|
12
|
+
* create long-press menus. This method checks whether `event` was generated by
|
13
|
+
* one such device.
|
14
|
+
*/
|
15
|
+
private canMakeLongPressMenuEvent;
|
16
|
+
onEvent(event: InputEvt): boolean;
|
17
|
+
}
|
@@ -0,0 +1,103 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
3
|
+
if (k2 === undefined) k2 = k;
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
7
|
+
}
|
8
|
+
Object.defineProperty(o, k2, desc);
|
9
|
+
}) : (function(o, m, k, k2) {
|
10
|
+
if (k2 === undefined) k2 = k;
|
11
|
+
o[k2] = m[k];
|
12
|
+
}));
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
15
|
+
}) : function(o, v) {
|
16
|
+
o["default"] = v;
|
17
|
+
});
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
19
|
+
if (mod && mod.__esModule) return mod;
|
20
|
+
var result = {};
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
22
|
+
__setModuleDefault(result, mod);
|
23
|
+
return result;
|
24
|
+
};
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
27
|
+
};
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
29
|
+
const inputEvents_1 = require("../../inputEvents");
|
30
|
+
const InputMapper_1 = __importDefault(require("./InputMapper"));
|
31
|
+
const StationaryPenDetector_1 = __importStar(require("../util/StationaryPenDetector"));
|
32
|
+
const Pointer_1 = require("../../Pointer");
|
33
|
+
class ContextMenuRecognizer extends InputMapper_1.default {
|
34
|
+
constructor() {
|
35
|
+
super();
|
36
|
+
this.canShowContextMenu = false;
|
37
|
+
this.stationaryDetector = null;
|
38
|
+
this.clickTolerance = 12;
|
39
|
+
}
|
40
|
+
/**
|
41
|
+
* In general, only certain events (i.e. touchscreens) are expected to be able to
|
42
|
+
* create long-press menus. This method checks whether `event` was generated by
|
43
|
+
* one such device.
|
44
|
+
*/
|
45
|
+
canMakeLongPressMenuEvent(event) {
|
46
|
+
const allowedDevices = [Pointer_1.PointerDevice.Touch];
|
47
|
+
return event.allPointers.length === 1 && allowedDevices.includes(event.current.device);
|
48
|
+
}
|
49
|
+
onEvent(event) {
|
50
|
+
const sendContextMenuEvent = () => {
|
51
|
+
if (!(0, inputEvents_1.isPointerEvt)(event))
|
52
|
+
return false;
|
53
|
+
if (this.canShowContextMenu) {
|
54
|
+
const eventHandled = this.emit({
|
55
|
+
kind: inputEvents_1.InputEvtType.ContextMenu,
|
56
|
+
screenPos: event.current.screenPos,
|
57
|
+
canvasPos: event.current.canvasPos,
|
58
|
+
});
|
59
|
+
if (eventHandled) {
|
60
|
+
this.emit({
|
61
|
+
kind: inputEvents_1.InputEvtType.GestureCancelEvt,
|
62
|
+
});
|
63
|
+
return true;
|
64
|
+
}
|
65
|
+
}
|
66
|
+
return false;
|
67
|
+
};
|
68
|
+
if (event.kind === inputEvents_1.InputEvtType.PointerDownEvt) {
|
69
|
+
if (event.allPointers.length === 1) {
|
70
|
+
this.canShowContextMenu = true;
|
71
|
+
this.contextMenuTriggerPointer = event.current;
|
72
|
+
this.contextMenuStartPoint = event.current.screenPos;
|
73
|
+
if (this.canMakeLongPressMenuEvent(event)) {
|
74
|
+
this.stationaryDetector = new StationaryPenDetector_1.default(event.current, StationaryPenDetector_1.defaultStationaryDetectionConfig, sendContextMenuEvent);
|
75
|
+
}
|
76
|
+
}
|
77
|
+
else {
|
78
|
+
this.canShowContextMenu = false;
|
79
|
+
}
|
80
|
+
}
|
81
|
+
else if (event.kind === inputEvents_1.InputEvtType.PointerMoveEvt) {
|
82
|
+
if (this.canShowContextMenu) {
|
83
|
+
this.stationaryDetector?.onPointerMove(event.current);
|
84
|
+
// Only clicks/stationary long presses can create context menu events.
|
85
|
+
const deltaPosition = event.current.screenPos.minus(this.contextMenuStartPoint);
|
86
|
+
const threshold = this.clickTolerance;
|
87
|
+
if (deltaPosition.length() > threshold) {
|
88
|
+
this.canShowContextMenu = false;
|
89
|
+
}
|
90
|
+
}
|
91
|
+
}
|
92
|
+
else if (event.kind === inputEvents_1.InputEvtType.PointerUpEvt) {
|
93
|
+
this.stationaryDetector?.destroy();
|
94
|
+
if (this.contextMenuTriggerPointer?.id === event.current.id &&
|
95
|
+
this.contextMenuTriggerPointer.device === Pointer_1.PointerDevice.RightButtonMouse &&
|
96
|
+
sendContextMenuEvent()) {
|
97
|
+
return true;
|
98
|
+
}
|
99
|
+
}
|
100
|
+
return this.emit(event);
|
101
|
+
}
|
102
|
+
}
|
103
|
+
exports.default = ContextMenuRecognizer;
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import { InputEvt } from '../../inputEvents';
|
2
|
+
import InputMapper from './InputMapper';
|
3
|
+
/**
|
4
|
+
* An `InputMapper` that applies a function to all events it receives.
|
5
|
+
*
|
6
|
+
* Useful for automated testing.
|
7
|
+
*/
|
8
|
+
export default class FunctionMapper extends InputMapper {
|
9
|
+
private fn;
|
10
|
+
constructor(fn: (event: InputEvt) => InputEvt);
|
11
|
+
onEvent(event: InputEvt): boolean;
|
12
|
+
}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
|
+
};
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
+
const InputMapper_1 = __importDefault(require("./InputMapper"));
|
7
|
+
/**
|
8
|
+
* An `InputMapper` that applies a function to all events it receives.
|
9
|
+
*
|
10
|
+
* Useful for automated testing.
|
11
|
+
*/
|
12
|
+
class FunctionMapper extends InputMapper_1.default {
|
13
|
+
constructor(fn) {
|
14
|
+
super();
|
15
|
+
this.fn = fn;
|
16
|
+
}
|
17
|
+
onEvent(event) {
|
18
|
+
return this.emit(this.fn(event));
|
19
|
+
}
|
20
|
+
}
|
21
|
+
exports.default = FunctionMapper;
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import { InputEvt } from '../../inputEvents';
|
2
|
+
type OnEventCallback = (event: InputEvt) => boolean;
|
3
|
+
export interface InputEventListener {
|
4
|
+
onEvent: OnEventCallback;
|
5
|
+
}
|
6
|
+
/**
|
7
|
+
* Accepts input events and emits input events.
|
8
|
+
*/
|
9
|
+
export default abstract class InputMapper implements InputEventListener {
|
10
|
+
#private;
|
11
|
+
constructor();
|
12
|
+
setEmitListener(listener: InputEventListener | OnEventCallback | null): void;
|
13
|
+
protected emit(event: InputEvt): boolean;
|
14
|
+
/**
|
15
|
+
* @returns true if the given `event` should be considered "handled" by the app and thus not
|
16
|
+
* forwarded to other targets. For example, returning "true" for a touchpad pinch event prevents
|
17
|
+
* the pinch event from zooming the webpage.
|
18
|
+
*
|
19
|
+
* Generally, this should return the result of calling `this.emit` with some event.
|
20
|
+
*/
|
21
|
+
abstract onEvent(event: InputEvt): boolean;
|
22
|
+
}
|
23
|
+
export {};
|