js-draw 1.21.2 → 1.22.0

package/README.md

@@ -1,5 +1,3 @@
-
-
 <div align="center">
     <img height="190" src="docs/img/readme-images/logo.svg" alt="js-draw logo"/>
 </div>
@@ -60,10 +58,10 @@ It's possible for applications using `js-draw` to [add custom pen types](https:/
   <video src="https://github.com/personalizedrefrigerator/js-draw/assets/46334387/c8c2b8d5-5537-4df8-a8b5-899c2d7ea5ce"></video>
 
   </details>
+
 - [Collaborative editing](https://github.com/personalizedrefrigerator/js-draw/tree/main/docs/examples/example-collaborative)
 - Saving to and loading from a subset of SVG
 
-
 # API
 
 ## Creating an `Editor`
@@ -71,6 +69,7 @@ It's possible for applications using `js-draw` to [add custom pen types](https:/
 ### With a bundler that supports importing `.css` files
 
 To create a new `Editor` and add it as a child of `document.body`, use the [Editor](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#constructor) constructor:
+
 ```ts
 import Editor from 'js-draw';
 import 'js-draw/styles';
@@ -83,66 +82,76 @@ The `import js-draw/styles` step requires a bundler that can import `.css` files
 ### 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/bundledStyles';
 
 const editor = new Editor(document.body);
 ```
+
 `js-draw/bundledStyles` is a version of the editor's stylesheets pre-processed by `Webpack`. As such, `import`ing or including it with a `<script src="..."></script>` tag 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 1.0.0 with the latest version of js-draw -->
 <script src="https://cdn.jsdelivr.net/npm/js-draw@1.0.0/dist/bundle.js"></script>
 <script>
-    const editor = new jsdraw.Editor(document.body);
-    editor.addToolbar();
-    editor.getRootElement().style.height = '600px';
+  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
 
 To create a toolbar with buttons for the default tools:
+
 ```ts
 const toolbar = editor.addToolbar();
 ```
 
-Save and exit buttons can be added with the [`.addSaveButton`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.AbstractToolbar.html#addSaveButton) and [`.addExitButton`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.AbstractToolbar.html#addExitButton) methods: 
+Save and exit buttons can be added with the [`.addSaveButton`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.AbstractToolbar.html#addSaveButton) and [`.addExitButton`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.AbstractToolbar.html#addExitButton) methods:
+
 ```ts
 toolbar.addSaveButton(() => {
-    const svgElem = editor.toSVG();
-    console.log('The saved SVG:', svgElem.outerHTML);
+  const svgElem = editor.toSVG();
+  console.log('The saved SVG:', svgElem.outerHTML);
 });
 
 toolbar.addExitButton(() => {
-    // Save here?
+  // Save here?
 
-    // Removes the editor from the document.
-    editor.remove();
+  // Removes the editor from the document.
+  editor.remove();
 });
 ```
 
 Custom actions can also be added to the toolbar. For example,
+
 ```ts
 toolbar.addActionButton('Custom', () => {
-    // When the action button is pressed
+  // When the action button is pressed
 });
 ```
+
 or alternatively, with an icon,
+
 ```ts
-toolbar.addActionButton({
-  label: 'Custom',
-  icon: editor.icons.makeSaveIcon(),
-}, () => {
+toolbar.addActionButton(
+  {
+    label: 'Custom',
+    icon: editor.icons.makeSaveIcon(),
+  },
+  () => {
     // Do something here
-});
+  },
+);
 ```
 
 ## Loading from SVG
@@ -161,6 +170,7 @@ editor.loadFromSVG(`
 **Note**: While `js-draw` supports only 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,
+
 ```xml
 <svg
     viewBox="156 74 200 150"
@@ -170,11 +180,13 @@ For example, although `js-draw` doesn't support `<circle/>` elements,
     <circle cx=200 cy=100 r=40 fill='red'/>
 </svg>
 ```
+
 renders as
 
 <img alt="screenshot of the image editor, displaying a green checkmark. The circle is invisible" src="docs/img/readme-images/unsupported-elements--in-editor.png" width="600"/>
 
 but exports to
+
 ```xml
 <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>
 ```
@@ -184,30 +196,38 @@ which **does** contain the `<circle/>` element.
 ## Customizing the background
 
 The background color and style can be customized with [editor.setBackgroundStyle](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#setBackgroundStyle). For example,
+
 ```ts
 import { Editor, Color4, BackgroundComponentBackgroundType } from 'js-draw';
 const editor = new Editor(document.body);
 
-editor.dispatch(editor.setBackgroundStyle({
+editor.dispatch(
+  editor.setBackgroundStyle({
     color: Color4.orange,
     type: BackgroundComponentBackgroundType.Grid,
-}));
+  }),
+);
 ```
 
 Above, we use `editor.dispatch` because `setBackgroundStyle` returns a [`Command`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Command.html), rather than changing the background style directly. `js-draw` uses `Command`s to track actions that can be undone and redone.
 
 By default, `.dispatch` adds `Command`s to the undo stack. To avoid this, pass `false` for the second parameter to [`.dispatch`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#dispatch):
+
 ```ts
 const addToHistory = false;
-editor.dispatch(editor.setBackgroundStyle({
+editor.dispatch(
+  editor.setBackgroundStyle({
     color: Color4.orange,
     type: BackgroundComponentBackgroundType.Grid,
-}), addToHistory);
+  }),
+  addToHistory,
+);
 ```
 
 ### Making the background fill the screen
 
 By default, the background has a fixed size and marks the region that will be saved by [`.toSVG`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#toSVG) or [`.toDataURL`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#toDataURL). It's possible to make the background auto-resize to the content of the image with [`editor.image.setAutoresizeEnabled(true)`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.EditorImage.html#setAutoresizeEnabled):
+
 ```ts
 const editor = new Editor(document.body);
 
@@ -224,22 +244,25 @@ To save as an SVG, use [`editor.toSVG()`](https://personalizedrefrigerator.githu
 
 It's also possible to render the editor to a PNG or JPEG data URL. This can be done with [`editor.toDataURL()`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#toDataURL).
 
-The region of the image that will be saved can be changed by calling [`editor.image.setImportExportRect`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#setImportExportRect) or 
+The region of the image that will be saved can be changed by calling [`editor.image.setImportExportRect`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#setImportExportRect) or
 
 ## 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,
+  wheelEventsEnabled: false,
 });
 ```
 
 Alternatively, to only enable touchpad panning when the editor has focus,
+
 ```ts
 const editor = new Editor(document.body, {
-    wheelEventsEnabled: 'only-if-focused',
+  wheelEventsEnabled: 'only-if-focused',
 });
 ```
 
@@ -248,10 +271,11 @@ const editor = new Editor(document.body, {
 If a user's language is available in [src/localizations/](packages/js-draw/src/localizations) (as determined by `navigator.languages`), that localization will be used.
 
 To override the default language, use `getLocalizationTable([ 'custom locale here' ])`. For example,
+
 ```ts
 const editor = new Editor(document.body, {
-    // Force the Spanish (Español) localizaiton
-    localization: getLocalizationTable([ 'es' ]),
+  // Force the Spanish (Español) localizaiton
+  localization: getLocalizationTable(['es']),
 });
 ```
 
@@ -260,6 +284,7 @@ const editor = new Editor(document.body, {
 See [src/localization.ts](packages/js-draw/src/localization.ts) for a list of strings that can be translated.
 
 Many of the default strings in the editor might be overridden like this:
+
 ```ts
 const editor = new Editor(document.body, {
     // Example partial Spanish localization
@@ -293,89 +318,93 @@ const editor = new Editor(document.body, {
 ### Setting the minimum and maximum zoom
 
 By default, the editor's minimum and maximum zoom are very large (2·10<sup>-10</sup>x and 10<sup>12</sup>x, respectively). These are configurable by the `minZoom` and `maxZoom` settings. For example,
+
 ```ts
 const editor = new Editor(document.body, {
-    minZoom: 0.5,
-    maxZoom: 2,
+  minZoom: 0.5,
+  maxZoom: 2,
 });
 ```
 
 ## 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 */
+  /* Deafult colors for the editor -- light mode */
 
-    /* Used for unselected buttons and dialog text. */
-    --background-color-1: white;
-    --foreground-color-1: black;
+  /* Used for unselected buttons and dialog text. */
+  --background-color-1: white;
+  --foreground-color-1: black;
 
-    /* Used for some menu/toolbar backgrounds. */
-    --background-color-2: #f5f5f5;
-    --foreground-color-2: #2c303a;
+  /* Used for some menu/toolbar backgrounds. */
+  --background-color-2: #f5f5f5;
+  --foreground-color-2: #2c303a;
 
-    /* Used for other menu/toolbar backgrounds. */
-    --background-color-3: #e5e5e5;
-    --foreground-color-3: #1c202a;
+  /* Used for other menu/toolbar backgrounds. */
+  --background-color-3: #e5e5e5;
+  --foreground-color-3: #1c202a;
 
-    /* Used for selected buttons. */
-    --selection-background-color: #cbdaf1;
-    --selection-foreground-color: #2c303a;
+  /* 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 dialog backgrounds */
+  --background-color-transparent: rgba(105, 100, 100, 0.5);
 
-    /* Used for shadows */
-    --shadow-color: rgba(0, 0, 0, 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;
+  /* Color used for some button/input foregrounds */
+  --primary-action-foreground-color: #15b;
 }
 
 @media (prefers-color-scheme: dark) {
-    .imageEditorContainer {
-        /* Default colors for the editor -- dark mode */
-        --background-color-1: #151515;
-        --foreground-color-1: white;
+  .imageEditorContainer {
+    /* Default colors for the editor -- dark mode */
+    --background-color-1: #151515;
+    --foreground-color-1: white;
 
-        --background-color-2: #222;
-        --foreground-color-2: #efefef;
+    --background-color-2: #222;
+    --foreground-color-2: #efefef;
 
-        --background-color-3: #272627;
-        --foreground-color-3: #eee;
+    --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);
+    --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;
-    }
+    --primary-action-foreground-color: #7ae;
+  }
 }
 ```
 
 To override it, use a more specific CSS selector to set the theme variables. For example,
+
 ```css
 /* Notice the "body" below -- the selector needs to be more specific than what's in js-draw */
 body .imageEditorContainer {
-    --background-color-1: green;
-    --foreground-color-1: black;
+  --background-color-1: green;
+  --foreground-color-1: black;
 
-    /* For this theme, use the same secondary and tertiary colors
+  /* For this theme, use the same secondary and tertiary colors
        (it's okay for them to be the same). */
-    --background-color-2: lime;
-    --foreground-color-2: black;
-    --background-color-3: lime;
-    --foreground-color-3: black;
+  --background-color-2: lime;
+  --foreground-color-2: black;
+  --background-color-3: lime;
+  --foreground-color-3: black;
 
-    --background-color-transparent: rgba(255, 240, 200, 0.5);
-    --shadow-color: rgba(0, 0, 0, 0.5);
+  --background-color-transparent: rgba(255, 240, 200, 0.5);
+  --shadow-color: rgba(0, 0, 0, 0.5);
 
-    --selection-background-color: yellow;
-    --selection-foreground-color: black;
+  --selection-background-color: yellow;
+  --selection-foreground-color: black;
 }
 ```
+
 disables the dark theme and creates a theme that primarily uses yellow/green colors.
 
 See also [adjustEditorThemeForContrast](https://personalizedrefrigerator.github.io/js-draw/typedoc/functions/js_draw.adjustEditorThemeForContrast.html).
@@ -386,4 +415,3 @@ See also [adjustEditorThemeForContrast](https://personalizedrefrigerator.github.
 - [How to add a custom pen type](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/Additional_Documentation.CustomizingTools__.html#md:adding-a-new-pen-type)
 - [A material icon theme for js-draw](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/_js_draw_material_icons.html#md:js-drawmaterial-icons)
 - [More documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/Additional_Documentation.html)
-

package/build-config.json

@@ -1,7 +1,7 @@
 {
 	"inDirectory": "./src",
 	"outDirectory": "./dist",
-	"scssFiles": [ "./src/Editor.scss" ],
+	"scssFiles": ["./src/Editor.scss"],
 	"bundledFiles": [
 		{
 			"name": "jsdraw",
@@ -21,4 +21,4 @@
 			"defaultLocale": "en"
 		}
 	]
-}
+}

package/dist/Editor.css

@@ -228,9 +228,7 @@
   padding: 0 !important;
   padding-bottom: 5px;
   --active-border-color: rgba(100, 100, 100, 0.5);
-  --active-border-color: color-mix(
-  	in srgb, var(--foreground-color-1), transparent
-  );
+  --active-border-color: color-mix(in srgb, var(--foreground-color-1), transparent);
 }
 .toolbar-element .toolbar--file-input-container > label .cancel-button {
   padding-left: 3px;
@@ -417,7 +415,8 @@
   cursor: unset;
 }
 
-.toolbar-button, .toolbar-element button {
+.toolbar-button,
+.toolbar-element button {
   cursor: pointer;
   text-align: center;
   border-radius: 6px;
@@ -460,7 +459,8 @@
   width: 6em;
 }
 
-.toolbar-button:not(.disabled):hover, .toolbar-root button:not(:disabled):hover {
+.toolbar-button:not(.disabled):hover,
+.toolbar-root button:not(:disabled):hover {
   box-shadow: 0px 2px 4px var(--shadow-color);
 }
 
@@ -558,7 +558,8 @@
     transition: none;
   }
   /* ...and background color animation. */
-  :root .toolbar-button, .toolbar-root button {
+  :root .toolbar-button,
+  .toolbar-root button {
     transition: none;
   }
 }
@@ -1020,7 +1021,8 @@
   border-top-right-radius: 30px;
   transition: transform 0.1s ease, padding-bottom 0.1s ease;
 }
-.toolbar-edgemenu-container .toolbar-edgemenu input, .toolbar-edgemenu-container .toolbar-edgemenu textarea {
+.toolbar-edgemenu-container .toolbar-edgemenu input,
+.toolbar-edgemenu-container .toolbar-edgemenu textarea {
   user-select: auto;
   -webkit-user-select: auto;
 }
@@ -1110,12 +1112,14 @@
   flex-shrink: 1;
 }
 
-.toolbar-dropdown-toolbar button, .toolbar-dropdown-toolbar .toolbar-button {
+.toolbar-dropdown-toolbar button,
+.toolbar-dropdown-toolbar .toolbar-button {
   background-color: var(--background-color-2);
   color: var(--foreground-color-2);
   --icon-color: var(--foreground-color-2);
 }
-.toolbar-dropdown-toolbar, .toolbar-dropdown-toolbar .toolbar-dropdown {
+.toolbar-dropdown-toolbar,
+.toolbar-dropdown-toolbar .toolbar-dropdown {
   background-color: var(--background-color-3);
   color: var(--foreground-color-3);
 }
@@ -1309,14 +1313,16 @@
 .toolbar-help-overlay .navigation-buttons > button:disabled {
   opacity: 0.5;
 }
-.toolbar-help-overlay .navigation-buttons > .next, .toolbar-help-overlay .navigation-buttons > .previous {
+.toolbar-help-overlay .navigation-buttons > .next,
+.toolbar-help-overlay .navigation-buttons > .previous {
   font-size: 1em;
   padding: 10px;
   transition: 0.2s ease font-size;
   z-index: 3;
 }
 @media (prefers-reduced-motion: reduce) {
-  .toolbar-help-overlay .navigation-buttons > .next, .toolbar-help-overlay .navigation-buttons > .previous {
+  .toolbar-help-overlay .navigation-buttons > .next,
+  .toolbar-help-overlay .navigation-buttons > .previous {
     transition: none;
   }
 }
@@ -1419,7 +1425,8 @@
   animation: var(--fade-out-animation);
   opacity: 0;
 }
-.ScrollbarTool-overlay .vertical-scrollbar, .ScrollbarTool-overlay .horizontal-scrollbar {
+.ScrollbarTool-overlay .vertical-scrollbar,
+.ScrollbarTool-overlay .horizontal-scrollbar {
   width: var(--scrollbar-size);
   height: var(--scrollbar-size);
   min-width: var(--scrollbar-size);
@@ -1428,7 +1435,8 @@
   border-radius: var(--scrollbar-size);
   position: absolute;
 }
-.ScrollbarTool-overlay .vertical-scrollbar.represents-no-scroll, .ScrollbarTool-overlay .horizontal-scrollbar.represents-no-scroll {
+.ScrollbarTool-overlay .vertical-scrollbar.represents-no-scroll,
+.ScrollbarTool-overlay .horizontal-scrollbar.represents-no-scroll {
   animation: var(--fade-out-animation);
   opacity: 0;
 }
@@ -1531,7 +1539,8 @@
   touch-action: none;
   direction: ltr;
 }
-.overlay.handleOverlay, .overlay.handleOverlay .selection-tool-selection-outer-container {
+.overlay.handleOverlay,
+.overlay.handleOverlay .selection-tool-selection-outer-container {
   height: 0;
   overflow: visible;
 }
@@ -1584,7 +1593,8 @@
   margin-top: 1px;
 }
 
-.js-draw-sound-ui-toggle:focus-within, .js-draw-sound-ui-toggle.sound-ui-tool-enabled {
+.js-draw-sound-ui-toggle:focus-within,
+.js-draw-sound-ui-toggle.sound-ui-tool-enabled {
   overflow: visible;
   z-index: 5;
 }
@@ -1633,6 +1643,8 @@
   justify-content: start;
   cursor: pointer;
   padding: 5px;
+  padding-top: 6px;
+  padding-bottom: 6px;
   background-color: var(--background-color-1);
   color: var(--foreground-color-1);
   --icon-color: currentColor;
@@ -1732,7 +1744,8 @@
 }
 
 /* Coloris: Try to avoid scrolling instead of updating the color input. */
-#clr-picker #clr-color-area, #clr-picker .clr_hue {
+#clr-picker #clr-color-area,
+#clr-picker .clr_hue {
   touch-action: none;
 }