js-draw 0.0.1

package/.eslintrc.js

@@ -0,0 +1,57 @@
+module.exports = {
+	'env': {
+		'browser': true,
+		'es2021': true,
+		'node': true
+	},
+	'extends': [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/eslint-recommended',
+		'plugin:@typescript-eslint/recommended'
+	],
+	'overrides': [
+	],
+	'parser': '@typescript-eslint/parser',
+	'parserOptions': {
+		'ecmaVersion': 'latest',
+		'sourceType': 'module'
+	},
+	'plugins': [
+		'@typescript-eslint'
+	],
+	'rules': {
+		'indent': [
+			'error',
+			'tab'
+		],
+		'linebreak-style': [
+			'error',
+			'unix'
+		],
+		'quotes': [
+			'error',
+			'single'
+		],
+		'semi': [
+			'error',
+			'always'
+		],
+		'@typescript-eslint/no-empty-function': 'off',
+		'@typescript-eslint/no-empty-interface': 'off',
+		'@typescript-eslint/no-inferrable-types': 'off',
+		'@typescript-eslint/no-non-null-assertion': 'off',
+		'@typescript-eslint/no-unused-vars': [
+			'error',
+			{
+				'argsIgnorePattern': '^_',
+			}
+		],
+		'@typescript-eslint/no-explicit-any': 'off',
+
+		// namespaces can be useful when defining helper methods for interfaces.
+		'@typescript-eslint/no-namespace': 'off',
+	},
+	'ignorePatterns': [
+		'**/*.bundle.js',
+	],
+};

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint-staged

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Henry Heino
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,74 @@
+# js-draw
+
+![](doc/img/js-draw.jpg)
+
+For example usage, see [doc/example/example.html](doc/example/example.ts).
+
+# API
+
+To use `js-draw`, 
+
+## Creating an `Editor`
+
+To create a new `Editor` and add it as a child of `document.body`,
+```ts
+import Editor from 'js-draw';
+import 'js-draw/styles';
+
+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/)
+
+
+## Adding a toolbar
+
+To create a toolbar with the default tools:
+```ts
+const toolbar = editor.addToolbar();
+```
+
+Custom actions can be added to the toolbar. For example, to add a `save` button:
+```ts
+toolbar.addActionButton('Save', () => {
+    const svgElem = editor.toSVG();
+    console.log('The saved SVG:', svgElem.outerHTML);
+});
+```
+
+## Loading from an SVG
+
+```ts
+editor.loadFromSVG(`
+    <svg
+        viewBox="156 74 200 150"
+        width="200" height="150"
+    >
+        <path d="M156,150Q190,190 209,217L213,215Q193,187 160,148M209,217Q212,218 236,178L232,176Q210,215 213,215M236,178Q240,171 307,95L305,93Q237,168 232,176M307,95Q312,90 329,78L327,74Q309,87 305,93" fill="#07a837"></path>
+    </svg>
+`);
+```
+
+**Note**: While `js-draw` supports a small subset of the SVG markup language, it tries to preserve unrecognised SVG elements.
+
+For example, although `js-draw` doesn't support `<circle/>` elements,
+```svg
+<svg
+    viewBox="156 74 200 150"
+    width="200" height="150"
+>
+    <path d="M156,150Q190,190 209,217L213,215Q193,187 160,148M209,217Q212,218 236,178L232,176Q210,215 213,215M236,178Q240,171 307,95L305,93Q237,168 232,176M307,95Q312,90 329,78L327,74Q309,87 305,93" fill="#07a837"></path>
+    <circle cx=200 cy=100 r=40 fill='red'/>
+</svg>
+```
+renders as
+
+![screenshot of the image editor, displaying a green checkmark. The circle is invisible](doc/img/unsupported-elements--in-editor.png)
+
+but exports to 
+```svg
+<svg viewBox="156 74 200 150" width="200" height="150" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"><g><path d="M156,150M156,150Q190,190 209,217L213,215Q193,187 160,148M209,217M209,217Q212,218 236,178L232,176Q210,215 213,215M236,178M236,178Q240,171 307,95L305,93Q237,168 232,176M307,95M307,95Q312,90 329,78L327,74Q309,87 305,93" fill="#07a837"></path></g><circle cx="200" cy="100" r="40" fill="red"></circle></svg>
+```
+
+which **does** contain the `<circle/>` element.
+

package/__mocks__/coloris.ts

@@ -0,0 +1,8 @@
+
+// @melloware/coloris tries to use the HTML5Canvas on import, which is not supported by
+// JSDom (without installing additional packages). As such, we need to mock it.
+
+export const coloris = (_options: any): void => {
+};
+
+export const init = () => {};

package/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

package/dist/__mocks__/coloris.d.ts

@@ -0,0 +1,2 @@
+export declare const coloris: (_options: any) => void;
+export declare const init: () => void;

package/dist/__mocks__/coloris.js

@@ -0,0 +1,5 @@
+// @melloware/coloris tries to use the HTML5Canvas on import, which is not supported by
+// JSDom (without installing additional packages). As such, we need to mock it.
+export const coloris = (_options) => {
+};
+export const init = () => { };

package/dist/build_tools/BundledFile.d.ts

@@ -0,0 +1,12 @@
+export default class BundledFile {
+    readonly bundleName: string;
+    private readonly sourceFilePath;
+    private readonly bundleBaseName;
+    private readonly rootFileDirectory;
+    constructor(bundleName: string, sourceFilePath: string);
+    private getWebpackOptions;
+    private handleErrors;
+    build(): Promise<void>;
+    startWatching(): void;
+}
+export declare const bundledFiles: BundledFile[];

package/dist/build_tools/BundledFile.js

@@ -0,0 +1,153 @@
+// 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) {
+        this.bundleName = bundleName;
+        this.sourceFilePath = sourceFilePath;
+        this.rootFileDirectory = dirname(sourceFilePath);
+        this.bundleBaseName = basename(sourceFilePath, extname(sourceFilePath));
+    }
+    getWebpackOptions(mode) {
+        const config = {
+            mode,
+            entry: this.sourceFilePath,
+            output: {
+                path: this.rootFileDirectory,
+                filename: `${this.bundleBaseName}.bundle.js`,
+                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! ☑');
+            }
+        }));
+    }
+}
+const rootDir = dirname(__dirname);
+export const bundledFiles = [
+    new BundledFile('jsdraw', `${rootDir}/src/main.ts`),
+];

package/dist/scripts/bundle.d.ts

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

package/dist/scripts/bundle.js

@@ -0,0 +1,19 @@
+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 { bundledFiles } from '../build_tools/BundledFile';
+function build() {
+    return __awaiter(this, void 0, void 0, function* () {
+        // Build all in parallel
+        yield Promise.all(bundledFiles.map((file) => __awaiter(this, void 0, void 0, function* () {
+            yield file.build();
+        })));
+    });
+}
+void build();

package/dist/scripts/watchBundle.d.ts

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

package/dist/scripts/watchBundle.js

@@ -0,0 +1,9 @@
+import { bundledFiles } from '../build_tools/BundledFile';
+console.log('Watching for changes...');
+function watch() {
+    // Watch for changes
+    for (const file of bundledFiles) {
+        file.startWatching();
+    }
+}
+watch();

package/dist/src/Color4.d.ts

@@ -0,0 +1,23 @@
+export default class Color4 {
+    readonly r: number;
+    readonly g: number;
+    readonly b: number;
+    readonly a: number;
+    private constructor();
+    static ofRGB(red: number, green: number, blue: number): Color4;
+    static ofRGBA(red: number, green: number, blue: number, alpha: number): Color4;
+    static fromHex(hexString: string): Color4;
+    static fromString(text: string): Color4;
+    eq(other: Color4 | null | undefined): boolean;
+    private hexString;
+    toHexString(): string;
+    static transparent: Color4;
+    static red: Color4;
+    static green: Color4;
+    static blue: Color4;
+    static purple: Color4;
+    static yellow: Color4;
+    static clay: Color4;
+    static black: Color4;
+    static white: Color4;
+}

package/dist/src/Color4.js

@@ -0,0 +1,102 @@
+export default class Color4 {
+    constructor(r, g, b, a) {
+        this.r = r;
+        this.g = g;
+        this.b = b;
+        this.a = a;
+        this.hexString = null;
+    }
+    // Each component should be in the range [0, 1]
+    static ofRGB(red, green, blue) {
+        return new Color4(red, green, blue, 1.0);
+    }
+    static ofRGBA(red, green, blue, alpha) {
+        return new Color4(red, green, blue, alpha);
+    }
+    static fromHex(hexString) {
+        var _a;
+        // Remove starting '#' (if present)
+        hexString = ((_a = hexString.match(/^[#]?(.*)$/)) !== null && _a !== void 0 ? _a : [])[1];
+        hexString = hexString.toUpperCase();
+        if (!hexString.match(/^[0-9A-F]+$/)) {
+            throw new Error(`${hexString} is not in a valid format.`);
+        }
+        // RGBA or RGB
+        if (hexString.length === 3 || hexString.length === 4) {
+            // Each character is a component
+            const components = hexString.split('');
+            // Convert to RRGGBBAA or RRGGBB format
+            hexString = components.map(component => `${component}0`).join('');
+        }
+        if (hexString.length === 6) {
+            // Alpha component
+            hexString += 'FF';
+        }
+        const components = [];
+        for (let i = 2; i <= hexString.length; i += 2) {
+            const chunk = hexString.substring(i - 2, i);
+            components.push(parseInt(chunk, 16) / 255);
+        }
+        if (components.length !== 4) {
+            throw new Error(`Unable to parse ${hexString}: Wrong number of components.`);
+        }
+        return new Color4(components[0], components[1], components[2], components[3]);
+    }
+    // Like fromHex, but can handle additional colors if an HTML5Canvas is available.
+    static fromString(text) {
+        if (text.startsWith('#')) {
+            return Color4.fromHex(text);
+        }
+        else {
+            // Otherwise, try to use an HTML5Canvas to determine the color
+            const canvas = document.createElement('canvas');
+            canvas.width = 1;
+            canvas.height = 1;
+            const ctx = canvas.getContext('2d');
+            ctx.fillStyle = text;
+            ctx.fillRect(0, 0, 1, 1);
+            const data = ctx.getImageData(0, 0, 1, 1);
+            const red = data.data[0] / 255;
+            const green = data.data[1] / 255;
+            const blue = data.data[2] / 255;
+            const alpha = data.data[3] / 255;
+            return Color4.ofRGBA(red, green, blue, alpha);
+        }
+    }
+    eq(other) {
+        if (other == null) {
+            return false;
+        }
+        return this.toHexString() === other.toHexString();
+    }
+    toHexString() {
+        if (this.hexString) {
+            return this.hexString;
+        }
+        const componentToHex = (component) => {
+            const res = Math.round(255 * component).toString(16);
+            if (res.length === 1) {
+                return `0${res}`;
+            }
+            return res;
+        };
+        const alpha = componentToHex(this.a);
+        const red = componentToHex(this.r);
+        const green = componentToHex(this.g);
+        const blue = componentToHex(this.b);
+        if (alpha === 'ff') {
+            return `#${red}${green}${blue}`;
+        }
+        this.hexString = `#${red}${green}${blue}${alpha}`;
+        return this.hexString;
+    }
+}
+Color4.transparent = Color4.ofRGBA(0, 0, 0, 0);
+Color4.red = Color4.ofRGB(1.0, 0.0, 0.0);
+Color4.green = Color4.ofRGB(0.0, 1.0, 0.0);
+Color4.blue = Color4.ofRGB(0.0, 0.0, 1.0);
+Color4.purple = Color4.ofRGB(0.5, 0.2, 0.5);
+Color4.yellow = Color4.ofRGB(1, 1, 0.1);
+Color4.clay = Color4.ofRGB(0.8, 0.4, 0.2);
+Color4.black = Color4.ofRGB(0, 0, 0);
+Color4.white = Color4.ofRGB(1, 1, 1);

