js-draw 1.3.1 → 1.4.1

package/dist/mjs/tools/ToolController.d.ts

@@ -9,6 +9,7 @@ export default class ToolController implements InputEventListener {
     private activeTool;
     private primaryToolGroup;
     private inputPipeline;
+    private isEditorReadOnly;
     /** @internal */
     constructor(editor: Editor, localization: ToolLocalization);
     setTools(tools: BaseTool[], primaryToolGroup?: ToolEnabledGroup): void;
@@ -29,4 +30,5 @@ export default class ToolController implements InputEventListener {
      */
     addInputMapper(mapper: InputMapper): void;
     getMatchingTools<Type extends BaseTool>(type: new (...args: any[]) => Type): Type[];
+    onEditorDestroyed(): void;
 }

package/dist/mjs/tools/ToolController.mjs

@@ -23,6 +23,7 @@ export default class ToolController {
     /** @internal */
     constructor(editor, localization) {
         this.activeTool = null;
+        this.isEditorReadOnly = editor.isReadOnlyReactiveValue();
         this.inputPipeline = new InputPipeline();
         this.inputPipeline.setEmitListener(event => this.onEventInternal(event));
         const primaryToolGroup = new ToolEnabledGroup();
@@ -107,6 +108,10 @@ export default class ToolController {
     }
     // @internal use `dispatchEvent` rather than calling `onEvent` directly.
     onEventInternal(event) {
+        const isEditorReadOnly = this.isEditorReadOnly.get();
+        const canToolReceiveInput = (tool) => {
+            return tool.isEnabled() && (!isEditorReadOnly || tool.canReceiveInputInReadOnlyEditor());
+        };
         let handled = false;
         if (event.kind === InputEvtType.PointerDownEvt) {
             let canOnlySendToActiveTool = false;
@@ -117,7 +122,7 @@ export default class ToolController {
                 if (canOnlySendToActiveTool && tool !== this.activeTool) {
                     continue;
                 }
-                if (tool.isEnabled() && tool.onEvent(event)) {
+                if (canToolReceiveInput(tool) && tool.onEvent(event)) {
                     if (this.activeTool !== tool) {
                         this.activeTool?.onEvent({ kind: InputEvtType.GestureCancelEvt });
                     }
@@ -151,7 +156,7 @@ export default class ToolController {
         }
         else {
             for (const tool of this.tools) {
-                if (!tool.isEnabled()) {
+                if (!canToolReceiveInput(tool)) {
                     continue;
                 }
                 handled = tool.onEvent(event);
@@ -185,4 +190,10 @@ export default class ToolController {
     getMatchingTools(type) {
         return this.tools.filter(tool => tool instanceof type);
     }
+    // @internal
+    onEditorDestroyed() {
+        for (const tool of this.tools) {
+            tool.onDestroy();
+        }
+    }
 }

package/dist/mjs/tools/ToolSwitcherShortcut.d.ts

@@ -12,5 +12,6 @@ import BaseTool from './BaseTool';
 export default class ToolSwitcherShortcut extends BaseTool {
     private editor;
     constructor(editor: Editor);
+    canReceiveInputInReadOnlyEditor(): boolean;
     onKeyPress({ key }: KeyPressEvent): boolean;
 }

package/dist/mjs/tools/ToolSwitcherShortcut.mjs

@@ -12,6 +12,9 @@ export default class ToolSwitcherShortcut extends BaseTool {
         super(editor.notifier, editor.localization.changeTool);
         this.editor = editor;
     }
+    canReceiveInputInReadOnlyEditor() {
+        return true;
+    }
     // @internal
     onKeyPress({ key }) {
         const toolController = this.editor.toolController;

package/dist/mjs/types.d.ts

@@ -16,12 +16,13 @@ export declare enum EditorEventType {
     ViewportChanged = 7,
     DisplayResized = 8,
     SelectionUpdated = 9,
+    ReadOnlyModeToggled = 10,
     /** @internal */
-    ColorPickerToggled = 10,
+    ColorPickerToggled = 11,
     /** @internal */
-    ColorPickerColorSelected = 11,
+    ColorPickerColorSelected = 12,
     /** @deprecated @internal */
-    ToolbarDropdownShown = 12
+    ToolbarDropdownShown = 13
 }
 export declare enum UndoEventType {
     CommandDone = 0,
@@ -66,6 +67,10 @@ export interface SelectionUpdated {
     readonly selectedComponents: AbstractComponent[];
     readonly tool: BaseTool;
 }
+export interface ReadOnlyToggled {
+    readonly kind: EditorEventType.ReadOnlyModeToggled;
+    readonly editorIsReadOnly: boolean;
+}
 export interface ColorPickerToggled {
     readonly kind: EditorEventType.ColorPickerToggled;
     readonly open: boolean;
@@ -79,7 +84,7 @@ export interface ToolbarDropdownShownEvent {
     readonly fromToplevelDropdown: boolean;
     readonly layoutManager: WidgetContentLayoutManager;
 }
-export type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | SelectionUpdated | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
+export type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | SelectionUpdated | ReadOnlyToggled | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
 export type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null | void;
 export type ComponentAddedListener = (component: AbstractComponent) => Promise<void> | void;
 export type OnDetermineExportRectListener = (exportRect: Rect2, options?: {

package/dist/mjs/types.mjs

@@ -11,12 +11,13 @@ export var EditorEventType;
     EditorEventType[EditorEventType["ViewportChanged"] = 7] = "ViewportChanged";
     EditorEventType[EditorEventType["DisplayResized"] = 8] = "DisplayResized";
     EditorEventType[EditorEventType["SelectionUpdated"] = 9] = "SelectionUpdated";
+    EditorEventType[EditorEventType["ReadOnlyModeToggled"] = 10] = "ReadOnlyModeToggled";
     /** @internal */
-    EditorEventType[EditorEventType["ColorPickerToggled"] = 10] = "ColorPickerToggled";
+    EditorEventType[EditorEventType["ColorPickerToggled"] = 11] = "ColorPickerToggled";
     /** @internal */
-    EditorEventType[EditorEventType["ColorPickerColorSelected"] = 11] = "ColorPickerColorSelected";
+    EditorEventType[EditorEventType["ColorPickerColorSelected"] = 12] = "ColorPickerColorSelected";
     /** @deprecated @internal */
-    EditorEventType[EditorEventType["ToolbarDropdownShown"] = 12] = "ToolbarDropdownShown";
+    EditorEventType[EditorEventType["ToolbarDropdownShown"] = 13] = "ToolbarDropdownShown";
 })(EditorEventType || (EditorEventType = {}));
 // Types of `EditorUndoStackUpdated` events.
 export var UndoEventType;

package/dist/mjs/util/ReactiveValue.d.ts

@@ -55,7 +55,7 @@ export declare abstract class ReactiveValue<T> {
 }
 export declare abstract class MutableReactiveValue<T> extends ReactiveValue<T> {
     /**
-     * Changes the value of this and fires all update listeners.
+     * Changes the value of this and, if different, fires all update listeners.
      *
      * @see {@link onUpdate}
      */

package/dist/mjs/util/ReactiveValue.mjs

@@ -56,7 +56,7 @@ export class ReactiveValue {
      */
     static fromCallback(callback, sourceValues) {
         const result = new ReactiveValueImpl(callback());
-        const resultRef = window.WeakRef ? new WeakRef(result) : { deref: () => result };
+        const resultRef = window.WeakRef ? new window.WeakRef(result) : { deref: () => result };
         for (const value of sourceValues) {
             const listener = value.onUpdate(() => {
                 // Use resultRef to allow `result` to be garbage collected
@@ -94,7 +94,7 @@ export class ReactiveValue {
 export class MutableReactiveValue extends ReactiveValue {
     static fromProperty(sourceValue, propertyName) {
         const child = ReactiveValue.fromInitialValue(sourceValue.get()[propertyName]);
-        const childRef = window.WeakRef ? new WeakRef(child) : { deref: () => child };
+        const childRef = window.WeakRef ? new window.WeakRef(child) : { deref: () => child };
         // When the source is updated...
         const sourceListener = sourceValue.onUpdate(newValue => {
             const childValue = childRef.deref();

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.3.1',
+    number: '1.4.1',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.3.1",
+  "version": "1.4.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",
@@ -59,16 +59,16 @@
     "dist": "npm run build && npm run dist-test",
     "build": "rm -rf ./dist/* && mkdir -p dist && build-tool build",
     "watch": "rm -rf ./dist/* && mkdir -p dist && build-tool watch",
-    "build-translation-template": "build-tool build-translation-template",
+    "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",
     "postpack": "ts-node tools/copyREADME.ts revert"
   },
   "dependencies": {
-    "@js-draw/math": "^1.3.1",
+    "@js-draw/math": "^1.4.0",
     "@melloware/coloris": "0.21.0"
   },
   "devDependencies": {
-    "@js-draw/build-tool": "^1.0.2",
+    "@js-draw/build-tool": "^1.4.0",
     "@types/jest": "29.5.3",
     "@types/jsdom": "21.1.1"
   },
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "65af7ec944f70b69b2a4b07d98e5bb92eeeca029"
+  "gitHead": "cf64a8bf9fccc54c87478ea6ed5da771346b62bf"
 }

package/src/Editor.scss

@@ -56,6 +56,12 @@
 	}
 }
 
+// Derived colors
+.imageEditorContainer {
+	// Default icon color
+	--icon-color: var(--foreground-color-1);
+}
+
 .imageEditorContainer {
 	color: var(--foreground-color-1);
 	font-family: system-ui, -apple-system, sans-serif;

package/src/toolbar/EdgeToolbar.scss

@@ -118,11 +118,19 @@
 	box-sizing: border-box;
 
 	// Don't allow multiple lines when over a certain width (prefer scrolling)
-	@media screen and (min-width: 610px) {
+	@media screen and (min-width: 540px) {
 		flex-wrap: nowrap;
 
 		> .toolbar-action-row {
 			max-width: 50vw;
+
+			// Because the items are in the same row and a ResizeObserver
+			// can change the size of the other row, we need to ensure that
+			// this component doesn't re-trigger the ResizeObserver callback.
+			//
+			// As such, disable flex grow/shrink:
+			flex-grow: 0;
+			flex-shrink: 0;
 		}
 	}
 
@@ -131,7 +139,7 @@
 		&.one-row > * > .toolbar-toolContainer.label-inline {
 			font-size: 0.9em;
 
-			.toolbar-button {
+			& > .toolbar-button {
 				label {
 					opacity: 0;
 
@@ -145,6 +153,15 @@
 				}
 
 				@include label-visible-on-hover(label);
+
+				// Clear additional margins added because of the left/right side labels.
+				// (Repeat selector to increase specificity).
+				& > .toolbar-icon.toolbar-icon {
+					margin-left: 0;
+					margin-right: 0;
+				}
+
+				width: var(--toolbar-button-size);
 			}
 		}
 	}

package/src/tools/SelectionTool/SelectionTool.scss

@@ -0,0 +1,74 @@
+
+.selection-tool-selection-background {
+	background-color: var(--selection-background-color);
+	opacity: 0.5;
+	overflow: visible;
+	position: absolute;
+}
+
+.selection-tool-handle {
+	border: 1px solid var(--foreground-color-1);
+	background: var(--background-color-1);
+	position: absolute;
+
+	box-sizing: border-box;
+	padding: 3px;
+
+	& .icon {
+		width: 100%;
+		height: 100%;
+	}
+
+	&.selection-tool-circle {
+		border-radius: 100%;
+	}
+
+	&.selection-tool-rotate {
+		cursor: grab;
+	}
+}
+
+.selection-tool-handle {
+	&.selection-tool-resize-x {
+		cursor: ew-resize;
+	}
+
+	&.selection-tool-resize-y {
+		cursor: ns-resize;
+	}
+
+	&.selection-tool-resize-xy {
+		cursor: nw-resize;
+	}
+}
+
+.selection-tool-rotated-near-perpendicular .selection-tool-handle {
+	&.selection-tool-resize-x {
+		cursor: ns-resize;
+	}
+
+	&.selection-tool-resize-y {
+		cursor: ew-resize;
+	}
+
+	&.selection-tool-resize-xy {
+		cursor: sw-resize;
+	}
+}
+
+.overlay.handleOverlay {
+	height: 0;
+	overflow: visible;
+}
+
+@keyframes selection-duplicated-animation {
+	0% { scale: 1 1; }
+	50% { scale: 1.02 1.02; }
+	100% { scale: 1 1; }
+}
+
+/* Do not run the animation when the user has disabled motion animations. */
+@media (prefers-reduced-motion: reduce) {
+	@keyframes selection-duplicated-animation {
+	}
+}

package/src/tools/tools.scss

@@ -1,5 +1,5 @@
 
 @use "./ScrollbarTool.scss";
-@use "./SelectionTool/SelectionTool.css";
+@use "./SelectionTool/SelectionTool.scss";
 @use "./FindTool.css";
 @use "./SoundUITool.scss";

package/src/tools/SelectionTool/SelectionTool.css

@@ -1,35 +0,0 @@
-
-.selection-tool-selection-background {
-	background-color: var(--selection-background-color);
-	opacity: 0.5;
-	overflow: visible;
-	position: absolute;
-}
-
-.selection-tool-handle {
-	border: 1px solid var(--foreground-color-1);
-	background: var(--background-color-1);
-	position: absolute;
-	cursor: grab;
-}
-
-.selection-tool-handle.selection-tool-circle {
-	border-radius: 100%;
-}
-
-.overlay.handleOverlay {
-	height: 0;
-	overflow: visible;
-}
-
-@keyframes selection-duplicated-animation {
-	0% { transform: scale(1, 1); }
-	50% { transform: scale(1.02, 1.02); }
-	100% { transform: scale(1, 1); }
-}
-
-/* Do not run the animation when the user has disabled motion animations. */
-@media (prefers-reduced-motion: reduce) {
-	@keyframes selection-duplicated-animation {
-	}
-}