Skip to content

Commit 660c868

Browse files
jordanjordan
jordan
authored and
jordan
committed
Fax Initial
0 parents  commit 660c868

28 files changed

+4537
-0
lines changed

‎DemoApp/DemoApp.js‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
var F = require('Fax'), FaxUi = require('FaxUi'),
2+
LayoutDesigner = require('LayoutDesigner'),
3+
FWidgets = require('FWidgets'),
4+
ControlPanel = require('ControlPanel'),
5+
LayoutElements = require('LayoutElements'),
6+
DemoApp = {};
7+
8+
/**
9+
* Allows declarative tail construction of all Components that are in the
10+
* exports of those modules: x = {innerHtml: 'dog'}.Div() as opposed to x =
11+
* FaxUi.Div({innerHtml: 'dog'})
12+
* Depending on the use case, one form or the other will be more readable, but
13+
* in either case the FaxOptimizer (server side code transformer) ensures that
14+
* this is transformed into high performance function calls. If 'using' without
15+
* the help of server side transformers, this reduces to appending to
16+
* Object.prototype, which slows down forin loops (3x program slow down). This
17+
* is optional - use the other form if you like it better.
18+
*/
19+
F.using(FaxUi, DemoApp, LayoutDesigner, ControlPanel, FWidgets, LayoutElements);
20+
21+
var CONSTS = {
22+
drawingOffsetL: 82, // combination of other numbers
23+
drawingOffsetT: 39
24+
};
25+
26+
/**
27+
* DemoApp.DemoAppContent: The main content for this demo application.
28+
* Contains a control panel for selecting tools and editing attributes of
29+
* shapes, and a drawing canvas to place and manipulate shapes within.
30+
*/
31+
DemoApp.DemoAppContent = {
32+
33+
/**
34+
* Defines the "projection" of the model. A projection of a model, is a
35+
* mapping from the model (state of this component) to:
36+
* 1. Visual appearance of this component.
37+
* 2. Any other children components that themselves have a visual appearance.
38+
* This method defines an invariant that the Fax system ensures is held true.
39+
* If you say that you have a child button who's text is this.model.buttonText,
40+
* then if you update your model's button text, the child button's text will
41+
* automatically be updated, but there are constructs that need to be
42+
* allocated in order to make this happen. Just write pure javascript such as:
43+
* project: function() {
44+
* return {
45+
* innerHtml: this.model.buttonText
46+
* }.Button();
47+
* }
48+
*/
49+
project : function() {
50+
var ths = this;
51+
return {
52+
l: 0, t: 0, b: 0, r: 0,
53+
clssSet: {noSelect: true, appContent: true},
54+
designerPanel: {
55+
clssSet: {shadowy: true},
56+
l: 30, t: 30, r: 250, b: 30,
57+
content: {
58+
onPaint: this.onPaint.bind(this),
59+
selectedTool: ths.model.selectedTool,
60+
shapes: ths.model.shapes,
61+
selectedShapeId: this.model.selectedShapeId,
62+
onMouseDownShapeId: this.onMouseDownShapeId.bind(this),
63+
onDragSignalShapeId: this.onDragSignalShapeId.bind(this),
64+
onDragCompleteShapeId: this.onDragCompleteShapeId.bind(this),
65+
onResizeSignalShapeId: this.onResizeSignalShapeId.bind(this),
66+
onResizeCompleteShapeId: this.onResizeCompleteShapeId.bind(this)
67+
}.Designer()
68+
}.EmbeddedBorderView(),
69+
controlPanel: {
70+
clssSet: {shadowy: true},
71+
l: 'auto', r: 30, t: 30, w: 200, b: 30,
72+
content: {
73+
onToolChange: function(newTool) {
74+
ths.updateModel({selectedTool: newTool});
75+
},
76+
selectedTool: ths.model.selectedTool,
77+
selectedShape: ths.model.shapes[ths.model.selectedShapeId],
78+
onAttributeChange: function(attributeName, newValStr) {
79+
if(ths.model.selectedShapeId) {
80+
var val = isNaN(parseInt(newValStr, '10')) ? newValStr : parseInt(newValStr, 10);
81+
ths.model.shapes[ths.model.selectedShapeId][attributeName] = val;
82+
ths.updateModel({});
83+
}
84+
}
85+
}.ToolBox()
86+
}.EmbeddedBorderView()
87+
}.FView();
88+
},
89+
90+
/** Initialize the model. */
91+
initModel: {
92+
selectedTool: 'pointerTool',
93+
selectedShapeId: 'box1',
94+
shapes: {
95+
box1: { name: 'box1', l: 0, t: 100, w: 100, h: 100,
96+
drgX: 0, drgY:0, currentlyChanging: {}},
97+
box2: { name: 'box2', l: 50,t: 110, w: 100, h: 100,
98+
drgX: 0, drgY:0, currentlyChanging: {}}
99+
}
100+
},
101+
102+
/** When a paint callback occurs on the canvas. */
103+
onPaint: function(abstractEvent, mapLeftOffset, mapTopOffset) {
104+
var updateBlock = {shapes: {}};
105+
106+
updateBlock.shapes[''+Math.random()] = {
107+
name: 'block',
108+
l: abstractEvent.data.globalX - CONSTS.drawingOffsetL - mapLeftOffset,
109+
t: abstractEvent.data.globalY - CONSTS.drawingOffsetT - mapTopOffset,
110+
w: 100, h: 100, drgX: 0, drgY:0, currentlyChanging: {}
111+
};
112+
this.updateModelDeep(updateBlock);
113+
},
114+
115+
/** * User clicked on a particular shape. */
116+
onMouseDownShapeId: function(shapeId) {
117+
this.updateModel({selectedShapeId: shapeId});
118+
},
119+
120+
/**
121+
* Continually updated dragging signal.
122+
*/
123+
onDragSignalShapeId: function(shapeId, plan) {
124+
var updateBlock = { shapes: {} };
125+
updateBlock.shapes[shapeId] = {
126+
currentlyChanging: plan
127+
};
128+
this.updateModelDeep(updateBlock);
129+
},
130+
131+
/**
132+
* Done dragging a particular shape. Make pending changes complete.
133+
*/
134+
onDragCompleteShapeId: function(shapeId) {
135+
var obj = this.model.shapes[shapeId], updateBlock = { shapes: {} };
136+
updateBlock.shapes[shapeId] = {
137+
l: obj.l + obj.currentlyChanging.drgX,
138+
t: obj.t + obj.currentlyChanging.drgY,
139+
currentlyChanging: { drgX: 0, drgY: 0 }
140+
};
141+
this.updateModelDeep(updateBlock);
142+
},
143+
144+
/**
145+
* Continually updated resizing signal.
146+
*/
147+
onResizeSignalShapeId: function(shapeId, plan) {
148+
this.model.shapes[shapeId].currentlyChanging = plan;
149+
this.updateModel({});
150+
},
151+
152+
/**
153+
* Done resizing a particular shape. Make pending changes complete.
154+
*/
155+
onResizeCompleteShapeId: function(shapeId) {
156+
var obj = this.model.shapes[shapeId], updateBlock = {shapes: {}};
157+
updateBlock.shapes[shapeId] = {
158+
w : obj.w + (obj.currentlyChanging.right || 0) +
159+
(-1*obj.currentlyChanging.left || 0),
160+
l: obj.l + (obj.currentlyChanging.left || 0),
161+
h: obj.h + (-1*obj.currentlyChanging.top || 0) +
162+
(obj.currentlyChanging.bottom || 0),
163+
t: obj.t + (obj.currentlyChanging.top || 0),
164+
currentlyChanging : {}
165+
};
166+
this.model.shapes[shapeId].currentlyChanging = null;
167+
this.updateModelDeep(updateBlock);
168+
}
169+
170+
};
171+
172+
/**
173+
* DemoApp.MainDemoApp:
174+
*/
175+
DemoApp.MainDemoApp = {
176+
initModel: {
177+
selectedSection: 'settings'
178+
},
179+
project : function() {
180+
return {
181+
appContent: { }.DemoAppContent()
182+
}.FView();
183+
}
184+
};
185+
186+
module.exports = F.ComponentizeAll(DemoApp);
187+
188+
module.exports.styleExports = {
189+
'#appMount': {
190+
backgroundImage: 'url("/images/lightWood.png")'
191+
},
192+
shadowy: {
193+
boxShadow: FaxUi.stylers.boxShadowValue(0, 15, 18, 0,0,0, 0.3)
194+
},
195+
appContent: {
196+
position: 'absolute', left: 0, right: 0, top:0, bottom: 0
197+
}
198+
};

‎DemoApp/package.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name" : "DemoApp",
3+
"description" : "Declarative Components",
4+
"url" : "http://none.org",
5+
"keywords" : ["fax", "Fax", "DemoApp", "ui", "rendering", "browser"],
6+
"author" : "Jordo <jordofx@gmail.com>",
7+
"contributors" : [],
8+
"version" : "0.0.1",
9+
"main" : "./DemoApp",
10+
"dependencies" : {"FaxUi": "0.0.1", "Fax": "0.0.1"},
11+
"engines" : { "node": ">=0.4.0" }
12+
}

0 commit comments

Comments
 (0)