compatibility fixes

Author: ivictbor

README.md

@@ -71,7 +71,7 @@ or [build it by yourself](#building-painterro).
 
 Then insert `<script>` e.g:
 ```html
-<script src="https://github.com/ivictbor/painterro/releases/download/0.1.7/painterro-0.1.7.min.js"></script>
+<script src="/static/painterro-x.x.x.min.js"></script>
 ```
 Then in your code:
 ```html

css/styles.css

@@ -63,7 +63,8 @@
     margin-left: 4px;
     font-family: "Open Sans", sans-serif;
     position: relative;
-    top:-5px
+    top:-5px;
+    font-size: 14px;
 }
 
 .ptro-icon-btn:focus,
@@ -217,7 +218,7 @@
 }
 
 .ptro-wrapper .ptro-resize-widget {
-    width: 220px;
+    width: 200px;
     height: 145px;
     position: absolute;
     top: 50%;
@@ -321,15 +322,15 @@
 .ptro-text-tool-input {
     position: absolute;
     background-color: rgba(0,0,0,0);
-    border: 1px solid;
-    border-style: dashed;
+    border: 1px dashed;
     width: auto;
     display: block;
     min-width: 5px;
     padding: 0 1px;
     overflow-x: hidden;
     word-wrap: normal;
     overflow-y: hidden;
+    box-sizing: content-box;
 }
 
 .ptro-text-tool-input:focus {
@@ -343,8 +344,8 @@
 
 .ptro-link {
     float: left;
-    margin-right: 5px;
-    margin-top: -24px;
+    margin-right: -12px;
+    margin-top: -20px;
 }
 
 .ptro-resize-link-wrapper {

js/cropper.js

@@ -1,3 +1,5 @@
+import { clearSelection } from './utils';
+
 export class PainterroCropper {
 
   constructor(main, selectionCallback) {
@@ -48,7 +50,7 @@ export class PainterroCropper {
       Math.round( this.cropper.topl[0] + (this.cropper.rect.clientWidth) / ratio ),
       Math.round( this.cropper.topl[1] + (this.cropper.rect.clientHeight) / ratio )];
 
-    console.log('recalced cords', ratio, this.cropper.topl, this.cropper.bottoml);
+    // console.log('recalced cords', ratio, this.cropper.topl, this.cropper.bottoml);
   }
 
   handleMouseDown(event) {
@@ -187,6 +189,7 @@ export class PainterroCropper {
     this.cropper.resizingR = false;
     this.cropper.resizingB = false;
     this.cropper.resizingL = false;
+    clearSelection();
   }
 
   draw() {

js/text.js

@@ -49,7 +49,7 @@ export class TextTool {
 
   setFontSize(size) {
     this.fontSize = size;
-    this.input.style['font-size'] = size;
+    this.input.style['font-size'] = `${size}px`;
     //if (this.active) {
     //  this.input.focus();
     //}
@@ -97,8 +97,8 @@ export class TextTool {
       ];
       const scale = this.main.getScale();
       this.scaledCord = [this.crd[0] * scale, this.crd[1] * scale];
-      this.input.style.left = this.crd[0];
-      this.input.style.top = this.crd[1];
+      this.input.style.left = `${this.crd[0]}px`;
+      this.input.style.top = `${this.crd[1]}px`;
       this.input.style.display = 'inline';
       this.input.focus();
       this.reLimit();

js/utils.js

@@ -39,6 +39,22 @@ export function addDocumentObjectHelpers() {
 
 }
 
+export function clearSelection() {
+	let selection = null;
+	if(window.getSelection){
+		selection = window.getSelection();
+	} else if(document.selection){
+		selection = document.selection;
+	}
+	if(selection){
+		if(selection.empty){
+			selection.empty();
+		}
+		if(selection.removeAllRanges){
+			selection.removeAllRanges();
+		}
+	}
+}
 
 export function distance(p1, p2) {
   const a = p1.x - p2.x;

js/zoomHelper.js

@@ -70,8 +70,8 @@ export class ZoomHelper {
           }
         }
       }
-      this.zomer.style.left = e.clientX - this.wrapper.documentOffsetLeft - this.halfFullW;
-      this.zomer.style.top = e.clientY - this.wrapper.documentOffsetTop - this.halfFullW;
+      this.zomer.style.left = `${e.clientX - this.wrapper.documentOffsetLeft - this.halfFullW}px`;
+      this.zomer.style.top = `${e.clientY - this.wrapper.documentOffsetTop - this.halfFullW}px`;
     } else {
       if (this.shown) {
         this.zomer.style.display = "none";
@@ -81,7 +81,6 @@ export class ZoomHelper {
     }
   }
 
-
   static html() {
     return '<canvas class="ptro-zoomer" width="" height="0"></canvas>'
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "painterro",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Embуedded html image editor",
   "main": "build/painterro.commonjs2.js",
   "scripts": {