js-draw 0.25.1 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.25.1",
+  "version": "1.0.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",
@@ -14,7 +14,7 @@
       "default": "./src/styles.js"
     },
     "./Editor.css": {
-      "default": "./src/Editor.css"
+      "default": "./dist/Editor.css"
     },
     "./bundle": {
       "types": "./dist/mjs/bundle/bundled.d.ts",
@@ -33,28 +33,17 @@
     },
     "./localization": {
       "types": "./dist/mjs/localization.d.ts",
+      "require": "./dist/cjs/localization.js",
       "default": "./dist/mjs/localization.mjs"
     },
-    "./toolbar/HTMLToolbar": {
-      "types": "./dist/mjs/toolbar/HTMLToolbar.d.ts",
-      "default": "./dist/mjs/toolbar/HTMLToolbar.mjs"
-    },
-    "./math": {
-      "types": "./dist/mjs/math/lib.d.ts",
-      "import": "./dist/mjs/math/lib.mjs",
-      "require": "./dist/cjs/math/lib.js"
-    },
-    "./Color4": {
-      "types": "./dist/mjs/Color4.d.ts",
-      "import": "./dist/mjs/Color4.mjs",
-      "require": "./dist/cjs/Color4.js"
-    },
     "./components": {
       "types": "./dist/mjs/components/lib.d.ts",
+      "require": "./dist/cjs/components/lib.js",
       "default": "./dist/mjs/components/lib.mjs"
     },
     "./commands": {
       "types": "./dist/mjs/commands/lib.d.ts",
+      "require": "./dist/cjs/commands/lib.js",
       "default": "./dist/mjs/commands/lib.mjs"
     }
   },
