Skip to content

Commit 988f190

Browse files
sebmarkbagesebmarkbage
committed
Unified the DOM model
Added two new APIs: injectBefore() and empty()
1 parent ad1af16 commit 988f190

22 files changed

+408
-262
lines changed

‎demos/objectmodel/index.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Object Model</title>
5+
</head>
6+
<body>
7+
<script src="../../lib/link/Source/Web/link.js" data-main="objectmodel.js" data-nocache></script>
8+
</body>
9+
</html>

‎demos/objectmodel/objectmodel.js

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
require('../mode');
2+
var ART = require('../../art');
3+
4+
var art = ART.Surface(1000, 600);
5+
6+
var group = ART.Group()
7+
.inject(art);
8+
9+
var text = ART.Text('DOM', 'bold 60px "Arial"')
10+
.move(0, 0)
11+
.fill('red')
12+
.inject(group);
13+
14+
var green = ART.Rectangle(100, 100)
15+
.move(10, 10)
16+
.fill('green')
17+
.inject(group);
18+
19+
var group2 = ART.Group()
20+
.move(10,10)
21+
.rotate(5)
22+
.inject(group);
23+
24+
var blue = ART.Rectangle(100, 100)
25+
.move(10,10)
26+
.rotate(-5)
27+
.fill('blue')
28+
.inject(group2);
29+
30+
function eq(){
31+
var a = arguments[0];
32+
for (var i = 1; i < arguments.length; i++){
33+
var b = arguments[i];
34+
if (a !== b){ debugger; throw new Error('Assertion failed'); }
35+
}
36+
}
37+
38+
function verifyState(){
39+
// art
40+
// group
41+
// text
42+
// green
43+
// group2
44+
// blue
45+
46+
eq(art.firstChild, art.lastChild, group);
47+
eq(group.nextSibling, group.previousSibling, null);
48+
49+
eq(group.firstChild, text);
50+
eq(group.lastChild, group2);
51+
52+
eq(text.previousSibling, group2.nextSibling, null);
53+
54+
eq(text.nextSibling, green);
55+
eq(green.previousSibling, text);
56+
57+
eq(green.nextSibling, group2);
58+
eq(group2.previousSibling, green);
59+
60+
eq(group2.firstChild, group2.lastChild, blue);
61+
eq(blue.nextSibling, blue.previousSibling, null);
62+
63+
eq(blue.parentNode, group2);
64+
eq(text.parentNode, green.parentNode, group2.parentNode, group);
65+
eq(group.parentNode, art);
66+
}
67+
68+
verifyState();
69+
70+
var alt = true;
71+
72+
var timer = setInterval(function(){
73+
alt = !alt;
74+
if (alt)
75+
green.eject();
76+
else {
77+
green.injectBefore(group2);
78+
console.log('injecting' + green.parentNode);
79+
verifyState();
80+
//green.injectBefore(group2);
81+
//group2.injectBefore(green);
82+
}
83+
group2.rotate(1, 50, 50);
84+
}, 500);
85+
86+
group2.subscribe('click', function(){
87+
clearInterval(timer);
88+
group.empty();
89+
art.empty();
90+
blue.inject(art);
91+
});
92+
93+
art.inject(document.body);

‎src/core/container.js ‎src/dom/container.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
1-
var Class = require('./class');
1+
var Class = require('../core/class');
22

33
module.exports = Class({
44

55
grab: function(){
66
for (var i = 0; i < arguments.length; i++) arguments[i].inject(this);
77
return this;
8+
},
9+
10+
empty: function(){
11+
var node;
12+
while (node = this.firstChild) node.eject();
13+
return this;
814
}
915

1016
});

‎src/dom/dummy.js

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
var Class = require('../core/class');
2+
3+
module.exports = Class({
4+
5+
// placement
6+
7+
_resetPlacement: function(){
8+
var container = this.parentNode;
9+
if (container){
10+
var previous = this.previousSibling, next = this.nextSibling;
11+
if (previous){
12+
previous.nextSibling = next;
13+
} else {
14+
container.firstChild = next;
15+
}
16+
if (next){
17+
next.previousSibling = previous;
18+
} else {
19+
container.lastChild = this.previousSibling;
20+
}
21+
}
22+
this.previousSibling = null;
23+
this.nextSibling = null;
24+
this.parentNode = null;
25+
return this;
26+
},
27+
28+
inject: function(container){
29+
this._resetPlacement();
30+
var last = container.lastChild;
31+
if (last){
32+
last.nextSibling = this;
33+
this.previousSibling = last;
34+
} else {
35+
container.firstChild = this;
36+
}
37+
container.lastChild = this;
38+
this.parentNode = container;
39+
this._place();
40+
return this;
41+
},
42+
43+
injectBefore: function(sibling){
44+
this._resetPlacement();
45+
var container = sibling.parentNode;
46+
if (!container) return this;
47+
var previous = sibling.previousSibling;
48+
if (previous){
49+
previous.nextSibling = this;
50+
this.previousSibling = previous;
51+
} else {
52+
container.firstChild = this;
53+
}
54+
sibling.previousSibling = this;
55+
this.nextSibling = sibling;
56+
this.parentNode = container;
57+
this._place();
58+
return this;
59+
},
60+
61+
eject: function(){
62+
this._resetPlacement();
63+
this._place();
64+
return this;
65+
},
66+
67+
_place: function(){},
68+
69+
// events
70+
71+
dispatch: function(event){
72+
var events = this._events,
73+
listeners = events && events[event.type];
74+
if (listeners){
75+
listeners = listeners.slice(0);
76+
for (var i = 0, l = listeners.length; i < l; i++){
77+
var fn = listeners[i], result;
78+
if (typeof fn == 'function')
79+
result = fn.call(this, event);
80+
else
81+
result = fn.handleEvent(event);
82+
if (result === false) event.preventDefault();
83+
}
84+
}
85+
if (this.parentNode && this.parentNode.dispatch){
86+
this.parentNode.dispatch(event);
87+
}
88+
},
89+
90+
subscribe: function(type, fn, bind){
91+
if (typeof type != 'string'){ // listen type / fn with object
92+
var subscriptions = [];
93+
for (var t in type) subscriptions.push(this.subscribe(t, type[t]));
94+
return function(){ // unsubscribe
95+
for (var i = 0, l = subscriptions.length; i < l; i++)
96+
subscriptions[i]();
97+
return this;
98+
};
99+
} else { // listen to one
100+
var bound = typeof fn === 'function' ? fn.bind(bind || this) : fn,
101+
events = this._events || (this._events = {}),
102+
listeners = events[type] || (events[type] = []);
103+
listeners.push(bound);
104+
return function(){
105+
// unsubscribe
106+
for (var i = 0, l = listeners.length; i < l; i++){
107+
if (listeners[i] === bound){
108+
listeners.splice(i, 1);
109+
break;
110+
}
111+
}
112+
}
113+
}
114+
}
115+
116+
});

