diff --git a/Models/Editor.js b/Models/Editor.js index ee9802b..76fa6dc 100644 --- a/Models/Editor.js +++ b/Models/Editor.js @@ -11,7 +11,7 @@ this.canvasContainer = this.canvas.parentElement; this.ctx = this.canvas.getContext("2d"); - const canvasStyle = window.getComputedStyle(this.canvas, null), + let canvasStyle = window.getComputedStyle(this.canvas, null), canvasContainerStyle = window.getComputedStyle(this.canvasContainer, null); this.resize({ @@ -40,6 +40,16 @@ { const self = this; + this.canvasContainer.addEventListener('DOMAttrModified', function(evt) { + self.canvasStyle = window.getComputedStyle(self.canvas, null); + self.canvasContainerStyle = window.getComputedStyle(self.canvasContainer, null); + + this.resize({ + width: parseFloat(self.canvasContainerStyle.width) - parseFloat(self.canvasContainerStyle.paddingLeft) - parseFloat(self.canvasContainerStyle.paddingRight) - parseFloat(self.canvasContainerStyle.borderLeftWidth) - parseFloat(self.canvasStyle.borderLeftWidth), + height: parseFloat(self.canvasContainerStyle.height) - parseFloat(self.canvasContainerStyle.paddingTop) - parseFloat(self.canvasContainerStyle.paddingBottom) - parseFloat(self.canvasContainerStyle.borderRightWidth) - parseFloat(self.canvasStyle.borderRightWidth) + }); + }); + // Handle draw and resize this.canvas.addEventListener('mousemove', function (evt) { @@ -47,26 +57,6 @@ self.oldPos = self.newPos; self.newPos = self.mousePosition(evt); - if (self.newPos.x < self.canvas.width - 1 && self.newPos.x > self.canvas.width - 5 && self.newPos.y < self.canvas.height - 1 && self.newPos.y > self.canvas.height - 5) { - document.body.style.cursor = 'nwse-resize'; - } else if (self.newPos.x > 1 && self.newPos.x < 5 && self.newPos.y > 1 && self.newPos.y < 5) { - document.body.style.cursor = 'nwse-resize'; - } else if (self.newPos.x > 1 && self.newPos.x < 5 && self.newPos.y < self.canvas.height - 1 && self.newPos.y > self.canvas.height - 5) { - document.body.style.cursor = 'nesw-resize'; - } else if (self.newPos.x < self.canvas.width - 1 && self.newPos.x > self.canvas.width - 5 && self.newPos.y > 1 && self.newPos.y < 5) { - document.body.style.cursor = 'nesw-resize'; - } else if (self.newPos.x < self.canvas.width - 1 && self.newPos.x > self.canvas.width - 5 && self.newPos.y > 5 && self.newPos.y < self.canvas.height - 5) { - document.body.style.cursor = 'ew-resize'; - } else if (self.newPos.x > 1 && self.newPos.x < 5 && self.newPos.y > 5 && self.newPos.y < self.canvas.height - 5) { - document.body.style.cursor = 'ew-resize'; - } else if (self.newPos.x > 5 && self.newPos.x < self.canvas.width - 5 && self.newPos.y < self.canvas.height - 1 && self.newPos.y > self.canvas.height - 5) { - document.body.style.cursor = 'ns-resize'; - } else if (self.newPos.x > 5 && self.newPos.x < self.canvas.width - 5 && self.newPos.y > 1 && self.newPos.y < 5) { - document.body.style.cursor = 'ns-resize'; - } else { - document.body.style.cursor = 'default'; - } - if (self.type === jsOMS.Modules.Draw.DrawTypeEnum.DRAW) { self.draw(self.oldPos, self.newPos); } diff --git a/Theme/backend/draw-create.tpl.php b/Theme/backend/draw-create.tpl.php index 36dfebb..7463734 100644 --- a/Theme/backend/draw-create.tpl.php +++ b/Theme/backend/draw-create.tpl.php @@ -62,8 +62,8 @@ echo $this->getData('nav')->render(); ?>
-
- +
+