js-draw 1.3.1 → 1.4.1

package/README.md

@@ -4,7 +4,7 @@
 
 ![](docs/img/readme-images/js-draw.jpg)
 
-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/modules/lib.html).
+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/).
 
 If you're coming from version 0.25, [read the migration guide!](https://js-draw.web.app/typedoc/modules/Additional_Documentation.MigratingToVersion1__.html)
 
@@ -41,7 +41,7 @@ const editor = new Editor(document.body);
 
 If you're not using a bundler, consider using the pre-bundled editor:
 ```html
-<!-- Replace 0.20.0 with the latest version of js-draw -->
+<!-- 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);

package/dist/Editor.css

@@ -527,19 +527,24 @@
   --button-label-hover-offset-y: var(--label-hover-offset-size);
   --button-label-hover-offset-x: 0;
 }
-@media screen and (min-width: 610px) {
+@media screen and (min-width: 540px) {
   .toolbar-edge-toolbar {
     flex-wrap: nowrap;
   }
   .toolbar-edge-toolbar > .toolbar-action-row {
     max-width: 50vw;
+    flex-grow: 0;
+    flex-shrink: 0;
   }
 }
 @media screen and (max-width: 700px) {
   .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline {
     font-size: 0.9em;
   }
-  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline .toolbar-button label {
+  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button {
+    width: var(--toolbar-button-size);
+  }
+  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button label {
     opacity: 0;
     animation: 0.2s linear hide-initially;
   }
@@ -583,25 +588,25 @@
   }
 }
 @media screen and (max-width: 700px) and (hover: hover) {
-  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline .toolbar-button:hover > label {
+  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:hover > label {
     opacity: 0.8;
     animation: 1s ease show-label;
   }
 }
 @media screen and (max-width: 700px) {
-  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline .toolbar-button:active > label {
+  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:active > label {
     opacity: 0.8;
     animation: 0.5s ease show-label;
   }
-  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline .toolbar-button:focus-visible > label {
+  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:focus-visible > label {
     animation: 1.5s ease rehide-label;
     opacity: 0;
   }
-  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline .toolbar-button:has(:focus-visible) > label {
+  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:has(:focus-visible) > label {
     animation: 1.5s ease rehide-label;
     opacity: 0;
   }
-  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline .toolbar-button > label {
+  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button > label {
     opacity: 0;
     position: absolute;
     margin-top: var(--button-label-hover-offset-y);
@@ -615,10 +620,16 @@
   }
 }
 @media screen and (max-width: 700px) and (prefers-reduced-motion: reduce) {
-  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline .toolbar-button > label {
+  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button > label {
     transition: none;
   }
 }
+@media screen and (max-width: 700px) {
+  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button > .toolbar-icon.toolbar-icon {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
 .toolbar-edge-toolbar > div.toolbar-element {
   flex-direction: row;
   display: flex;
@@ -1081,12 +1092,39 @@
   border: 1px solid var(--foreground-color-1);
   background: var(--background-color-1);
   position: absolute;
-  cursor: grab;
+  box-sizing: border-box;
+  padding: 3px;
+}
+.selection-tool-handle .icon {
+  width: 100%;
+  height: 100%;
 }
-
 .selection-tool-handle.selection-tool-circle {
   border-radius: 100%;
 }
+.selection-tool-handle.selection-tool-rotate {
+  cursor: grab;
+}
+
+.selection-tool-handle.selection-tool-resize-x {
+  cursor: ew-resize;
+}
+.selection-tool-handle.selection-tool-resize-y {
+  cursor: ns-resize;
+}
+.selection-tool-handle.selection-tool-resize-xy {
+  cursor: nw-resize;
+}
+
+.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-x {
+  cursor: ns-resize;
+}
+.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-y {
+  cursor: ew-resize;
+}
+.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-xy {
+  cursor: sw-resize;
+}
 
 .overlay.handleOverlay {
   height: 0;
@@ -1095,13 +1133,13 @@
 
 @keyframes selection-duplicated-animation {
   0% {
-    transform: scale(1, 1);
+    scale: 1 1;
   }
   50% {
-    transform: scale(1.02, 1.02);
+    scale: 1.02 1.02;
   }
   100% {
-    transform: scale(1, 1);
+    scale: 1 1;
   }
 }
 /* Do not run the animation when the user has disabled motion animations. */
@@ -1268,6 +1306,10 @@ visible.
     --primary-action-foreground-color: #7ae;
   }
 }
+.imageEditorContainer {
+  --icon-color: var(--foreground-color-1);
+}
+
 .imageEditorContainer {
   color: var(--foreground-color-1);
   font-family: system-ui, -apple-system, sans-serif;