‎src/dom/element.js ‎src/dom/native.js

+34-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,34 @@
11
var Class = require('../core/class');
22

3+
function elementFrom(node){
4+
if (node.toElement) return node.toElement();
5+
if (node.getDOMNode) return node.getDOMNode();
6+
return node;
7+
}
8+
39
module.exports = Class({
410

5-
// dom
11+
// conventions
12+
13+
toElement: function(){
14+
return this.element;
15+
},
16+
17+
getDOMNode: function(){
18+
return this.toElement();
19+
},
20+
21+
// placement
622

7-
inject: function(element){
8-
if (element.element) element = element.element;
9-
element.appendChild(this.element);
23+
inject: function(container){
24+
(container.containerElement || elementFrom(container))
25+
.appendChild(this.element);
26+
return this;
27+
},
28+
29+
injectBefore: function(sibling){
30+
var element = elementFrom(sibling);
31+
element.parentNode.insertBefore(this.element, element);
1032
return this;
1133
},
1234

@@ -28,7 +50,14 @@ module.exports = Class({
2850
return this;
2951
};
3052
} else { // listen to one
31-
var bound = typeof fn === 'function' ? fn.bind(bind || this) : fn;
53+
if (!bind) bind = this;
54+
var bound;
55+
if (typeof fn === 'function'){
56+
bound = fn.bind ? fn.bind(bind)
57+
: function(){ return fn.apply(bind, arguments); };
58+
} else {
59+
bound = fn;
60+
}
3261
var element = this.element;
3362
if (element.addEventListener){
3463
element.addEventListener(type, bound, false);

‎src/dom/shadow.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
var Class = require('../core/class');
2+
var Dummy = require('./dummy');
3+
var Native = require('./native');
4+
5+
module.exports = Class(Dummy, Native, {
6+
7+
dummy_inject: Dummy.prototype.inject,
8+
dummy_injectBefore: Dummy.prototype.injectBefore,
9+
dummy_eject: Dummy.prototype.eject,
10+
native_inject: Native.prototype.inject,
11+
native_injectBefore: Native.prototype.injectBefore,
12+
native_eject: Native.prototype.eject,
13+
14+
inject: function(container){
15+
this.dummy_inject(container);
16+
this.native_inject(container);
17+
return this;
18+
},
19+
20+
injectBefore: function(sibling){
21+
this.dummy_injectBefore(sibling);
22+
this.native_injectBefore(sibling);
23+
return this;
24+
},
25+
26+
eject: function(){
27+
this.dummy_eject();
28+
this.native_eject();
29+
return this;
30+
}
31+
32+
});

‎src/modes/canvas/group.js

+13-8
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
var Class = require('../../core/class');
2-
var Container = require('../../core/container');
2+
var Container = require('../../dom/container');
33
var Node = require('./node');
44

55
module.exports = Class(Node, Container, {
66

77
initialize: function(width, height){
88
this.width = width;
99
this.height = height;
10-
this.children = [];
1110
},
1211

1312
localHitTest: function(x, y){
14-
var children = this.children, i = children.length;
15-
while (i--){
16-
var hit = children[i].hitTest(x, y);
13+
var i = 0;
14+
var node = this.lastChild;
15+
while (node){
16+
var hit = node.hitTest(x, y);
1717
if (hit) return hit;
18+
node = node.previousSibling;
19+
if (i++ > 100){ debugger; throw new Error('recursion'); }
1820
}
1921
return null;
2022
},
@@ -32,9 +34,12 @@ module.exports = Class(Node, Container, {
3234
yx = t * this.xx + yy * this.yx;
3335
yy = t * this.xy + yy * this.yy;
3436

35-
var children = this.children;
36-
for (var i = 0, l = children.length; i < l; i++){
37-
children[i].renderTo(context, xx, yx, xy, yy, x, y);
37+
var i = 0;
38+
var node = this.firstChild;
39+
while (node){
40+
node.renderTo(context, xx, yx, xy, yy, x, y);
41+
node = node.nextSibling;
42+
if (i++ > 100){ debugger; throw new Error('recursion'); }
3843
}
3944
}
4045

0 commit comments

Comments
 (0)