js-draw 0.0.3 → 0.0.6

package/CHANGELOG.md

@@ -1,3 +1,20 @@
 
+# 0.0.6
+ * Fixes a bug that caused saved images to grow in size after loading them, then re-saving.
+ * Stops the pressure decrease on pen-up events from preventing line/arrow objects from having variable width.
+
+# 0.0.5
+ * Configuration options:
+   - Ability to disable touch panning
+   - The `new Editor(container, ...)` constructor now takes a configuration object as its second argument.
+ * A pre-bundled version of `js-draw` is now distributed.
+
+# 0.0.4
+ * Preset shapes
+   * Arrow
+   * Filled rectangle
+   * Outlined rectangle
+   * Line
+
 # 0.0.2
  * Adjust default editor colors based on system theme.

package/README.md

@@ -12,6 +12,7 @@ To use `js-draw`,
 
 ## Creating an `Editor`
 
+### With a bundler that supports importing `.css` files
 To create a new `Editor` and add it as a child of `document.body`,
 ```ts
 import Editor from 'js-draw';
@@ -22,6 +23,30 @@ const editor = new Editor(document.body);
 
 The `import js-draw/styles` step requires a bundler that can import `.css` files. For example, [`webpack` with `css-loader`.](https://webpack.js.org/loaders/css-loader/)
 
+### With a bundler that doesn't support importing `.css` files
+Import the pre-bundled version of the editor to apply CSS after loading the page.
+```ts
+import Editor from 'js-draw';
+import 'js-draw/bundle';
+
+const editor = new Editor(document.body);
+```
+`js-draw/bundle` is a version of the editor pre-processed by `Webpack`. As such, `import`ing it applies editor-specific CSS to the document.
+
+### Without a bundler
+If you're not using a bundler, consider using the pre-bundled editor:
+```html
+<!-- Replace 0.0.5 with the latest version of js-draw -->
+<script src="https://cdn.jsdelivr.net/npm/js-draw@0.0.5/dist/bundle.js"></script>
+<script>
+    const editor = new jsdraw.Editor(document.body);
+    editor.addToolbar();
+    editor.getRootElement().style.height = '600px';
+</script>
+```
+
+**Note**: To ensure the CDN-hosted version of `js-draw` hasn't been tampered with, consider [including an `integrity="..."` attribute](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). [Read more about using SRI with JSDelivr](https://www.jsdelivr.com/using-sri-with-dynamic-files).
+
 
 ## Adding a toolbar
 
@@ -74,3 +99,86 @@ but exports to
 
 which **does** contain the `<circle/>` element.
 
+## Settings/configuration
+### Disabling touchpad panning
+
+Touchpad/mousewheel pan gestures can conflict with gestures used to scroll the document. To turn off touchpad pan gestures (and scrolling the editor with the mousewheel),
+```ts
+const editor = new Editor(document.body, {
+    wheelEventsEnabled: false,
+});
+```
+
+### Localization
+
+See [src/localization.ts](src/localization.ts) for a list of strings.
+
+Some of the default strings in the editor might be overridden like this:
+```ts
+const editor = new Editor(document.body, {
+    // Example partial Spanish localization
+    localization: {
+        // Not all translated strings need to be specified. If a string isn't given,
+        // the English (default) localization will be used
+
+        // Strings for the main editor interface
+        // (see src/localization.ts)
+        loading: (percentage: number) => `Cargando: ${percentage}%...`,
+        imageEditor: 'Editor de dibujos',
+
+        undoAnnouncement: (commandDescription: string) => `${commandDescription} fue deshecho`,
+        redoAnnouncement: (commandDescription: string) => `${commandDescription} fue rehecho`,
+
+        // Strings for the toolbar
+        // (see src/toolbar/localization.ts)
+        pen: 'Lapiz',
+        eraser: 'Borrador',
+        select: 'Selecciona',
+        touchDrawing: 'Dibuja con un dedo',
+        thicknessLabel: 'Tamaño: ',
+        colorLabel: 'Color: ',
+        
+        ...
+    },
+});
+```
+
+
+## Changing the editor's color theme
+
+The editor's color theme is specified using CSS. Its default theme looks like this:
+```css
+.imageEditorContainer {
+	/* Deafult colors for the editor -- light mode */
+
+    --primary-background-color: white;
+    --primary-background-color-transparent: rgba(255, 255, 255, 0.5);
+    --secondary-background-color: #faf;
+    --primary-foreground-color: black;
+    --secondary-foreground-color: black;
+}
+
+@media (prefers-color-scheme: dark) {
+	.imageEditorContainer {
+		/* Deafult colors for the editor -- dark mode */
+
+		--primary-background-color: #151515;
+		--primary-background-color-transparent: rgba(50, 50, 50, 0.5);
+		--secondary-background-color: #607;
+		--primary-foreground-color: white;
+		--secondary-foreground-color: white;
+	}
+}
+```
+
+To override it, use a more specific CSS selector to set the theme variables. For example,
+```css
+body .imageEditorContainer {
+    --primary-background-color: green;
+    --primary-background-color-transparent: rgba(255, 240, 200, 0.5);
+    --secondary-background-color: yellow;
+    --primary-foreground-color: black;
+    --secondary-foreground-color: black;
+}
+```
+disables the dark theme and creates a theme that primarially uses yellow/green colors.

package/build_tools/BundledFile.ts

@@ -0,0 +1,167 @@
+// This file is taken from Joplin: https://github.com/laurent22/joplin
+// js-draw was originally created as a part of a pull request for joplin. This
+// is part of the functionality from Joplin it requires.
+
+import { dirname, extname, basename } from 'path';
+import TerserPlugin from 'terser-webpack-plugin';
+
+import webpack from 'webpack';
+
+export default class BundledFile {
+	private readonly bundleBaseName: string;
+	private readonly rootFileDirectory: string;
+	private readonly outputDirectory: string;
+	private readonly outputFilename: string;
+
+	public constructor(
+		public readonly bundleName: string,
+		private readonly sourceFilePath: string,
+		outputFilepath?: string,
+	) {
+		this.rootFileDirectory = dirname(sourceFilePath);
+		this.bundleBaseName = basename(sourceFilePath, extname(sourceFilePath));
+
+		if (outputFilepath) {
+			this.outputDirectory = dirname(outputFilepath);
+			this.outputFilename = basename(outputFilepath);
+		} else {
+			this.outputDirectory = this.rootFileDirectory;
+			this.outputFilename = `${this.bundleBaseName}.bundle.js`;
+		}
+	}
+
+	private getWebpackOptions(mode: 'production' | 'development'): webpack.Configuration {
+		const config: webpack.Configuration = {
+			mode,
+			entry: this.sourceFilePath,
+			output: {
+				path: this.outputDirectory,
+				filename: this.outputFilename,
+
+				library: {
+					type: 'window',
+					name: this.bundleName,
+				},
+			},
+			// See https://webpack.js.org/guides/typescript/
+			module: {
+				rules: [
+					{
+						// Include .tsx to include react components
+						test: /\.tsx?$/i,
+						use: 'ts-loader',
+						exclude: /node_modules/,
+					},
+					{
+						test: /\.css$/i,
+						use: ['style-loader', 'css-loader'],
+					},
+				],
+			},
+			optimization: {
+				minimizer: [
+					// Don't create separate files for comments.
+					// See https://stackoverflow.com/a/65650316/17055750
+					new TerserPlugin({
+						extractComments: false,
+					}),
+				],
+			},
+			// Increase the minimum size required
+			// to trigger warnings.
+			// See https://stackoverflow.com/a/53517149/17055750
+			performance: {
+				maxAssetSize: 2_000_000, // 2-ish MiB
+				maxEntrypointSize: 2_000_000,
+			},
+			resolve: {
+				extensions: ['.tsx', '.ts', '.js'],
+			},
+		};
+
+		return config;
+	}
+
+	private handleErrors(err: Error | undefined | null, stats: webpack.Stats | undefined): boolean {
+		let failed = false;
+
+		if (err) {
+			console.error(`Error: ${err.name}`, err.message, err.stack);
+			failed = true;
+		} else if (stats?.hasErrors() || stats?.hasWarnings()) {
+			const data = stats.toJson();
+
+			if (data.warnings && data.warningsCount) {
+				console.warn('Warnings: ', data.warningsCount);
+				for (const warning of data.warnings) {
+					// Stack contains the message
+					if (warning.stack) {
+						console.warn(warning.stack);
+					} else {
+						console.warn(warning.message);
+					}
+				}
+			}
+			if (data.errors && data.errorsCount) {
+				console.error('Errors: ', data.errorsCount);
+				for (const error of data.errors) {
+					if (error.stack) {
+						console.error(error.stack);
+					} else {
+						console.error(error.message);
+					}
+					console.error();
+				}
+
+				failed = true;
+			}
+		}
+
+		return failed;
+	}
+
+	// Create a minified JS file in the same directory as `this.sourceFilePath` with
+	// the same name.
+	public build() {
+		const compiler = webpack(this.getWebpackOptions('production'));
+		return new Promise<void>((resolve, reject) => {
+			console.info(`Building bundle: ${this.bundleName}...`);
+
+			compiler.run((err, stats) => {
+				let failed = this.handleErrors(err, stats);
+
+				// Clean up.
+				compiler.close(async (error) => {
+					if (error) {
+						console.error('Error cleaning up:', error);
+						failed = true;
+					}
+					if (!failed) {
+						console.log('☑ Done building! ☑');
+						resolve();
+					} else {
+						reject();
+					}
+				});
+			});
+		});
+	}
+
+	public startWatching() {
+		const compiler = webpack(this.getWebpackOptions('development'));
+		const watchOptions = {
+			ignored: [
+				'**/node_modules',
+				'**/dist',
+			],
+		};
+
+		console.info('Watching bundle: ', this.bundleName);
+		compiler.watch(watchOptions, async (err, stats) => {
+			const failed = this.handleErrors(err, stats);
+			if (!failed) {
+				console.log('☑ Built! ☑');
+			}
+		});
+	}
+}

package/build_tools/bundle.ts

@@ -0,0 +1,11 @@
+import { dirname } from 'path';
+import BundledFile from './BundledFile';
+
+const rootDir = dirname(__dirname);
+const mainBundle = new BundledFile(
+	'jsdraw',
+	`${rootDir}/src/bundle/bundled.ts`,
+	`${rootDir}/dist/bundle.js`,
+);
+
+void mainBundle.build();

package/dist/build_tools/BundledFile.d.ts

@@ -0,0 +1,13 @@
+export default class BundledFile {
+    readonly bundleName: string;
+    private readonly sourceFilePath;
+    private readonly bundleBaseName;
+    private readonly rootFileDirectory;
+    private readonly outputDirectory;
+    private readonly outputFilename;
+    constructor(bundleName: string, sourceFilePath: string, outputFilepath?: string);
+    private getWebpackOptions;
+    private handleErrors;
+    build(): Promise<void>;
+    startWatching(): void;
+}

package/dist/build_tools/BundledFile.js

@@ -0,0 +1,157 @@
+// This file is taken from Joplin: https://github.com/laurent22/joplin
+// js-draw was originally created as a part of a pull request for joplin. This
+// is part of the functionality from Joplin it requires.
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { dirname, extname, basename } from 'path';
+import TerserPlugin from 'terser-webpack-plugin';
+import webpack from 'webpack';
+export default class BundledFile {
+    constructor(bundleName, sourceFilePath, outputFilepath) {
+        this.bundleName = bundleName;
+        this.sourceFilePath = sourceFilePath;
+        this.rootFileDirectory = dirname(sourceFilePath);
+        this.bundleBaseName = basename(sourceFilePath, extname(sourceFilePath));
+        if (outputFilepath) {
+            this.outputDirectory = dirname(outputFilepath);
+            this.outputFilename = basename(outputFilepath);
+        }
+        else {
+            this.outputDirectory = this.rootFileDirectory;
+            this.outputFilename = `${this.bundleBaseName}.bundle.js`;
+        }
+    }
+    getWebpackOptions(mode) {
+        const config = {
+            mode,
+            entry: this.sourceFilePath,
+            output: {
+                path: this.outputDirectory,
+                filename: this.outputFilename,
+                library: {
+                    type: 'window',
+                    name: this.bundleName,
+                },
+            },
+            // See https://webpack.js.org/guides/typescript/
+            module: {
+                rules: [
+                    {
+                        // Include .tsx to include react components
+                        test: /\.tsx?$/i,
+                        use: 'ts-loader',
+                        exclude: /node_modules/,
+                    },
+                    {
+                        test: /\.css$/i,
+                        use: ['style-loader', 'css-loader'],
+                    },
+                ],
+            },
+            optimization: {
+                minimizer: [
+                    // Don't create separate files for comments.
+                    // See https://stackoverflow.com/a/65650316/17055750
+                    new TerserPlugin({
+                        extractComments: false,
+                    }),
+                ],
+            },
+            // Increase the minimum size required
+            // to trigger warnings.
+            // See https://stackoverflow.com/a/53517149/17055750
+            performance: {
+                maxAssetSize: 2000000,
+                maxEntrypointSize: 2000000,
+            },
+            resolve: {
+                extensions: ['.tsx', '.ts', '.js'],
+            },
+        };
+        return config;
+    }
+    handleErrors(err, stats) {
+        let failed = false;
+        if (err) {
+            console.error(`Error: ${err.name}`, err.message, err.stack);
+            failed = true;
+        }
+        else if ((stats === null || stats === void 0 ? void 0 : stats.hasErrors()) || (stats === null || stats === void 0 ? void 0 : stats.hasWarnings())) {
+            const data = stats.toJson();
+            if (data.warnings && data.warningsCount) {
+                console.warn('Warnings: ', data.warningsCount);
+                for (const warning of data.warnings) {
+                    // Stack contains the message
+                    if (warning.stack) {
+                        console.warn(warning.stack);
+                    }
+                    else {
+                        console.warn(warning.message);
+                    }
+                }
+            }
+            if (data.errors && data.errorsCount) {
+                console.error('Errors: ', data.errorsCount);
+                for (const error of data.errors) {
+                    if (error.stack) {
+                        console.error(error.stack);
+                    }
+                    else {
+                        console.error(error.message);
+                    }
+                    console.error();
+                }
+                failed = true;
+            }
+        }
+        return failed;
+    }
+    // Create a minified JS file in the same directory as `this.sourceFilePath` with
+    // the same name.
+    build() {
+        const compiler = webpack(this.getWebpackOptions('production'));
+        return new Promise((resolve, reject) => {
+            console.info(`Building bundle: ${this.bundleName}...`);
+            compiler.run((err, stats) => {
+                let failed = this.handleErrors(err, stats);
+                // Clean up.
+                compiler.close((error) => __awaiter(this, void 0, void 0, function* () {
+                    if (error) {
+                        console.error('Error cleaning up:', error);
+                        failed = true;
+                    }
+                    if (!failed) {
+                        console.log('☑ Done building! ☑');
+                        resolve();
+                    }
+                    else {
+                        reject();
+                    }
+                }));
+            });
+        });
+    }
+    startWatching() {
+        const compiler = webpack(this.getWebpackOptions('development'));
+        const watchOptions = {
+            ignored: [
+                '**/node_modules',
+                '**/dist',
+            ],
+        };
+        console.info('Watching bundle: ', this.bundleName);
+        compiler.watch(watchOptions, (err, stats) => __awaiter(this, void 0, void 0, function* () {
+            const failed = this.handleErrors(err, stats);
+            if (!failed) {
+                console.log('☑ Built! ☑');
+            }
+        }));
+    }
+}

package/dist/build_tools/bundle.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/build_tools/bundle.js

@@ -0,0 +1,5 @@
+import { dirname } from 'path';
+import BundledFile from './BundledFile';
+const rootDir = dirname(__dirname);
+const mainBundle = new BundledFile('jsdraw', `${rootDir}/src/bundle/bundled.ts`, `${rootDir}/dist/bundle.js`);
+void mainBundle.build();