js-draw 1.2.1 → 1.3.0

package/dist/mjs/types.d.ts

@@ -82,7 +82,9 @@ export interface ToolbarDropdownShownEvent {
 export type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | SelectionUpdated | 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) => void;
+export type OnDetermineExportRectListener = (exportRect: Rect2, options?: {
+    autoresize: boolean;
+}) => void;
 export interface ImageLoader {
     start(onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener, onDetermineExportRect?: OnDetermineExportRectListener): Promise<void>;
 }

package/dist/mjs/util/adjustEditorThemeForContrast.mjs

@@ -57,6 +57,7 @@ const adjustEditorThemeForContrast = (editor, options) => {
         ['--background-color-1', '--foreground-color-1', true, true],
         ['--background-color-2', '--foreground-color-2', true, true],
         ['--background-color-3', '--foreground-color-3', true, true],
+        ['--background-color-2', '--primary-action-foreground-color', false, true],
         ['--selection-background-color', '--selection-foreground-color', false, true],
     ];
     if (!options?.dontClearOverrides) {

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

@@ -21,3 +21,7 @@ export declare const assertIsNumber: (value: any, allowNaN?: boolean) => value i
  * Throws if any of `values` is not of type number.
  */
 export declare const assertIsNumberArray: (values: any[], allowNaN?: boolean) => values is number[];
+/**
+ * Throws an exception if `typeof value` is not a boolean.
+ */
+export declare const assertIsBoolean: (value: any) => value is boolean;

package/dist/mjs/util/assertions.mjs

@@ -43,3 +43,13 @@ export const assertIsNumberArray = (values, allowNaN = false) => {
     }
     return true;
 };
+/**
+ * Throws an exception if `typeof value` is not a boolean.
+ */
+export const assertIsBoolean = (value) => {
+    if (typeof value !== 'boolean') {
+        throw new Error('Given value is not a boolean');
+        // return false;
+    }
+    return true;
+};

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.2.1',
+    number: '1.3.0',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.2.1",
+  "version": "1.3.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,12 +64,11 @@
     "postpack": "ts-node tools/copyREADME.ts revert"
   },
   "dependencies": {
-    "@js-draw/math": "^1.2.1",
+    "@js-draw/math": "^1.3.0",
     "@melloware/coloris": "0.21.0"
   },
   "devDependencies": {
     "@js-draw/build-tool": "^1.0.2",
-    "@types/bezier-js": "4.1.0",
     "@types/jest": "29.5.3",
     "@types/jsdom": "21.1.1"
   },
@@ -87,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "0cb756d3150c8b33dd9a3217faa7d18229688f34"
+  "gitHead": "46b3d8f819f8e083f6e3e1d01e027e4311355456"
 }

package/src/Editor.scss

@@ -136,6 +136,14 @@
 	z-index: 5;
 }
 
