js-draw 0.20.0 → 0.22.0

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

@@ -27,7 +27,7 @@ import  EditorImage  from '../../EditorImage.mjs';
 const updateChunkSize = 100;
 const maxPreviewElemCount = 500;
 // @internal
-export default class Selection {
+class Selection {
     constructor(startPoint, editor) {
         this.editor = editor;
         this.transform = Mat33.identity;
@@ -125,6 +125,9 @@ export default class Selection {
         this.transform = Mat33.identity;
         // Make the commands undo-able
         this.editor.dispatch(new Selection.ApplyTransformationCommand(this, selectedElems, fullTransform));
+        // Clear renderings of any in-progress transformations
+        const wetInkRenderer = this.editor.display.getWetInkRenderer();
+        wetInkRenderer.clear();
     }
     // Preview the effects of the current transformation on the selection
     previewTransformCmds() {
@@ -442,7 +445,7 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
             (_b = this.selection) === null || _b === void 0 ? void 0 : _b.setTransform(this.fullTransform.inverse(), false);
             (_c = this.selection) === null || _c === void 0 ? void 0 : _c.updateUI();
             yield editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize, true);
-            (_d = this.selection) === null || _d === void 0 ? void 0 : _d.setTransform(Mat33.identity);
+            (_d = this.selection) === null || _d === void 0 ? void 0 : _d.setTransform(Mat33.identity, false);
             (_e = this.selection) === null || _e === void 0 ? void 0 : _e.recomputeRegion();
             (_f = this.selection) === null || _f === void 0 ? void 0 : _f.updateUI();
         });
@@ -457,3 +460,4 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
         return localizationTable.transformedElements(this.selectedElemIds.length);
     }
 };
+export default Selection;

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

@@ -9,7 +9,7 @@ import  TextComponent  from '../../components/TextComponent.mjs';
 export const cssPrefix = 'selection-tool-';
 // Allows users to select/transform portions of the `EditorImage`.
 // With respect to `extend`ing, `SelectionTool` is not stable.
-export default class SelectionTool extends BaseTool {
+class SelectionTool extends BaseTool {
     constructor(editor, description) {
         super(editor.notifier, description);
         this.editor = editor;
@@ -396,3 +396,4 @@ SelectionTool.handleableKeys = [
     'i', 'I', 'o', 'O',
     'Control', 'Meta',
 ];
+export default SelectionTool;

package/dist/mjs/src/types.d.ts

@@ -9,6 +9,8 @@ import Pointer from './Pointer';
 import Color4 from './Color4';
 import Command from './commands/Command';
 import BaseWidget from './toolbar/widgets/BaseWidget';
+export type HTMLPointerEventName = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
+export type HTMLPointerEventFilter = (eventName: HTMLPointerEventName, event: PointerEvent) => boolean;
 export interface PointerEvtListener {
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.20.0",
+	"version": "0.22.0",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"types": "./dist/mjs/src/lib.d.ts",
 	"main": "./dist/cjs/src/lib.js",
@@ -87,27 +87,27 @@
 	},
 	"devDependencies": {
 		"@types/bezier-js": "^4.1.0",
-		"@types/jest": "^29.4.2",
-		"@types/jsdom": "^21.1.0",
-		"@types/node": "^18.15.3",
-		"@typescript-eslint/eslint-plugin": "^5.55.0",
-		"@typescript-eslint/parser": "^5.55.0",
+		"@types/jest": "^29.5.0",
+		"@types/jsdom": "^21.1.1",
+		"@types/node": "^18.15.11",
+		"@typescript-eslint/eslint-plugin": "^5.57.1",
+		"@typescript-eslint/parser": "^5.57.1",
 		"css-loader": "^6.7.3",
-		"eslint": "^8.36.0",
+		"eslint": "^8.38.0",
 		"husky": "^8.0.3",
 		"jest": "^29.5.0",
 		"jest-environment-jsdom": "^29.5.0",
 		"jsdom": "^21.1.1",
-		"lint-staged": "^13.2.0",
+		"lint-staged": "^13.2.1",
 		"pinst": "^3.0.0",
 		"style-loader": "^3.3.2",
 		"terser-webpack-plugin": "^5.3.7",
-		"ts-jest": "^29.0.5",
+		"ts-jest": "^29.1.0",
 		"ts-loader": "^9.4.2",
 		"ts-node": "^10.9.1",
-		"typedoc": "^0.23.28",
-		"typescript": "^4.9.5",
-		"webpack": "^5.76.1"
+		"typedoc": "^0.24.1",
+		"typescript": "^5.0.4",
+		"webpack": "^5.78.0"
 	},
 	"bugs": {
 		"url": "https://github.com/personalizedrefrigerator/js-draw/issues"

package/src/Coloris.css

@@ -0,0 +1,52 @@
+
+/* Imports Coloris' CSS and makes additional changes to the color picker */
+
+#clr-picker {
+    --clr-slider-size: 30px;
+}
+
+/* Coloris: Try to avoid scrolling instead of updating the color input. */
+#clr-picker #clr-color-area, #clr-picker .clr_hue {
+	touch-action: none;
+}
+
+/* Increase space between inputs */
+#clr-picker .clr-alpha {
+	margin-top: 15px;
+	margin-bottom: 15px;
+}
+
+/* Increase size of input thumb to make it easier to select colors. */
+#clr-picker.clr-picker input[type="range"]::-moz-range-thumb {
+	width: var(--clr-slider-size);
+	height: var(--clr-slider-size);
+}
+
+/* Also apply to Chrome/iOS */
+#clr-picker.clr-picker input[type="range"]::-webkit-slider-thumb {
+    /*
+     Note: This doesn't seem to take effect in iOS if it's combined with the
+           ::-moz-range-thumb rule above
+     */
+	width: var(--clr-slider-size);
+	height: var(--clr-slider-size);
+}
+
+#clr-picker.clr-picker input[type="range"]::-webkit-slider-runnable-track {
+	height: var(--clr-slider-size);
+}
+
+#clr-picker.clr-picker input[type="range"]::-moz-range-track {
+	height: var(--clr-slider-size);
+}
+
+/*
+Debugging: Uncommenting this rule makes Coloris' sliders more
+visible.
+
+#clr-picker.clr-picker input[type="range"] {
+    opacity: 0.5;
+    -webkit-appearance: auto;
+    appearance: auto;
+}
+*/

