js-draw 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,3 @@
+
+# 0.0.2
+ * Adjust default editor colors based on system theme.

package/README.md

@@ -2,7 +2,7 @@
 
 ![](doc/img/js-draw.jpg)
 
-For example usage, see [doc/example/example.html](doc/example/example.ts).
+For example usage, see [doc/example/example.ts](doc/example/example.ts).
 
 # API
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "main": "dist/src/Editor.js",
   "types": "dist/src/Editor.d.ts",
@@ -77,6 +77,9 @@
     "doc": "doc"
   },
   "keywords": [
-    "ink"
+    "ink",
+    "drawing",
+    "pen",
+    "svg"
   ]
 }

package/src/Editor.css

@@ -10,6 +10,17 @@
     --secondary-foreground-color: black;
 }
 
+@media (prefers-color-scheme: dark) {
+	.imageEditorContainer {
+		/* Deafult colors for the editor */
+		--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;
+	}
+}
+
 .imageEditorContainer {
 	color: var(--primary-foreground-color);
 	font-family: system-ui, -apple-system, sans-serif;

package/dist/build_tools/BundledFile.d.ts

@@ -1,12 +0,0 @@
-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

@@ -1,153 +0,0 @@
-// 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

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

package/dist/scripts/bundle.js

@@ -1,19 +0,0 @@
-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

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

package/dist/scripts/watchBundle.js

@@ -1,9 +0,0 @@
-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/main.d.ts

@@ -1,3 +0,0 @@
-import './editorStyles';
-import Editor from './Editor';
-export { Editor };

package/dist/src/main.js

@@ -1,4 +0,0 @@
-// Main entrypoint for bundled content
-import './editorStyles';
-import Editor from './Editor';
-export { Editor };