+// TODO: Apply this change during a future major release.
+// So as not to change the position of other overlays, all overlays should have
+// 0 height.
+// Uses the alternate overlay class name to decrease specificity.
+// .js-draw-editor-overlay {
+// 	//height: 0;
+// }
+
 @media print {
 	.imageEditorContainer .loadingMessage {
 		display: none;

package/src/dialogs/dialogs.scss

@@ -1,7 +1,8 @@
 
 @use './makeAboutDialog.scss';
 
-.dialog-container {
+// Repeat to increase specificity -- dialog containers are often overlays
+.dialog-container.dialog-container {
 	background-color: var( --background-color-transparent);
 
 	backdrop-filter: blur(5px);

package/src/toolbar/AbstractToolbar.scss

@@ -57,6 +57,9 @@
 	border: none;
 	box-shadow: 0px 0px 2px var(--shadow-color);
 
+	user-select: none;
+	-webkit-user-select: none;
+
 	transition: background-color 0.15s ease, box-shadow 0.25s ease, opacity 0.2s ease;
 }
 

package/src/toolbar/EdgeToolbar.scss

@@ -480,6 +480,8 @@
 	.toolbar-spacedList {
 		box-sizing: border-box;
 
+		--align-items-to-x: 105px;
+
 		& > div {
 			display: flex;
 			align-items: center;
@@ -491,7 +493,7 @@
 			// Align inputs (assumes labels come first)
 			& > label {
 				padding-right: 35px;
-				min-width: 105px;
+				min-width: var(--align-items-to-x);
 				flex-shrink: 1;
 				box-sizing: border-box;
 			}
@@ -499,6 +501,7 @@
 			& > input[type="checkbox"] {
 				width: 20px;
 				height: 20px;
+				margin-left: 0;
 			}
 
 			// If checkboxes have flex-grow, the checkbox region can become centered.

package/src/toolbar/widgets/DocumentPropertiesWidget.scss

@@ -4,4 +4,16 @@
 		width: 100%;
 		text-align: end;
 	}
+
+	& > * {
+		--align-items-to-x: 120px;
+	}
+
+	.js-draw-size-input-row.js-draw-size-input-row {
+		display: flex;
+
+		&.size-input-row--automatic-size {
+			display: none;
+		}
+	}
 }

package/src/toolbar/widgets/components/makeGridSelector.scss

@@ -20,7 +20,7 @@
 		flex-shrink: 1;
 		margin: 2px;
 
-		&:focus-within {
+		&.focus-visible {
 			outline: 2px solid var(--foreground-color-1);
 		}
 
@@ -42,6 +42,10 @@
 			align-items: center;
 			justify-content: center;
 			padding: 4px;
+
+			// Prevent long pressing from selecting the label
+			user-select: none;
+			-webkit-user-select: none;
 		}
 
 		.icon {
@@ -53,6 +57,7 @@
 		&.checked {
 			background-color: var(--selection-background-color);
 			color: var(--selection-foreground-color);
+			--icon-color: var(--selection-foreground-color);
 		}
 	}
 	

package/src/tools/ScrollbarTool.scss

@@ -0,0 +1,57 @@
+
+.ScrollbarTool-overlay {
+	width: 0;
+	height: 0;
+	overflow: visible;
+
+	$visible-opacity: 0.2;
+	opacity: $visible-opacity;
+	pointer-events: none;
+
+	--fade-out-animation: 1s ease 0s fade-out;
+
+	@media (prefers-reduced-motion: reduce) {
+		--fade-out-animation: none !important;
+	}
+
+	@keyframes fade-out {
+		from { opacity: $visible-opacity; }
+		to { opacity: 0; }
+	}
+
+	&:not(.just-updated) {
+		animation: var(--fade-out-animation);
+		opacity: 0;
+	}
+
+	--scrollbar-size: 3px;
+
+	.vertical-scrollbar, .horizontal-scrollbar {
+		width: var(--scrollbar-size);
+		height: var(--scrollbar-size);
+
+		min-width: var(--scrollbar-size);
+		min-height: var(--scrollbar-size);
+
+		background-color: var(--foreground-color-1);
+		border-radius: var(--scrollbar-size);
+		position: absolute;
+
+		&.represents-no-scroll {
+			animation: var(--fade-out-animation);
+			opacity: 0;
+		}
+	}
+
+	&:not(.scrollbar-left) {
+		.vertical-scrollbar {
+			margin-left: calc(var(--editor-current-display-width-px) - var(--scrollbar-size));
+		}
+	}
+	
+	&:not(.scrollbar-top) {
+		.horizontal-scrollbar {
+			margin-top: calc(var(--editor-current-display-height-px) - var(--scrollbar-size));
+		}
+	}
+}

package/src/tools/{SoundUITool.css → SoundUITool.scss}

@@ -5,6 +5,10 @@
 	overflow: hidden;    
 }
 
+.js-draw-sound-ui-toggle button {
+	margin-top: 1px;
+}
+
 .js-draw-sound-ui-toggle:focus-within, .js-draw-sound-ui-toggle.sound-ui-tool-enabled {
 	overflow: visible;
 	z-index: 5;

package/src/tools/tools.scss

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