package/src/Editor.css

@@ -1,6 +1,7 @@
 
 @import url('./toolbar/toolbar.css');
 @import url('./tools/tools.css');
+@import url('./Coloris.css');
 
 .imageEditorContainer {
 	/* Deafult colors for the editor */
@@ -84,3 +85,14 @@
 	overflow: visible;
 	z-index: 5;
 }
+
+@media print {
+	.imageEditorContainer .loadingMessage {
+		display: none;
+	}
+
+	.imageEditorContainer .imageEditorRenderArea canvas {
+		width: 100%;
+		height: initial;
+	}
+}

package/src/toolbar/toolbar.css

@@ -74,6 +74,7 @@
 	margin-right: 3px;
 
 	min-width: 40px;
+	max-width: 105px;
 	width: min-content;
 	font-size: 1em;
 }
@@ -82,6 +83,12 @@
 	cursor: inherit;
 }
 
+/* Decrease the font size of labels in the main toolbar if they're long. */
+:not(.toolbar-dropdown) > .toolbar-toolContainer >
+		.toolbar-button > label.long-label {
+	font-size: 0.75em;
+}
+
 .toolbar-dropdown > .toolbar-toolContainer > button,
 .toolbar-dropdown > .toolbar-toolContainer > .toolbar-button {
 	width: 6em;
@@ -160,6 +167,8 @@
 	bottom: 0;
 	right: 0;
 
+	touch-action: none;
+
 	background-color: var(--primary-background-color);
 	opacity: 0.3;
 }
@@ -210,4 +219,11 @@
 .toolbar-spacedList > * {
 	padding-bottom: 5px;
 	padding-top: 5px;
+}
+
+@media print {
+	/* Hide the toolbar on print. */
+	.toolbar-root {
+		display: none;
+	}
 }

package/tsconfig-typedoc.json

@@ -0,0 +1,7 @@
+{
+    "extends": "./tsconfig.json",
+
+	"include": [
+		"src/**/*.ts",
+	],
+}

package/tsconfig.json

@@ -8,7 +8,9 @@
 		"noFallthroughCasesInSwitch": true,
 		"noImplicitAny": true,
 		"noImplicitReturns": true,
+		"noImplicitOverride": true,
 		"noUnusedLocals": true,
+
 		"strictBindCallApply": true,
 		"strictFunctionTypes": true,
 		"strictNullChecks": true,

package/typedoc.json

@@ -15,6 +15,7 @@
 	"readme": "README.md",
 	"entryPointStrategy": "expand",
 	"out": "docs/typedoc/",
+	"tsconfig": "tsconfig-typedoc.json",
 
 	"validation": {
 		"notExported": false,