@@ -68,20 +57,20 @@
   "scripts": {
     "dist-test": "npm run build && cd dist-test/test_imports && npm install && npm run test",
     "dist": "npm run build && npm run dist-test",
-    "build": "rm -rf ./dist && mkdir dist && build-tool build",
-    "watch": "rm -rf ./dist && mkdir dist && build-tool watch",
+    "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",
     "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": {
-    "@melloware/coloris": "0.20.0",
-    "bezier-js": "6.1.3"
+    "@js-draw/math": "1.0.0",
+    "@melloware/coloris": "0.21.0"
   },
   "devDependencies": {
-    "@js-draw/build-tool": "^0.25.0",
+    "@js-draw/build-tool": "^1.0.0",
     "@types/bezier-js": "4.1.0",
-    "@types/jest": "29.5.2",
+    "@types/jest": "29.5.3",
     "@types/jsdom": "21.1.1"
   },
   "bugs": {

package/src/Coloris.css

@@ -2,7 +2,7 @@
 /* Imports Coloris' CSS and makes additional changes to the color picker */
 
 #clr-picker {
-    --clr-slider-size: 30px;
+	--clr-slider-size: 30px;
 }
 
 /* Coloris: Try to avoid scrolling instead of updating the color input. */
@@ -24,10 +24,10 @@
 
 /* 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
-     */
+	/*
+	 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);
 }
@@ -45,8 +45,8 @@ Debugging: Uncommenting this rule makes Coloris' sliders more
 visible.
 
 #clr-picker.clr-picker input[type="range"] {
-    opacity: 0.5;
-    -webkit-appearance: auto;
-    appearance: auto;
+	opacity: 0.5;
+	-webkit-appearance: auto;
+	appearance: auto;
 }
 */

package/src/Editor.scss

@@ -0,0 +1,148 @@
+
+@use './toolbar/toolbar.scss';
+@use './tools/tools.scss';
+@use './dialogs/dialogs.scss';
+@use './Coloris.css';
+
+/* Deafult colors for the editor */
+.imageEditorContainer {
+	// The primary background/foreground colors are used for
+	// unselected buttons and dialog text.
+	--background-color-1: white;
+	--foreground-color-1: black;
+
+	// The secondary foreground/background colors are used for some menu/toolbar
+	// backgrounds.
+	--background-color-2: #f5f5f5;
+	--foreground-color-2: #2c303a;
+
+	// The tertiary foreground/background colors are also used for some
+	// menu/toolbar backgrounds.
+	--background-color-3: #e5e5e5;
+	--foreground-color-3: #1c202a;
+
+	// The selection background/foreground colors are used for selected
+	// buttons.
+	--selection-background-color: #cbdaf1;
+	--selection-foreground-color: #2c303a;
+
+	// Used for dialog backgrounds
+	--background-color-transparent: rgba(105, 100, 100, 0.5);
+
+	// Used for shadows
+	--shadow-color: rgba(0, 0, 0, 0.5);
+
+	// Color used for some button/input foregrounds
+	--primary-action-foreground-color: #15b;
+}
+
+@media (prefers-color-scheme: dark) {
+	.imageEditorContainer {
+		--background-color-1: #151515;
+		--foreground-color-1: white;
+
+		--background-color-2: #222;
+		--foreground-color-2: #efefef;
+
+		--background-color-3: #272627;
+		--foreground-color-3: #eee;
+
+		--selection-background-color: #607;
+		--selection-foreground-color: white;
+		--shadow-color: rgba(250, 250, 250, 0.5);
+		--background-color-transparent: rgba(50, 50, 50, 0.5);
+
+		--primary-action-foreground-color: #7ae;
+	}
+}
+
+.imageEditorContainer {
+	color: var(--foreground-color-1);
+	font-family: system-ui, -apple-system, sans-serif;
+	background-color: var(--background-color-1);
+	
+	// Set the width/height to a value that's independent of its content -- avoids
+	// ResizeObserver errors: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors
+	width: 100%;
+	height: 400px;
+	min-height: 220px;
+	min-width: 100px;
+
+	box-sizing: border-box;
+
+	display: flex;
+	flex-direction: column-reverse;
+
+	input {
+		accent-color: var(--primary-action-foreground-color);
+	}
+}
+
+.imageEditorContainer .imageEditorRenderArea {
+	display: grid;
+	grid-template-columns: 1fr;
+	flex-grow: 2;
+	flex-shrink: 1;
+	min-height: 100px;
+	min-width: 0;
+	width: 100%;
+	height:	100%;
+}
+
+.imageEditorContainer .imageEditorRenderArea canvas {
+	/* Stack all canvases on top of each other */
+	grid-row: 1 / 1;
+	grid-column: 1 / 1;
+	touch-action: none;
+
+	/* Fill the container */
+	box-sizing: border-box;
+	width: 100%;
+	height: 100%;
+
+	/* Allow the canvas to shrink (needed in Chrome) */
+	min-width: 0;
+	max-width: inherit;
+	min-height: 0px;
+	max-height: inherit;
+}
+
+.imageEditorContainer .loadingMessage {
+	position: fixed;
+	text-align: center;
+	font-size: 2em;
+
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+.imageEditorContainer .accessibilityAnnouncement {
+	opacity: 0;
+	width: 0;
+	height: 0;
+	overflow: hidden;
+	pointer-events: none;
+}
+
+.imageEditorContainer .textRendererOutputContainer {
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+}
+
+.imageEditorContainer .textRendererOutputContainer:focus-within {
+	overflow: visible;
+	z-index: 5;
+}
+
+@media print {
+	.imageEditorContainer .loadingMessage {
+		display: none;
+	}
+
+	.imageEditorContainer .imageEditorRenderArea canvas {
+		width: 100%;
+		height: initial;
+	}
+}

package/src/dialogs/dialogs.scss

@@ -0,0 +1,36 @@
+
+@use './makeAboutDialog.scss';
+
+.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 {
+		background-color: var(--background-color-1);
+		color: var(--foreground-color-1);
+		border: none;
+		outline: none;
+	
+		box-shadow: 0 0 2px var(--shadow-color);
+		border-radius: 8px;
+
+		max-height: 90vh;
+		width: min(100%, 500px);
+		box-sizing: border-box;
+	}
+}

package/src/dialogs/makeAboutDialog.scss

@@ -0,0 +1,41 @@
+
+.about-dialog-container dialog {
+	display: flex;
+	flex-direction: column;
+
+	.close-button {
+		// Center the close button
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.about-entry-container {
+		flex-grow: 1;
+		flex-shrink: 1;
+		overflow-y: auto;
+
+		margin-left: 20px;
+		margin-right: 20px;
+
+		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;
+			}
+		}
+	}
+
+
+}

package/src/styles.js

@@ -3,5 +3,5 @@
  * @packageDocumentation
  */
 
