js-draw 1.2.1 → 1.3.0

package/README.md

@@ -1,6 +1,6 @@
 # js-draw
 
-[NPM package](https://www.npmjs.com/package/js-draw) | [GitHub](https://github.com/personalizedrefrigerator/js-draw) | [Documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/) | [Try it!](https://personalizedrefrigerator.github.io/js-draw/example/example.html)
+[NPM package](https://www.npmjs.com/package/js-draw) | [GitHub](https://github.com/personalizedrefrigerator/js-draw) | [Documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/js_draw.html) | [Try it!](https://personalizedrefrigerator.github.io/js-draw/example/example.html)
 
 ![](docs/img/readme-images/js-draw.jpg)
 
@@ -199,49 +199,49 @@ The editor's color theme is specified using CSS. Its default theme looks like th
     /* Deafult colors for the editor -- light mode */
 
     /* Used for unselected buttons and dialog text. */
-	--background-color-1: white;
-	--foreground-color-1: black;
+    --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;
+        --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;
     }
 }
 ```
@@ -261,7 +261,7 @@ body .imageEditorContainer {
     --foreground-color-3: black;
 
     --background-color-transparent: rgba(255, 240, 200, 0.5);
-	--shadow-color: rgba(0, 0, 0, 0.5);
+    --shadow-color: rgba(0, 0, 0, 0.5);
 
     --selection-background-color: yellow;
     --selection-foreground-color: black;

package/dist/Editor.css

@@ -79,6 +79,15 @@
   width: 100%;
   text-align: end;
 }
+.toolbar-document-properties-widget > * {
+  --align-items-to-x: 120px;
+}
+.toolbar-document-properties-widget .js-draw-size-input-row.js-draw-size-input-row {
+  display: flex;
+}
+.toolbar-document-properties-widget .js-draw-size-input-row.js-draw-size-input-row.size-input-row--automatic-size {
+  display: none;
+}
 
 .toolbar-thicknessSliderContainer {
   display: flex;
@@ -229,7 +238,7 @@
   flex-shrink: 1;
   margin: 2px;
 }
-.toolbar-grid-selector .choice-button:focus-within {
+.toolbar-grid-selector .choice-button.focus-visible {
   outline: 2px solid var(--foreground-color-1);
 }
 .toolbar-grid-selector .choice-button input {
@@ -246,6 +255,8 @@
   align-items: center;
   justify-content: center;
   padding: 4px;
+  user-select: none;
+  -webkit-user-select: none;
 }
 .toolbar-grid-selector .choice-button .icon {
   flex-grow: 1;
@@ -255,6 +266,7 @@
 .toolbar-grid-selector .choice-button.checked {
   background-color: var(--selection-background-color);
   color: var(--selection-foreground-color);
+  --icon-color: var(--selection-foreground-color);
 }
 
 /* The *main* root toolbar element */
@@ -303,6 +315,8 @@
   border-radius: 6px;
   border: none;
   box-shadow: 0px 0px 2px var(--shadow-color);
+  user-select: none;
+  -webkit-user-select: none;
   transition: background-color 0.15s ease, box-shadow 0.25s ease, opacity 0.2s ease;
 }
 
@@ -958,6 +972,7 @@
 }
 .toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList {
   box-sizing: border-box;
+  --align-items-to-x: 105px;
 }
 .toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList > div {
   display: flex;
@@ -967,13 +982,14 @@
 }
 .toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList > div > label {
   padding-right: 35px;
-  min-width: 105px;
+  min-width: var(--align-items-to-x);
   flex-shrink: 1;
   box-sizing: border-box;
 }
 .toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList > div > input[type=checkbox] {
   width: 20px;
   height: 20px;
+  margin-left: 0;
 }
 .toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList > div > input:not([type=checkbox]) {
   flex-grow: 1;
@@ -1008,6 +1024,52 @@
   display: inline-block;
 }
 
+.ScrollbarTool-overlay {
+  width: 0;
+  height: 0;
+  overflow: visible;
+  opacity: 0.2;
+  pointer-events: none;
+  --fade-out-animation: 1s ease 0s fade-out;
+  --scrollbar-size: 3px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ScrollbarTool-overlay {
+    --fade-out-animation: none !important;
+  }
+}
+@keyframes fade-out {
+  from {
+    opacity: 0.2;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.ScrollbarTool-overlay:not(.just-updated) {
+  animation: var(--fade-out-animation);
+  opacity: 0;
+}
+.ScrollbarTool-overlay .vertical-scrollbar, .ScrollbarTool-overlay .horizontal-scrollbar {
+  width: var(--scrollbar-size);
+  height: var(--scrollbar-size);
+  min-width: var(--scrollbar-size);
+  min-height: var(--scrollbar-size);
+  background-color: var(--foreground-color-1);
+  border-radius: var(--scrollbar-size);
+  position: absolute;
+}
+.ScrollbarTool-overlay .vertical-scrollbar.represents-no-scroll, .ScrollbarTool-overlay .horizontal-scrollbar.represents-no-scroll {
+  animation: var(--fade-out-animation);
+  opacity: 0;
+}
+.ScrollbarTool-overlay:not(.scrollbar-left) .vertical-scrollbar {
+  margin-left: calc(var(--editor-current-display-width-px) - var(--scrollbar-size));
+}
+.ScrollbarTool-overlay:not(.scrollbar-top) .horizontal-scrollbar {
+  margin-top: calc(var(--editor-current-display-height-px) - var(--scrollbar-size));
+}
+
 .selection-tool-selection-background {
   background-color: var(--selection-background-color);
   opacity: 0.5;
@@ -1058,6 +1120,10 @@
   overflow: hidden;
 }
 
+.js-draw-sound-ui-toggle button {
+  margin-top: 1px;
+}
+
 .js-draw-sound-ui-toggle:focus-within, .js-draw-sound-ui-toggle.sound-ui-tool-enabled {
   overflow: visible;
   z-index: 5;
@@ -1097,7 +1163,7 @@
   text-decoration: underline;
 }
 
-.dialog-container {
+.dialog-container.dialog-container {
   background-color: var(--background-color-transparent);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
@@ -1110,7 +1176,7 @@
   align-items: center;
   justify-content: center;
 }
-.dialog-container dialog {
+.dialog-container.dialog-container dialog {
   background-color: var(--background-color-1);
   color: var(--foreground-color-1);
   border: none;