Removed deprecated listener (not working)

The old implementation wasn't working either but now the DOMObserver
isn't triggered at all

Controller.js

@@ -24,7 +24,7 @@
 
             /* Handle media forms */
             for (let c = 0; c < canvas.length; c++) {
-                temp = new jsOMS.Modules.Draw.Editor(canvas[c]);
+                temp = new jsOMS.Modules.Draw.Editor(canvas[c], this.app);
                 temp.bind();
 
                 this.editors.push(temp);

Models/Editor.js

@@ -4,9 +4,10 @@
     /** @namespace jsOMS.Modules.Draw */
     jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Draw');
 
-    jsOMS.Modules.Draw.Editor = function (editor)
+    jsOMS.Modules.Draw.Editor = function (editor, app)
     {
         this.editor = editor;
+        this.app = app;
         this.canvas = document.getElementsByTagName('canvas')[0];
         this.canvasContainer = this.canvas.parentElement;
         this.ctx = this.canvas.getContext("2d");
@@ -42,7 +43,9 @@
 
         this.initCanvas();
 
-        this.canvasContainer.addEventListener('DOMAttrModified', function(evt) {
+        console.log(this.canvasContainer);
+
+        this.app.eventManager.attach(this.canvasContainer.id, function(evt) {
             self.canvasStyle = window.getComputedStyle(self.canvas, null);
             self.canvasContainerStyle = window.getComputedStyle(self.canvasContainer, null);
 
@@ -51,6 +54,7 @@
                 height: parseFloat(self.canvasContainerStyle.height) - parseFloat(self.canvasContainerStyle.paddingTop) - parseFloat(self.canvasContainerStyle.paddingBottom) - parseFloat(self.canvasContainerStyle.borderRightWidth) - parseFloat(self.canvasStyle.borderRightWidth)
             });
         });
+        this.app.uiManager.getDOMObserver().observe(this.canvasContainer, {childList: true, subtree: true});
 
         // Handle draw and resize
         this.canvas.addEventListener('mousemove', function (evt)

ModuleDraw.js

@@ -1,260 +0,0 @@
-(function (jsOMS)
-{
-    "use strict";
-    
-    jsOMS.Modules.Draw = function (app)
-    {
-        this.app = app;
-        this.editors = [];
-    };
-
-    jsOMS.Modules.Draw.prototype.bind = function (id)
-    {
-        var temp = null;
-
-        if (typeof id !== 'undefined') {
-            temp = new jsOMS.Modules.Draw.Editor(document.getElementById(id));
-            temp.bind();
-
-            this.editors.push(temp);
-        } else {
-            var canvas = document.getElementsByClassName('m-draw');
-
-            this.editors = [];
-
-            /* Handle media forms */
-            for (var c = 0; c < canvas.length; c++) {
-                temp = new jsOMS.Modules.Draw.Editor(canvas[c]);
-                temp.bind();
-
-                this.editors.push(temp);
-            }
-        }
-    };
-
-    jsOMS.Modules.Draw.prototype.getElements = function ()
-    {
-        return this.editors;
-    };
-
-    jsOMS.Modules.Draw.prototype.count = function ()
-    {
-        return this.editors.length;
-    };
-}(window.jsOMS = window.jsOMS || {}));
-
-jsOMS.ready(function ()
-{
-    window.omsApp.moduleManager.get('Draw').bind();
-});
-
-/**
- * DrawType.
- *
- * @author     OMS Development Team <dev@oms.com>
- * @author     Dennis Eichhorn <d.eichhorn@oms.com>
- * @copyright  Dennis Eichhorn
- * @license    OMS License 1.0
- * @version    1.0.0
- * @since      1.0.0
- */
-(function (jsOMS)
-{
-    "use strict";
-    
-    jsOMS.Modules.Draw.DrawTypeEnum = Object.freeze({
-        DRAW: 0,
-        LINE: 1,
-        RECTANGLE: 2,
-        CIRCLE: 3,
-    });
-}(window.jsOMS = window.jsOMS || {}));
-
-(function (jsOMS)
-{
-    "use strict";
-    
-    jsOMS.Modules.Draw.Editor = function (editor)
-    {
-        this.editor = editor;
-        this.canvas = document.getElementsByTagName('canvas')[0];
-        this.canvasContainer = this.canvas.parentElement;
-        this.ctx = this.canvas.getContext("2d");
-
-        var canvasStyle = window.getComputedStyle(this.canvas, null);
-        var canvasContainerStyle = window.getComputedStyle(this.canvasContainer, null);
-
-        this.resize({
-            width: parseFloat(canvasContainerStyle.width) - parseFloat(canvasContainerStyle.paddingLeft) - parseFloat(canvasContainerStyle.paddingRight) - parseFloat(canvasContainerStyle.borderLeftWidth) - parseFloat(canvasStyle.borderLeftWidth),
-            height: parseFloat(canvasContainerStyle.height) - parseFloat(canvasContainerStyle.paddingTop) - parseFloat(canvasContainerStyle.paddingBottom) - parseFloat(canvasContainerStyle.borderRightWidth) - parseFloat(canvasStyle.borderRightWidth)
-        });
-
-        // Backup for undo.
-        this.canvasBackup = document.createElement('canvas');
-        this.ctxBackup = this.canvasBackup.getContext("2d");
-
-        this.size = 1;
-        this.type = jsOMS.Modules.Draw.DrawTypeEnum.RECTANGLE;
-        this.color = '#000000';
-        this.drawFlag = false;
-        this.oldPos = {x: 0, y: 0};
-        this.newPos = {x: 0, y: 0};
-
-        // All backup steps need to be stored here (draw, resize etc.)
-        // Undo means the whole canvas will be redrawn on the canvasBackup without the last step
-        this.undoHistory = [];
-        this.redoHistory = [];
-    };
-
-    jsOMS.Modules.Draw.Editor.prototype.bind = function ()
-    {
-        var self = this;
-
-        // Handle draw and resize
-        this.canvas.addEventListener('mousemove', function (evt)
-        {
-            if (!self.drawFlag || self.type === jsOMS.Modules.Draw.DrawTypeEnum.DRAW) {
-                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);
-                }
-            }
-        }, false);
-
-        this.canvas.addEventListener("mousedown", function (evt)
-        {
-            self.drawFlag = true;
-            self.oldPos = self.newPos;
-            self.newPos = self.mousePosition(evt);
-
-            if (self.drawFlag && self.type === jsOMS.Modules.Draw.DrawTypeEnum.DRAW) {
-                self.draw(self.newPos, self.newPos);
-            } else if (self.drawFlag && self.type === jsOMS.Modules.Draw.DrawTypeEnum.RECTANGLE || self.type === jsOMS.Modules.Draw.DrawTypeEnum.LINE || self.type === jsOMS.Modules.Draw.DrawTypeEnum.CIRCLE) {
-                self.oldPos = self.newPos;
-                self.newPos = self.mousePosition(evt);
-            }
-        }, false);
-
-        this.canvas.addEventListener("mouseup", function (evt)
-        {
-            self.oldPos = self.newPos;
-            self.newPos = self.mousePosition(evt);
-
-            if (self.drawFlag && self.type === jsOMS.Modules.Draw.DrawTypeEnum.RECTANGLE || self.type === jsOMS.Modules.Draw.DrawTypeEnum.LINE || self.type === jsOMS.Modules.Draw.DrawTypeEnum.CIRCLE) {
-                self.draw(self.oldPos, self.newPos);
-            }
-
-            self.drawFlag = false;
-        }, false);
-
-        this.canvas.addEventListener("mouseout", function (evt)
-        {
-            self.oldPos = self.newPos;
-            self.newPos = self.mousePosition(evt);
-
-            self.draw(self.oldPos, self.newPos);
-            self.drawFlag = false;
-            document.body.style.cursor = 'default';
-        }, false);
-    };
-
-    jsOMS.Modules.Draw.Editor.prototype.draw = function (start, end)
-    {
-        if (this.drawFlag) {
-            this.ctx.beginPath();
-            this.ctx.strokeStyle = this.color;
-            this.ctx.lineWidth = this.size;
-
-            if (this.type === jsOMS.Modules.Draw.DrawTypeEnum.DRAW) {
-                this.ctx.moveTo(start.x, start.y);
-                this.ctx.lineTo(end.x, end.y);
-            } else if (this.type === jsOMS.Modules.Draw.DrawTypeEnum.RECTANGLE) {
-                this.ctx.rect(start.x, start.y, end.x - start.x, end.y - start.y);
-            } else if (this.type === jsOMS.Modules.Draw.DrawTypeEnum.CIRCLE) {
-                this.ctx.arc(start.x, start.y, Math.sqrt((end.x - start.x) * (end.x - start.x) + (end.y - start.y) * (end.y - start.y)), 0, 2 * Math.PI);
-            } else if (this.type === jsOMS.Modules.Draw.DrawTypeEnum.LINE) {
-                this.ctx.moveTo(start.x, start.y);
-                this.ctx.lineTo(end.x, end.y);
-            }
-
-            this.ctx.stroke();
-            // this.ctx.closePath();
-
-            // check if undo has space
-            // create backup to backup canvas
-            // remove x first undos from history
-            // add this step to undo
-        }
-    };
-
-    jsOMS.Modules.Draw.Editor.prototype.setSize = function (size)
-    {
-        this.size = size;
-    };
-
-    jsOMS.Modules.Draw.Editor.prototype.setType = function (type)
-    {
-        this.type = type;
-    };
-
-    jsOMS.Modules.Draw.Editor.prototype.setColor = function (color)
-    {
-        this.color = color;
-    };
-
-    jsOMS.Modules.Draw.Editor.prototype.mousePosition = function (evt)
-    {
-        var rect = this.canvas.getBoundingClientRect();
-        return {
-            x: evt.clientX - rect.left - 0.5,
-            y: evt.clientY - rect.top - 0.5
-        };
-    };
-
-    jsOMS.Modules.Draw.Editor.prototype.resize = function (size)
-    {
-        var tmpCanvas = document.createElement('canvas');
-        tmpCanvas.width = this.canvas.width;
-        tmpCanvas.height = this.canvas.height;
-
-        tmpCanvas.getContext('2d').drawImage(this.canvas, 0, 0);
-
-        this.canvas.width = size.width;
-        this.canvas.height = size.height;
-
-        this.canvas.getContext('2d').drawImage(tmpCanvas, 0, 0, tmpCanvas.width, tmpCanvas.height, 0, 0, this.canvas.width, this.canvas.height);
-    };
-
-    jsOMS.Modules.Draw.Editor.prototype.scale = function (scale)
-    {
-        var tmpCanvas = document.createElement('canvas');
-        tmpCanvas.width = this.canvas.width;
-        tmpCanvas.height = this.canvas.height;
-
-        tmpCanvas.getContext('2d').drawImage(this.canvas, 0, 0);
-
-        this.canvas.getContext('2d').drawImage(tmpCanvas, 0, 0, tmpCanvas.width, tmpCanvas.height, 0, 0, scale.width, scale.height);
-    };
-}(window.jsOMS = window.jsOMS || {}));

Theme/Backend/draw-create.tpl.php

@@ -72,7 +72,7 @@ echo $this->getData('nav')->render(); ?>
     <div class="col-xs-12">
         <div class="m-draw">
             <section class="box wf-100" style="height: 30%;">
-                <div class="inner resizable">
+                <div id="drawContainer" class="inner resizable">
                     <canvas id="canvasImage resizable" name="image" form="drawForm"></canvas>
                 </div>
             </section>