-import './Editor.css';
+import './Editor.scss';
 import '@melloware/coloris/dist/coloris.css';

package/src/toolbar/{toolbar.css → AbstractToolbar.scss}

@@ -1,15 +1,10 @@
-@import url(./widgets/InsertImageWidget.css);
-@import url(./widgets/OverflowWidget.css);
-@import url(./widgets/PenToolWidget.css);
-
 
+/* The *main* root toolbar element */
 .toolbar-root {
-	background-color: var(--primary-background-color);
-	--icon-color: var(--primary-foreground-color);
-
+	background-color: var(--background-color-1);
+	--icon-color: var(--foreground-color-1);
+	--toolbar-button-height: min(20vh, 60px);
 
-	border: 1px solid var(--secondary-background-color);
-	border-radius: 2px;
 	flex-wrap: wrap;
 
 	box-sizing: border-box;
@@ -18,20 +13,28 @@
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
+}
 
-	--toolbar-button-height: min(20vh, 60px);
-
-	/* Display above selection dialogs, etc. */
-	z-index: 2;
+/* Any root toolbar element */
+.toolbar-element {
+	// Display above selection dialogs, etc.
+	// Note that this needs to be less than the
+	// z-index of dropdown menus (particularly when
+	// multiple editors can be displayed).
+	z-index: 1;
 
 	font-family: system-ui, -apple-system, sans-serif;
+
+
+	details > summary {
+		cursor: pointer;
+	}
 }
 
-.toolbar-root > .toolbar-toolContainer > .toolbar-button,
-.toolbar-root > .toolbar-toolContainer > * > button,
-.toolbar-root > .toolbar-buttonGroup > button,
-.toolbar-root > .toolbar-button {
-	width: min-content;
+.toolbar-element > .toolbar-toolContainer > .toolbar-button,
+.toolbar-element > .toolbar-toolContainer > * > button,
+.toolbar-element > .toolbar-buttonGroup > button,
+.toolbar-element > .toolbar-button {
 	white-space: pre;
 	height: var(--toolbar-button-height);
 }
@@ -46,18 +49,15 @@
 	cursor: unset;
 }
 
-.toolbar-button, .toolbar-root button {
+.toolbar-button, .toolbar-element button {
 	cursor: pointer;
 	text-align: center;
 	border-radius: 6px;
 
-	--icon-color: var(--primary-foreground-color);
-	background-color: var(--primary-background-color);
-	color: var(--primary-foreground-color);
 	border: none;
-	box-shadow: 0px 0px 2px var(--primary-shadow-color);
+	box-shadow: 0px 0px 2px var(--shadow-color);
 
-	transition: background-color 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
+	transition: background-color 0.15s ease, box-shadow 0.25s ease, opacity 0.2s ease;
 }
 
 .toolbar-button,
@@ -71,8 +71,6 @@
 
 	padding-left: 3px;
 	padding-right: 3px;
-	margin-left: 3px;
-	margin-right: 3px;
 
 	min-width: 40px;
 	max-width: 105px;
@@ -83,11 +81,11 @@
 .toolbar-button > label {
 	cursor: inherit;
 	user-select: none;
+	-webkit-user-select: none;
 }
 
 /* Decrease the font size of labels in the main toolbar if they're long. */
-:not(.toolbar-dropdown) > .toolbar-toolContainer >
-		.toolbar-button > label.long-label {
+.toolbar-root > .toolbar-toolContainer > .toolbar-button > label.long-label {
 	font-size: 0.75em;
 }
 
@@ -97,7 +95,7 @@
 }
 
 .toolbar-button:not(.disabled):hover, .toolbar-root button:not(:disabled):hover {
-	box-shadow: 0px 2px 4px var(--primary-shadow-color);
+	box-shadow: 0px 2px 4px var(--shadow-color);
 }
 
 .toolbar-root button:disabled {
@@ -110,14 +108,14 @@
 	user-select: none;
 
 	width: 100%;
-	min-width: 30px;
-	min-height: 30px;
+	min-width: 20px;
+	min-height: 20px;
 }
 
 .toolbar-toolContainer.selected > .toolbar-button {
-	background-color: var(--secondary-background-color);
-	color: var(--secondary-foreground-color);
-	--icon-color: var(--secondary-foreground-color);
+	background-color: var(--selection-background-color);
+	color: var(--selection-foreground-color);
+	--icon-color: var(--selection-foreground-color);
 }
 
 .toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {
@@ -125,8 +123,8 @@
 }
 
 .toolbar-toolContainer > .toolbar-button > .toolbar-showHideDropdownIcon {
-	height: 10px;
-	transition: transform 0.5s ease;
+	height: 15px;
+	transition: transform 0.25s ease;
 }
 
 .toolbar-toolContainer.dropdownVisible > .toolbar-button > .toolbar-showHideDropdownIcon {
@@ -153,8 +151,8 @@
 
 	/* Prevent overlap/being displayed under the undo/redo buttons */
 	z-index: 2;
-	background-color: var(--primary-background-color);
-	box-shadow: 0px 3px 3px var(--primary-shadow-color);
+	background-color: var(--background-color-1);
+	box-shadow: 0px 3px 3px var(--shadow-color);
 }
 
 /* Animate showing/hiding the dropdown. Animations triggered in JavaScript. */
@@ -205,7 +203,7 @@
 	}
 
 	/* ...and background color animation. */
