diff options
author | Jose Antonio Marquez Russo | 2012-02-23 08:05:06 -0800 |
---|---|---|
committer | Jose Antonio Marquez Russo | 2012-02-23 08:05:06 -0800 |
commit | c8a5107fa6f85ad572cf0881ed7e222ac6fbacfc (patch) | |
tree | 61bac34de22852efd2b9b8880f62210685b16297 | |
parent | d264092596ba697cd04738566184270dc608be63 (diff) | |
parent | 64a971f63333d74ca89690892a52948b3bd4283a (diff) | |
download | ninja-c8a5107fa6f85ad572cf0881ed7e222ac6fbacfc.tar.gz |
Merge pull request #18 from mencio/file-io
File io - drawing the layout on open and make models
-rwxr-xr-x | js/document/html-document.js | 12 | ||||
-rwxr-xr-x | js/helper-classes/3D/snap-manager.js | 4 | ||||
-rwxr-xr-x | js/lib/NJUtils.js | 4 | ||||
-rwxr-xr-x | js/mediators/element-mediator.js | 12 | ||||
-rwxr-xr-x | js/stage/layout.js | 71 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.js | 2 |
6 files changed, 55 insertions, 50 deletions
diff --git a/js/document/html-document.js b/js/document/html-document.js index 143b1598..eaf56146 100755 --- a/js/document/html-document.js +++ b/js/document/html-document.js | |||
@@ -23,6 +23,7 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
23 | 23 | ||
24 | _document: { value: null, enumerable: false }, | 24 | _document: { value: null, enumerable: false }, |
25 | _documentRoot: { value: null, enumerable: false }, | 25 | _documentRoot: { value: null, enumerable: false }, |
26 | _liveNodeList: { value: null, enumarable: false }, | ||
26 | _stageBG: { value: null, enumerable: false }, | 27 | _stageBG: { value: null, enumerable: false }, |
27 | _window: { value: null, enumerable: false }, | 28 | _window: { value: null, enumerable: false }, |
28 | _styles: { value: null, enumerable: false }, | 29 | _styles: { value: null, enumerable: false }, |
@@ -402,7 +403,16 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
402 | //Adding a handler for the main user document reel to finish loading | 403 | //Adding a handler for the main user document reel to finish loading |
403 | this._document.body.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false); | 404 | this._document.body.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false); |
404 | 405 | ||
405 | 406 | // Live node list of the current loaded document | |
407 | this._liveNodeList = this.documentRoot.getElementsByTagName('*'); | ||
408 | |||
409 | // TODO Move this to the appropriate location | ||
410 | var len = this._liveNodeList.length; | ||
411 | |||
412 | for(var i = 0; i < len; i++) { | ||
413 | NJUtils.makeModelFromElement(this._liveNodeList[i]); | ||
414 | } | ||
415 | |||
406 | /* this.iframe.contentWindow.document.addEventListener('DOMSubtreeModified', function (e) { */ //TODO: Remove events upon loading once | 416 | /* this.iframe.contentWindow.document.addEventListener('DOMSubtreeModified', function (e) { */ //TODO: Remove events upon loading once |
407 | 417 | ||
408 | //TODO: When re-written, the best way to initialize the document is to listen for the DOM tree being modified | 418 | //TODO: When re-written, the best way to initialize the document is to listen for the DOM tree being modified |
diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js index 0a950658..2922edf9 100755 --- a/js/helper-classes/3D/snap-manager.js +++ b/js/helper-classes/3D/snap-manager.js | |||
@@ -521,7 +521,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { | |||
521 | 521 | ||
522 | if (!elt.elementModel) | 522 | if (!elt.elementModel) |
523 | { | 523 | { |
524 | NJUtils.makeElementModel2(elt); | 524 | NJUtils.makeModelFromElement(elt); |
525 | } | 525 | } |
526 | elt.elementModel.isIn2DSnapCache = true; | 526 | elt.elementModel.isIn2DSnapCache = true; |
527 | } | 527 | } |
@@ -588,7 +588,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { | |||
588 | 588 | ||
589 | if (!elt.elementModel) | 589 | if (!elt.elementModel) |
590 | { | 590 | { |
591 | NJUtils.makeElementModel2(elt); | 591 | NJUtils.makeModelFromElement(elt); |
592 | } | 592 | } |
593 | elt.elementModel.isIn2DSnapCache = true; | 593 | elt.elementModel.isIn2DSnapCache = true; |
594 | } | 594 | } |
diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js index 887743c5..e16715a4 100755 --- a/js/lib/NJUtils.js +++ b/js/lib/NJUtils.js | |||
@@ -113,8 +113,8 @@ exports.NJUtils = Object.create(Object.prototype, { | |||
113 | }, | 113 | }, |
114 | 114 | ||
115 | ///// Element Model creation for existing elements based on element type. | 115 | ///// Element Model creation for existing elements based on element type. |
116 | ///// TODO: find a different place for this function and return different element models based on type. | 116 | ///// TODO: Selection and model should be based on the element type |
117 | makeElementModel2: { | 117 | makeModelFromElement: { |
118 | value: function(el) { | 118 | value: function(el) { |
119 | this.makeElementModel(el, "Div", "block", false); | 119 | this.makeElementModel(el, "Div", "block", false); |
120 | } | 120 | } |
diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index 51923f08..127f73e1 100755 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js | |||
@@ -463,7 +463,7 @@ exports.ElementMediator = Montage.create(NJComponent, { | |||
463 | getColor: { | 463 | getColor: { |
464 | value: function(el, isFill) { | 464 | value: function(el, isFill) { |
465 | if(!el.elementModel) { | 465 | if(!el.elementModel) { |
466 | NJUtils.makeElementModel2(el); | 466 | NJUtils.makeModelFromElement(el); |
467 | } | 467 | } |
468 | return el.elementModel.controller["getColor"](el, isFill); | 468 | return el.elementModel.controller["getColor"](el, isFill); |
469 | } | 469 | } |
@@ -624,7 +624,7 @@ exports.ElementMediator = Montage.create(NJComponent, { | |||
624 | getColor2: { | 624 | getColor2: { |
625 | value: function(el, prop, mutator) { | 625 | value: function(el, prop, mutator) { |
626 | if(!el.elementModel) { | 626 | if(!el.elementModel) { |
627 | NJUtils.makeElementModel2(el); | 627 | NJUtils.makeModelFromElement(el); |
628 | } | 628 | } |
629 | 629 | ||
630 | return this.getColor(el, (prop === "background")); | 630 | return this.getColor(el, (prop === "background")); |
@@ -636,7 +636,7 @@ exports.ElementMediator = Montage.create(NJComponent, { | |||
636 | get3DProperty: { | 636 | get3DProperty: { |
637 | value: function(el, prop) { | 637 | value: function(el, prop) { |
638 | if(!el.elementModel) { | 638 | if(!el.elementModel) { |
639 | NJUtils.makeElementModel2(el); | 639 | NJUtils.makeModelFromElement(el); |
640 | } | 640 | } |
641 | return el.elementModel.controller["get3DProperty"](el, prop); | 641 | return el.elementModel.controller["get3DProperty"](el, prop); |
642 | } | 642 | } |
@@ -645,7 +645,7 @@ exports.ElementMediator = Montage.create(NJComponent, { | |||
645 | get3DProperties: { | 645 | get3DProperties: { |
646 | value: function(el) { | 646 | value: function(el) { |
647 | if(!el.elementModel) { | 647 | if(!el.elementModel) { |
648 | NJUtils.makeElementModel2(el); | 648 | NJUtils.makeModelFromElement(el); |
649 | } | 649 | } |
650 | // var mat = this.getMatrix(el); | 650 | // var mat = this.getMatrix(el); |
651 | // var dist = this.getPerspectiveDist(el); | 651 | // var dist = this.getPerspectiveDist(el); |
@@ -658,7 +658,7 @@ exports.ElementMediator = Montage.create(NJComponent, { | |||
658 | getMatrix: { | 658 | getMatrix: { |
659 | value: function(el) { | 659 | value: function(el) { |
660 | if(!el.elementModel) { | 660 | if(!el.elementModel) { |
661 | NJUtils.makeElementModel2(el); | 661 | NJUtils.makeModelFromElement(el); |
662 | } | 662 | } |
663 | return el.elementModel.controller["getMatrix"](el); | 663 | return el.elementModel.controller["getMatrix"](el); |
664 | } | 664 | } |
@@ -667,7 +667,7 @@ exports.ElementMediator = Montage.create(NJComponent, { | |||
667 | getPerspectiveDist: { | 667 | getPerspectiveDist: { |
668 | value: function(el) { | 668 | value: function(el) { |
669 | if(!el.elementModel) { | 669 | if(!el.elementModel) { |
670 | NJUtils.makeElementModel2(el); | 670 | NJUtils.makeModelFromElement(el); |
671 | } | 671 | } |
672 | return el.elementModel.controller["getPerspectiveDist"](el); | 672 | return el.elementModel.controller["getPerspectiveDist"](el); |
673 | } | 673 | } |
diff --git a/js/stage/layout.js b/js/stage/layout.js index 56bb70bf..a94dd10c 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js | |||
@@ -53,36 +53,38 @@ exports.Layout = Montage.create(Component, { | |||
53 | this.ctx.lineWidth = this.ctxLineWidth; | 53 | this.ctx.lineWidth = this.ctxLineWidth; |
54 | this.ctx.fillStyle = this.drawFillColor; | 54 | this.ctx.fillStyle = this.drawFillColor; |
55 | 55 | ||
56 | this.eventManager.addEventListener("elementAdded", this, false); | 56 | // this.eventManager.addEventListener("elementAdded", this, false); |
57 | this.eventManager.addEventListener("elementDeleted", this, false); | 57 | this.eventManager.addEventListener("elementDeleted", this, false); |
58 | 58 | ||
59 | this.eventManager.addEventListener("selectionChange", this, false); | 59 | this.eventManager.addEventListener("selectionChange", this, false); |
60 | 60 | ||
61 | this.eventManager.addEventListener("deleteSelection", this, false); | 61 | this.eventManager.addEventListener("deleteSelection", this, false); |
62 | |||
63 | // this.addEventListener("change@stage.appModel.layoutView", this.handleLayoutView, false); | ||
64 | |||
65 | } | 62 | } |
66 | }, | 63 | }, |
67 | 64 | ||
68 | handleLayoutView: { | 65 | handleOpenDocument: { |
69 | value: function() { | 66 | value: function() { |
70 | console.log(this.stage.appModel.layoutView); | 67 | // Initial elements to draw is the entire node list |
68 | this.elementsToDraw = this.application.ninja.documentController.activeDocument._liveNodeList; | ||
69 | |||
70 | // Draw the elements and the 3d info | ||
71 | this.draw(); | ||
72 | this.draw3DInfo(false); | ||
71 | } | 73 | } |
72 | }, | 74 | }, |
73 | 75 | ||
76 | // No need to keep track of the added elements. We now have a live node list of the dom | ||
74 | handleElementAdded: { | 77 | handleElementAdded: { |
75 | value: function(event) { | 78 | value: function(event) { |
76 | this.domTree.push(event.detail); | 79 | // this.domTree.push(event.detail); |
77 | 80 | // this.draw(); | |
78 | this.draw(); | 81 | // this.draw3DInfo(false); |
79 | this.draw3DInfo(false); | ||
80 | } | 82 | } |
81 | }, | 83 | }, |
82 | 84 | ||
83 | handleElementDeleted: { | 85 | handleElementDeleted: { |
84 | value: function(event) { | 86 | value: function(event) { |
85 | this.domTree.splice(this.domTree.indexOf(event.detail), 1); | 87 | //this.domTree.splice(this.domTree.indexOf(event.detail), 1); |
86 | } | 88 | } |
87 | }, | 89 | }, |
88 | 90 | ||
@@ -96,8 +98,13 @@ exports.Layout = Montage.create(Component, { | |||
96 | 98 | ||
97 | handleSelectionChange: { | 99 | handleSelectionChange: { |
98 | value: function(event) { | 100 | value: function(event) { |
99 | this.elementsToDraw = []; | 101 | // Make an array copy of the line node list which is not an array like object |
102 | this.domTree = Array.prototype.slice.call(this.application.ninja.documentController.activeDocument._liveNodeList, 0); | ||
103 | |||
104 | // Clear the elements to draw | ||
105 | this.elementsToDraw.length = 0; | ||
100 | 106 | ||
107 | // Draw the non selected elements | ||
101 | if(!event.detail.isDocument) { | 108 | if(!event.detail.isDocument) { |
102 | var tmp = event.detail.elements.map(function(element){ return element._element}); | 109 | var tmp = event.detail.elements.map(function(element){ return element._element}); |
103 | 110 | ||
@@ -111,13 +118,15 @@ exports.Layout = Montage.create(Component, { | |||
111 | this.draw(); // Not a reel yet :) | 118 |