js-draw 1.20.3 → 1.21.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.20.3",
+  "version": "1.21.1",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "types": "./dist/mjs/lib.d.ts",
   "main": "./dist/cjs/lib.js",
@@ -54,22 +54,21 @@
   },
   "author": "Henry Heino",
   "license": "MIT",
-  "private": false,
   "scripts": {
-    "dist-test": "cd dist-test/test_imports && npm install && npm run test",
-    "dist": "npm run build && npm run dist-test",
-    "build": "rm -rf ./dist/* && build-tool build",
+    "dist-test": "cd dist-test/test_imports && yarn install && yarn run test",
+    "dist": "yarn run build && yarn run dist-test",
+    "build": "build-tool build",
     "watch": "build-tool watch",
     "build-translation-templates": "build-tool build-translation-templates",
-    "prepack": "npm run dist && cd ../../ && npm run test && cd packages/js-draw && ts-node tools/copyREADME.ts copy",
+    "prepack": "yarn run dist && cd ../../ && yarn run test && cd packages/js-draw && ts-node tools/copyREADME.ts copy",
     "postpack": "ts-node tools/copyREADME.ts revert"
   },
   "dependencies": {
-    "@js-draw/math": "^1.19.0",
+    "@js-draw/math": "^1.21.1",
     "@melloware/coloris": "0.22.0"
   },
   "devDependencies": {
-    "@js-draw/build-tool": "^1.19.0",
+    "@js-draw/build-tool": "^1.21.1",
     "@types/jest": "29.5.5",
     "@types/jsdom": "21.1.3"
   },
@@ -87,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "43382107b39bc9c7c0cf16e83d8b0e2bb82af615"
+  "gitHead": "a46f0e1c3586e4b3019152eea87cd2784b00282f"
 }

package/src/dialogs/dialogs.scss

@@ -1,27 +1,9 @@
 
 @use './makeAboutDialog.scss';
+@use './makeMessageDialog.scss';
 