-	.toolbar-button, .toolbar-root button {
+	:root .toolbar-button, .toolbar-root button {
 		transition: none;
 	}
 }
@@ -226,51 +224,11 @@
 
 	touch-action: none;
 
-	background-color: var(--primary-background-color);
+	background-color: var(--background-color-1);
 	opacity: 0.3;
-}
 
-/* Make color selection buttons fill their containing label */
-.toolbar-dropdown .clr-field button {
-	width: 100%;
-	height: 100%;
-	border-radius: 2px;
-	margin-left: 0;
-	margin-right: 0;
-}
-
-.toolbar-root .toolbar-zoomLevelEditor {
-	display: flex;
-	flex-direction: row;
-}
-
-.toolbar-root .toolbar-zoomLevelEditor .zoomDisplay {
-	flex-grow: 1;
-}
-
-.toolbar-root .toolbar-zoomLevelEditor button {
-	min-width: 48px;
-}
-
-.color-input-container {
-	display: inline-flex;
-	flex-direction: row;
-}
-
-.color-input-container .pipetteButton {
-	width: 30px;
-	height: 30px;
-	padding: 0;
-	display: inline-flex;
-}
-
-.color-input-container .pipetteButton > svg {
-	width: 100%;
-}
-
-.color-input-container .pipetteButton.active {
-	background-color: var(--secondary-background-color);
-	--icon-color: var(--secondary-foreground-color);
+	// Display above the main image, but below the toolbars
+	z-index: 2;
 }
 
 .toolbar-spacedList > * {
@@ -278,9 +236,13 @@
 	padding-top: 5px;
 }
 
+.toolbar-indentedList {
+	padding-left: 10px;
+}
+
 @media print {
-	/* Hide the toolbar on print. */
-	.toolbar-root {
+	/* Hide all toolbar elements on print. */
+	.toolbar-element {
 		display: none;
 	}
-}
+}

package/src/toolbar/DropdownToolbar.scss

@@ -0,0 +1,46 @@
+
+.toolbar-dropdown-toolbar {
+	button, .toolbar-button {
+		background-color: var(--background-color-2);
+		color: var(--foreground-color-2);
+		--icon-color: var(--foreground-color-2);
+	}
+
+	&, .toolbar-dropdown {
+		background-color: var(--background-color-3);
+		color: var(--foreground-color-3);
+	}
+
+	.toolbar-spacedList > div {
+		// Add spacing between labels and inputs (assumes labels come first)
+		& > label {
+			padding-right: 10px;
+			min-width: 50px;
+		}
+	}
+
+	// Override the styling of color fields
+	.clr-field {
+		// Make the preview a rounded box.
+		button {
+			width: 100%;
+			height: 100%;
+
+			// Ensure that the preview is centered vertically
+			top: 50%;
+			left: 0;
+
+			border-radius: 5px;
+		}
+	}
+
+	.toolbar-grid-selector > div {
+		--button-size: 57px;
+	}
+
+	// Show toolbar buttons within dropdowns from left to right
+	// rather than from top to bottom.
+	.toolbar-dropdown > div > .toolbar-toolContainer {
+		display: inline-block;
+	}
+}