package/dist/src/Display.d.ts

@@ -0,0 +1,22 @@
+import AbstractRenderer from './rendering/AbstractRenderer';
+import { Editor } from './Editor';
+export declare enum RenderingMode {
+    DummyRenderer = 0,
+    CanvasRenderer = 1
+}
+export default class Display {
+    private editor;
+    private parent;
+    private dryInkRenderer;
+    private wetInkRenderer;
+    private resizeSurfacesCallback?;
+    private flattenCallback?;
+    constructor(editor: Editor, mode: RenderingMode, parent: HTMLElement | null);
+    get width(): number;
+    get height(): number;
+    private initializeCanvasRendering;
+    startRerender(): AbstractRenderer;
+    getDryInkRenderer(): AbstractRenderer;
+    getWetInkRenderer(): AbstractRenderer;
+    flatten(): void;
+}

package/dist/src/Display.js

@@ -0,0 +1,93 @@
+import CanvasRenderer from './rendering/CanvasRenderer';
+import { EditorEventType } from './types';
+import DummyRenderer from './rendering/DummyRenderer';
+import { Vec2 } from './geometry/Vec2';
+export var RenderingMode;
+(function (RenderingMode) {
+    RenderingMode[RenderingMode["DummyRenderer"] = 0] = "DummyRenderer";
+    RenderingMode[RenderingMode["CanvasRenderer"] = 1] = "CanvasRenderer";
+    // SVGRenderer is not supported by the main display
+})(RenderingMode || (RenderingMode = {}));
+export default class Display {
+    constructor(editor, mode, parent) {
+        this.editor = editor;
+        this.parent = parent;
+        if (mode === RenderingMode.CanvasRenderer) {
+            this.initializeCanvasRendering();
+        }
+        else {
+            this.dryInkRenderer = new DummyRenderer(editor.viewport);
+            this.wetInkRenderer = new DummyRenderer(editor.viewport);
+        }
+        this.editor.notifier.on(EditorEventType.DisplayResized, event => {
+            var _a;
+            if (event.kind !== EditorEventType.DisplayResized) {
+                throw new Error('Mismatched event.kinds!');
+            }
+            (_a = this.resizeSurfacesCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        });
+    }
+    // Returns the visible width of the display (e.g. how much
+    // space the display's element takes up in the x direction
+    // in the DOM).
+    get width() {
+        return this.dryInkRenderer.displaySize().x;
+    }
+    get height() {
+        return this.dryInkRenderer.displaySize().y;
+    }
+    initializeCanvasRendering() {
+        const dryInkCanvas = document.createElement('canvas');
+        const wetInkCanvas = document.createElement('canvas');
+        const dryInkCtx = dryInkCanvas.getContext('2d');
+        const wetInkCtx = wetInkCanvas.getContext('2d');
+        this.dryInkRenderer = new CanvasRenderer(dryInkCtx, this.editor.viewport);
+        this.wetInkRenderer = new CanvasRenderer(wetInkCtx, this.editor.viewport);
+        dryInkCanvas.className = 'dryInkCanvas';
+        wetInkCanvas.className = 'wetInkCanvas';
+        if (this.parent) {
+            this.parent.appendChild(dryInkCanvas);
+            this.parent.appendChild(wetInkCanvas);
+        }
+        this.resizeSurfacesCallback = () => {
+            const hasSizeMismatch = (canvas) => {
+                return canvas.clientHeight !== canvas.height || canvas.clientWidth !== canvas.width;
+            };
+            // Ensure that the drawing surfaces sizes match the
+            // canvas' sizes to prevent stretching.
+            if (hasSizeMismatch(dryInkCanvas) || hasSizeMismatch(wetInkCanvas)) {
+                dryInkCanvas.width = dryInkCanvas.clientWidth;
+                dryInkCanvas.height = dryInkCanvas.clientHeight;
+                wetInkCanvas.width = wetInkCanvas.clientWidth;
+                wetInkCanvas.height = wetInkCanvas.clientHeight;
+                this.editor.notifier.dispatch(EditorEventType.DisplayResized, {
+                    kind: EditorEventType.DisplayResized,
+                    newSize: Vec2.of(this.width, this.height),
+                });
+            }
+        };
+        this.resizeSurfacesCallback();
+        this.flattenCallback = () => {
+            dryInkCtx.drawImage(wetInkCanvas, 0, 0);
+        };
+    }
+    // Clears the drawing surfaces and otherwise prepares for a rerender.
+    startRerender() {
+        var _a;
+        (_a = this.resizeSurfacesCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.wetInkRenderer.clear();
+        this.dryInkRenderer.clear();
+        return this.dryInkRenderer;
+    }
+    getDryInkRenderer() {
+        return this.dryInkRenderer;
+    }
+    getWetInkRenderer() {
+        return this.wetInkRenderer;
+    }
+    // Re-renders the contents of the wetInkRenderer onto the dryInkRenderer
+    flatten() {
+        var _a;
+        (_a = this.flattenCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+}