js-draw 1.21.2 → 1.21.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/bundle.js +1 -1
- package/dist/cjs/tools/BaseTool.d.ts +61 -0
- package/dist/cjs/tools/BaseTool.js +179 -0
- package/dist/cjs/tools/Eraser.d.ts +60 -0
- package/dist/cjs/tools/Eraser.js +299 -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 +105 -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 +181 -0
- package/dist/cjs/tools/InputFilter/StrokeKeyboardControl.d.ts +21 -0
- package/dist/cjs/tools/InputFilter/StrokeKeyboardControl.js +84 -0
- package/dist/cjs/tools/PanZoom.d.ts +125 -0
- package/dist/cjs/tools/PanZoom.js +517 -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 +109 -0
- package/dist/cjs/tools/Pen.d.ts +54 -0
- package/dist/cjs/tools/Pen.js +335 -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 +85 -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 +634 -0
- package/dist/cjs/tools/SelectionTool/SelectionHandle.d.ts +62 -0
- package/dist/cjs/tools/SelectionTool/SelectionHandle.js +141 -0
- package/dist/cjs/tools/SelectionTool/SelectionMenuShortcut.d.ts +32 -0
- package/dist/cjs/tools/SelectionTool/SelectionMenuShortcut.js +86 -0
- package/dist/cjs/tools/SelectionTool/SelectionTool.d.ts +42 -0
- package/dist/cjs/tools/SelectionTool/SelectionTool.js +500 -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 +155 -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 +50 -0
- package/dist/cjs/tools/SelectionTool/util/showSelectionContextMenu.d.ts +5 -0
- package/dist/cjs/tools/SelectionTool/util/showSelectionContextMenu.js +43 -0
- package/dist/cjs/tools/SoundUITool.d.ts +26 -0
- package/dist/cjs/tools/SoundUITool.js +171 -0
- package/dist/cjs/tools/TextTool.d.ts +36 -0
- package/dist/cjs/tools/TextTool.js +285 -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 +304 -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 +43 -0
- package/dist/cjs/tools/localization.js +45 -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/version.js +1 -1
- package/dist/mjs/tools/BaseTool.d.ts +61 -0
- package/dist/mjs/tools/BaseTool.mjs +177 -0
- package/dist/mjs/tools/Eraser.d.ts +60 -0
- package/dist/mjs/tools/Eraser.mjs +292 -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 +76 -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 +175 -0
- package/dist/mjs/tools/InputFilter/StrokeKeyboardControl.d.ts +21 -0
- package/dist/mjs/tools/InputFilter/StrokeKeyboardControl.mjs +78 -0
- package/dist/mjs/tools/PanZoom.d.ts +125 -0
- package/dist/mjs/tools/PanZoom.mjs +510 -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 +103 -0
- package/dist/mjs/tools/Pen.d.ts +54 -0
- package/dist/mjs/tools/Pen.mjs +306 -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 +79 -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 +606 -0
- package/dist/mjs/tools/SelectionTool/SelectionHandle.d.ts +62 -0
- package/dist/mjs/tools/SelectionTool/SelectionHandle.mjs +137 -0
- package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.d.ts +32 -0
- package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.mjs +83 -0
- package/dist/mjs/tools/SelectionTool/SelectionTool.d.ts +42 -0
- package/dist/mjs/tools/SelectionTool/SelectionTool.mjs +493 -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 +146 -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 +45 -0
- package/dist/mjs/tools/SelectionTool/util/showSelectionContextMenu.d.ts +5 -0
- package/dist/mjs/tools/SelectionTool/util/showSelectionContextMenu.mjs +38 -0
- package/dist/mjs/tools/SoundUITool.d.ts +26 -0
- package/dist/mjs/tools/SoundUITool.mjs +165 -0
- package/dist/mjs/tools/TextTool.d.ts +36 -0
- package/dist/mjs/tools/TextTool.mjs +279 -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 +275 -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 +43 -0
- package/dist/mjs/tools/localization.mjs +42 -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/version.mjs +1 -1
- package/package.json +4 -4
- package/src/tools/FindTool.css +7 -0
- package/src/tools/ScrollbarTool.scss +57 -0
- package/src/tools/SelectionTool/SelectionTool.scss +165 -0
- package/src/tools/SelectionTool/util/makeClipboardErrorHandlers.scss +15 -0
- package/src/tools/SoundUITool.scss +22 -0
- package/src/tools/tools.scss +6 -0
- package/src/tools/util/createMenuOverlay.scss +67 -0
@@ -0,0 +1,61 @@
|
|
1
|
+
import { EditorNotifier } from '../types';
|
2
|
+
import { WheelEvt, PointerEvt, KeyPressEvent, KeyUpEvent, PasteEvent, CopyEvent, InputEvt, GestureCancelEvt, PointerDownEvt, PointerMoveEvt, PointerUpEvt, ContextMenuEvt } from '../inputEvents';
|
3
|
+
import ToolEnabledGroup from './ToolEnabledGroup';
|
4
|
+
import InputMapper, { InputEventListener } from './InputFilter/InputMapper';
|
5
|
+
import { ReactiveValue } from '../util/ReactiveValue';
|
6
|
+
export default abstract class BaseTool implements InputEventListener {
|
7
|
+
#private;
|
8
|
+
private notifier;
|
9
|
+
readonly description: string;
|
10
|
+
protected constructor(notifier: EditorNotifier, description: string);
|
11
|
+
/** Override this to allow this tool to be enabled in a read-only editor */
|
12
|
+
canReceiveInputInReadOnlyEditor(): boolean;
|
13
|
+
setInputMapper(mapper: InputMapper | null): void;
|
14
|
+
getInputMapper(): InputMapper | null;
|
15
|
+
private dispatchEventToCallback;
|
16
|
+
onEvent(event: InputEvt): boolean;
|
17
|
+
/**
|
18
|
+
* Returns true iff the tool handled the event and thus should receive additional
|
19
|
+
* events.
|
20
|
+
*/
|
21
|
+
onPointerDown(_event: PointerDownEvt): boolean;
|
22
|
+
onPointerMove(_event: PointerMoveEvt): void;
|
23
|
+
/**
|
24
|
+
* Returns true iff there are additional pointers down and the tool should
|
25
|
+
* remain active to handle the additional events.
|
26
|
+
*
|
27
|
+
* For most purposes, this should return `false` or nothing.
|
28
|
+
*/
|
29
|
+
onPointerUp(_event: PointerUpEvt): boolean | void;
|
30
|
+
onGestureCancel(_event: GestureCancelEvt): void;
|
31
|
+
onWheel(_event: WheelEvt): boolean;
|
32
|
+
onCopy(_event: CopyEvent): boolean;
|
33
|
+
onPaste(_event: PasteEvent): boolean;
|
34
|
+
onKeyPress(_event: KeyPressEvent): boolean;
|
35
|
+
onKeyUp(_event: KeyUpEvent): boolean;
|
36
|
+
onContextMenu(_event: ContextMenuEvt): boolean;
|
37
|
+
/**
|
38
|
+
* Return true if, while this tool is active, `_event` can be delivered to
|
39
|
+
* another tool that is higher priority than this.
|
40
|
+
* @internal May be renamed
|
41
|
+
*/
|
42
|
+
eventCanBeDeliveredToNonActiveTool(_event: PointerEvt): boolean;
|
43
|
+
setEnabled(enabled: boolean): void;
|
44
|
+
isEnabled(): boolean;
|
45
|
+
/**
|
46
|
+
* Returns a {@link ReactiveValue} that updates based on whether this tool is
|
47
|
+
* enabled.
|
48
|
+
*
|
49
|
+
* @example
|
50
|
+
* ```ts
|
51
|
+
* const tool = new SomeTool();
|
52
|
+
*
|
53
|
+
* // Watch for changes in enabled status
|
54
|
+
* tool.enabledValue().onUpdate(enabled => doSomething(enabled));
|
55
|
+
* ```
|
56
|
+
*/
|
57
|
+
enabledValue(): ReactiveValue<boolean>;
|
58
|
+
setToolGroup(group: ToolEnabledGroup): void;
|
59
|
+
getToolGroup(): ToolEnabledGroup | null;
|
60
|
+
onDestroy(): void;
|
61
|
+
}
|
@@ -0,0 +1,179 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
3
|
+
if (kind === "m") throw new TypeError("Private method is not writable");
|
4
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
5
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
6
|
+
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
7
|
+
};
|
8
|
+
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
9
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
10
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
11
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
12
|
+
};
|
13
|
+
var _BaseTool_enabled, _BaseTool_group, _BaseTool_inputMapper, _BaseTool_readOnlyEditorChangeListener;
|
14
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
15
|
+
const types_1 = require("../types");
|
16
|
+
const inputEvents_1 = require("../inputEvents");
|
17
|
+
const ReactiveValue_1 = require("../util/ReactiveValue");
|
18
|
+
class BaseTool {
|
19
|
+
constructor(notifier, description) {
|
20
|
+
this.notifier = notifier;
|
21
|
+
this.description = description;
|
22
|
+
_BaseTool_enabled.set(this, void 0);
|
23
|
+
_BaseTool_group.set(this, null);
|
24
|
+
_BaseTool_inputMapper.set(this, null);
|
25
|
+
_BaseTool_readOnlyEditorChangeListener.set(this, null);
|
26
|
+
__classPrivateFieldSet(this, _BaseTool_enabled, ReactiveValue_1.ReactiveValue.fromInitialValue(true), "f");
|
27
|
+
__classPrivateFieldGet(this, _BaseTool_enabled, "f").onUpdate(enabled => {
|
28
|
+
// Ensure that at most one tool in the group is enabled.
|
29
|
+
if (enabled) {
|
30
|
+
__classPrivateFieldGet(this, _BaseTool_group, "f")?.notifyEnabled(this);
|
31
|
+
this.notifier.dispatch(types_1.EditorEventType.ToolEnabled, {
|
32
|
+
kind: types_1.EditorEventType.ToolEnabled,
|
33
|
+
tool: this,
|
34
|
+
});
|
35
|
+
}
|
36
|
+
else {
|
37
|
+
this.notifier.dispatch(types_1.EditorEventType.ToolDisabled, {
|
38
|
+
kind: types_1.EditorEventType.ToolDisabled,
|
39
|
+
tool: this,
|
40
|
+
});
|
41
|
+
}
|
42
|
+
});
|
43
|
+
}
|
44
|
+
/** Override this to allow this tool to be enabled in a read-only editor */
|
45
|
+
canReceiveInputInReadOnlyEditor() {
|
46
|
+
return false;
|
47
|
+
}
|
48
|
+
setInputMapper(mapper) {
|
49
|
+
__classPrivateFieldSet(this, _BaseTool_inputMapper, mapper, "f");
|
50
|
+
if (mapper) {
|
51
|
+
mapper.setEmitListener(event => this.dispatchEventToCallback(event));
|
52
|
+
}
|
53
|
+
}
|
54
|
+
getInputMapper() {
|
55
|
+
return __classPrivateFieldGet(this, _BaseTool_inputMapper, "f");
|
56
|
+
}
|
57
|
+
dispatchEventToCallback(event) {
|
58
|
+
let exhaustivenessCheck;
|
59
|
+
switch (event.kind) {
|
60
|
+
case inputEvents_1.InputEvtType.PointerDownEvt:
|
61
|
+
return this.onPointerDown(event);
|
62
|
+
case inputEvents_1.InputEvtType.PointerMoveEvt:
|
63
|
+
this.onPointerMove(event);
|
64
|
+
break;
|
65
|
+
case inputEvents_1.InputEvtType.PointerUpEvt:
|
66
|
+
return this.onPointerUp(event) ?? false;
|
67
|
+
case inputEvents_1.InputEvtType.GestureCancelEvt:
|
68
|
+
this.onGestureCancel(event);
|
69
|
+
break;
|
70
|
+
case inputEvents_1.InputEvtType.WheelEvt:
|
71
|
+
return this.onWheel(event);
|
72
|
+
case inputEvents_1.InputEvtType.KeyPressEvent:
|
73
|
+
return this.onKeyPress(event);
|
74
|
+
case inputEvents_1.InputEvtType.KeyUpEvent:
|
75
|
+
return this.onKeyUp(event);
|
76
|
+
case inputEvents_1.InputEvtType.CopyEvent:
|
77
|
+
return this.onCopy(event);
|
78
|
+
case inputEvents_1.InputEvtType.PasteEvent:
|
79
|
+
return this.onPaste(event);
|
80
|
+
case inputEvents_1.InputEvtType.ContextMenu:
|
81
|
+
return this.onContextMenu(event);
|
82
|
+
default:
|
83
|
+
exhaustivenessCheck = event;
|
84
|
+
return exhaustivenessCheck;
|
85
|
+
}
|
86
|
+
return true;
|
87
|
+
}
|
88
|
+
// @internal
|
89
|
+
onEvent(event) {
|
90
|
+
if (__classPrivateFieldGet(this, _BaseTool_inputMapper, "f")) {
|
91
|
+
return __classPrivateFieldGet(this, _BaseTool_inputMapper, "f").onEvent(event);
|
92
|
+
}
|
93
|
+
return this.dispatchEventToCallback(event);
|
94
|
+
}
|
95
|
+
/**
|
96
|
+
* Returns true iff the tool handled the event and thus should receive additional
|
97
|
+
* events.
|
98
|
+
*/
|
99
|
+
onPointerDown(_event) { return false; }
|
100
|
+
onPointerMove(_event) { }
|
101
|
+
/**
|
102
|
+
* Returns true iff there are additional pointers down and the tool should
|
103
|
+
* remain active to handle the additional events.
|
104
|
+
*
|
105
|
+
* For most purposes, this should return `false` or nothing.
|
106
|
+
*/
|
107
|
+
onPointerUp(_event) { }
|
108
|
+
onGestureCancel(_event) { }
|
109
|
+
onWheel(_event) {
|
110
|
+
return false;
|
111
|
+
}
|
112
|
+
onCopy(_event) {
|
113
|
+
return false;
|
114
|
+
}
|
115
|
+
onPaste(_event) {
|
116
|
+
return false;
|
117
|
+
}
|
118
|
+
onKeyPress(_event) {
|
119
|
+
return false;
|
120
|
+
}
|
121
|
+
onKeyUp(_event) {
|
122
|
+
return false;
|
123
|
+
}
|
124
|
+
onContextMenu(_event) {
|
125
|
+
return false;
|
126
|
+
}
|
127
|
+
/**
|
128
|
+
* Return true if, while this tool is active, `_event` can be delivered to
|
129
|
+
* another tool that is higher priority than this.
|
130
|
+
* @internal May be renamed
|
131
|
+
*/
|
132
|
+
eventCanBeDeliveredToNonActiveTool(_event) {
|
133
|
+
return true;
|
134
|
+
}
|
135
|
+
setEnabled(enabled) {
|
136
|
+
__classPrivateFieldGet(this, _BaseTool_enabled, "f").set(enabled);
|
137
|
+
}
|
138
|
+
isEnabled() {
|
139
|
+
return __classPrivateFieldGet(this, _BaseTool_enabled, "f").get();
|
140
|
+
}
|
141
|
+
/**
|
142
|
+
* Returns a {@link ReactiveValue} that updates based on whether this tool is
|
143
|
+
* enabled.
|
144
|
+
*
|
145
|
+
* @example
|
146
|
+
* ```ts
|
147
|
+
* const tool = new SomeTool();
|
148
|
+
*
|
149
|
+
* // Watch for changes in enabled status
|
150
|
+
* tool.enabledValue().onUpdate(enabled => doSomething(enabled));
|
151
|
+
* ```
|
152
|
+
*/
|
153
|
+
enabledValue() {
|
154
|
+
return __classPrivateFieldGet(this, _BaseTool_enabled, "f");
|
155
|
+
}
|
156
|
+
// Connect this tool to a set of other tools, ensuring that at most one
|
157
|
+
// of the tools in the group is enabled.
|
158
|
+
setToolGroup(group) {
|
159
|
+
if (this.isEnabled()) {
|
160
|
+
group.notifyEnabled(this);
|
161
|
+
}
|
162
|
+
__classPrivateFieldSet(this, _BaseTool_group, group, "f");
|
163
|
+
}
|
164
|
+
getToolGroup() {
|
165
|
+
if (__classPrivateFieldGet(this, _BaseTool_group, "f")) {
|
166
|
+
return __classPrivateFieldGet(this, _BaseTool_group, "f");
|
167
|
+
}
|
168
|
+
return null;
|
169
|
+
}
|
170
|
+
// Called when the tool is removed/when the editor is destroyed.
|
171
|
+
// Subclasses that override this method **must call super.onDestroy()**.
|
172
|
+
onDestroy() {
|
173
|
+
__classPrivateFieldGet(this, _BaseTool_readOnlyEditorChangeListener, "f")?.remove();
|
174
|
+
__classPrivateFieldSet(this, _BaseTool_readOnlyEditorChangeListener, null, "f");
|
175
|
+
__classPrivateFieldSet(this, _BaseTool_group, null, "f");
|
176
|
+
}
|
177
|
+
}
|
178
|
+
_BaseTool_enabled = new WeakMap(), _BaseTool_group = new WeakMap(), _BaseTool_inputMapper = new WeakMap(), _BaseTool_readOnlyEditorChangeListener = new WeakMap();
|
179
|
+
exports.default = BaseTool;
|
@@ -0,0 +1,60 @@
|
|
1
|
+
import { GestureCancelEvt, KeyPressEvent, PointerEvt } from '../inputEvents';
|
2
|
+
import BaseTool from './BaseTool';
|
3
|
+
import Editor from '../Editor';
|
4
|
+
import { MutableReactiveValue } from '../util/ReactiveValue';
|
5
|
+
export declare enum EraserMode {
|
6
|
+
PartialStroke = "partial-stroke",
|
7
|
+
FullStroke = "full-stroke"
|
8
|
+
}
|
9
|
+
export interface InitialEraserOptions {
|
10
|
+
thickness?: number;
|
11
|
+
mode?: EraserMode;
|
12
|
+
}
|
13
|
+
/**
|
14
|
+
* A tool that allows a user to erase parts of an image.
|
15
|
+
*/
|
16
|
+
export default class Eraser extends BaseTool {
|
17
|
+
private editor;
|
18
|
+
private lastPoint;
|
19
|
+
private isFirstEraseEvt;
|
20
|
+
private thickness;
|
21
|
+
private thicknessValue;
|
22
|
+
private modeValue;
|
23
|
+
private toRemove;
|
24
|
+
private toAdd;
|
25
|
+
private eraseCommands;
|
26
|
+
private addCommands;
|
27
|
+
constructor(editor: Editor, description: string, options?: InitialEraserOptions);
|
28
|
+
/**
|
29
|
+
* @returns a tool that briefly enables the eraser when a physical eraser is used.
|
30
|
+
* This tool should be added to the tool list after the primary tools.
|
31
|
+
*/
|
32
|
+
makeEraserSwitcherTool(): BaseTool;
|
33
|
+
private clearPreview;
|
34
|
+
private getSizeOnCanvas;
|
35
|
+
private drawPreviewAt;
|
36
|
+
/**
|
37
|
+
* @returns the eraser rectangle in canvas coordinates.
|
38
|
+
*
|
39
|
+
* For now, all erasers are rectangles or points.
|
40
|
+
*/
|
41
|
+
private getEraserRect;
|
42
|
+
/** Erases in a line from the last point to the current. */
|
43
|
+
private eraseTo;
|
44
|
+
onPointerDown(event: PointerEvt): boolean;
|
45
|
+
onPointerMove(event: PointerEvt): void;
|
46
|
+
onPointerUp(event: PointerEvt): void;
|
47
|
+
onGestureCancel(_event: GestureCancelEvt): void;
|
48
|
+
onKeyPress(event: KeyPressEvent): boolean;
|
49
|
+
/** Returns the side-length of the tip of this eraser. */
|
50
|
+
getThickness(): number;
|
51
|
+
/** Sets the side-length of this' tip. */
|
52
|
+
setThickness(thickness: number): void;
|
53
|
+
/**
|
54
|
+
* Returns a {@link MutableReactiveValue} that can be used to watch
|
55
|
+
* this tool's thickness.
|
56
|
+
*/
|
57
|
+
getThicknessValue(): MutableReactiveValue<number>;
|
58
|
+
/** @returns An object that allows switching between a full stroke and a partial stroke eraser. */
|
59
|
+
getModeValue(): MutableReactiveValue<EraserMode>;
|
60
|
+
}
|
@@ -0,0 +1,299 @@
|
|
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.getPrimaryTools().filter(tool => tool.isEnabled());
|
33
|
+
if (enabledPrimaryTools.length) {
|
34
|
+
this.previousEnabledTool = enabledPrimaryTools[0];
|
35
|
+
}
|
36
|
+
else {
|
37
|
+
this.previousEnabledTool = null;
|
38
|
+
}
|
39
|
+
this.previousEraserEnabledState = this.eraser.isEnabled();
|
40
|
+
this.eraser.setEnabled(true);
|
41
|
+
if (this.eraser.onPointerDown(event)) {
|
42
|
+
return true;
|
43
|
+
}
|
44
|
+
else {
|
45
|
+
this.restoreOriginalTool();
|
46
|
+
}
|
47
|
+
}
|
48
|
+
return false;
|
49
|
+
}
|
50
|
+
onPointerMove(event) {
|
51
|
+
this.eraser.onPointerMove(event);
|
52
|
+
}
|
53
|
+
restoreOriginalTool() {
|
54
|
+
this.eraser.setEnabled(this.previousEraserEnabledState);
|
55
|
+
if (this.previousEnabledTool) {
|
56
|
+
this.previousEnabledTool.setEnabled(true);
|
57
|
+
}
|
58
|
+
}
|
59
|
+
onPointerUp(event) {
|
60
|
+
this.eraser.onPointerUp(event);
|
61
|
+
this.restoreOriginalTool();
|
62
|
+
}
|
63
|
+
onGestureCancel(event) {
|
64
|
+
this.eraser.onGestureCancel(event);
|
65
|
+
this.restoreOriginalTool();
|
66
|
+
}
|
67
|
+
}
|
68
|
+
/**
|
69
|
+
* A tool that allows a user to erase parts of an image.
|
70
|
+
*/
|
71
|
+
class Eraser extends BaseTool_1.default {
|
72
|
+
constructor(editor, description, options) {
|
73
|
+
super(editor.notifier, description);
|
74
|
+
this.editor = editor;
|
75
|
+
this.lastPoint = null;
|
76
|
+
this.isFirstEraseEvt = true;
|
77
|
+
this.toAdd = new Set();
|
78
|
+
// Commands that each remove one element
|
79
|
+
this.eraseCommands = [];
|
80
|
+
this.addCommands = [];
|
81
|
+
this.thickness = options?.thickness ?? 10;
|
82
|
+
this.thicknessValue = ReactiveValue_1.ReactiveValue.fromInitialValue(this.thickness);
|
83
|
+
this.thicknessValue.onUpdate(value => {
|
84
|
+
this.thickness = value;
|
85
|
+
this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
|
86
|
+
kind: types_1.EditorEventType.ToolUpdated,
|
87
|
+
tool: this,
|
88
|
+
});
|
89
|
+
});
|
90
|
+
this.modeValue = ReactiveValue_1.ReactiveValue.fromInitialValue(options?.mode ?? EraserMode.FullStroke);
|
91
|
+
this.modeValue.onUpdate(_value => {
|
92
|
+
this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
|
93
|
+
kind: types_1.EditorEventType.ToolUpdated,
|
94
|
+
tool: this,
|
95
|
+
});
|
96
|
+
});
|
97
|
+
}
|
98
|
+
/**
|
99
|
+
* @returns a tool that briefly enables the eraser when a physical eraser is used.
|
100
|
+
* This tool should be added to the tool list after the primary tools.
|
101
|
+
*/
|
102
|
+
makeEraserSwitcherTool() {
|
103
|
+
return new EraserSwitcher(this.editor, this);
|
104
|
+
}
|
105
|
+
clearPreview() {
|
106
|
+
this.editor.clearWetInk();
|
107
|
+
}
|
108
|
+
getSizeOnCanvas() {
|
109
|
+
return this.thickness / this.editor.viewport.getScaleFactor();
|
110
|
+
}
|
111
|
+
drawPreviewAt(point) {
|
112
|
+
this.clearPreview();
|
113
|
+
const size = this.getSizeOnCanvas();
|
114
|
+
const renderer = this.editor.display.getWetInkRenderer();
|
115
|
+
const rect = this.getEraserRect(point);
|
116
|
+
const rect2 = this.getEraserRect(this.lastPoint ?? point);
|
117
|
+
const fill = {
|
118
|
+
fill: math_1.Color4.transparent,
|
119
|
+
stroke: { width: size / 10, color: math_1.Color4.gray },
|
120
|
+
};
|
121
|
+
renderer.drawPath((0, RenderablePathSpec_1.pathToRenderable)(math_1.Path.fromConvexHullOf([...rect.corners, ...rect2.corners]), fill));
|
122
|
+
}
|
123
|
+
/**
|
124
|
+
* @returns the eraser rectangle in canvas coordinates.
|
125
|
+
*
|
126
|
+
* For now, all erasers are rectangles or points.
|
127
|
+
*/
|
128
|
+
getEraserRect(centerPoint) {
|
129
|
+
const size = this.getSizeOnCanvas();
|
130
|
+
const halfSize = math_1.Vec2.of(size / 2, size / 2);
|
131
|
+
return math_1.Rect2.fromCorners(centerPoint.minus(halfSize), centerPoint.plus(halfSize));
|
132
|
+
}
|
133
|
+
/** Erases in a line from the last point to the current. */
|
134
|
+
eraseTo(currentPoint) {
|
135
|
+
if (!this.isFirstEraseEvt && currentPoint.distanceTo(this.lastPoint) === 0) {
|
136
|
+
return;
|
137
|
+
}
|
138
|
+
this.isFirstEraseEvt = false;
|
139
|
+
// Currently only objects within eraserRect or that intersect a straight line
|
140
|
+
// from the center of the current rect to the previous are erased. TODO: Erase
|
141
|
+
// all objects as if there were pointerMove events between the two points.
|
142
|
+
const eraserRect = this.getEraserRect(currentPoint);
|
143
|
+
const line = new math_1.LineSegment2(this.lastPoint, currentPoint);
|
144
|
+
const region = math_1.Rect2.union(line.bbox, eraserRect);
|
145
|
+
const intersectingElems = this.editor.image.getElementsIntersectingRegion(region).filter(component => {
|
146
|
+
return component.intersects(line) || component.intersectsRect(eraserRect);
|
147
|
+
});
|
148
|
+
// Only erase components that could be selected (and thus interacted with)
|
149
|
+
// by the user.
|
150
|
+
const eraseableElems = intersectingElems.filter(elem => elem.isSelectable());
|
151
|
+
if (this.modeValue.get() === EraserMode.FullStroke) {
|
152
|
+
// Remove any intersecting elements.
|
153
|
+
this.toRemove.push(...eraseableElems);
|
154
|
+
// Create new Erase commands for the now-to-be-erased elements and apply them.
|
155
|
+
const newPartialCommands = eraseableElems.map(elem => new Erase_1.default([elem]));
|
156
|
+
newPartialCommands.forEach(cmd => cmd.apply(this.editor));
|
157
|
+
this.eraseCommands.push(...newPartialCommands);
|
158
|
+
}
|
159
|
+
else {
|
160
|
+
const toErase = [];
|
161
|
+
const toAdd = [];
|
162
|
+
for (const targetElem of eraseableElems) {
|
163
|
+
toErase.push(targetElem);
|
164
|
+
// Completely delete items that can't be divided.
|
165
|
+
if (!targetElem.withRegionErased) {
|
166
|
+
continue;
|
167
|
+
}
|
168
|
+
// Completely delete items that are completely or almost completely
|
169
|
+
// contained within the eraser.
|
170
|
+
const grownRect = eraserRect.grownBy(eraserRect.maxDimension / 3);
|
171
|
+
if (grownRect.containsRect(targetElem.getExactBBox())) {
|
172
|
+
continue;
|
173
|
+
}
|
174
|
+
// Join the current and previous rectangles so that points between events are also
|
175
|
+
// erased.
|
176
|
+
const erasePath = math_1.Path.fromConvexHullOf([
|
177
|
+
...eraserRect.corners, ...this.getEraserRect(this.lastPoint ?? currentPoint).corners
|
178
|
+
].map(p => this.editor.viewport.roundPoint(p)));
|
179
|
+
toAdd.push(...targetElem.withRegionErased(erasePath, this.editor.viewport));
|
180
|
+
}
|
181
|
+
const eraseCommand = new Erase_1.default(toErase);
|
182
|
+
const newAddCommands = toAdd.map(elem => EditorImage_1.default.addElement(elem));
|
183
|
+
eraseCommand.apply(this.editor);
|
184
|
+
newAddCommands.forEach(command => command.apply(this.editor));
|
185
|
+
const finalToErase = [];
|
186
|
+
for (const item of toErase) {
|
187
|
+
if (this.toAdd.has(item)) {
|
188
|
+
this.toAdd.delete(item);
|
189
|
+
}
|
190
|
+
else {
|
191
|
+
finalToErase.push(item);
|
192
|
+
}
|
193
|
+
}
|
194
|
+
this.toRemove.push(...finalToErase);
|
195
|
+
for (const item of toAdd) {
|
196
|
+
this.toAdd.add(item);
|
197
|
+
}
|
198
|
+
this.eraseCommands.push(new Erase_1.default(finalToErase));
|
199
|
+
this.addCommands.push(...newAddCommands);
|
200
|
+
}
|
201
|
+
this.drawPreviewAt(currentPoint);
|
202
|
+
this.lastPoint = currentPoint;
|
203
|
+
}
|
204
|
+
onPointerDown(event) {
|
205
|
+
if (event.allPointers.length === 1 || event.current.device === Pointer_1.PointerDevice.Eraser) {
|
206
|
+
this.lastPoint = event.current.canvasPos;
|
207
|
+
this.toRemove = [];
|
208
|
+
this.toAdd.clear();
|
209
|
+
this.isFirstEraseEvt = true;
|
210
|
+
this.drawPreviewAt(event.current.canvasPos);
|
211
|
+
return true;
|
212
|
+
}
|
213
|
+
return false;
|
214
|
+
}
|
215
|
+
onPointerMove(event) {
|
216
|
+
const currentPoint = event.current.canvasPos;
|
217
|
+
this.eraseTo(currentPoint);
|
218
|
+
}
|
219
|
+
onPointerUp(event) {
|
220
|
+
this.eraseTo(event.current.canvasPos);
|
221
|
+
const commands = [];
|
222
|
+
if (this.addCommands.length > 0) {
|
223
|
+
this.addCommands.forEach(cmd => cmd.unapply(this.editor));
|
224
|
+
// Remove items from toAdd that are also present in toRemove -- adding, then
|
225
|
+
// removing these does nothing, and can break undo/redo.
|
226
|
+
for (const item of this.toAdd) {
|
227
|
+
if (this.toRemove.includes(item)) {
|
228
|
+
this.toAdd.delete(item);
|
229
|
+
this.toRemove = this.toRemove.filter(other => other !== item);
|
230
|
+
}
|
231
|
+
}
|
232
|
+
for (const item of this.toRemove) {
|
233
|
+
if (this.toAdd.has(item)) {
|
234
|
+
this.toAdd.delete(item);
|
235
|
+
this.toRemove = this.toRemove.filter(other => other !== item);
|
236
|
+
}
|
237
|
+
}
|
238
|
+
commands.push(...[...this.toAdd].map(a => EditorImage_1.default.addElement(a)));
|
239
|
+
this.addCommands = [];
|
240
|
+
}
|
241
|
+
if (this.eraseCommands.length > 0) {
|
242
|
+
// Undo commands for each individual component and unite into a single command.
|
243
|
+
this.eraseCommands.forEach(cmd => cmd.unapply(this.editor));
|
244
|
+
this.eraseCommands = [];
|
245
|
+
const command = new Erase_1.default(this.toRemove);
|
246
|
+
commands.push(command);
|
247
|
+
}
|
248
|
+
if (commands.length === 1) {
|
249
|
+
this.editor.dispatch(commands[0]); // dispatch: Makes undo-able.
|
250
|
+
}
|
251
|
+
else {
|
252
|
+
this.editor.dispatch((0, uniteCommands_1.default)(commands));
|
253
|
+
}
|
254
|
+
this.clearPreview();
|
255
|
+
}
|
256
|
+
onGestureCancel(_event) {
|
257
|
+
this.addCommands.forEach(cmd => cmd.unapply(this.editor));
|
258
|
+
this.eraseCommands.forEach(cmd => cmd.unapply(this.editor));
|
259
|
+
this.eraseCommands = [];
|
260
|
+
this.addCommands = [];
|
261
|
+
this.clearPreview();
|
262
|
+
}
|
263
|
+
onKeyPress(event) {
|
264
|
+
const shortcuts = this.editor.shortcuts;
|
265
|
+
let newThickness;
|
266
|
+
if (shortcuts.matchesShortcut(keybindings_1.decreaseSizeKeyboardShortcutId, event)) {
|
267
|
+
newThickness = this.getThickness() * 2 / 3;
|
268
|
+
}
|
269
|
+
else if (shortcuts.matchesShortcut(keybindings_1.increaseSizeKeyboardShortcutId, event)) {
|
270
|
+
newThickness = this.getThickness() * 3 / 2;
|
271
|
+
}
|
272
|
+
if (newThickness !== undefined) {
|
273
|
+
newThickness = Math.min(Math.max(1, newThickness), 200);
|
274
|
+
this.setThickness(newThickness);
|
275
|
+
return true;
|
276
|
+
}
|
277
|
+
return false;
|
278
|
+
}
|
279
|
+
/** Returns the side-length of the tip of this eraser. */
|
280
|
+
getThickness() {
|
281
|
+
return this.thickness;
|
282
|
+
}
|
283
|
+
/** Sets the side-length of this' tip. */
|
284
|
+
setThickness(thickness) {
|
285
|
+
this.thicknessValue.set(thickness);
|
286
|
+
}
|
287
|
+
/**
|
288
|
+
* Returns a {@link MutableReactiveValue} that can be used to watch
|
289
|
+
* this tool's thickness.
|
290
|
+
*/
|
291
|
+
getThicknessValue() {
|
292
|
+
return this.thicknessValue;
|
293
|
+
}
|
294
|
+
/** @returns An object that allows switching between a full stroke and a partial stroke eraser. */
|
295
|
+
getModeValue() {
|
296
|
+
return this.modeValue;
|
297
|
+
}
|
298
|
+
}
|
299
|
+
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
|
+
}
|