js-draw 1.27.1 → 1.28.0

package/dist/mjs/tools/Eraser.mjs

@@ -139,7 +139,7 @@ export default class Eraser extends BaseTool {
         const line = new LineSegment2(this.lastPoint, currentPoint);
         const region = Rect2.union(line.bbox, eraserRect);
         const intersectingElems = this.editor.image
-            .getElementsIntersectingRegion(region)
+            .getComponentsIntersecting(region)
             .filter((component) => {
             return component.intersects(line) || component.intersectsRect(eraserRect);
         });
@@ -178,7 +178,7 @@ export default class Eraser extends BaseTool {
                 toAdd.push(...targetElem.withRegionErased(erasePath, this.editor.viewport));
             }
             const eraseCommand = new Erase(toErase);
-            const newAddCommands = toAdd.map((elem) => EditorImage.addElement(elem));
+            const newAddCommands = toAdd.map((elem) => EditorImage.addComponent(elem));
             eraseCommand.apply(this.editor);
             newAddCommands.forEach((command) => command.apply(this.editor));
             const finalToErase = [];
@@ -234,7 +234,7 @@ export default class Eraser extends BaseTool {
                     this.toRemove = this.toRemove.filter((other) => other !== item);
                 }
             }
-            commands.push(...[...this.toAdd].map((a) => EditorImage.addElement(a)));
+            commands.push(...[...this.toAdd].map((a) => EditorImage.addComponent(a)));
             this.addCommands = [];
         }
         if (this.eraseCommands.length > 0) {

package/dist/mjs/tools/FindTool.mjs

@@ -22,7 +22,7 @@ export default class FindTool extends BaseTool {
     }
     getMatches(searchFor) {
         const lowerSearchFor = searchFor.toLocaleLowerCase();
-        const matchingComponents = this.editor.image.getAllElements().filter((component) => {
+        const matchingComponents = this.editor.image.getAllComponents().filter((component) => {
             let text = '';
             if (component instanceof TextComponent) {
                 text = component.getText();

package/dist/mjs/tools/PasteHandler.mjs

@@ -71,7 +71,10 @@ export default class PasteHandler extends BaseTool {
     async doSVGPaste(data) {
         this.editor.showLoadingWarning(0);
         try {
-            const loader = SVGLoader.fromString(data, true);
+            const loader = SVGLoader.fromString(data, {
+                sanitize: true,
+                plugins: this.editor.getCurrentSettings().svg?.loaderPlugins ?? [],
+            });
             const components = [];
             await loader.start((component) => {
                 components.push(component);

package/dist/mjs/tools/Pen.mjs

@@ -213,7 +213,7 @@ export default class Pen extends BaseTool {
                     this.editor.announceForAccessibility(this.editor.localization.autocorrectedTo(stroke.description(this.editor.localization)));
                 }
                 const canFlatten = true;
-                const action = EditorImage.addElement(stroke, canFlatten);
+                const action = EditorImage.addComponent(stroke, canFlatten);
                 this.editor.dispatch(action);
             }
             else {

package/dist/mjs/tools/SelectionTool/SelectAllShortcutHandler.mjs

@@ -17,7 +17,7 @@ export default class SelectAllShortcutHandler extends BaseTool {
             if (selectionTools.length > 0) {
                 const selectionTool = selectionTools[0];
                 selectionTool.setEnabled(true);
-                selectionTool.setSelection(this.editor.image.getAllElements());
+                selectionTool.setSelection(this.editor.image.getAllComponents());
                 return true;
             }
         }

package/dist/mjs/tools/SelectionTool/Selection.mjs

@@ -15,6 +15,8 @@ import  { ResizeMode }  from './types.mjs';
 import  EditorImage  from '../../image/EditorImage.mjs';
 import  uniteCommands  from '../../commands/uniteCommands.mjs';
 import  SelectionMenuShortcut  from './SelectionMenuShortcut.mjs';
+import  { assertIsNumberArray, assertIsStringArray }  from '../../util/assertions.mjs';
+import  describeTransformation  from '../../util/describeTransformation.mjs';
 const updateChunkSize = 100;
 const maxPreviewElemCount = 500;
 // @internal
@@ -148,7 +150,7 @@ class Selection {
             return 0;
         }
         const selectedBottommostZIndex = this.selectedElems[0].getZIndex();
-        const visibleObjects = this.editor.image.getElementsIntersectingRegion(this.region);
+        const visibleObjects = this.editor.image.getComponentsIntersecting(this.region);
         const topMostVisibleZIndex = visibleObjects[visibleObjects.length - 1]?.getZIndex() ?? selectedBottommostZIndex;
         const deltaZIndex = topMostVisibleZIndex + 1 - selectedBottommostZIndex;
         return deltaZIndex;
@@ -167,13 +169,13 @@ class Selection {
         // z-index of the just-transformed commands.
         if (this.selectedElems.length > 0) {
             const deltaZIndex = this.getDeltaZIndexToMoveSelectionToTop();
-            transformPromise = this.editor.dispatch(new _a.ApplyTransformationCommand(this, selectedElems, fullTransform, deltaZIndex));
+            transformPromise = this.editor.dispatch(new _a.ApplyTransformationCommand(this, selectedElems, this.originalRegion.center, fullTransform, deltaZIndex));
         }
         return transformPromise;
     }
     /** Sends all selected elements to the bottom of the visible image. */
     sendToBack() {
-        const visibleObjects = this.editor.image.getElementsIntersectingRegion(this.editor.viewport.visibleRect);
+        const visibleObjects = this.editor.image.getComponentsIntersecting(this.editor.viewport.visibleRect);
         // VisibleObjects and selectedElems should both be sorted by z-index
         const lowestVisibleZIndex = visibleObjects[0]?.getZIndex() ?? 0;
         const highestSelectedZIndex = this.selectedElems[this.selectedElems.length - 1]?.getZIndex() ?? 0;
@@ -300,7 +302,7 @@ class Selection {
             // If we're making things visible and the selected object wasn't previously
             // visible,
             else if (!parent && this.removedFromImage[elem.getId()]) {
-                EditorImage.addElement(elem).apply(this.editor);
+                EditorImage.addComponent(elem).apply(this.editor);
                 this.removedFromImage[elem.getId()] = false;
                 delete this.removedFromImage[elem.getId()];
             }
@@ -438,14 +440,14 @@ class Selection {
             // Don't update the selection's focus when redoing/undoing
             const selectionToUpdate = null;
             const deltaZIndex = this.getDeltaZIndexToMoveSelectionToTop();
-            tmpApplyCommand = new _a.ApplyTransformationCommand(selectionToUpdate, this.selectedElems, this.transform, deltaZIndex);
+            tmpApplyCommand = new _a.ApplyTransformationCommand(selectionToUpdate, this.selectedElems, this.region.center, this.transform, deltaZIndex);
             // Transform to ensure that the duplicates are in the correct location
             await tmpApplyCommand.apply(this.editor);
             // Show items again
             this.addRemoveSelectionFromImage(true);
             // With the transformation applied, create the duplicates
             command = uniteCommands(this.selectedElems.map((elem) => {
-                return EditorImage.addElement(elem.clone());
+                return EditorImage.addComponent(elem.clone());
             }));
             // Move the selected objects back to the correct location.
             await tmpApplyCommand?.unapply(this.editor);
@@ -503,21 +505,31 @@ class Selection {
 _a = Selection;
 (() => {
     SerializableCommand.register('selection-tool-transform', (json, _editor) => {
+        const rawTransformArray = json.transform;
+        const rawCenterArray = json.selectionCenter ?? [0, 0];
+        const rawElementIds = json.elems ?? [];
+        assertIsNumberArray(rawTransformArray);
+        assertIsNumberArray(rawCenterArray);
+        assertIsStringArray(rawElementIds);
         // The selection box is lost when serializing/deserializing. No need to store box rotation
-        const fullTransform = new Mat33(...json.transform);
-        const elemIds = json.elems ?? [];
+        const fullTransform = new Mat33(...rawTransformArray);
+        const elemIds = rawElementIds;
         const deltaZIndex = parseInt(json.deltaZIndex ?? 0);
-        return new _a.ApplyTransformationCommand(null, elemIds, fullTransform, deltaZIndex);
+        const center = Vec2.of(rawCenterArray[0] ?? 0, rawCenterArray[1] ?? 0);
+        return new _a.ApplyTransformationCommand(null, elemIds, center, fullTransform, deltaZIndex);
     });
 })();
 Selection.ApplyTransformationCommand = class extends SerializableCommand {
     constructor(selection, 
     // If a `string[]`, selectedElems is a list of element IDs.
     selectedElems, 
+    // Information used to describe the transformation
+    selectionCenter, 
     // Full transformation used to transform elements.
     fullTransform, deltaZIndex) {
         super('selection-tool-transform');
         this.selection = selection;
+        this.selectionCenter = selectionCenter;
         this.fullTransform = fullTransform;
         this.deltaZIndex = deltaZIndex;
         const isIDList = (arr) => {
@@ -585,10 +597,11 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
             elems: this.selectedElemIds,
             transform: this.fullTransform.toArray(),
             deltaZIndex: this.deltaZIndex,
+            selectionCenter: this.selectionCenter.asArray(),
         };
     }
     description(_editor, localizationTable) {
-        return localizationTable.transformedElements(this.selectedElemIds.length);
+        return localizationTable.transformedElements(this.selectedElemIds.length, describeTransformation(this.selectionCenter, this.fullTransform, false, localizationTable));
     }
 };
 export default Selection;

package/dist/mjs/tools/SelectionTool/SelectionBuilders/LassoSelectionBuilder.mjs

@@ -33,7 +33,7 @@ export default class LassoSelectionBuilder extends SelectionBuilder {
     resolveInternal(image) {
         const path = this.previewPath();
         const lines = path.polylineApproximation();
-        const candidates = image.getElementsIntersectingRegion(path.bbox);
+        const candidates = image.getComponentsIntersecting(path.bbox);
         const componentIsInSelection = (component) => {
             if (path.closedContainsRect(component.getExactBBox())) {
                 return true;

package/dist/mjs/tools/SelectionTool/SelectionBuilders/RectSelectionBuilder.mjs

@@ -15,7 +15,7 @@ export default class RectSelectionBuilder extends SelectionBuilder {
         return Path.fromRect(this.rect);
     }
     resolveInternal(image) {
-        return image.getElementsIntersectingRegion(this.rect).filter((element) => {
+        return image.getComponentsIntersecting(this.rect).filter((element) => {
             // Filter out the case where the selection rectangle is completely contained
             // within the element (and does not intersect it).
             // This is useful, for example, if a very large stroke is used as the background

package/dist/mjs/tools/SelectionTool/SelectionBuilders/SelectionBuilder.mjs

@@ -20,7 +20,7 @@ export default class SelectionBuilder {
         if (isClick) {
             const searchRegionSize = viewport.visibleRect.maxDimension / 200;
             const minSizeBox = path.bbox.grownBy(searchRegionSize);
-            components = image.getElementsIntersectingRegion(minSizeBox).filter((component) => {
+            components = image.getComponentsIntersecting(minSizeBox).filter((component) => {
                 return minSizeBox.containsRect(component.getBBox()) || component.intersectsRect(minSizeBox);
             });
             components = filterComponents(components);

package/dist/mjs/tools/SelectionTool/SelectionTool.mjs

@@ -253,7 +253,7 @@ export default class SelectionTool extends BaseTool {
             return true;
         }
         else if (shortcucts.matchesShortcut(selectAllKeyboardShortcut, event)) {
-            this.setSelection(this.editor.image.getAllElements());
+            this.setSelection(this.editor.image.getAllComponents());
             return true;
         }
         else if (event.ctrlKey) {
@@ -456,7 +456,8 @@ export default class SelectionTool extends BaseTool {
         this.handleOverlay.style.display = enabled ? 'block' : 'none';
         if (enabled) {
             this.handleOverlay.tabIndex = 0;
-            this.handleOverlay.setAttribute('aria-label', this.editor.localization.selectionToolKeyboardShortcuts);
+            this.handleOverlay.role = 'group';
+            this.handleOverlay.ariaLabel = this.editor.localization.selectionToolKeyboardShortcuts;
         }
         else {
             this.handleOverlay.tabIndex = -1;

package/dist/mjs/tools/SoundUITool.mjs

@@ -151,7 +151,7 @@ export default class SoundUITool extends BaseTool {
         this.soundFeedback?.setColor(this.editor.display.getColorAt(current.screenPos) ?? Color4.black);
         const pointerMotionLine = new LineSegment2(this.lastPointerPos, current.canvasPos);
         const collisions = this.editor.image
-            .getElementsIntersectingRegion(pointerMotionLine.bbox)
+            .getComponentsIntersecting(pointerMotionLine.bbox)
             .filter((component) => component.intersects(pointerMotionLine));
         this.lastPointerPos = current.canvasPos;
         if (collisions.length > 0) {

package/dist/mjs/tools/TextTool.mjs

@@ -98,7 +98,7 @@ export default class TextTool extends BaseTool {
             const scrollCorrectionCanvas = this.editor.viewport.screenToCanvasTransform.transformVec3(scrollCorrectionScreen);
             const scrollTransform = Mat33.translation(scrollCorrectionCanvas);
             const textComponent = TextComponent.fromLines(content.split('\n'), scrollTransform.rightMul(this.contentTransform.get()), this.textStyle);
-            const action = EditorImage.addElement(textComponent);
+            const action = EditorImage.addComponent(textComponent);
             if (this.removeExistingCommand) {
                 // Unapply so that `removeExistingCommand` can be added to the undo stack.
                 this.removeExistingCommand.unapply(this.editor);
@@ -208,7 +208,7 @@ export default class TextTool extends BaseTool {
             const canvasPos = current.canvasPos;
             const halfTestRegionSize = Vec2.of(4, 4).times(this.editor.viewport.getSizeOfPixelOnCanvas());
             const testRegion = Rect2.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
-            const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
+            const targetNodes = this.editor.image.getComponentsIntersecting(testRegion);
             let targetTextNodes = targetNodes.filter((node) => node instanceof TextComponent);
             // Don't try to edit text nodes that contain the viewport (this allows us
             // to zoom in on text nodes and add text on top of them.)

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

@@ -15,11 +15,17 @@ export declare function assertUnreachable(key: never): never;
  * ```
  */
 export declare function assertIsNumber(value: unknown, allowNaN?: boolean): asserts value is number;
+/** Throws an `Error` if the given `value` is not a `string`. */
+export declare function assertIsString(value: unknown): asserts value is string;
 export declare function assertIsArray(values: unknown): asserts values is unknown[];
 /**
  * Throws if any of `values` is not of type number.
  */
 export declare function assertIsNumberArray(values: unknown, allowNaN?: boolean): asserts values is number[];
+/**
+ * Throws if any of `values` is not of type `string`.
+ */
+export declare function assertIsStringArray(values: unknown): asserts values is string[];
 /**
  * Throws an exception if `typeof value` is not a boolean.
  */

package/dist/mjs/util/assertions.mjs

@@ -24,6 +24,12 @@ export function assertIsNumber(value, allowNaN = false) {
         throw new Error('Given value is not a number');
     }
 }
+/** Throws an `Error` if the given `value` is not a `string`. */
+export function assertIsString(value) {
+    if (typeof value !== 'string') {
+        throw new Error('Given value is not a string');
+    }
+}
 export function assertIsArray(values) {
     if (!Array.isArray(values)) {
         throw new Error('Asserting isArray: Given entity is not an array');
@@ -39,6 +45,16 @@ export function assertIsNumberArray(values, allowNaN = false) {
         assertIsNumber(value, allowNaN);
     }
 }
+/**
+ * Throws if any of `values` is not of type `string`.
+ */
+export function assertIsStringArray(values) {
+    assertIsArray(values);
+    assertIsNumber(values.length);
+    for (const value of values) {
+        assertIsString(value);
+    }
+}
 /**
  * Throws an exception if `typeof value` is not a boolean.
  */

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

@@ -0,0 +1,12 @@
+import { Mat33, Vec2 } from '@js-draw/math';
+interface Descriptions {
+    zoomedIn: string;
+    zoomedOut: string;
+    movedLeft: string;
+    movedRight: string;
+    movedUp: string;
+    movedDown: string;
+    rotatedBy: (deg: number) => string;
+}
+declare const describeTransformation: (origin: Vec2, transform: Mat33, invertDirections: boolean, localizationTable: Descriptions) => string;
+export default describeTransformation;

package/dist/mjs/util/describeTransformation.mjs

@@ -0,0 +1,42 @@
+import { Vec2 } from '@js-draw/math';
+const describeTransformation = (
+// The location of the object before being transformed
+origin, 
+// The transformation
+transform, 
+// If true, moving the object right, for example, reads as "moved left"
+invertDirections, localizationTable) => {
+    // Describe the transformation's affect on the viewport (note that transformation transforms
+    // the **elements** within the viewport). Assumes the transformation only does rotation/scale/translation.
+    const linearTransformedVec = transform.transformVec3(Vec2.unitX);
+    const affineTransformedVec = transform.transformVec2(origin);
+    const scale = linearTransformedVec.magnitude();
+    const clockwiseRotation = -(180 / Math.PI) * linearTransformedVec.angle();
+    const translation = affineTransformedVec.minus(origin);
+    const result = [];
+    if (scale > 1.2) {
+        result.push(localizationTable.zoomedIn);
+    }
+    else if (scale < 0.8) {
+        result.push(localizationTable.zoomedOut);
+    }
+    if (Math.floor(Math.abs(clockwiseRotation)) > 0) {
+        const roundedRotation = Math.round(invertDirections ? -clockwiseRotation : clockwiseRotation);
+        result.push(localizationTable.rotatedBy(roundedRotation));
+    }
+    const minTranslation = 1e-4;
+    if (translation.x > minTranslation) {
+        result.push(invertDirections ? localizationTable.movedLeft : localizationTable.movedRight);
+    }
+    else if (translation.x < -minTranslation) {
+        result.push(invertDirections ? localizationTable.movedRight : localizationTable.movedLeft);
+    }
+    if (translation.y < -minTranslation) {
+        result.push(invertDirections ? localizationTable.movedDown : localizationTable.movedUp);
+    }
+    else if (translation.y > minTranslation) {
+        result.push(invertDirections ? localizationTable.movedUp : localizationTable.movedDown);
+    }
+    return result.join('; ');
+};
+export default describeTransformation;

package/dist/mjs/version.mjs

@@ -4,5 +4,6 @@
  * @internal
  */
 export default {
-    number: '1.27.1',
+    // Note: Auto-updated by prebuild.js:
+    number: '1.28.0',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "1.27.1",
+	"version": "1.28.0",
 	"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",
@@ -64,11 +64,11 @@
 		"postpack": "ts-node tools/copyREADME.ts revert"
 	},
 	"dependencies": {
-		"@js-draw/math": "^1.27.1",
+		"@js-draw/math": "^1.28.0",
 		"@melloware/coloris": "0.22.0"
 	},
 	"devDependencies": {
-		"@js-draw/build-tool": "^1.27.1",
+		"@js-draw/build-tool": "^1.28.0",
 		"@types/jest": "29.5.5",
 		"@types/jsdom": "21.1.3"
 	},
@@ -86,5 +86,5 @@
 		"freehand",
 		"svg"
 	],
-	"gitHead": "e11574b7b329e7867358c400457a3d99b1d2c469"
+	"gitHead": "03242acbf2250f5a41aa86a84146bb08583cf955"
 }

package/src/toolbar/utils/HelpDisplay.scss

@@ -291,9 +291,15 @@
 		&.-highlight-next > .next,
 		&.-highlight-previous > .previous {
 			font-weight: bold;
-			background-color: rgba(200, 200, 200, 0.1);
 			font-size: 1.4em;
 		}
+
+		&.-highlight-next > .next,
+		&.-highlight-previous > .previous,
+		.next:hover,
+		.previous:hover {
+			background-color: rgba(200, 200, 200, 0.1);
+		}
 	}
 
 	.navigation-help {