Switching to explicit inheritance for canvas elements

diff --git a/src/editor/modules/documentCanvas/canvas/canvas.test.js b/src/editor/modules/documentCanvas/canvas/canvas.test.js
index 4f954f1..63ef243 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/canvas.test.js
+++ b/src/editor/modules/documentCanvas/canvas/canvas.test.js
@@ -4,8 +4,9 @@ define([
 'libs/sinon',
 'modules/documentCanvas/canvas/canvas',
 'modules/documentCanvas/canvas/utils',
 'libs/sinon',
 'modules/documentCanvas/canvas/canvas',
 'modules/documentCanvas/canvas/utils',

+'modules/documentCanvas/canvas/documentElement',

 'wlxml/wlxml',
 'wlxml/wlxml',

-], function($, chai, sinon, canvas, utils, wlxml) {
+], function($, chai, sinon, canvas, utils, documentElement, wlxml) {

     
 'use strict';
 /* global describe, it, beforeEach, afterEach */
     
 'use strict';
 /* global describe, it, beforeEach, afterEach */


@@ -228,20 +229,20 @@ describe('Default document changes handling', function() {
     
 describe('Custom elements based on wlxml class attribute', function() {
     it('allows custom rendering', function() {
     
 describe('Custom elements based on wlxml class attribute', function() {
     it('allows custom rendering', function() {

-        var c = getCanvasFromXML('<section><div class="testClass"></div></section>', [
-            {tag: 'div', klass: 'testClass', prototype: {
+        var prototype = $.extend({}, documentElement.DocumentNodeElement.prototype, {

                 init: function() {
                     this._container().append('<test></test>');
                 }
                 init: function() {
                     this._container().append('<test></test>');
                 }

-            }, extending: {tag: 'div'}}
+            }),
+            c = getCanvasFromXML('<section><div class="testClass"></div></section>', [
+            {tag: 'div', klass: 'testClass', prototype: prototype}

         ]);
 
         expect(c.doc().children()[0]._container().children('test').length).to.equal(1); // @!
     });
 
     it('allows handling changes to internal structure of rendered node', function() {
         ]);
 
         expect(c.doc().children()[0]._container().children('test').length).to.equal(1); // @!
     });
 
     it('allows handling changes to internal structure of rendered node', function() {

-        var c = getCanvasFromXML('<section><div class="testClass"><a></a></div></section>', [
-            {tag: 'div', klass: 'testClass', prototype: {
+        var prototype = $.extend({}, documentElement.DocumentNodeElement.prototype, {

                 init: function() {
                     this.header = $('<h1>');
                     this._container().append(this.header);
                 init: function() {
                     this.header = $('<h1>');
                     this._container().append(this.header);


@@ -254,7 +255,10 @@ describe('Custom elements based on wlxml class attribute', function() {
                     void(event);
                     this.refresh2();
                 }
                     void(event);
                     this.refresh2();
                 }

-            }, extending: {tag: 'div'}}
+        });
+
+        var c = getCanvasFromXML('<section><div class="testClass"><a></a></div></section>', [
+            {tag: 'div', klass: 'testClass', prototype: prototype}

         ]);
 
         var node = c.wlxmlDocument.root.contents()[0],
         ]);
 
         var node = c.wlxmlDocument.root.contents()[0],

diff --git a/src/editor/modules/documentCanvas/canvas/documentElement.js b/src/editor/modules/documentCanvas/canvas/documentElement.js
index 277d70a..99e97d0 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/documentElement.js
+++ b/src/editor/modules/documentCanvas/canvas/documentElement.js
@@ -81,6 +81,7 @@ DocumentNodeElement.prototype = Object.create(DocumentElement.prototype);
 
 $.extend(DocumentNodeElement.prototype, {
     defaultDisplayStyle: 'block',
 
 $.extend(DocumentNodeElement.prototype, {
     defaultDisplayStyle: 'block',

+    init: function() {},

     addWidget: function(widget) {
         this.dom.children('.canvas-widgets').append(widget.DOM ? widget.DOM : widget);
     },
     addWidget: function(widget) {
         this.dom.children('.canvas-widgets').append(widget.DOM ? widget.DOM : widget);
     },

diff --git a/src/editor/modules/documentCanvas/canvas/elementsRegister.js b/src/editor/modules/documentCanvas/canvas/elementsRegister.js
index 0d31c7d..24a700a 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/elementsRegister.js
+++ b/src/editor/modules/documentCanvas/canvas/elementsRegister.js
@@ -5,27 +5,18 @@ var _ = require('libs/underscore'),
     wlxml = require('wlxml/wlxml');
 
 
     wlxml = require('wlxml/wlxml');
 
 

-var ElementsRegister = function(basePrototype, defaultPrototype) {
+var ElementsRegister = function(BaseType) {

     this._register = {};
     this._register = {};

-    this.basePrototype = basePrototype;
-    this.DefaultType = this.createCanvasElementType(defaultPrototype);
+    this.BaseType = BaseType;

 };
 
 _.extend(ElementsRegister.prototype, {
 };
 
 _.extend(ElementsRegister.prototype, {

-    createCanvasElementType: function(elementPrototype, extending) {
-        var inheritFrom = this.basePrototype;
-        if(extending && extending.tag) {
-            inheritFrom = this.getElement(extending);
-        }
+    createCanvasElementType: function(elementPrototype) {
+        var register = this;

         var Constructor = function() {
         var Constructor = function() {

-            if(!this.super) {
-                this.super = inheritFrom.prototype;
-            }
-            inheritFrom.apply(this, Array.prototype.slice.call(arguments, 0));
-            
+            register.BaseType.apply(this, Array.prototype.slice.call(arguments, 0));

         };
         };

-        Constructor.prototype = Object.create(inheritFrom.prototype);
-        _.extend(Constructor.prototype, elementPrototype);
+        Constructor.prototype = elementPrototype;

         return Constructor;
     },
     register: function(params) {
         return Constructor;
     },
     register: function(params) {


@@ -33,7 +24,7 @@ _.extend(ElementsRegister.prototype, {
         params.prototype = params.prototype || Object.create({});
 
         this._register[params.tag] = this._register[params.tag] || {};
         params.prototype = params.prototype || Object.create({});
 
         this._register[params.tag] = this._register[params.tag] || {};

-        this._register[params.tag][params.klass] = this.createCanvasElementType(params.prototype, params.extending);
+        this._register[params.tag][params.klass] = this.createCanvasElementType(params.prototype);

     },
     getElement: function(params) {
         params.klass = params.klass || '';
     },
     getElement: function(params) {
         params.klass = params.klass || '';


@@ -47,7 +38,7 @@ _.extend(ElementsRegister.prototype, {
             }.bind(this));
         }
         if(!Factory) {
             }.bind(this));
         }
         if(!Factory) {

-            Factory = this.DefaultType;
+            Factory = this.BaseType;

         }
         return Factory;
     }
         }
         return Factory;
     }

diff --git a/src/editor/modules/documentCanvas/canvas/elementsRegister.test.js b/src/editor/modules/documentCanvas/canvas/elementsRegister.test.js
index eb7ad89..542e199 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/elementsRegister.test.js
+++ b/src/editor/modules/documentCanvas/canvas/elementsRegister.test.js
@@ -13,20 +13,18 @@ var expect = chai.expect;
 describe('Elements register', function() {
     it('registers element for a tag', function() {
         var register = new ElementsRegister(documentElement.DocumentNodeElement),
 describe('Elements register', function() {
     it('registers element for a tag', function() {
         var register = new ElementsRegister(documentElement.DocumentNodeElement),

-            prototype = {testMethod: function(){}};
+            prototype = Object.create({});

 
         register.register({
             tag: 'div',
             prototype: prototype,
         });
 
         register.register({
             tag: 'div',
             prototype: prototype,
         });

-

         var Element = register.getElement({tag: 'div'});
         var Element = register.getElement({tag: 'div'});

-        expect(Element.prototype.testMethod).to.equal(prototype.testMethod, '1');
-        expect(Element.prototype instanceof documentElement.DocumentNodeElement).to.equal(true, '2');
+        expect(Element.prototype).to.equal(prototype);

     });
     it('registers element for a class', function() {
         var register = new ElementsRegister(documentElement.DocumentNodeElement),
     });
     it('registers element for a class', function() {
         var register = new ElementsRegister(documentElement.DocumentNodeElement),

-            prototype = {testMethod: function(){}};
+            prototype = Object.create({});

 
         register.register({
             tag: 'div',
 
         register.register({
             tag: 'div',


@@ -34,29 +32,7 @@ describe('Elements register', function() {
             prototype: prototype,
         });
         var Element = register.getElement({tag: 'div', klass: 'a.b.c'});
             prototype: prototype,
         });
         var Element = register.getElement({tag: 'div', klass: 'a.b.c'});

-        expect(Element.prototype.testMethod).to.equal(prototype.testMethod, '1');
-        expect(Element.prototype instanceof documentElement.DocumentNodeElement).to.equal(true, '2');
-    });
-    it('allows inheriting from selected element', function() {
-        var register = new ElementsRegister(documentElement.DocumentNodeElement),
-            method1 = function() {},
-            method2 = function() {};
-
-        register.register({
-            tag: 'div',
-            prototype: {method1: method1}
-        });
-
-        register.register({
-            tag: 'div',
-            klass: 'a',
-            prototype: {method2: method2},
-            extending: {tag: 'div'}
-        });
-
-        var Element = register.getElement({tag: 'div', klass: 'a'});
-        expect(Element.prototype.method2).to.equal(method2, '2');
-        expect(Element.prototype instanceof register.getElement({tag: 'div'})).to.equal(true, '2');
+        expect(Element.prototype).to.equal(prototype);

     });
 });
 
     });
 });
 

diff --git a/src/editor/modules/documentCanvas/canvas/genericElement.js b/src/editor/modules/documentCanvas/canvas/genericElement.js
index e23aa9b..d11cbd1 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/genericElement.js
+++ b/src/editor/modules/documentCanvas/canvas/genericElement.js
@@ -14,8 +14,11 @@ var labelWidget = function(tag, klass) {
 };
 void(labelWidget); // for linters; labelWidget is unused on purpose for now
 
 };
 void(labelWidget); // for linters; labelWidget is unused on purpose for now
 

+var DocumentNodeElement = documentElement.DocumentNodeElement;

 
 

-var generic = {
+var generic = Object.create(DocumentNodeElement.prototype);
+
+$.extend(generic, {

     onNodeAttrChange: function(event) {
         if(event.meta.attr === 'class') {
             this.setWlxmlClass(event.meta.newVal); //
     onNodeAttrChange: function(event) {
         if(event.meta.attr === 'class') {
             this.setWlxmlClass(event.meta.newVal); //


@@ -138,6 +141,7 @@ var generic = {
         this.refreshPath();
     },
     init: function() {
         this.refreshPath();
     },
     init: function() {

+        DocumentNodeElement.prototype.init.call(this);

         this._container()
             .attr('wlxml-tag', this.wlxmlNode.getTagName());
         this.setWlxmlClass(this.wlxmlNode.getClass());
         this._container()
             .attr('wlxml-tag', this.wlxmlNode.getTagName());
         this.setWlxmlClass(this.wlxmlNode.getClass());


@@ -186,7 +190,7 @@ var generic = {
         });
         return toret;
     },
         });
         return toret;
     },

-};
+});

 
 
 return generic;
 
 
 return generic;

diff --git a/src/editor/plugins/core/canvasElements.js b/src/editor/plugins/core/canvasElements.js
index e74adee..addaeae 100644 (file)
--- a/src/editor/plugins/core/canvasElements.js
+++ b/src/editor/plugins/core/canvasElements.js
@@ -1,7 +1,8 @@
 define(function(require) {
     
 'use strict';
 define(function(require) {
     
 'use strict';

-var $ = require('libs/jquery');
+var $ = require('libs/jquery'),
+    genericElement = require('modules/documentCanvas/canvas/genericElement'); // TODO: This should be accessible via plugin infrastructure

 
 
 var widgets = {
 
 
 var widgets = {


@@ -53,9 +54,10 @@ var widgets = {
 };
 
 
 };
 
 

-var comment = {
+var comment = Object.create(genericElement);
+$.extend(comment, {

     init: function() {
     init: function() {

-        this.super.init.call(this);
+        genericElement.init.call(this);

         this.commentAdnotation = widgets.commentAdnotation(this.wlxmlNode);
         this.addWidget(this.commentAdnotation, 'show');
         this.commentAdnotation.DOM.show();
         this.commentAdnotation = widgets.commentAdnotation(this.wlxmlNode);
         this.addWidget(this.commentAdnotation, 'show');
         this.commentAdnotation.DOM.show();


@@ -70,11 +72,12 @@ var comment = {
     onMetadataRemoved: function(event) {
         return this.onMetadataChanged(event);
     }
     onMetadataRemoved: function(event) {
         return this.onMetadataChanged(event);
     }

-};
+});

 
 

-var footnote = {
+var footnote = Object.create(genericElement);
+$.extend(footnote, {

     init: function() {
     init: function() {

-        this.super.init.call(this);
+        genericElement.init.call(this);

         var clickHandler = function() {
             this.toggle(true);
         }.bind(this);
         var clickHandler = function() {
             this.toggle(true);
         }.bind(this);


@@ -103,12 +106,12 @@ var footnote = {
             this.trigger('elementToggled', toggle, this);
         }
     }
             this.trigger('elementToggled', toggle, this);
         }
     }

-};
+});

 
 
 return [
 
 
 return [

-    {tag: 'aside',   klass: 'comment', prototype: comment, extending: {tag: 'div'}},
-    {tag: 'aside', klass: 'footnote', prototype: footnote, extending: {tag: 'aside'}}
+    {tag: 'aside', klass: 'comment', prototype: comment},
+    {tag: 'aside', klass: 'footnote', prototype: footnote}

 ];
 
 
 ];