js-draw 1.6.0 → 1.7.0

package/README.md

@@ -1,17 +1,17 @@
 
 
 <div align="center">
-    <img height="190" src="./docs/img/readme-images/logo.svg" alt="js-draw logo"/>
+    <img height="190" src="docs/img/readme-images/logo.svg" alt="js-draw logo"/>
 </div>
 
 <h1 align="center">js-draw</h1>
-<center>
+<div align="center">
 
 [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)
 
-</center>
+</div>
 
-![](docs/img/readme-images/js-draw.jpg)
+![](docs/img/readme-images/js-draw.png)
 
 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/).
 
@@ -19,8 +19,6 @@ If you're coming from version 0.25, [read the migration guide!](https://js-draw.
 
 # API
 
-To use `js-draw`,
-
 ## Creating an `Editor`
 
 ### With a bundler that supports importing `.css` files

package/dist/Editor.css

@@ -1086,24 +1086,38 @@
   background-color: var(--selection-background-color);
   opacity: 0.5;
   overflow: visible;
-  position: absolute;
 }
 
 .selection-tool-handle {
+  position: absolute;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  --max-size: 17px;
+}
+.selection-tool-handle .selection-tool-content {
   border: 1px solid var(--foreground-color-1);
   background: var(--background-color-1);
-  position: absolute;
   box-sizing: border-box;
+  max-width: var(--max-size);
+  max-height: var(--max-size);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   padding: 3px;
 }
-.selection-tool-handle .icon {
+.selection-tool-handle .selection-tool-content .icon {
   width: 100%;
   height: 100%;
 }
-.selection-tool-handle.selection-tool-circle {
+.selection-tool-handle.selection-tool-circle .selection-tool-content {
   border-radius: 100%;
 }
 .selection-tool-handle.selection-tool-rotate {
+  --max-size: 28px;
   cursor: grab;
 }
 
@@ -1128,9 +1142,21 @@
 }
 
 .overlay.handleOverlay {
+  touch-action: none;
+}
+.overlay.handleOverlay, .overlay.handleOverlay .selection-tool-selection-outer-container {
   height: 0;
   overflow: visible;
 }
+.overlay.handleOverlay .selection-tool-selection-inner-container {
+  width: var(--editor-current-display-width-px);
+  height: var(--editor-current-display-height-px);
+  overflow: hidden;
+  pointer-events: none;
+}
+.overlay.handleOverlay .selection-tool-selection-inner-container > * {
+  pointer-events: all;
+}
 
 @keyframes selection-duplicated-animation {
   0% {