-// Repeat to increase specificity -- dialog containers are often overlays
-.dialog-container.dialog-container {
-	background-color: var( --background-color-transparent);
-
-	backdrop-filter: blur(5px);
-	-webkit-backdrop-filter: blur(5px);
-
-	// Show above other items
-	position: absolute;
-	z-index: 3;
-
-	// Fill the editor
-	width: var(--editor-current-width-px);
-	height: var(--editor-current-height-px);
-
-	display: flex;
-	flex-direction: column-reverse;
-	align-items: center;
-	justify-content: center;
-
-	dialog {
+.dialog-container {
+	> dialog {
 		background-color: var(--background-color-1);
 		color: var(--foreground-color-1);
 		border: none;
@@ -33,5 +15,11 @@
 		max-height: 90vh;
 		width: min(100%, 500px);
 		box-sizing: border-box;
+
+		&::backdrop {
+			backdrop-filter: blur(5px);
+			-webkit-backdrop-filter: blur(5px);
+			background-color: var( --background-color-transparent);
+		}
 	}
 }

package/src/dialogs/makeAboutDialog.scss

@@ -1,41 +1,21 @@
 
-.about-dialog-container dialog {
-	display: flex;
-	flex-direction: column;
+.about-dialog-content > .scroll {
+	white-space: pre-wrap;
+	font-family: monospace;
 
-	.close-button {
-		// Center the close button
-		display: block;
-		margin-left: auto;
-		margin-right: auto;
+	& > details > summary {
+		cursor: pointer;
 	}
 
-	.about-entry-container {
-		flex-grow: 1;
-		flex-shrink: 1;
-		overflow-y: auto;
+	& > h2, & > details > summary {
+		margin-top: 15px;
 
-		margin-left: 20px;
-		margin-right: 20px;
+		font-size: 1.2em;
+		font-weight: bold;
 
-		padding-bottom: 20px;
-
-		white-space: pre-wrap;
-		font-family: monospace;
-
-		& > h2, & > details > summary {
-			cursor: pointer;
-			margin-top: 15px;
-
-			font-size: 1.2em;
-			font-weight: bold;
-
-			a {
-				color: var(--foreground-color-1);
-				text-decoration: underline;
-			}
+		a {
+			color: var(--foreground-color-1);
+			text-decoration: underline;
 		}
 	}
-
-
-}
+}

package/src/dialogs/makeMessageDialog.scss

@@ -0,0 +1,46 @@
+
+@keyframes fade-in {
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+
+.message-dialog-container dialog {
+	display: flex;
+
+	&.-closing {
+		opacity: 0;
+
+		&::backdrop {
+			opacity: 0;
+		}
+	}
+
+	&, &::backdrop {
+		transition: opacity 0.2s ease;
+		animation: fade-in 0.2s ease;
+	}
+}
+
+.message-dialog-content {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+
+	> .close {
+		// Center the close button
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	> .scroll {
+		flex-grow: 1;
+		flex-shrink: 1;
+		overflow-y: auto;
+	
+		margin-left: 20px;
+		margin-right: 20px;
+	
+		padding-bottom: 20px;
+	}
+}

package/dist/cjs/tools/BaseTool.d.ts

@@ -1,60 +0,0 @@
-import { EditorNotifier } from '../types';
-import { WheelEvt, PointerEvt, KeyPressEvent, KeyUpEvent, PasteEvent, CopyEvent, InputEvt, GestureCancelEvt, PointerDownEvt, PointerMoveEvt, PointerUpEvt } from '../inputEvents';
-import ToolEnabledGroup from './ToolEnabledGroup';
-import InputMapper, { InputEventListener } from './InputFilter/InputMapper';
-import { ReactiveValue } from '../util/ReactiveValue';
-export default abstract class BaseTool implements InputEventListener {
-    #private;
-    private notifier;
-    readonly description: string;
-    protected constructor(notifier: EditorNotifier, description: string);
-    /** Override this to allow this tool to be enabled in a read-only editor */
-    canReceiveInputInReadOnlyEditor(): boolean;
-    setInputMapper(mapper: InputMapper | null): void;
-    getInputMapper(): InputMapper | null;
-    private dispatchEventToCallback;
-    onEvent(event: InputEvt): boolean;
-    /**
-     * Returns true iff the tool handled the event and thus should receive additional
-     * events.
-     */
-    onPointerDown(_event: PointerDownEvt): boolean;
-    onPointerMove(_event: PointerMoveEvt): void;
-    /**
-     * Returns true iff there are additional pointers down and the tool should
-     * remain active to handle the additional events.
-     *
-     * For most purposes, this should return `false` or nothing.
-     */
-    onPointerUp(_event: PointerUpEvt): boolean | void;
-    onGestureCancel(_event: GestureCancelEvt): void;
-    onWheel(_event: WheelEvt): boolean;
-    onCopy(_event: CopyEvent): boolean;
-    onPaste(_event: PasteEvent): boolean;
-    onKeyPress(_event: KeyPressEvent): boolean;
-    onKeyUp(_event: KeyUpEvent): boolean;
-    /**
-     * Return true if, while this tool is active, `_event` can be delivered to
-     * another tool that is higher priority than this.
-     * @internal May be renamed
-     */
-    eventCanBeDeliveredToNonActiveTool(_event: PointerEvt): boolean;
-    setEnabled(enabled: boolean): void;
-    isEnabled(): boolean;
-    /**
-     * Returns a {@link ReactiveValue} that updates based on whether this tool is
-     * enabled.
-     *
-     * @example
-     * ```ts
-     * const tool = new SomeTool();
-     *
-     * // Watch for changes in enabled status
-     * tool.enabledValue().onUpdate(enabled => doSomething(enabled));
-     * ```
-     */
-    enabledValue(): ReactiveValue<boolean>;
-    setToolGroup(group: ToolEnabledGroup): void;
-    getToolGroup(): ToolEnabledGroup | null;
-    onDestroy(): void;
-}

package/dist/cjs/tools/BaseTool.js

@@ -1,174 +0,0 @@
-"use strict";
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    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");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    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");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _BaseTool_enabled, _BaseTool_group, _BaseTool_inputMapper, _BaseTool_readOnlyEditorChangeListener;
-Object.defineProperty(exports, "__esModule", { value: true });
-const types_1 = require("../types");
-const inputEvents_1 = require("../inputEvents");
-const ReactiveValue_1 = require("../util/ReactiveValue");
-class BaseTool {
-    constructor(notifier, description) {
-        this.notifier = notifier;
-        this.description = description;
-        _BaseTool_enabled.set(this, void 0);
-        _BaseTool_group.set(this, null);
-        _BaseTool_inputMapper.set(this, null);
-        _BaseTool_readOnlyEditorChangeListener.set(this, null);
-        __classPrivateFieldSet(this, _BaseTool_enabled, ReactiveValue_1.ReactiveValue.fromInitialValue(true), "f");
-        __classPrivateFieldGet(this, _BaseTool_enabled, "f").onUpdate(enabled => {
-            // Ensure that at most one tool in the group is enabled.
-            if (enabled) {
-                __classPrivateFieldGet(this, _BaseTool_group, "f")?.notifyEnabled(this);
-                this.notifier.dispatch(types_1.EditorEventType.ToolEnabled, {
-                    kind: types_1.EditorEventType.ToolEnabled,
-                    tool: this,
-                });
-            }
-            else {
-                this.notifier.dispatch(types_1.EditorEventType.ToolDisabled, {
-                    kind: types_1.EditorEventType.ToolDisabled,
-                    tool: this,
-                });
-            }
-        });
-    }
-    /** Override this to allow this tool to be enabled in a read-only editor */
-    canReceiveInputInReadOnlyEditor() {
-        return false;
-    }
-    setInputMapper(mapper) {
-        __classPrivateFieldSet(this, _BaseTool_inputMapper, mapper, "f");
-        if (mapper) {
-            mapper.setEmitListener(event => this.dispatchEventToCallback(event));
-        }
-    }
-    getInputMapper() {
-        return __classPrivateFieldGet(this, _BaseTool_inputMapper, "f");
-    }
-    dispatchEventToCallback(event) {
-        let exhaustivenessCheck;
-        switch (event.kind) {
-            case inputEvents_1.InputEvtType.PointerDownEvt:
-                return this.onPointerDown(event);
-            case inputEvents_1.InputEvtType.PointerMoveEvt:
-                this.onPointerMove(event);
-                break;
-            case inputEvents_1.InputEvtType.PointerUpEvt:
-                return this.onPointerUp(event) ?? false;
-            case inputEvents_1.InputEvtType.GestureCancelEvt:
-                this.onGestureCancel(event);
-                break;
-            case inputEvents_1.InputEvtType.WheelEvt:
-                return this.onWheel(event);
-            case inputEvents_1.InputEvtType.KeyPressEvent:
-                return this.onKeyPress(event);
-            case inputEvents_1.InputEvtType.KeyUpEvent:
-                return this.onKeyUp(event);
-            case inputEvents_1.InputEvtType.CopyEvent:
-                return this.onCopy(event);
-            case inputEvents_1.InputEvtType.PasteEvent:
-                return this.onPaste(event);
-            default:
-                exhaustivenessCheck = event;
-                return exhaustivenessCheck;
-        }
-        return true;
-    }
-    // @internal
-    onEvent(event) {
-        if (__classPrivateFieldGet(this, _BaseTool_inputMapper, "f")) {
-            return __classPrivateFieldGet(this, _BaseTool_inputMapper, "f").onEvent(event);
-        }
-        return this.dispatchEventToCallback(event);
-    }
-    /**
-     * Returns true iff the tool handled the event and thus should receive additional
-     * events.
-     */
-    onPointerDown(_event) { return false; }
-    onPointerMove(_event) { }
-    /**
-     * Returns true iff there are additional pointers down and the tool should
-     * remain active to handle the additional events.
-     *
-     * For most purposes, this should return `false` or nothing.
-     */
-    onPointerUp(_event) { }
-    onGestureCancel(_event) { }
-    onWheel(_event) {
-        return false;
-    }
-    onCopy(_event) {
-        return false;
-    }
-    onPaste(_event) {
-        return false;
-    }
-    onKeyPress(_event) {
-        return false;
-    }
-    onKeyUp(_event) {
-        return false;
-    }
-    /**
-     * Return true if, while this tool is active, `_event` can be delivered to
-     * another tool that is higher priority than this.
-     * @internal May be renamed
-     */
-    eventCanBeDeliveredToNonActiveTool(_event) {
-        return true;
-    }
-    setEnabled(enabled) {
-        __classPrivateFieldGet(this, _BaseTool_enabled, "f").set(enabled);
-    }
-    isEnabled() {
-        return __classPrivateFieldGet(this, _BaseTool_enabled, "f").get();
-    }
-    /**
-     * Returns a {@link ReactiveValue} that updates based on whether this tool is
-     * enabled.
-     *
-     * @example
-     * ```ts
-     * const tool = new SomeTool();
-     *
-     * // Watch for changes in enabled status
-     * tool.enabledValue().onUpdate(enabled => doSomething(enabled));
-     * ```
-     */
-    enabledValue() {
-        return __classPrivateFieldGet(this, _BaseTool_enabled, "f");
-    }
-    // Connect this tool to a set of other tools, ensuring that at most one
-    // of the tools in the group is enabled.
-    setToolGroup(group) {
-        if (this.isEnabled()) {
-            group.notifyEnabled(this);
-        }
-        __classPrivateFieldSet(this, _BaseTool_group, group, "f");
-    }
-    getToolGroup() {
-        if (__classPrivateFieldGet(this, _BaseTool_group, "f")) {
-            return __classPrivateFieldGet(this, _BaseTool_group, "f");
-        }
-        return null;
-    }
-    // Called when the tool is removed/when the editor is destroyed.
-    // Subclasses that override this method **must call super.onDestroy()**.
-    onDestroy() {
-        __classPrivateFieldGet(this, _BaseTool_readOnlyEditorChangeListener, "f")?.remove();
-        __classPrivateFieldSet(this, _BaseTool_readOnlyEditorChangeListener, null, "f");
-        __classPrivateFieldSet(this, _BaseTool_group, null, "f");
-    }
-}
-_BaseTool_enabled = new WeakMap(), _BaseTool_group = new WeakMap(), _BaseTool_inputMapper = new WeakMap(), _BaseTool_readOnlyEditorChangeListener = new WeakMap();
-exports.default = BaseTool;

package/dist/cjs/tools/Eraser.d.ts

@@ -1,56 +0,0 @@
-import { GestureCancelEvt, KeyPressEvent, PointerEvt } from '../inputEvents';
-import BaseTool from './BaseTool';
-import Editor from '../Editor';
-import { MutableReactiveValue } from '../util/ReactiveValue';
-export declare enum EraserMode {
-    PartialStroke = "partial-stroke",
-    FullStroke = "full-stroke"
-}
-export interface InitialEraserOptions {
-    thickness?: number;
-    mode?: EraserMode;
-}
-export default class Eraser extends BaseTool {
-    private editor;
-    private lastPoint;
-    private isFirstEraseEvt;
-    private thickness;
-    private thicknessValue;
-    private modeValue;
-    private toRemove;
-    private toAdd;
-    private eraseCommands;
-    private addCommands;
-    constructor(editor: Editor, description: string, options?: InitialEraserOptions);
-    /**
-     * @returns a tool that briefly enables the eraser when a physical eraser is used.
-     * This tool should be added to the tool list after the primary tools.
-     */
-    makeEraserSwitcherTool(): BaseTool;
-    private clearPreview;
-    private getSizeOnCanvas;
-    private drawPreviewAt;
-    /**
-     * @returns the eraser rectangle in canvas coordinates.
-     *
-     * For now, all erasers are rectangles or points.
-     */
-    private getEraserRect;
-    /** Erases in a line from the last point to the current. */
-    private eraseTo;
-    onPointerDown(event: PointerEvt): boolean;
-    onPointerMove(event: PointerEvt): void;
-    onPointerUp(event: PointerEvt): void;
-    onGestureCancel(_event: GestureCancelEvt): void;
-    onKeyPress(event: KeyPressEvent): boolean;
-    /** Returns the side-length of the tip of this eraser. */
-    getThickness(): number;
-    /** Sets the side-length of this' tip. */
-    setThickness(thickness: number): void;
-    /**
-     * Returns a {@link MutableReactiveValue} that can be used to watch
-     * this tool's thickness.
-     */
-    getThicknessValue(): MutableReactiveValue<number>;
-    getModeValue(): MutableReactiveValue<EraserMode>;
-}