js-draw 1.18.0 → 1.20.0

package/README.md

@@ -15,6 +15,55 @@
 
 For example usage, see [one of the examples](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/examples.md) or read [the documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/).
 
+# Features
+
+## Very large zoom range
+
+A core feature of `js-draw` is its [large zoom range](https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js_draw.EditorSettings.html#maxZoom) (from roughly 10⁻¹⁰x to 10¹⁰x).
+
+<details open><summary><strong>Demo</strong></summary>
+
+<video src="https://github.com/personalizedrefrigerator/js-draw/assets/46334387/f1c4afea-d7c8-4c36-835b-e01f2a646424" alt="Video: Shows zooming out further and further" controls></video>
+
+</details>
+
+Applications using `js-draw` can adjust this zoom range with custom [EditorSettings](https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js_draw.EditorSettings.html).
+
+## Touchscreen and stylus support
+
+`js-draw` supports touchscreen pinch zoom and rotate gestures. To simplify editing, screen rotation snaps to multiples of 90 degrees.
+
+<details><summary><strong>Demo</strong></summary>
+    
+<video src="https://github.com/personalizedrefrigerator/js-draw/assets/46334387/1f4ebeb1-9d2f-4884-9410-9fb1d5e455ee" alt="Video: Shows canvas being rotated" controls></video>
+
+</details>
+
+It's also possible to disable touch drawing. This can be useful when drawing with a stylus and can be done with either [PanZoomTool.setMode](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.PanZoomTool.html#setMode) or, by a user, with the "hand" tool menu:
+
+<img alt="screenshot: Hand tool menu at the bottom of the screen includes 'lock rotation' and 'touchscreen panning'. 'Touchscreen panning' is highlighted." src="https://github.com/personalizedrefrigerator/js-draw/assets/46334387/d96e2df5-6132-4122-954d-d25402754bc2" width="400"/>
+
+## User-configurable tools
+
+With the default toolbar, users can change the pen style, color, and more:
+
+<img alt="screenshot: Pen configuration menu includes pen size, color, type, stabilization, autocorrect,..." src="https://github.com/personalizedrefrigerator/js-draw/assets/46334387/476ad0e4-1f95-43bf-925d-549292d141e3" width="400"/>
+
+It's possible for applications using `js-draw` to [add custom pen types](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/Additional_Documentation.CustomizingTools__.html) that can also be customized in this way. It's also possible to [save the toolbar state](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/examples/example-save-restore-toolbar-state/example.ts) and restore it after reloading the app.
+
+## More features
+
+`js-draw` also supports:
+
+- <details><summary>Partial stroke erasing</summary>
+
+  <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`
@@ -329,6 +378,8 @@ body .imageEditorContainer {
 ```
 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).
+
 # Examples and resources
 
 - [Examples](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/examples.md)

package/dist/Editor.css

@@ -6,8 +6,8 @@
   min-height: 0;
 }
 :root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content img {
-  max-width: min(50vw, 75%);
-  max-height: min(300px, 50vh);
+  max-width: 100%;
+  max-height: 100%;
   /* Center */
   display: block;
   margin-left: auto;
@@ -16,6 +16,7 @@
 :root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .insert-image-image-status-view {
   display: flex;
   justify-content: space-between;
+  padding-bottom: 0;
 }
 :root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .action-button-row {
   margin-top: 4px;
@@ -208,12 +209,18 @@
 .toolbar-element .toolbar--file-input-container {
   display: flex;
 }
-.toolbar-element .toolbar--file-input-container > input[type=file] {
+.toolbar-element .toolbar--file-input-container.-loading {
+  opacity: 0.8;
+}
+.toolbar-element .toolbar--file-input-container > input.file-input {
   opacity: 0;
   width: 0;
   min-width: 0 !important;
   max-width: 0;
   height: 0;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
 }
 .toolbar-element .toolbar--file-input-container > label {
   display: block;
@@ -225,6 +232,9 @@
   	in srgb, var(--foreground-color-1), transparent
   );
 }
+.toolbar-element .toolbar--file-input-container > label > .cancel-button {
+  display: block;
+}
 .toolbar-element .toolbar--file-input-container > label > .toolbar--file-input-description {
   background-color: var(--background-color-3);
   color: var(--foreground-color-3);
@@ -307,6 +317,64 @@
   --icon-color: var(--selection-foreground-color);
 }
 
+:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list {
+  height: min(200px, 50vh);
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list > .scroller {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
+  height: 100%;
+  width: 100%;
+  flex-grow: 1;
+}
+:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list > .scroller > .item {
+  height: 100%;
+  width: 100%;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  box-sizing: border-box;
+}
+:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.-empty {
+  display: none;
+}
+:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list > .page-markers {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-height: 100%;
+  min-height: 0;
+}
+:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list > .page-markers.-one-element {
+  visibility: hidden;
+}
+:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list > .page-markers > .marker {
+  padding: 2px;
+  opacity: 0.1;
+  cursor: pointer;
+  left: 0;
+  transition: left 0.2s ease;
+}
+:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list > .page-markers > .marker > .content {
+  background-color: var(--foreground-color-1);
+  border-radius: 2px;
+  padding: 2px;
+}
+:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list > .page-markers > .marker.-active {
+  position: relative;
+  left: 2px;
+  opacity: 0.2;
+}
+
 /* The *main* root toolbar element */
 .toolbar-root {
   background-color: var(--background-color-1);
@@ -881,14 +949,19 @@
   box-shadow: none;
   border: none;
   padding: 10px;
-  color: var(--foreground-color-1);
   transition: 0.2s ease box-shadow;
   font-weight: bold;
   color: var(--primary-action-foreground-color);
 }
-.toolbar-edgemenu-container button:hover {
+.toolbar-edgemenu-container button:not(:disabled):hover {
   box-shadow: 0 1px 2px var(--shadow-color);
 }
+.toolbar-edgemenu-container button:disabled {
+  opacity: 0.5;
+  font-weight: unset;
+  cursor: unset;
+  color: var(--foreground-color-1);
+}
 .toolbar-edgemenu-container .toolbar-grid-selector .choice-button {
   --button-label-hover-offset-y: var(--button-size);
 }