├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── analysis_options.yaml
├── lib
    ├── html_renderer.dart
    ├── html_renderer
    │   └── html_renderer.dart
    ├── nuts.dart
    ├── styles.css
    └── view
    │   ├── containers.dart
    │   ├── editable.dart
    │   ├── event.dart
    │   ├── measure.dart
    │   ├── table.dart
    │   ├── text.dart
    │   └── view.dart
├── pubspec.yaml
└── web
    ├── binding
        ├── index.html
        ├── main.dart
        └── styles.css
    ├── favicon.ico
    └── query
        ├── index.html
        ├── main.dart
        └── styles.css


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Files and directories created by pub
 2 | .dart_tool/
 3 | .packages
 4 | .pub/
 5 | build/
 6 | # Remove the following pattern if you wish to check in your lock file
 7 | pubspec.lock
 8 | 
 9 | # Directory created by dartdoc
10 | doc/api/
11 | 
12 | .idea
13 | *.iml


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## 1.0.0
2 | 
3 | - Initial version, created by Stagehand
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | BSD 3-Clause License
 2 | 
 3 | Copyright (c) 2017, Ravi Teja Gudapati <tejainece@gmail.com>
 4 | All rights reserved.
 5 | 
 6 | Redistribution and use in source and binary forms, with or without
 7 | modification, are permitted provided that the following conditions are met:
 8 | 
 9 | * Redistributions of source code must retain the above copyright notice, this
10 |   list of conditions and the following disclaimer.
11 | 
12 | * Redistributions in binary form must reproduce the above copyright notice,
13 |   this list of conditions and the following disclaimer in the documentation
14 |   and/or other materials provided with the distribution.
15 | 
16 | * Neither the name of the copyright holder nor the names of its
17 |   contributors may be used to endorse or promote products derived from
18 |   this software without specific prior written permission.
19 | 
20 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
21 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
22 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
23 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
24 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
25 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
26 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
27 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
28 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
29 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nuts
 2 | 
 3 | Nuts and bolts for building cross-platform UI (HTML, Flutter, CLI) using Dart. Also screw frameworks (React, Vue, 
 4 | Angular).
 5 | 
 6 | ## Example
 7 | 
 8 | ```dart
 9 | class Counter implements Component {
10 |   @override
11 |   String key;
12 | 
13 |   int count = 0;
14 | 
15 |   @override
16 |   View makeView() {
17 |     Box ret;
18 |     ret = Box(children: [
19 |       TextField('Count: $count', key: 'info'),
20 |       HBox(children: [
21 |         Button(
22 |             text: 'Increment',
23 |             onClick: () {
24 |               ret.getByKey<TextField>('info').text = 'Count: ${++count}';
25 |             }),
26 |         Button(
27 |             text: 'Decrement',
28 |             onClick: () {
29 |               ret.getByKey<TextField>('info').text = 'Count: ${--count}';
30 |             }),
31 |       ]),
32 |     ]);
33 |     return ret;
34 |   }
35 | }
36 | 
37 | void main() {
38 |   querySelector('#output').append(defaultRenderers.render(Counter()));
39 | }
40 | ```


--------------------------------------------------------------------------------
/analysis_options.yaml:
--------------------------------------------------------------------------------
 1 | analyzer:
 2 | #   exclude:
 3 | #     - path/to/excluded/files/**
 4 | 
 5 | # Lint rules and documentation, see http://dart-lang.github.io/linter/lints
 6 | linter:
 7 |   rules:
 8 |     - cancel_subscriptions
 9 |     - hash_and_equals
10 |     - iterable_contains_unrelated_type
11 |     - list_remove_unrelated_type
12 |     - test_types_in_equals
13 |     - unrelated_type_equality_checks
14 |     - valid_regexps
15 | 


--------------------------------------------------------------------------------
/lib/html_renderer.dart:
--------------------------------------------------------------------------------
1 | export 'html_renderer/html_renderer.dart';
2 | 


--------------------------------------------------------------------------------
/lib/html_renderer/html_renderer.dart:
--------------------------------------------------------------------------------
  1 | import 'dart:async';
  2 | import 'dart:html';
  3 | import 'package:nuts/nuts.dart';
  4 | 
  5 | final HtmlRenderer defaultRenderers = new HtmlRenderer()
  6 |   ..register<Box>(boxRenderer)
  7 |   ..register<HBox>(hBoxRenderer)
  8 |   ..register<TextField>(textFieldRenderer)
  9 |   ..register<LabeledField>(labeledFieldRenderer)
 10 |   ..register<VLabeledField>(vLabeledFieldRenderer)
 11 |   ..register<Button>(buttonRenderer)
 12 |   ..register<IntField>(intFieldRenderer)
 13 |   ..register<Table>(tableRenderer)
 14 |   ..register<MultilineEdit>(multilineEditRenderer)
 15 |   ..register<TextEdit>(textEditRenderer)
 16 |   ..register<LabeledEdit>(labeledEditRenderer)
 17 |   ..register<IntEdit>(intEditRenderer)
 18 |   ..register<Form>(formRenderer)
 19 |   ..register<VariableView>(variableViewRenderer)
 20 |   ..register<Absolute>(absoluteRenderer)
 21 |   ..register<Relative>(relativeRenderer)
 22 |   ..register<Tin>(tinRenderer);
 23 | 
 24 | void handleWidget(final Element el, final View view) {
 25 |   if (view is Widget) {
 26 |     el.classes.addAll(view.classes);
 27 |     var classesSub = view.classes.onChange.listen((e) {
 28 |       if (e.op == SetChangeOp.add) {
 29 |         el.classes.add(e.element);
 30 |       } else {
 31 |         el.classes.remove(e.element);
 32 |       }
 33 |     });
 34 | 
 35 |     var leftSub = view.leftProperty.values.listen((dynamic left) {
 36 |       if (left is Distance)
 37 |         el.style.left = left.toString();
 38 |       else if (left is num) el.style.left = left.toString() + 'px';
 39 |     });
 40 |     // TODO view.leftProperty.getterProxy = () => el.offsetLeft;
 41 | 
 42 |     var topSub = view.topProperty.values.listen((dynamic top) {
 43 |       if (top is Distance)
 44 |         el.style.top = top.toString();
 45 |       else if (top is num) el.style.top = top.toString() + 'px';
 46 |     });
 47 |     // TODO view.topProperty.getterProxy = () => FixedDistance(el.offsetTop);
 48 | 
 49 |     var rightSub = view.rightProperty.values.listen((dynamic right) {
 50 |       if (right is Distance)
 51 |         el.style.right = right.toString();
 52 |       else if (right is num) el.style.right = right.toString() + 'px';
 53 |     });
 54 |     // TODO view.rightProperty.getterProxy = () => FixedDistance(el.offsetRight);
 55 | 
 56 |     var bottomSub = view.bottomProperty.values.listen((dynamic bottom) {
 57 |       if (bottom is Distance)
 58 |         el.style.bottom = bottom.toString();
 59 |       else if (bottom is num) el.style.bottom = bottom.toString() + 'px';
 60 |     });
 61 |     // TODO view.bottomProperty.getterProxy = () => FixedDistance(el.offsetBottom);
 62 | 
 63 |     var widthSub = view.widthProperty.values.listen((dynamic width) {
 64 |       if (width is FlexSize) {
 65 |         el.style.flex = width.toString();
 66 |       } else if (width is Distance) {
 67 |         el.style.width = width.toString();
 68 |       } else if (width is num) {
 69 |         el.style.width = width.toString() + 'px';
 70 |       }
 71 |     });
 72 |     view.widthProperty.getterProxy = () => FixedDistance(el.offsetWidth);
 73 | 
 74 |     var minWidthSub = view.minWidthProperty.values.listen((dynamic width) {
 75 |       if (width is Distance)
 76 |         el.style.minWidth = width.toString();
 77 |       else if (width is num) el.style.minWidth = width.toString() + 'px';
 78 |     });
 79 | 
 80 |     var maxWidthSub = view.maxWidthProperty.values.listen((Distance width) {
 81 |       if (width != null) el.style.maxWidth = width.toString();
 82 |     });
 83 | 
 84 |     var heightSub = view.heightProperty.values.listen((dynamic height) {
 85 |       if (height is FlexSize) {
 86 |         el.style.flex = height.toString();
 87 |       } else if (height is Distance) {
 88 |         el.style.height = height.toString();
 89 |       } else if (height is num) {
 90 |         el.style.height = height.toString() + 'px';
 91 |       }
 92 |     });
 93 |     view.heightProperty.getterProxy = () => FixedDistance(el.offsetHeight);
 94 | 
 95 |     var minHeightSub = view.minHeightProperty.values.listen((dynamic height) {
 96 |       if (height is Distance) el.style.minHeight = height.toString();
 97 |       else if(height is num) el.style.minHeight = height.toString() + 'px';
 98 |     });
 99 | 
100 |     var maxHeightSub = view.maxHeightProperty.values.listen((Distance height) {
101 |       if (height != null) el.style.maxHeight = height.toString();
102 |     });
103 | 
104 |     var bgColorSub = view.backgroundColorProperty.values.listen((String value) {
105 |       el.style.backgroundColor = value;
106 |     });
107 |     view.backgroundColorProperty.getterProxy = () => el.style.backgroundColor;
108 | 
109 |     var bgImageSub = view.backgroundImageProperty.values.listen((String value) {
110 |       el.style.backgroundImage = value;
111 |     });
112 |     view.backgroundImageProperty.getterProxy = () => el.style.backgroundImage;
113 | 
114 |     var colorSub = view.colorProperty.values.listen((String value) {
115 |       el.style.color = value;
116 |     });
117 |     view.colorProperty.getterProxy = () => el.style.color;
118 | 
119 |     var paddingLeftSub = view.paddingLeftProperty.values.listen((Distance d) {
120 |       if (d != null) el.style.paddingLeft = d.toString();
121 |     });
122 |     // TODO padding Left getterProxy
123 | 
124 |     var paddingTopSub = view.paddingTopProperty.values.listen((Distance d) {
125 |       if (d != null) el.style.paddingTop = d.toString();
126 |     });
127 |     // TODO padding Top getterProxy
128 | 
129 |     var paddingRightSub = view.paddingRightProperty.values.listen((Distance d) {
130 |       if (d != null) el.style.paddingRight = d.toString();
131 |     });
132 |     // TODO padding Right getterProxy
133 | 
134 |     var paddingBottomSub =
135 |         view.paddingBottomProperty.values.listen((Distance d) {
136 |       if (d != null) el.style.paddingBottom = d.toString();
137 |     });
138 |     // TODO padding Bottom getterProxy
139 | 
140 |     var marginLeftSub = view.marginLeftProperty.values.listen((Distance d) {
141 |       if (d != null) el.style.marginLeft = d.toString();
142 |     });
143 |     // TODO margin Left getterProxy
144 | 
145 |     var marginTopSub = view.marginTopProperty.values.listen((Distance d) {
146 |       if (d != null) el.style.marginTop = d.toString();
147 |     });
148 |     // TODO margin Top getterProxy
149 | 
150 |     var marginRightSub = view.marginRightProperty.values.listen((Distance d) {
151 |       if (d != null) el.style.marginRight = d.toString();
152 |     });
153 |     // TODO margin Right getterProxy
154 | 
155 |     var marginBottomSub = view.marginBottomProperty.values.listen((Distance d) {
156 |       if (d != null) el.style.marginBottom = d.toString();
157 |     });
158 |     // TODO margin Bottom getterProxy
159 | 
160 |     var boldSub = view.boldProperty.values.listen((bool v) {
161 |       if (v != null) el.style.fontWeight = v ? 'bold' : 'normal';
162 |     });
163 |     // TODO bold property
164 | 
165 |     var fontFamilySub = view.fontFamilyProperty.values.listen((String v) {
166 |       if (v != null) el.style.fontFamily = v;
167 |     });
168 |     // TODO fontFamily property
169 | 
170 |     var fontSizeSub = view.fontSizeProperty.values.listen((Distance v) {
171 |       if (v != null) el.style.fontSize = v.toString();
172 |     });
173 |     // TODO fontFamily property
174 | 
175 |     view.onClick.emitStream(el.onClick.map((e) => ClickEvent(view, e)));
176 |     view.onMouseDown.emitStream(el.onMouseDown.map((e) => ClickEvent(view, e)));
177 |     view.onMouseMove.emitStream(el.onMouseMove.map((e) => ClickEvent(view, e)));
178 |     view.onMouseUp.emitStream(el.onMouseUp.map((e) => ClickEvent(view, e)));
179 | 
180 |     if (view is RemoveProcessor) {
181 |       (view as RemoveProcessor).onRemoved.listen((_) {
182 |         leftSub.cancel();
183 |         topSub.cancel();
184 |         rightSub.cancel();
185 |         bottomSub.cancel();
186 | 
187 |         widthSub.cancel();
188 |         heightSub.cancel();
189 | 
190 |         maxWidthSub.cancel();
191 |         minWidthSub.cancel();
192 | 
193 |         // TODO
194 |         classesSub.cancel();
195 |         leftSub.cancel();
196 |       });
197 |     }
198 |   }
199 | }
200 | 
201 | Element variableViewRenderer(final field, Renderer<Element> renderers) {
202 |   if (field is VariableView) {
203 |     dynamic oldData = field.initial;
204 |     View oldV = field.makeView(oldData);
205 |     Element el = renderers.render(oldV);
206 |     Future f;
207 |     bool removed = false;
208 |     StreamSubscription s = field.rebuildOn.listen((data) async {
209 |       if (oldData == data) return;
210 |       oldData = data;
211 |       final c = Completer();
212 |       if (f != null) {
213 |         Future oldF = f;
214 |         f = oldF.then((_) => c.future);
215 |         await oldF;
216 |       } else {
217 |         f = c.future;
218 |       }
219 |       View newV = field.makeView(data);
220 |       Timer.periodic(Duration(microseconds: 50), (t) {
221 |         if (removed) {
222 |           t.cancel();
223 |           emitRemoved(newV);
224 |           return;
225 |         }
226 |         if (!document.body.contains(el)) return;
227 |         t.cancel();
228 |         Element newEl = renderers.render(newV);
229 |         el.replaceWith(newEl);
230 |         el = newEl;
231 |         emitRemoved(oldV);
232 |         oldV = newV;
233 |         c.complete();
234 |       });
235 |     });
236 |     field.onRemoved.listen(() async {
237 |       removed = true;
238 |       s.cancel();
239 |       emitRemoved(oldV);
240 |       if (f != null) await f;
241 |     });
242 |     return el;
243 |   }
244 |   throw new Exception(
245 |       'variableViewRenderer cannot render ${field.runtimeType}');
246 | }
247 | 
248 | Element multilineEditRenderer(final field, Renderer<Element> renderers) {
249 |   if (field is MultilineEdit) {
250 |     var ret = new TextAreaElement()..classes.add('multiline');
251 |     if (field.placeholder != null)
252 |       ret.placeholder = field.placeholder; // TODO rx
253 |     field.valueProperty.listen((v) => ret.value = v ?? '');
254 |     field.valueProperty.getterProxy = () => ret.value;
255 |     ret.onBlur.listen((_) {
256 |       print('here');
257 |       field.onCommit.emitOne(ValueCommitEvent<String>(field, ret.value));
258 |     });
259 |     ret.onKeyPress.listen((KeyboardEvent e) {
260 |       if (e.shiftKey && e.keyCode == KeyCode.ENTER) {
261 |         field.onCommit.emitOne(ValueCommitEvent<String>(field, ret.value));
262 |         e.preventDefault();
263 |       }
264 |     });
265 |     if (field.shouldEscape) {
266 |       String valueWhenFocus;
267 |       ret.onFocus.listen((_) {
268 |         valueWhenFocus = field.value;
269 |       });
270 |       ret.onKeyDown.listen((KeyboardEvent e) {
271 |         if (e.keyCode == KeyCode.ESC) {
272 |           ret.value = valueWhenFocus ?? '';
273 |           ret.blur();
274 |         }
275 |       });
276 |     }
277 |     handleWidget(ret, field);
278 |     return ret;
279 |   }
280 |   throw new Exception('textEditRenderer cannot render ${field.runtimeType}');
281 | }
282 | 
283 | Element textEditRenderer(final field, Renderer<Element> renderers) {
284 |   if (field is TextEdit) {
285 |     var ret = new TextInputElement()..classes.add('textinput');
286 |     if (field.placeholder != null)
287 |       ret.placeholder = field.placeholder; // TODO rx
288 |     field.valueProperty.listen((v) => ret.value = v ?? '');
289 |     field.valueProperty.getterProxy = () => ret.value;
290 |     ret.onBlur.listen((_) {
291 |       field.onCommit.emitOne(ValueCommitEvent<String>(field, ret.value));
292 |     });
293 |     ret.onKeyPress.listen((KeyboardEvent e) {
294 |       if (e.keyCode == KeyCode.ENTER) {
295 |         field.onCommit.emitOne(ValueCommitEvent<String>(field, ret.value));
296 |       }
297 |     });
298 |     if (field.shouldEscape) {
299 |       String valueWhenFocus;
300 |       ret.onFocus.listen((_) {
301 |         valueWhenFocus = field.value;
302 |       });
303 |       ret.onKeyDown.listen((KeyboardEvent e) {
304 |         if (e.keyCode == KeyCode.ESC) {
305 |           ret.value = valueWhenFocus ?? '';
306 |           ret.blur();
307 |         }
308 |       });
309 |     }
310 |     handleWidget(ret, field);
311 |     return ret;
312 |   }
313 |   throw new Exception('textEditRenderer cannot render ${field.runtimeType}');
314 | }
315 | 
316 | Element intEditRenderer(final field, Renderer<Element> renderers) {
317 |   if (field is IntEdit) {
318 |     var ret = new TextInputElement()..classes.add('textinput');
319 |     if (field.placeholder != null)
320 |       ret.placeholder = field.placeholder; // TODO rx
321 |     field.valueProperty.listen((v) => ret.value = v?.toString() ?? '');
322 |     field.valueProperty.getterProxy = () => int.tryParse(ret.value) ?? null;
323 |     ret.onBlur.listen((_) {
324 |       field.onCommit.emitOne(ValueCommitEvent<int>(field, field.value));
325 |     });
326 |     ret.onKeyPress.listen((KeyboardEvent e) {
327 |       if (e.keyCode == KeyCode.ENTER) {
328 |         field.onCommit.emitOne(ValueCommitEvent<int>(field, field.value));
329 |       }
330 |     });
331 |     if (field.shouldEscape) {
332 |       int valueWhenFocus;
333 |       ret.onFocus.listen((_) {
334 |         valueWhenFocus = field.value;
335 |       });
336 |       ret.onKeyDown.listen((KeyboardEvent e) {
337 |         if (e.keyCode == KeyCode.ESC) {
338 |           ret.value = valueWhenFocus?.toString() ?? '';
339 |           ret.blur();
340 |         }
341 |       });
342 |     }
343 |     handleWidget(ret, field);
344 |     return ret;
345 |   }
346 |   throw new Exception('intEditRenderer cannot render ${field.runtimeType}');
347 | }
348 | 
349 | Element labeledEditRenderer(final field, Renderer<Element> renderers) {
350 |   if (field is LabeledEdit) {
351 |     var ret = renderers.render(HBox(children: [
352 |       field.labelField,
353 |       field.labelled,
354 |     ]))
355 |       ..classes.addAll(['labeled', 'labeled-textinput']);
356 |     handleWidget(ret, field);
357 |     return ret;
358 |   }
359 |   throw new Exception('labeledEditRenderer cannot render ${field.runtimeType}');
360 | }
361 | 
362 | Element textFieldRenderer(final field, _) {
363 |   if (field is TextField) {
364 |     var ret = new DivElement()
365 |       ..classes.add('textfield')
366 |       ..text = field.text;
367 |     field.textProperty.values.listen((v) {
368 |       ret.text = v ?? '';
369 |     });
370 |     field.textProperty.getterProxy = () => ret.text;
371 |     handleWidget(ret, field);
372 |     return ret;
373 |   }
374 |   throw new Exception('textFieldRenderer cannot render ${field.runtimeType}');
375 | }
376 | 
377 | Element intFieldRenderer(final field, _) {
378 |   if (field is IntField) {
379 |     var ret = new DivElement()
380 |       ..classes.add('textfield')
381 |       ..text = field.text?.toString() ?? '';
382 |     field.textProperty.values.listen((v) => ret.text = v?.toString() ?? '');
383 |     field.textProperty.getterProxy = () => int.tryParse(ret.text);
384 |     handleWidget(ret, field);
385 |     return ret;
386 |   }
387 |   throw new Exception('intFieldRenderer cannot render ${field.runtimeType}');
388 | }
389 | 
390 | Element labeledFieldRenderer(final field, Renderer<Element> renderers) {
391 |   if (field is LabeledField) {
392 |     var ret = renderers.render(HBox(children: [
393 |       field.labelField,
394 |       field.labelled,
395 |     ]))
396 |       ..classes.addAll(['labeled', 'labeled-textfield']);
397 |     handleWidget(ret, field);
398 |     return ret;
399 |   }
400 |   throw new Exception(
401 |       'labeledFieldRenderer cannot render ${field.runtimeType}');
402 | }
403 | 
404 | Element vLabeledFieldRenderer(final field, Renderer<Element> renderers) {
405 |   if (field is LabeledField) {
406 |     var ret = renderers.render(Box(children: [
407 |       field.labelField,
408 |       field.labelled,
409 |     ]))
410 |       ..classes.addAll(['vlabeled', 'vlabeled-textfield']);
411 |     handleWidget(ret, field);
412 |     return ret;
413 |   }
414 |   throw new Exception(
415 |       'vLabeledFieldRenderer cannot render ${field.runtimeType}');
416 | }
417 | 
418 | String vAlignToCssJustifyContent(VAlign align) {
419 |   switch (align) {
420 |     case VAlign.top:
421 |       return 'start';
422 |     case VAlign.middle:
423 |       return 'center';
424 |     case VAlign.bottom:
425 |       return 'end';
426 |     default:
427 |       return 'inherit';
428 |   }
429 | }
430 | 
431 | String hAlignToCssAlignItems(HAlign align) {
432 |   switch (align) {
433 |     case HAlign.left:
434 |       return 'left';
435 |     case HAlign.center:
436 |       return 'center';
437 |     case HAlign.right:
438 |       return 'right';
439 |     case HAlign.right:
440 |       return 'right';
441 |     default:
442 |       return 'inherit';
443 |   }
444 | }
445 | 
446 | Element boxRenderer(final field, Renderer<Element> renderers) {
447 |   if (field is Box) {
448 |     var ret = new DivElement()..classes.add('box');
449 |     if (field.vAlign != null)
450 |       ret.style.justifyContent = vAlignToCssJustifyContent(field.vAlign);
451 |     if (field.hAlign != null)
452 |       ret.style.alignItems = hAlignToCssAlignItems(field.hAlign);
453 |     for (View child in field.children)
454 |       ret.children.add(renderers.render(child));
455 |     field.children.onChange.listen((e) {
456 |       if (e.op == ListChangeOp.add)
457 |         ret.children.insert(e.pos, renderers.render(e.element));
458 |       else if (e.op == ListChangeOp.set)
459 |         ret.children[e.pos] = renderers.render(e.element);
460 |       else if (e.op == ListChangeOp.remove)
461 |         ret.children.removeAt(e.pos);
462 |       else
463 |         ret.children.clear();
464 |     });
465 |     handleWidget(ret, field);
466 |     return ret;
467 |   }
468 |   throw new Exception('boxRenderer cannot render ${field.runtimeType}');
469 | }
470 | 
471 | String vAlignToCssAlignItems(VAlign align) {
472 |   switch (align) {
473 |     case VAlign.top:
474 |       return 'start';
475 |     case VAlign.middle:
476 |       return 'center';
477 |     case VAlign.bottom:
478 |       return 'end';
479 |     default:
480 |       return 'inherit';
481 |   }
482 | }
483 | 
484 | String hAlignToCssJustifyContent(HAlign align) {
485 |   switch (align) {
486 |     case HAlign.left:
487 |       return 'left';
488 |     case HAlign.center:
489 |       return 'center';
490 |     case HAlign.right:
491 |       return 'right';
492 |     case HAlign.right:
493 |       return 'right';
494 |     default:
495 |       return 'inherit';
496 |   }
497 | }
498 | 
499 | Element hBoxRenderer(final field, Renderer<Element> renderers) {
500 |   if (field is HBox) {
501 |     var ret = new DivElement()..classes.add('hbox');
502 |     if (field.vAlign != null)
503 |       ret.style.alignItems = vAlignToCssAlignItems(field.vAlign);
504 |     if (field.hAlign != null)
505 |       ret.style.justifyContent = hAlignToCssJustifyContent(field.hAlign);
506 |     for (View child in field.children)
507 |       ret.children.add(renderers.render(child));
508 |     field.children.onChange.listen((e) {
509 |       if (e.op == ListChangeOp.add)
510 |         ret.children.insert(e.pos, renderers.render(e.element));
511 |       else if (e.op == ListChangeOp.set)
512 |         ret.children[e.pos] = renderers.render(e.element);
513 |       else if (e.op == ListChangeOp.remove)
514 |         ret.children.removeAt(e.pos);
515 |       else
516 |         ret.children.clear();
517 |     });
518 |     handleWidget(ret, field);
519 |     return ret;
520 |   }
521 |   throw new Exception('hBoxRenderer cannot render ${field.runtimeType}');
522 | }
523 | 
524 | Element absoluteRenderer(final field, Renderer<Element> renderers) {
525 |   if (field is Absolute) {
526 |     var ret = new DivElement()..classes.add('absolute-layout');
527 |     for (View child in field.children)
528 |       ret.children.add(renderers.render(child));
529 |     field.children.onChange.listen((e) {
530 |       if (e.op == ListChangeOp.add)
531 |         ret.children.insert(e.pos, renderers.render(e.element));
532 |       else if (e.op == ListChangeOp.set)
533 |         ret.children[e.pos] = renderers.render(e.element);
534 |       else if (e.op == ListChangeOp.remove)
535 |         ret.children.removeAt(e.pos);
536 |       else
537 |         ret.children.clear();
538 |     });
539 |     handleWidget(ret, field);
540 |     return ret;
541 |   }
542 |   throw new Exception('absoluteRenderer cannot render ${field.runtimeType}');
543 | }
544 | 
545 | Element relativeRenderer(final field, Renderer<Element> renderers) {
546 |   if (field is Relative) {
547 |     var ret = new DivElement()..classes.add('relative-layout');
548 |     for (View child in field.children)
549 |       ret.children.add(renderers.render(child));
550 |     field.children.onChange.listen((e) {
551 |       if (e.op == ListChangeOp.add)
552 |         ret.children.insert(e.pos, renderers.render(e.element));
553 |       else if (e.op == ListChangeOp.set)
554 |         ret.children[e.pos] = renderers.render(e.element);
555 |       else if (e.op == ListChangeOp.remove)
556 |         ret.children.removeAt(e.pos);
557 |       else
558 |         ret.children.clear();
559 |     });
560 |     handleWidget(ret, field);
561 |     return ret;
562 |   }
563 |   throw new Exception('relativeRenderer cannot render ${field.runtimeType}');
564 | }
565 | 
566 | Element tinRenderer(final field, Renderer<Element> renderers) {
567 |   if (field is Tin) {
568 |     var ret = new DivElement()..classes.add('tin-layout');
569 |     for (View child in field.children)
570 |       ret.children.add(renderers.render(child));
571 |     field.children.onChange.listen((e) {
572 |       if (e.op == ListChangeOp.add)
573 |         ret.children.insert(e.pos, renderers.render(e.element));
574 |       else if (e.op == ListChangeOp.set)
575 |         ret.children[e.pos] = renderers.render(e.element);
576 |       else if (e.op == ListChangeOp.remove)
577 |         ret.children.removeAt(e.pos);
578 |       else
579 |         ret.children.clear();
580 |     });
581 |     handleWidget(ret, field);
582 |     return ret;
583 |   }
584 |   throw new Exception('tinRenderer cannot render ${field.runtimeType}');
585 | }
586 | 
587 | Element buttonRenderer(final field, Renderer<Element> renderers) {
588 |   if (field is Button) {
589 |     var ret = new SpanElement()
590 |       ..classes.add('button')
591 |       ..style.color = field.color;
592 |     if (field.icon != null) ret.append(new SpanElement()); // TODO set icon
593 |     if (field.text != null) ret.append(new SpanElement()..text = field.text);
594 |     if (field.fontSize != null) ret.style.fontSize = '${field.fontSize}px';
595 |     if (field.tip != null) ret.title = field.tip;
596 |     handleWidget(ret, field);
597 |     return ret;
598 |   }
599 |   throw new Exception('buttonRenderer cannot render ${field.runtimeType}');
600 | }
601 | 
602 | Element tableRenderer(final field, Renderer<Element> renderers) {
603 |   if (field is Table) {
604 |     var header = new Element.tag('thead')
605 |       ..classes.add('jaguar-admin-table-head');
606 |     for (int i = 0; i < field.numCols; i++) {
607 |       ColumnSpec spec = field.spec[i];
608 |       var th = new Element.th()
609 |         ..classes.add('jaguar-admin-table-head-item')
610 |         ..append(renderers.render(TextField(text: spec.label)));
611 |       if (spec.width != null) th.style.width = spec.width.toString();
612 |       header.append(th);
613 |     }
614 |     var body = new Element.tag('tbody')..classes.add('jaguar-admin-table-body');
615 |     for (int r = 0; r < field.numRows; r++) {
616 |       TableRow row = field.rows[r];
617 |       // TODO set height
618 |       var el = new TableRowElement()..classes.add('jaguar-admin-table-row');
619 |       for (int c = 0; c < field.numCols; c++) {
620 |         ColumnSpec spec = field.spec[c];
621 |         View v = row.cells[spec.name];
622 |         if (v != null) {
623 |           el.append(new TableCellElement()..append(renderers.render(v)));
624 |         } else {
625 |           el.append(new TableCellElement()
626 |             ..append(renderers.render(TextField(text: ""))));
627 |         }
628 |       }
629 |       body.append(el);
630 |     }
631 |     // TODO classes
632 |     return new DivElement()
633 |       ..classes.add('jaguar-admin-table-frame')
634 |       ..append(new TableElement()
635 |         ..classes.add('jaguar-admin-table')
636 |         ..append(header)
637 |         ..append(body)
638 |         ..attributes.addAll({
639 |           "cellspacing": "0",
640 |           "cellpadding": "0",
641 |         }));
642 |   }
643 |   throw new Exception('tableRenderer cannot render ${field.runtimeType}');
644 | }
645 | 
646 | Element formRenderer(final field, Renderer<Element> renderers) {
647 |   if (field is Form) {
648 |     var ret = renderers.render(Box(
649 |       children: field.children,
650 |     ))
651 |       ..classes.add('form');
652 |     handleWidget(ret, field);
653 |     return ret;
654 |   }
655 |   throw new Exception('formRenderer cannot render ${field.runtimeType}');
656 | }
657 | 
658 | class HtmlRenderer extends Renderer<Element> {
659 |   final _renderers = <Type, ViewRenderer<Element, View>>{};
660 | 
661 |   @override
662 |   Iterable<ViewRenderer<Element, View>> get allRenderers => _renderers.values;
663 | 
664 |   void register<T extends View>(ViewRenderer<Element, View> renderer) {
665 |     _renderers[T] = renderer;
666 |   }
667 | 
668 |   @override
669 |   ViewRenderer<Element, T> get<T extends View>() => _renderers[T];
670 | 
671 |   ViewRenderer<Element, dynamic> getFor(View view) =>
672 |       _renderers[view.runtimeType];
673 | 
674 |   void merge(Renderer<Element> other) {
675 |     if (other is HtmlRenderer)
676 |       _renderers.addAll(other._renderers);
677 |     else
678 |       throw new Exception("Cannot merge!");
679 |   }
680 | 
681 |   HtmlRenderer clone() {
682 |     var ret = new HtmlRenderer();
683 |     ret.merge(this);
684 |     return ret;
685 |   }
686 | }
687 | 


--------------------------------------------------------------------------------
/lib/nuts.dart:
--------------------------------------------------------------------------------
 1 | import 'package:nuts/view/view.dart';
 2 | 
 3 | export 'package:nuts/view/view.dart';
 4 | export 'package:observable_ish/observable_ish.dart';
 5 | 
 6 | typedef E ViewRenderer<E, T extends View>(view, Renderer<E> renderers);
 7 | 
 8 | abstract class Renderer<E> {
 9 |   Iterable<ViewRenderer<E, View>> get allRenderers;
10 | 
11 |   void register<T extends View>(ViewRenderer<E, T> renderer);
12 | 
13 |   ViewRenderer<E, T> get<T extends View>();
14 | 
15 |   ViewRenderer<E, dynamic> getFor(View view);
16 | 
17 |   E render(final View view) {
18 |     if (view == null) {
19 |       throw new Exception("View cannot be null!");
20 |     }
21 |     if (view is Component) return render(view.view);
22 |     ViewRenderer<E, View> ren = getFor(view);
23 |     if (ren != null) return ren(view, this);
24 |     // Handle types with generic arguments
25 |     for (ViewRenderer<E, View> r in allRenderers) {
26 |       try {
27 |         E ret = r(view, this);
28 |         return ret;
29 |       } catch (e) {
30 |         // print('$r:');
31 |         // print(e);
32 |       }
33 |     }
34 |     throw new Exception("A renderer for ${view.runtimeType} not found!");
35 |   }
36 | 
37 |   void merge(Renderer<E> other);
38 | 
39 |   Renderer<E> clone();
40 | }
41 | 


--------------------------------------------------------------------------------
/lib/styles.css:
--------------------------------------------------------------------------------
 1 | .box {
 2 |     overflow: hidden;
 3 |     box-sizing: border-box;
 4 |     display: flex;
 5 |     flex-direction: column;
 6 | }
 7 | 
 8 | .hbox {
 9 |     display: flex;
10 |     flex-direction: row;
11 |     overflow: hidden;
12 |     box-sizing: border-box;
13 | }
14 | 
15 | .absolute-layout {
16 |     box-sizing: border-box;
17 |     position: absolute;
18 | }
19 | 
20 | .relative-layout {
21 |     box-sizing: border-box;
22 |     position: relative;
23 | }
24 | 
25 | .tin-layout {
26 |     box-sizing: border-box;
27 | }
28 | 
29 | .button {
30 |     cursor: pointer;
31 |     filter: brightness(100%) drop-shadow(0px 0px 0px);
32 |     transition: filter 0.2s;
33 |     padding: 2px 5px;
34 |     font-family: 'fa5-free', sans-serif;
35 |     user-select: none;
36 | }
37 | 
38 | .button:hover {
39 |     filter: brightness(125%);
40 | }
41 | 
42 | .button:active {
43 |     filter: drop-shadow(1px 1px 1px);
44 | }
45 | 
46 | .textfield {
47 |     text-overflow: ellipsis;
48 |     text-align: left;
49 | }
50 | 
51 | .textinput {
52 |     border-radius: 4px;
53 |     border: 1px solid #00000029;
54 |     padding: 3px 5px;
55 |     outline: none;
56 |     transition: border-color 0.5s, box-shadow 0.5s;
57 | }
58 | 
59 | .textinput:hover {
60 |     box-shadow: inset 1px 2px 2px 0px #0000001f;
61 | }
62 | 
63 | .textinput:focus {
64 |     border-color: #3F51B5;
65 |     box-shadow: inset 1px 2px 2px 0px #0000001f;
66 | }
67 | 
68 | .labeled {
69 |     padding: 5px;
70 | }
71 | 
72 | .labeled .label {
73 |     margin-right: 10px;
74 |     font-size: 12px;
75 | }
76 | 
77 | .multiline {
78 |     border-radius: 4px;
79 |     border: 1px solid #00000029;
80 |     padding: 3px 5px;
81 |     outline: none;
82 |     transition: border-color 0.5s, box-shadow 0.5s;
83 |     white-space: nowrap;
84 | }
85 | 
86 | .multiline:hover {
87 |     box-shadow: inset 1px 2px 2px 0px #0000001f;
88 | }
89 | 
90 | .multiline:focus {
91 |     border-color: #3F51B5;
92 |     box-shadow: inset 1px 2px 2px 0px #0000001f;
93 | }


--------------------------------------------------------------------------------
/lib/view/containers.dart:
--------------------------------------------------------------------------------
  1 | import 'dart:async';
  2 | import 'package:nuts/nuts.dart';
  3 | 
  4 | class Box extends Object with WidgetMixin implements Container {
  5 |   final String key;
  6 |   final RxList<View> children;
  7 |   final RxSet<String> classes;
  8 |   HAlign hAlign; // TODO convert to rx property
  9 |   VAlign vAlign; // TODO convert to rx property
 10 |   final onRemoved = StreamBackedEmitter<void>();
 11 |   Box({
 12 |     View child,
 13 |     Iterable<View> children,
 14 |     this.key,
 15 |     String class_,
 16 |     Iterable<String> classes,
 17 | 
 18 |     Distance width,
 19 |     RxValue<Distance> widthRx,
 20 |     Stream<Distance> widthStream,
 21 | 
 22 |     Distance minWidth,
 23 |     RxValue<Distance> minWidthRx,
 24 |     Stream<Distance> minWidthStream,
 25 | 
 26 |     Distance maxWidth,
 27 |     RxValue<Distance> maxWidthRx,
 28 |     Stream<Distance> maxWidthStream,
 29 | 
 30 |     Distance height,
 31 |     RxValue<Distance> heightRx,
 32 |     Stream<Distance> heightStream,
 33 | 
 34 |     /* Distance | Stream<Distance> | Reactive<Distance> */ minHeight,
 35 |     /* Distance | Stream<Distance> | Reactive<Distance> */ maxHeight,
 36 | 
 37 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginLeft,
 38 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginTop,
 39 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginRight,
 40 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginBottom,
 41 | 
 42 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingLeft,
 43 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingTop,
 44 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingRight,
 45 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingBottom,
 46 | 
 47 |     /* Distance | Stream<Distance> | Reactive<Distance> */ left,
 48 |     /* Distance | Stream<Distance> | Reactive<Distance> */ top,
 49 |     /* Distance | Stream<Distance> | Reactive<Distance> */ right,
 50 |     /* Distance | Stream<Distance> | Reactive<Distance> */ bottom,
 51 | 
 52 |     /* bool | Stream<bool> | Reactive<bool> */ bold,
 53 | 
 54 |     /* String | Stream<String> | Reactive<String> */ fontFamily,
 55 |     /* String | Stream<String> | Reactive<String> */ color,
 56 |     /* String | Stream<String> | Reactive<String> */ backgroundColor,
 57 |     /* String | Stream<String> | Reactive<String> */ backgroundImage,
 58 |     EdgeInset padding,
 59 |     EdgeInset margin,
 60 |     /* Callback | ValueCallback */ onClick,
 61 |     this.hAlign,
 62 |     this.vAlign,
 63 |   })  : children = children is RxChildList
 64 |             ? children
 65 |             : RxList<View>.union(children, child),
 66 |         classes = classes is RxSet<String>
 67 |             ? classes
 68 |             : RxSet<String>.union(classes, class_) {
 69 |     if (classes is RxSet) this.classes.addNonNull(class_);
 70 |     if (children is RxChildList) children.addNonNull(child);
 71 |     widthProperty.bindOrSet(width ?? widthRx ?? widthStream);
 72 |     minWidthProperty.bindOrSet(minWidth ?? minWidthRx ?? minWidthStream);
 73 |     maxWidthProperty.bindOrSet(maxWidth);
 74 |     heightProperty.bindOrSet(height ?? heightRx ?? heightStream);
 75 |     minHeightProperty.bindOrSet(minHeight);
 76 |     maxHeightProperty.bindOrSet(maxHeight);
 77 |     marginLeftProperty.bindOrSet(marginLeft);
 78 |     marginTopProperty.bindOrSet(marginTop);
 79 |     marginRightProperty.bindOrSet(marginRight);
 80 |     marginBottomProperty.bindOrSet(marginBottom);
 81 |     paddingLeftProperty.bindOrSet(paddingLeft);
 82 |     paddingTopProperty.bindOrSet(paddingTop);
 83 |     paddingRightProperty.bindOrSet(paddingRight);
 84 |     paddingBottomProperty.bindOrSet(paddingBottom);
 85 |     leftProperty.bindOrSet(left);
 86 |     topProperty.bindOrSet(top);
 87 |     rightProperty.bindOrSet(right);
 88 |     bottomProperty.bindOrSet(bottom);
 89 |     boldProperty.bindOrSet(bold);
 90 |     fontFamilyProperty.bindOrSet(fontFamily);
 91 |     colorProperty.bindOrSet(color);
 92 |     backgroundColorProperty.bindOrSet(backgroundColor);
 93 |     backgroundImageProperty.bindOrSet(backgroundImage);
 94 |     if (padding != null) this.padding = padding;
 95 |     if (margin != null) this.margin = margin;
 96 |     if (onClick != null) this.onClick.on(onClick);
 97 |     onRemoved.listen(() {
 98 |       for (View c in this.children) {
 99 |         emitRemoved(c);
100 |       }
101 |     });
102 |   }
103 | 
104 |   /// Supplies a [func] to configure this view
105 |   void config(void func(Box box)) => func(this);
106 | 
107 |   void addChild(View v) => children.add(v);
108 |   void addChildren(Iterable<View> v) => children.addAll(v);
109 | 
110 |   T getByKey<T extends View>(String key) =>
111 |       children.firstWhere((v) => v.key == key, orElse: () => null);
112 |   T deepGetByKey<T extends View>(Iterable<String> keys) {
113 |     if (key.length == 0) return null;
114 |     View ret =
115 |         children.firstWhere((v) => v.key == keys.first, orElse: () => null);
116 |     if (ret == null) return null;
117 |     if (keys.length == 1) return ret;
118 |     if (ret is Container) {
119 |       if (keys.length == 2) return ret.getByKey<T>(keys.last);
120 |       return ret.deepGetByKey<T>(keys.skip(1));
121 |     }
122 |     return null;
123 |   }
124 | }
125 | 
126 | class HBox extends Object with WidgetMixin implements Container {
127 |   String key;
128 |   final RxList<View> children;
129 |   final RxSet<String> classes;
130 |   HAlign hAlign; // TODO convert to rx property
131 |   VAlign vAlign; // TODO convert to rx property
132 |   final onRemoved = StreamBackedEmitter<void>();
133 |   HBox({
134 |     View child,
135 |     Iterable<View> children,
136 |     this.key,
137 |     String class_,
138 |     Iterable<String> classes,
139 |     /* Distance | Stream<Distance> | Reactive<Distance> */ width,
140 |     /* Distance | Stream<Distance> | Reactive<Distance> */ minWidth,
141 |     /* Distance | Stream<Distance> | Reactive<Distance> */ maxWidth,
142 |     /* Distance | Stream<Distance> | Reactive<Distance> */ height,
143 |     /* Distance | Stream<Distance> | Reactive<Distance> */ minHeight,
144 |     /* Distance | Stream<Distance> | Reactive<Distance> */ maxHeight,
145 | 
146 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginLeft,
147 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginTop,
148 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginRight,
149 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginBottom,
150 | 
151 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingLeft,
152 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingTop,
153 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingRight,
154 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingBottom,
155 | 
156 |     /* Distance | Stream<Distance> | Reactive<Distance> */ left,
157 |     /* Distance | Stream<Distance> | Reactive<Distance> */ top,
158 |     /* Distance | Stream<Distance> | Reactive<Distance> */ right,
159 |     /* Distance | Stream<Distance> | Reactive<Distance> */ bottom,
160 | 
161 |     /* bool | Stream<bool> | Reactive<bool> */ bold,
162 | 
163 |     /* String | Stream<String> | Reactive<String> */ fontFamily,
164 |     /* String | Stream<String> | Reactive<String> */ color,
165 |     /* String | Stream<String> | Reactive<String> */ backgroundColor,
166 |     /* String | Stream<String> | Reactive<String> */ backgroundImage,
167 |     EdgeInset padding,
168 |     EdgeInset margin,
169 |     /* Callback | ValueCallback */ onClick,
170 |     this.hAlign,
171 |     this.vAlign: VAlign.middle,
172 |   })  : children = children is RxChildList
173 |             ? children
174 |             : RxList<View>.union(children, child),
175 |         classes = classes is RxSet<String>
176 |             ? classes
177 |             : RxSet<String>.union(classes, class_) {
178 |     if (classes is RxSet) this.classes.addNonNull(class_);
179 |     if (children is RxChildList) children.addNonNull(child);
180 |     widthProperty.bindOrSet(width);
181 |     minWidthProperty.bindOrSet(minWidth);
182 |     maxWidthProperty.bindOrSet(maxWidth);
183 |     heightProperty.bindOrSet(height);
184 |     minHeightProperty.bindOrSet(minHeight);
185 |     maxHeightProperty.bindOrSet(maxHeight);
186 |     marginLeftProperty.bindOrSet(marginLeft);
187 |     marginTopProperty.bindOrSet(marginTop);
188 |     marginRightProperty.bindOrSet(marginRight);
189 |     marginBottomProperty.bindOrSet(marginBottom);
190 |     paddingLeftProperty.bindOrSet(paddingLeft);
191 |     paddingTopProperty.bindOrSet(paddingTop);
192 |     paddingRightProperty.bindOrSet(paddingRight);
193 |     paddingBottomProperty.bindOrSet(paddingBottom);
194 |     leftProperty.bindOrSet(left);
195 |     topProperty.bindOrSet(top);
196 |     rightProperty.bindOrSet(right);
197 |     bottomProperty.bindOrSet(bottom);
198 |     boldProperty.bindOrSet(bold);
199 |     fontFamilyProperty.bindOrSet(fontFamily);
200 |     colorProperty.bindOrSet(color);
201 |     backgroundColorProperty.bindOrSet(backgroundColor);
202 |     backgroundImageProperty.bindOrSet(backgroundImage);
203 |     if (padding != null) this.padding = padding;
204 |     if (margin != null) this.margin = margin;
205 |     if (onClick != null) this.onClick.on(onClick);
206 |     onRemoved.listen(() {
207 |       for (View c in this.children) {
208 |         emitRemoved(c);
209 |       }
210 |     });
211 |   }
212 | 
213 |   void addChild(View v) => children.add(v);
214 |   void addChildren(Iterable<View> v) => children.addAll(v);
215 | 
216 |   T getByKey<T extends View>(String key) =>
217 |       children.firstWhere((v) => v.key == key, orElse: () => null);
218 |   T deepGetByKey<T extends View>(Iterable<String> keys) {
219 |     if (key.length == 0) return null;
220 |     View ret =
221 |         children.firstWhere((v) => v.key == keys.first, orElse: () => null);
222 |     if (ret == null) return null;
223 |     if (keys.length == 1) return ret;
224 |     if (ret is Container) {
225 |       if (keys.length == 2) return ret.getByKey<T>(keys.last);
226 |       return ret.deepGetByKey<T>(keys.skip(1));
227 |     }
228 |     return null;
229 |   }
230 | }
231 | 
232 | class Absolute extends Object with WidgetMixin implements Container {
233 |   String key;
234 |   final RxList<View> children;
235 |   final RxSet<String> classes;
236 |   final onRemoved = StreamBackedEmitter<void>();
237 |   Absolute({
238 |     View child,
239 |     Iterable<View> children,
240 |     this.key,
241 |     String class_,
242 |     Iterable<String> classes,
243 |     /* Distance | Stream<Distance> | Reactive<Distance> */ width,
244 |     /* Distance | Stream<Distance> | Reactive<Distance> */ minWidth,
245 |     /* Distance | Stream<Distance> | Reactive<Distance> */ maxWidth,
246 |     /* Distance | Stream<Distance> | Reactive<Distance> */ height,
247 |     /* Distance | Stream<Distance> | Reactive<Distance> */ minHeight,
248 |     /* Distance | Stream<Distance> | Reactive<Distance> */ maxHeight,
249 | 
250 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginLeft,
251 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginTop,
252 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginRight,
253 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginBottom,
254 | 
255 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingLeft,
256 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingTop,
257 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingRight,
258 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingBottom,
259 | 
260 |     /* Distance | Stream<Distance> | Reactive<Distance> */ left,
261 |     /* Distance | Stream<Distance> | Reactive<Distance> */ top,
262 |     /* Distance | Stream<Distance> | Reactive<Distance> */ right,
263 |     /* Distance | Stream<Distance> | Reactive<Distance> */ bottom,
264 | 
265 |     /* bool | Stream<bool> | Reactive<bool> */ bold,
266 | 
267 |     /* String | Stream<String> | Reactive<String> */ fontFamily,
268 |     /* String | Stream<String> | Reactive<String> */ color,
269 |     /* String | Stream<String> | Reactive<String> */ backgroundColor,
270 |     /* String | Stream<String> | Reactive<String> */ backgroundImage,
271 |     EdgeInset padding,
272 |     EdgeInset margin,
273 |     /* Callback | ValueCallback */ onClick,
274 |   })  : children = children is RxChildList
275 |             ? children
276 |             : RxList<View>.union(children, child),
277 |         classes = classes is RxSet<String>
278 |             ? classes
279 |             : RxSet<String>.union(classes, class_) {
280 |     if (classes is RxSet) this.classes.addNonNull(class_);
281 |     if (children is RxChildList) children.addNonNull(child);
282 |     widthProperty.bindOrSet(width);
283 |     minWidthProperty.bindOrSet(minWidth);
284 |     maxWidthProperty.bindOrSet(maxWidth);
285 |     heightProperty.bindOrSet(height);
286 |     minHeightProperty.bindOrSet(minHeight);
287 |     maxHeightProperty.bindOrSet(maxHeight);
288 |     marginLeftProperty.bindOrSet(marginLeft);
289 |     marginTopProperty.bindOrSet(marginTop);
290 |     marginRightProperty.bindOrSet(marginRight);
291 |     marginBottomProperty.bindOrSet(marginBottom);
292 |     paddingLeftProperty.bindOrSet(paddingLeft);
293 |     paddingTopProperty.bindOrSet(paddingTop);
294 |     paddingRightProperty.bindOrSet(paddingRight);
295 |     paddingBottomProperty.bindOrSet(paddingBottom);
296 |     leftProperty.bindOrSet(left);
297 |     topProperty.bindOrSet(top);
298 |     rightProperty.bindOrSet(right);
299 |     bottomProperty.bindOrSet(bottom);
300 |     boldProperty.bindOrSet(bold);
301 |     fontFamilyProperty.bindOrSet(fontFamily);
302 |     colorProperty.bindOrSet(color);
303 |     backgroundColorProperty.bindOrSet(backgroundColor);
304 |     backgroundImageProperty.bindOrSet(backgroundImage);
305 |     if (padding != null) this.padding = padding;
306 |     if (margin != null) this.margin = margin;
307 |     if (onClick != null) this.onClick.on(onClick);
308 |     onRemoved.listen(() {
309 |       for (View c in this.children) {
310 |         emitRemoved(c);
311 |       }
312 |     });
313 |   }
314 | 
315 |   void addChild(View v) => children.add(v);
316 |   void addChildren(Iterable<View> v) => children.addAll(v);
317 | 
318 |   T getByKey<T extends View>(String key) =>
319 |       children.firstWhere((v) => v.key == key, orElse: () => null);
320 |   T deepGetByKey<T extends View>(Iterable<String> keys) {
321 |     if (key.length == 0) return null;
322 |     View ret =
323 |         children.firstWhere((v) => v.key == keys.first, orElse: () => null);
324 |     if (ret == null) return null;
325 |     if (keys.length == 1) return ret;
326 |     if (ret is Container) {
327 |       if (keys.length == 2) return ret.getByKey<T>(keys.last);
328 |       return ret.deepGetByKey<T>(keys.skip(1));
329 |     }
330 |     return null;
331 |   }
332 | }
333 | 
334 | class Relative extends Object with WidgetMixin implements Container {
335 |   String key;
336 |   final RxList<View> children;
337 |   final RxSet<String> classes;
338 |   final onRemoved = StreamBackedEmitter<void>();
339 |   Relative({
340 |     View child,
341 |     Iterable<View> children,
342 |     this.key,
343 |     String class_,
344 |     Iterable<String> classes,
345 |     /* Distance | Stream<Distance> | Reactive<Distance> */ width,
346 |     /* Distance | Stream<Distance> | Reactive<Distance> */ minWidth,
347 |     /* Distance | Stream<Distance> | Reactive<Distance> */ maxWidth,
348 |     /* Distance | Stream<Distance> | Reactive<Distance> */ height,
349 |     /* Distance | Stream<Distance> | Reactive<Distance> */ minHeight,
350 |     /* Distance | Stream<Distance> | Reactive<Distance> */ maxHeight,
351 | 
352 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginLeft,
353 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginTop,
354 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginRight,
355 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginBottom,
356 | 
357 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingLeft,
358 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingTop,
359 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingRight,
360 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingBottom,
361 | 
362 |     /* Distance | Stream<Distance> | Reactive<Distance> */ left,
363 |     /* Distance | Stream<Distance> | Reactive<Distance> */ top,
364 |     /* Distance | Stream<Distance> | Reactive<Distance> */ right,
365 |     /* Distance | Stream<Distance> | Reactive<Distance> */ bottom,
366 | 
367 |     /* bool | Stream<bool> | Reactive<bool> */ bold,
368 | 
369 |     /* String | Stream<String> | Reactive<String> */ fontFamily,
370 |     /* String | Stream<String> | Reactive<String> */ color,
371 |     /* String | Stream<String> | Reactive<String> */ backgroundColor,
372 |     /* String | Stream<String> | Reactive<String> */ backgroundImage,
373 |     EdgeInset padding,
374 |     EdgeInset margin,
375 |     /* Callback | ValueCallback */ onClick,
376 |   })  : children = children is RxChildList
377 |             ? children
378 |             : RxList<View>.union(children, child),
379 |         classes = classes is RxSet<String>
380 |             ? classes
381 |             : RxSet<String>.union(classes, class_) {
382 |     if (classes is RxSet) this.classes.addNonNull(class_);
383 |     if (children is RxChildList) children.addNonNull(child);
384 |     widthProperty.bindOrSet(width);
385 |     minWidthProperty.bindOrSet(minWidth);
386 |     maxWidthProperty.bindOrSet(maxWidth);
387 |     heightProperty.bindOrSet(height);
388 |     minHeightProperty.bindOrSet(minHeight);
389 |     maxHeightProperty.bindOrSet(maxHeight);
390 |     marginLeftProperty.bindOrSet(marginLeft);
391 |     marginTopProperty.bindOrSet(marginTop);
392 |     marginRightProperty.bindOrSet(marginRight);
393 |     marginBottomProperty.bindOrSet(marginBottom);
394 |     paddingLeftProperty.bindOrSet(paddingLeft);
395 |     paddingTopProperty.bindOrSet(paddingTop);
396 |     paddingRightProperty.bindOrSet(paddingRight);
397 |     paddingBottomProperty.bindOrSet(paddingBottom);
398 |     leftProperty.bindOrSet(left);
399 |     topProperty.bindOrSet(top);
400 |     rightProperty.bindOrSet(right);
401 |     bottomProperty.bindOrSet(bottom);
402 |     boldProperty.bindOrSet(bold);
403 |     fontFamilyProperty.bindOrSet(fontFamily);
404 |     colorProperty.bindOrSet(color);
405 |     backgroundColorProperty.bindOrSet(backgroundColor);
406 |     backgroundImageProperty.bindOrSet(backgroundImage);
407 |     if (padding != null) this.padding = padding;
408 |     if (margin != null) this.margin = margin;
409 |     if (onClick != null) this.onClick.on(onClick);
410 |     onRemoved.listen(() {
411 |       for (View c in this.children) {
412 |         emitRemoved(c);
413 |       }
414 |     });
415 |   }
416 | 
417 |   void addChild(View v) => children.add(v);
418 |   void addChildren(Iterable<View> v) => children.addAll(v);
419 | 
420 |   T getByKey<T extends View>(String key) =>
421 |       children.firstWhere((v) => v.key == key, orElse: () => null);
422 |   T deepGetByKey<T extends View>(Iterable<String> keys) {
423 |     if (key.length == 0) return null;
424 |     View ret =
425 |         children.firstWhere((v) => v.key == keys.first, orElse: () => null);
426 |     if (ret == null) return null;
427 |     if (keys.length == 1) return ret;
428 |     if (ret is Container) {
429 |       if (keys.length == 2) return ret.getByKey<T>(keys.last);
430 |       return ret.deepGetByKey<T>(keys.skip(1));
431 |     }
432 |     return null;
433 |   }
434 | }
435 | 
436 | class Tin extends Object with WidgetMixin implements Container {
437 |   String key;
438 |   final RxList<View> children;
439 |   final RxSet<String> classes;
440 |   final onRemoved = StreamBackedEmitter<void>();
441 |   Tin({
442 |     View child,
443 |     Iterable<View> children,
444 |     this.key,
445 |     String class_,
446 |     Iterable<String> classes,
447 |     /* Distance | Stream<Distance> | Reactive<Distance> */ width,
448 |     /* Distance | Stream<Distance> | Reactive<Distance> */ minWidth,
449 |     /* Distance | Stream<Distance> | Reactive<Distance> */ maxWidth,
450 |     /* Distance | Stream<Distance> | Reactive<Distance> */ height,
451 |     /* Distance | Stream<Distance> | Reactive<Distance> */ minHeight,
452 |     /* Distance | Stream<Distance> | Reactive<Distance> */ maxHeight,
453 | 
454 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginLeft,
455 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginTop,
456 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginRight,
457 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginBottom,
458 | 
459 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingLeft,
460 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingTop,
461 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingRight,
462 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingBottom,
463 | 
464 |     /* Distance | Stream<Distance> | Reactive<Distance> */ left,
465 |     /* Distance | Stream<Distance> | Reactive<Distance> */ top,
466 |     /* Distance | Stream<Distance> | Reactive<Distance> */ right,
467 |     /* Distance | Stream<Distance> | Reactive<Distance> */ bottom,
468 | 
469 |     /* bool | Stream<bool> | Reactive<bool> */ bold,
470 | 
471 |     /* String | Stream<String> | Reactive<String> */ fontFamily,
472 |     /* String | Stream<String> | Reactive<String> */ color,
473 |     /* String | Stream<String> | Reactive<String> */ backgroundColor,
474 |     /* String | Stream<String> | Reactive<String> */ backgroundImage,
475 |     EdgeInset padding,
476 |     EdgeInset margin,
477 |     /* Callback | ValueCallback */ onClick,
478 |   })  : children = children is RxChildList
479 |             ? children
480 |             : RxList<View>.union(children, child),
481 |         classes = classes is RxSet<String>
482 |             ? classes
483 |             : RxSet<String>.union(classes, class_) {
484 |     if (classes is RxSet) this.classes.addNonNull(class_);
485 |     if (children is RxChildList) children.addNonNull(child);
486 |     widthProperty.bindOrSet(width);
487 |     minWidthProperty.bindOrSet(minWidth);
488 |     maxWidthProperty.bindOrSet(maxWidth);
489 |     heightProperty.bindOrSet(height);
490 |     minHeightProperty.bindOrSet(minHeight);
491 |     maxHeightProperty.bindOrSet(maxHeight);
492 |     marginLeftProperty.bindOrSet(marginLeft);
493 |     marginTopProperty.bindOrSet(marginTop);
494 |     marginRightProperty.bindOrSet(marginRight);
495 |     marginBottomProperty.bindOrSet(marginBottom);
496 |     paddingLeftProperty.bindOrSet(paddingLeft);
497 |     paddingTopProperty.bindOrSet(paddingTop);
498 |     paddingRightProperty.bindOrSet(paddingRight);
499 |     paddingBottomProperty.bindOrSet(paddingBottom);
500 |     leftProperty.bindOrSet(left);
501 |     topProperty.bindOrSet(top);
502 |     rightProperty.bindOrSet(right);
503 |     bottomProperty.bindOrSet(bottom);
504 |     boldProperty.bindOrSet(bold);
505 |     fontFamilyProperty.bindOrSet(fontFamily);
506 |     colorProperty.bindOrSet(color);
507 |     backgroundColorProperty.bindOrSet(backgroundColor);
508 |     backgroundImageProperty.bindOrSet(backgroundImage);
509 |     if (padding != null) this.padding = padding;
510 |     if (margin != null) this.margin = margin;
511 |     if (onClick != null) this.onClick.on(onClick);
512 |     onRemoved.listen(() {
513 |       for (View c in this.children) {
514 |         emitRemoved(c);
515 |       }
516 |     });
517 |   }
518 | 
519 |   void addChild(View v) => children.add(v);
520 |   void addChildren(Iterable<View> v) => children.addAll(v);
521 | 
522 |   T getByKey<T extends View>(String key) =>
523 |       children.firstWhere((v) => v.key == key, orElse: () => null);
524 |   T deepGetByKey<T extends View>(Iterable<String> keys) {
525 |     if (key.length == 0) return null;
526 |     View ret =
527 |         children.firstWhere((v) => v.key == keys.first, orElse: () => null);
528 |     if (ret == null) return null;
529 |     if (keys.length == 1) return ret;
530 |     if (ret is Container) {
531 |       if (keys.length == 2) return ret.getByKey<T>(keys.last);
532 |       return ret.deepGetByKey<T>(keys.skip(1));
533 |     }
534 |     return null;
535 |   }
536 | }
537 | 


--------------------------------------------------------------------------------
/lib/view/editable.dart:
--------------------------------------------------------------------------------
  1 | import 'package:nuts/nuts.dart';
  2 | 
  3 | abstract class EditView<T> implements View {
  4 |   ProxyValue<T> get valueProperty;
  5 |   T value;
  6 |   void setCastValue(v);
  7 |   StreamBackedEmitter<ValueCommitEvent<T>> get onCommit;
  8 | }
  9 | 
 10 | abstract class EditWidget<T> implements EditView<T>, Widget {}
 11 | 
 12 | class TextEdit extends Object with WidgetMixin implements EditWidget<String> {
 13 |   String key;
 14 |   final RxSet<String> classes;
 15 |   String placeholder;
 16 |   final onCommit = StreamBackedEmitter<ValueCommitEvent<String>>();
 17 |   final bool shouldEscape;
 18 |   TextEdit({
 19 |     this.placeholder,
 20 |     this.key,
 21 |     /* String | Stream<String> | Reactive<String> */ value,
 22 |     /* Distance | Stream<Distance> | Reactive<Distance> */ width,
 23 |     /* Distance | Stream<Distance> | Reactive<Distance> */ minWidth,
 24 |     /* Distance | Stream<Distance> | Reactive<Distance> */ maxWidth,
 25 | 
 26 |     /* bool | Stream<bool> | Reactive<bool> */ bold,
 27 | 
 28 |     /* String | Stream<String> | Reactive<String> */ fontFamily,
 29 |     /* String | Stream<String> | Reactive<Stream> */ color,
 30 |     /* String | Stream<String> | Reactive<Stream> */ backgroundColor,
 31 |     this.shouldEscape: true,
 32 |     String class_,
 33 |     Iterable<String> classes,
 34 |     /* Callback | ValueCallback<String> */ onCommit,
 35 |   }) : classes = classes is RxSet<String>
 36 |             ? classes
 37 |             : RxSet<String>.union(classes, class_) {
 38 |     if (classes is RxSet) this.classes.addNonNull(class_);
 39 |     valueProperty.bindOrSet(value);
 40 |     widthProperty.bindOrSet(width);
 41 |     minWidthProperty.bindOrSet(minWidth);
 42 |     maxWidthProperty.bindOrSet(maxWidth);
 43 |     boldProperty.bindOrSet(bold);
 44 |     fontFamilyProperty.bindOrSet(fontFamily);
 45 |     colorProperty.bindOrSet(color);
 46 |     backgroundColorProperty.bindOrSet(backgroundColor);
 47 |     if (onCommit != null) this.onCommit.on(onCommit);
 48 |   }
 49 | 
 50 |   final valueProperty = ProxyValue<String>();
 51 |   String get value => valueProperty.value;
 52 |   set value(String value) => valueProperty.value = value;
 53 |   void setCastValue(v) => valueProperty.value = value;
 54 | }
 55 | 
 56 | class IntEdit extends Object with WidgetMixin implements EditWidget<int> {
 57 |   String key;
 58 |   final RxSet<String> classes;
 59 |   String placeholder;
 60 |   final onCommit = StreamBackedEmitter<ValueCommitEvent<int>>();
 61 |   final bool shouldEscape;
 62 |   IntEdit({
 63 |     this.placeholder,
 64 |     this.key,
 65 |     /* int | Stream<int> | Reactive<int> */ value,
 66 |     /* Distance | Stream<Distance> | Reactive<Distance> */ width,
 67 |     /* Distance | Stream<Distance> | Reactive<Distance> */ minWidth,
 68 |     /* Distance | Stream<Distance> | Reactive<Distance> */ maxWidth,
 69 |     this.shouldEscape: true,
 70 |     String class_,
 71 |     Iterable<String> classes,
 72 |     /* Callback | ValueCallback<int> */ onCommit,
 73 |   }) : classes = classes is RxSet<String>
 74 |             ? classes
 75 |             : RxSet<String>.union(classes, class_) {
 76 |     if (classes is RxSet) this.classes.addNonNull(class_);
 77 |     valueProperty.bindOrSet(value);
 78 |     widthProperty.bindOrSet(width);
 79 |     minWidthProperty.bindOrSet(minWidth);
 80 |     maxWidthProperty.bindOrSet(maxWidth);
 81 |     if (onCommit != null) this.onCommit.on(onCommit);
 82 |   }
 83 | 
 84 |   final valueProperty = ProxyValue<int>();
 85 |   int get value => valueProperty.value;
 86 |   set value(int value) => valueProperty.value = value;
 87 |   void setCastValue(v) => valueProperty.value = value;
 88 | }
 89 | 
 90 | class LabeledEdit<T> extends Object
 91 |     with WidgetMixin
 92 |     implements EditView<T>, HLabeledView, Widget {
 93 |   String key;
 94 |   final RxSet<String> classes;
 95 |   final TextField labelField;
 96 |   final EditView<T> labelled;
 97 |   final VAlign vAlign;
 98 |   LabeledEdit(
 99 |     this.labelled, {
100 |     String label,
101 |     Distance height,
102 |     TextField labelField,
103 |     this.vAlign,
104 |     this.key,
105 |     String class_,
106 |     Iterable<String> classes,
107 |     /* Callback | ValueCallback<T> */ onCommit,
108 |   })  : labelField = labelField ?? TextField(text: label),
109 |         classes = classes is RxSet<String>
110 |             ? classes
111 |             : RxSet<String>.union(classes, class_) {
112 |     if (classes is RxSet) this.classes.addNonNull(class_);
113 |     this.height = height;
114 |     this.labelField.classes.add('label');
115 |     if (onCommit != null) this.onCommit.on(onCommit);
116 |   }
117 | 
118 |   ProxyValue<T> get valueProperty => labelled.valueProperty;
119 |   T get value => labelled.value;
120 |   set value(T value) => valueProperty.value = value;
121 |   void setCastValue(v) => valueProperty.value = value;
122 |   StreamBackedEmitter<ValueCommitEvent<T>> get onCommit => labelled.onCommit;
123 | }
124 | 
125 | class Form extends Object
126 |     with WidgetMixin
127 |     implements EditView<Map<String, dynamic>>, Widget {
128 |   @override
129 |   String key;
130 |   final RxSet<String> classes;
131 |   final RxList<View> children;
132 |   Distance hLabelWidth; // TODO
133 |   Distance hLabelMinWidth;
134 |   Distance hLabelMaxWidth;
135 | 
136 |   Form({
137 |     this.key,
138 |     Iterable<View> children,
139 |     View child,
140 |     this.hLabelWidth,
141 |     Distance hLabelMinWidth,
142 |     this.hLabelMaxWidth,
143 |     String class_,
144 |     Iterable<String> classes,
145 |     /* Callback | ValueCallback<Map<String, dynamic>> */ onCommit,
146 |   })  : children = RxList<View>.union(children, child),
147 |         hLabelMinWidth = hLabelMinWidth ?? FixedDistance(100),
148 |         classes = classes is RxSet<String>
149 |             ? classes
150 |             : RxSet<String>.union(classes, class_) {
151 |     if (classes is RxSet) this.classes.addNonNull(class_);
152 | 
153 |     valueProperty.values.listen(_normalSetter);
154 |     valueProperty.getterProxy = _normalGetter;
155 | 
156 |     for (View v in this.children) {
157 |       if (v is HLabeledView) {
158 |         if (v.labelField is Widget) {
159 |           final Widget lab = v.labelField as Widget;
160 |           lab.width ??= hLabelWidth;
161 |           lab.minWidth ??= this.hLabelMinWidth;
162 |           lab.maxWidth ??= hLabelMaxWidth;
163 |         }
164 |       }
165 |     }
166 |     if (onCommit != null) this.onCommit.on(onCommit);
167 |     // TODO emit commits
168 |   }
169 | 
170 |   final valueProperty = ProxyValue<Map<String, dynamic>>();
171 |   Map<String, dynamic> get value => valueProperty.value;
172 |   set value(Map<String, dynamic> value) => valueProperty.value = value;
173 |   void setCastValue(v) => valueProperty.value = value;
174 | 
175 |   Map<String, dynamic> _normalGetter() {
176 |     var ret = <String, dynamic>{};
177 |     for (View child in children) {
178 |       if (child is EditView) {
179 |         if (child.key != null) ret[child.key] = child.value;
180 |       }
181 |     }
182 |     return ret;
183 |   }
184 | 
185 |   void _normalSetter(Map<String, dynamic> values) {
186 |     for (View child in children) {
187 |       if (child is EditView) {
188 |         if (child.key != null && values.containsKey(child.key)) {
189 |           child.setCastValue(values[child.key]);
190 |         }
191 |       }
192 |     }
193 |   }
194 | 
195 |   final onCommit =
196 |       StreamBackedEmitter<ValueCommitEvent<Map<String, dynamic>>>();
197 | }
198 | 
199 | class MultilineEdit extends Object
200 |     with WidgetMixin
201 |     implements EditWidget<String> {
202 |   String key;
203 |   final RxSet<String> classes;
204 |   String placeholder;
205 |   final onCommit = StreamBackedEmitter<ValueCommitEvent<String>>();
206 |   final bool shouldEscape;
207 |   MultilineEdit({
208 |     this.placeholder,
209 |     this.key,
210 |     /* String | Stream<String> | Reactive<String> */ value,
211 |     /* Distance | Stream<Distance> | Reactive<Distance> */ width,
212 |     /* Distance | Stream<Distance> | Reactive<Distance> */ minWidth,
213 |     /* Distance | Stream<Distance> | Reactive<Distance> */ maxWidth,
214 | 
215 |     /* bool | Stream<bool> | Reactive<bool> */ bold,
216 | 
217 |     /* String | Stream<String> | Reactive<String> */ fontFamily,
218 |     /* String | Stream<String> | Reactive<Stream> */ color,
219 |     /* String | Stream<String> | Reactive<Stream> */ backgroundColor,
220 |     this.shouldEscape: true,
221 |     String class_,
222 |     Iterable<String> classes,
223 |     /* Callback | ValueCallback<String> */ onCommit,
224 |   }) : classes = classes is RxSet<String>
225 |             ? classes
226 |             : RxSet<String>.union(classes, class_) {
227 |     if (classes is RxSet) this.classes.addNonNull(class_);
228 |     valueProperty.bindOrSet(value);
229 |     widthProperty.bindOrSet(width);
230 |     minWidthProperty.bindOrSet(minWidth);
231 |     maxWidthProperty.bindOrSet(maxWidth);
232 |     boldProperty.bindOrSet(bold);
233 |     fontFamilyProperty.bindOrSet(fontFamily);
234 |     colorProperty.bindOrSet(color);
235 |     backgroundColorProperty.bindOrSet(backgroundColor);
236 |     if (onCommit != null) this.onCommit.on(onCommit);
237 |   }
238 | 
239 |   final valueProperty = ProxyValue<String>();
240 |   String get value => valueProperty.value;
241 |   set value(String value) => valueProperty.value = value;
242 |   void setCastValue(v) => valueProperty.value = value;
243 | }
244 | 


--------------------------------------------------------------------------------
/lib/view/event.dart:
--------------------------------------------------------------------------------
 1 | import 'dart:math';
 2 | import 'view.dart';
 3 | import 'dart:html';
 4 | 
 5 | class ClickEvent {
 6 |   final View view;
 7 | 
 8 |   Point<num> get offset => event.offset;
 9 | 
10 |   int get button => event.button;
11 | 
12 |   DateTime time;
13 | 
14 |   final MouseEvent event;
15 | 
16 |   bool get firedOnMe => event.target == event.currentTarget;
17 | 
18 |   ClickEvent(this.view, this.event, {DateTime time})
19 |       : time = time ?? DateTime.now();
20 | 
21 |   void cancel({bool all: false}) =>
22 |       !false ? event.stopPropagation() : event.stopImmediatePropagation();
23 | 
24 |   /// Key of the [View] on which the event occurred
25 |   String get key => view.key;
26 | }
27 | 
28 | class ValueCommitEvent<V> {
29 |   final View view;
30 | 
31 |   final V value;
32 | 
33 |   ValueCommitEvent(this.view, this.value);
34 | 
35 |   /// Key of the [View] on which the event occurred
36 |   String get key => view.key;
37 | }
38 | 


--------------------------------------------------------------------------------
/lib/view/measure.dart:
--------------------------------------------------------------------------------
 1 | abstract class Distance {
 2 |   num get size;
 3 | }
 4 | 
 5 | class FixedDistance implements Distance {
 6 |   final num size;
 7 |   const FixedDistance(this.size);
 8 |   String toString() => '${size.toString()}px';
 9 |   FixedDistance operator +(/* FixedSize | num */ other) {
10 |     if (other is FixedDistance) return FixedDistance(size + other.size);
11 |     if (other is num) return FixedDistance(size + other);
12 |     throw new Exception('Unknown operand ${other?.runtimeType}');
13 |   }
14 | 
15 |   FixedDistance operator -(/* FixedSize | num */ other) {
16 |     if (other is FixedDistance) return FixedDistance(size - other.size);
17 |     if (other is num) return FixedDistance(size - other);
18 |     throw new Exception('Unknown operand ${other?.runtimeType}');
19 |   }
20 | }
21 | 
22 | class FlexSize implements Distance {
23 |   final double size;
24 |   FlexSize(this.size);
25 |   String toString() => '${size.toString()}';
26 |   FlexSize operator +(/* FlexSize | num */ other) {
27 |     if (other is FlexSize) return FlexSize(size + other.size);
28 |     if (other is num) return FlexSize(size + other);
29 |     throw new Exception('Unknown operand ${other?.runtimeType}');
30 |   }
31 | 
32 |   FlexSize operator -(/* FlexSize | num */ other) {
33 |     if (other is FlexSize) return FlexSize(size - other.size);
34 |     if (other is num) return FlexSize(size - other);
35 |     throw new Exception('Unknown operand ${other?.runtimeType}');
36 |   }
37 | }
38 | 
39 | class PercentageDistance implements Distance {
40 |   final num size;
41 |   PercentageDistance(this.size);
42 |   String toString() => '${size.toString()}%';
43 |   PercentageDistance operator +(/* PercentageSize | num */ other) {
44 |     if (other is PercentageDistance)
45 |       return PercentageDistance(size + other.size);
46 |     if (other is num) return PercentageDistance(size + other);
47 |     throw new Exception('Unknown operand ${other?.runtimeType}');
48 |   }
49 | 
50 |   PercentageDistance operator -(/* PercentageSize | num */ other) {
51 |     if (other is PercentageDistance)
52 |       return PercentageDistance(size - other.size);
53 |     if (other is num) return PercentageDistance(size - other);
54 |     throw new Exception('Unknown operand ${other?.runtimeType}');
55 |   }
56 | }
57 | 
58 | class EdgeInset {
59 |   Distance top;
60 |   Distance right;
61 |   Distance bottom;
62 |   Distance left;
63 |   EdgeInset(
64 |       {Distance top,
65 |       Distance right,
66 |       Distance bottom,
67 |       Distance left,
68 |       Distance rest})
69 |       : top = top ?? rest,
70 |         right = right ?? rest,
71 |         bottom = bottom ?? rest,
72 |         left = left ?? rest;
73 |   EdgeInset.v(Distance pad, {Distance rest})
74 |       : top = pad,
75 |         bottom = pad,
76 |         right = rest,
77 |         left = rest;
78 |   EdgeInset.h(Distance pad, {Distance rest})
79 |       : right = pad,
80 |         left = pad,
81 |         top = rest,
82 |         bottom = rest;
83 |   EdgeInset.all(Distance pad)
84 |       : top = pad,
85 |         right = pad,
86 |         bottom = pad,
87 |         left = pad;
88 | }
89 | 


--------------------------------------------------------------------------------
/lib/view/table.dart:
--------------------------------------------------------------------------------
 1 | import 'view.dart';
 2 | import 'package:observable_ish/observable_ish.dart';
 3 | 
 4 | // TODO:
 5 | // 1) Sortable
 6 | // 2) Resizable columns
 7 | 
 8 | class TableRow implements View {
 9 |   String key;
10 |   final Distance height;
11 |   final FixedDistance minHeight;
12 |   final FixedDistance maxHeight;
13 |   Map<String, View> cells;
14 |   TableRow(this.cells, {this.height, this.minHeight, this.maxHeight, this.key});
15 |   final onRemoved = StreamBackedEmitter<void>();
16 | }
17 | 
18 | class ColumnSpec<T> {
19 |   final String label;
20 |   final String name;
21 |   final Distance width;
22 |   final FixedDistance minWidth;
23 |   final FixedDistance maxWidth;
24 |   final bool isResizable;
25 |   // TODO
26 | 
27 |   ColumnSpec(this.label,
28 |       {String name,
29 |       this.width,
30 |       this.minWidth,
31 |       this.maxWidth,
32 |       this.isResizable: true})
33 |       : name = name ?? label;
34 | 
35 |   bool operator ==(other) {
36 |     if (other is ColumnSpec) return name == other.name;
37 |     return false;
38 |   }
39 | 
40 |   int get hashCode => name.hashCode;
41 | }
42 | 
43 | class Table implements View {
44 |   String key;
45 | 
46 |   List<ColumnSpec> spec;
47 | 
48 |   List<TableRow> rows;
49 | 
50 |   final bool isResponsive;
51 |   final onRemoved = StreamBackedEmitter<void>();
52 | 
53 |   Table({this.spec, this.rows, this.isResponsive: false, this.key});
54 | 
55 |   int get numCols => spec.length;
56 | 
57 |   int get numRows => rows.length;
58 | }
59 | 


--------------------------------------------------------------------------------
/lib/view/text.dart:
--------------------------------------------------------------------------------
  1 | import 'package:nuts/nuts.dart';
  2 | 
  3 | class TextField extends Object with WidgetMixin implements Widget {
  4 |   String key;
  5 |   final RxSet<String> classes;
  6 |   TextField({
  7 |     this.key,
  8 |     /* String | Stream<String> | Reactive<String> */ text,
  9 |     /* Distance | Stream<Distance> | Reactive<Distance> */ width,
 10 |     /* Distance | Stream<Distance> | Reactive<Distance> */ minWidth,
 11 |     /* Distance | Stream<Distance> | Reactive<Distance> */ maxWidth,
 12 |     /* Distance | Stream<Distance> | Reactive<Distance> */ height,
 13 |     /* Distance | Stream<Distance> | Reactive<Distance> */ minHeight,
 14 |     /* Distance | Stream<Distance> | Reactive<Distance> */ maxHeight,
 15 | 
 16 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginLeft,
 17 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginTop,
 18 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginRight,
 19 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginBottom,
 20 | 
 21 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingLeft,
 22 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingTop,
 23 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingRight,
 24 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingBottom,
 25 | 
 26 |     /* Distance | Stream<Distance> | Reactive<Distance> */ left,
 27 |     /* Distance | Stream<Distance> | Reactive<Distance> */ top,
 28 |     /* Distance | Stream<Distance> | Reactive<Distance> */ right,
 29 |     /* Distance | Stream<Distance> | Reactive<Distance> */ bottom,
 30 | 
 31 |     /* bool | Stream<bool> | Reactive<bool> */ bold,
 32 | 
 33 |     /* String | Stream<String> | Reactive<String> */ fontFamily,
 34 |     /* Distance | Stream<Distance> | Reactive<Distance> */ fontSize,
 35 |     /* String | Stream<String> | Reactive<Stream> */ color,
 36 |     /* String | Stream<String> | Reactive<Stream> */ backgroundColor,
 37 |     String class_,
 38 |     Iterable<String> classes,
 39 |     /* Callback | ValueCallback */ onClick,
 40 |   }) : classes = classes is RxSet<String>
 41 |             ? classes
 42 |             : RxSet<String>.union(classes, class_) {
 43 |     if (classes is RxSet) this.classes.addNonNull(class_);
 44 |     textProperty.bindOrSet(text);
 45 |     widthProperty.bindOrSet(width);
 46 |     minWidthProperty.bindOrSet(minWidth);
 47 |     maxWidthProperty.bindOrSet(maxWidth);
 48 |     heightProperty.bindOrSet(height);
 49 |     minHeightProperty.bindOrSet(minHeight);
 50 |     maxHeightProperty.bindOrSet(maxHeight);
 51 |     marginLeftProperty.bindOrSet(marginLeft);
 52 |     marginTopProperty.bindOrSet(marginTop);
 53 |     marginRightProperty.bindOrSet(marginRight);
 54 |     marginBottomProperty.bindOrSet(marginBottom);
 55 |     paddingLeftProperty.bindOrSet(paddingLeft);
 56 |     paddingTopProperty.bindOrSet(paddingTop);
 57 |     paddingRightProperty.bindOrSet(paddingRight);
 58 |     paddingBottomProperty.bindOrSet(paddingBottom);
 59 |     leftProperty.bindOrSet(left);
 60 |     topProperty.bindOrSet(top);
 61 |     rightProperty.bindOrSet(right);
 62 |     bottomProperty.bindOrSet(bottom);
 63 |     boldProperty.bindOrSet(bold);
 64 |     fontFamilyProperty.bindOrSet(fontFamily);
 65 |     fontSizeProperty.bindOrSet(fontSize);
 66 |     colorProperty.bindOrSet(color);
 67 |     backgroundColorProperty.bindOrSet(backgroundColor);
 68 | 
 69 |     if (onClick != null) this.onClick.on(onClick);
 70 |   }
 71 | 
 72 |   final textProperty = ProxyValue<String>();
 73 |   String get text => textProperty.value;
 74 |   set text(String value) => textProperty.value = value;
 75 | }
 76 | 
 77 | class IntField extends Object with WidgetMixin implements View {
 78 |   String key;
 79 |   final RxSet<String> classes;
 80 |   IntField({
 81 |     this.key,
 82 |     /* int | Stream<int> | Reactive<int> */ text,
 83 |     /* Distance | Stream<Distance> | Reactive<Distance> */ width,
 84 |     /* Distance | Stream<Distance> | Reactive<Distance> */ minWidth,
 85 |     /* Distance | Stream<Distance> | Reactive<Distance> */ maxWidth,
 86 |     /* Distance | Stream<Distance> | Reactive<Distance> */ height,
 87 |     /* Distance | Stream<Distance> | Reactive<Distance> */ minHeight,
 88 |     /* Distance | Stream<Distance> | Reactive<Distance> */ maxHeight,
 89 | 
 90 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginLeft,
 91 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginTop,
 92 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginRight,
 93 |     /* Distance | Stream<Distance> | Reactive<Distance> */ marginBottom,
 94 | 
 95 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingLeft,
 96 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingTop,
 97 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingRight,
 98 |     /* Distance | Stream<Distance> | Reactive<Distance> */ paddingBottom,
 99 | 
100 |     /* Distance | Stream<Distance> | Reactive<Distance> */ left,
101 |     /* Distance | Stream<Distance> | Reactive<Distance> */ top,
102 |     /* Distance | Stream<Distance> | Reactive<Distance> */ right,
103 |     /* Distance | Stream<Distance> | Reactive<Distance> */ bottom,
104 | 
105 |     /* bool | Stream<bool> | Reactive<bool> */ bold,
106 | 
107 |     /* String | Stream<String> | Reactive<String> */ fontFamily,
108 |     /* String | Stream<String> | Reactive<Stream> */ color,
109 |     /* String | Stream<String> | Reactive<Stream> */ backgroundColor,
110 |     String class_,
111 |     Iterable<String> classes,
112 |     /* Callback | ValueCallback */ onClick,
113 |   }) : classes = classes is RxSet<String>
114 |             ? classes
115 |             : RxSet<String>.union(classes, class_) {
116 |     if (classes is RxSet) this.classes.addNonNull(class_);
117 |     textProperty.bindOrSet(text);
118 |     widthProperty.bindOrSet(width);
119 |     minWidthProperty.bindOrSet(minWidth);
120 |     maxWidthProperty.bindOrSet(maxWidth);
121 |     heightProperty.bindOrSet(height);
122 |     minHeightProperty.bindOrSet(minHeight);
123 |     maxHeightProperty.bindOrSet(maxHeight);
124 |     marginLeftProperty.bindOrSet(marginLeft);
125 |     marginTopProperty.bindOrSet(marginTop);
126 |     marginRightProperty.bindOrSet(marginRight);
127 |     marginBottomProperty.bindOrSet(marginBottom);
128 |     paddingLeftProperty.bindOrSet(paddingLeft);
129 |     paddingTopProperty.bindOrSet(paddingTop);
130 |     paddingRightProperty.bindOrSet(paddingRight);
131 |     paddingBottomProperty.bindOrSet(paddingBottom);
132 |     leftProperty.bindOrSet(left);
133 |     topProperty.bindOrSet(top);
134 |     rightProperty.bindOrSet(right);
135 |     bottomProperty.bindOrSet(bottom);
136 |     boldProperty.bindOrSet(bold);
137 |     fontFamilyProperty.bindOrSet(fontFamily);
138 |     colorProperty.bindOrSet(color);
139 |     backgroundColorProperty.bindOrSet(backgroundColor);
140 | 
141 |     if (onClick != null) this.onClick.on(onClick);
142 |   }
143 | 
144 |   final textProperty = ProxyValue<int>();
145 |   int get text => textProperty.value;
146 |   set text(int value) => textProperty.value = value;
147 | }
148 | 
149 | abstract class LabeledView implements View {
150 |   View get labelField;
151 | }
152 | 
153 | abstract class VLabeledView implements LabeledView {}
154 | 
155 | abstract class HLabeledView implements LabeledView {}
156 | 
157 | class LabeledField extends Object
158 |     with WidgetMixin
159 |     implements HLabeledView, Widget {
160 |   String key;
161 |   final RxSet<String> classes;
162 |   TextField labelField;
163 |   View labelled;
164 |   dynamic height;
165 |   VAlign vAlign;
166 | 
167 |   LabeledField(
168 |     this.labelled, {
169 |     String label,
170 |     TextField labelField,
171 |     Distance height,
172 |     this.vAlign,
173 |     this.key,
174 |     String class_,
175 |     Iterable<String> classes,
176 |   })  : labelField = labelField ?? TextField(text: label),
177 |         classes = classes is RxSet<String>
178 |             ? classes
179 |             : RxSet<String>.union(classes, class_) {
180 |     if (classes is RxSet) this.classes.addNonNull(class_);
181 |     this.labelField.classes.add('label'); // TODO remove
182 |     this.height = height;
183 |   }
184 | }
185 | 
186 | class VLabeledField extends Object with WidgetMixin implements VLabeledView {
187 |   String key;
188 |   final RxSet<String> classes;
189 |   TextField labelField;
190 |   View labelled;
191 |   HAlign hAlign;
192 | 
193 |   VLabeledField(
194 |     this.labelled, {
195 |     String label,
196 |     TextField labelField,
197 |     String text,
198 |     Distance width,
199 |     this.hAlign,
200 |     this.key,
201 |     String class_,
202 |     Iterable<String> classes,
203 |   })  : labelField = labelField ?? TextField(text: label),
204 |         classes = classes is RxSet<String>
205 |             ? classes
206 |             : RxSet<String>.union(classes, class_) {
207 |     if (classes is RxSet) this.classes.addNonNull(class_);
208 |     this.width = width;
209 |     this.labelField.classes.add('label'); // TODO remove
210 |   }
211 | }
212 | 
213 | class Button extends Object with WidgetMixin implements Widget {
214 |   String key;
215 |   final RxSet<String> classes;
216 | 
217 |   final String icon;
218 | 
219 |   final String text;
220 | 
221 |   final String tip;
222 | 
223 |   Button(
224 |       {this.icon,
225 |       this.text,
226 |       /* Callback | ValueCallback */ onClick,
227 |       this.tip,
228 |       /* String | Stream<String> | Reactive<String> */ color,
229 |       /* Distance | Stream<Distance> | Reactive<Distance> */ fontSize,
230 |       this.key,
231 |       String class_,
232 |       Iterable<String> classes})
233 |       : classes = classes is RxSet<String>
234 |             ? classes
235 |             : RxSet<String>.union(classes, class_) {
236 |     if (classes is RxSet) this.classes.addNonNull(class_);
237 | 
238 |     fontSizeProperty.bindOrSet(fontSize);
239 |     colorProperty.bindOrSet(color);
240 | 
241 |     if (onClick != null) this.onClick.on(onClick);
242 |   }
243 | 
244 |   static const String blue = '#2687c1';
245 | 
246 |   static const String red = 'rgb(208, 51, 51)';
247 | 
248 |   static const String green = '#19ac19';
249 | }
250 | 


--------------------------------------------------------------------------------
/lib/view/view.dart:
--------------------------------------------------------------------------------
  1 | import 'dart:async';
  2 | import 'package:nuts/nuts.dart';
  3 | 
  4 | export 'containers.dart';
  5 | export 'editable.dart';
  6 | export 'event.dart';
  7 | export 'measure.dart';
  8 | export 'table.dart';
  9 | export 'text.dart';
 10 | 
 11 | abstract class View {
 12 |   String get key;
 13 | }
 14 | 
 15 | abstract class RemoveProcessor implements View {
 16 |   Emitter<void> get onRemoved;
 17 | }
 18 | 
 19 | void emitRemoved(View view) {
 20 |   if (view is RemoveProcessor) view.onRemoved.emitOne(null);
 21 |   if (view is Component) emitRemoved(view.view);
 22 | }
 23 | 
 24 | abstract class Component implements View {
 25 |   View get view;
 26 | }
 27 | 
 28 | typedef View MakeViewFor<T>(T value);
 29 | 
 30 | /// A pseudo-component that can reactively render different views
 31 | class VariableView<T> implements View, RemoveProcessor {
 32 |   final String key;
 33 |   final Stream<T> rebuildOn;
 34 |   final MakeViewFor<T> viewMaker;
 35 |   final T initial;
 36 |   final onRemoved = StreamBackedEmitter<void>();
 37 |   VariableView(this.initial, this.rebuildOn, this.viewMaker, {this.key});
 38 |   VariableView.rx(RxValue<T> rx, this.viewMaker, {this.key})
 39 |       : initial = rx.value,
 40 |         rebuildOn = rx.values;
 41 |   View makeView(dynamic /* T */ v) => viewMaker(v as T);
 42 | }
 43 | 
 44 | // TODO
 45 | abstract class ConditionalComponent implements Component {}
 46 | 
 47 | // TODO
 48 | abstract class BoolComponent implements Component {}
 49 | 
 50 | enum VAlign { top, middle, bottom }
 51 | enum HAlign { left, center, right }
 52 | 
 53 | abstract class Widget implements View {
 54 |   RxSet<String> get classes;
 55 |   ProxyValue<dynamic /* Distance | num */ > get widthProperty;
 56 |   dynamic /* Distance | num */ width;
 57 |   ProxyValue<Distance> get minWidthProperty;
 58 |   Distance minWidth;
 59 |   ProxyValue<Distance> get maxWidthProperty;
 60 |   Distance maxWidth;
 61 |   ProxyValue<dynamic /* Distance | num */ > get heightProperty;
 62 |   dynamic /* Distance | num */ height;
 63 |   ProxyValue<Distance> get minHeightProperty;
 64 |   Distance minHeight;
 65 |   ProxyValue<Distance> get maxHeightProperty;
 66 |   Distance maxHeight;
 67 |   ProxyValue<Distance> get marginLeftProperty;
 68 |   Distance marginLeft;
 69 |   ProxyValue<Distance> get marginTopProperty;
 70 |   Distance marginTop;
 71 |   ProxyValue<Distance> get marginRightProperty;
 72 |   Distance marginRight;
 73 |   ProxyValue<Distance> get marginBottomProperty;
 74 |   Distance marginBottom;
 75 |   ProxyValue<Distance> get paddingLeftProperty;
 76 |   Distance paddingLeft;
 77 |   ProxyValue<Distance> get paddingTopProperty;
 78 |   Distance paddingTop;
 79 |   ProxyValue<Distance> get paddingRightProperty;
 80 |   Distance paddingRight;
 81 |   ProxyValue<Distance> get paddingBottomProperty;
 82 |   Distance paddingBottom;
 83 |   ProxyValue<dynamic /* Distance | num */ > get leftProperty;
 84 |   dynamic /* Distance | num */ left;
 85 |   ProxyValue<dynamic /* Distance | num */ > get topProperty;
 86 |   dynamic /* Distance | num */ top;
 87 |   ProxyValue<dynamic /* Distance | num */ > get rightProperty;
 88 |   dynamic /* Distance | num */ right;
 89 |   ProxyValue<dynamic /* Distance | num */> get bottomProperty;
 90 |   dynamic /* Distance | num */ bottom;
 91 |   ProxyValue<bool> get boldProperty;
 92 |   bool bold;
 93 |   ProxyValue<String> get fontFamilyProperty;
 94 |   String fontFamily;
 95 |   ProxyValue<Distance> get fontSizeProperty;
 96 |   Distance fontSize;
 97 |   ProxyValue<String> get colorProperty;
 98 |   String color;
 99 |   ProxyValue<String> get backgroundColorProperty;
100 |   String backgroundColor;
101 |   ProxyValue<String> get backgroundImageProperty;
102 |   String backgroundImage;
103 | 
104 |   // TODO padding property
105 |   EdgeInset padding;
106 |   // TODO margin property
107 |   EdgeInset margin;
108 | 
109 |   StreamBackedEmitter<ClickEvent> get onClick;
110 |   StreamBackedEmitter<ClickEvent> get onMouseDown;
111 |   StreamBackedEmitter<ClickEvent> get onMouseMove;
112 |   StreamBackedEmitter<ClickEvent> get onMouseUp;
113 | }
114 | 
115 | abstract class Container implements Widget, RemoveProcessor {
116 |   T getByKey<T extends View>(String key);
117 |   T deepGetByKey<T extends View>(Iterable<String> keys);
118 |   RxList<View> get children;
119 | }
120 | 
121 | abstract class WidgetMixin implements Widget {
122 |   final widthProperty = ProxyValue<dynamic>();
123 |   dynamic get width => widthProperty.value;
124 |   set width(dynamic value) => widthProperty.value = value;
125 | 
126 |   final minWidthProperty = ProxyValue<Distance>();
127 |   Distance get minWidth => minWidthProperty.value;
128 |   set minWidth(Distance value) => minWidthProperty.value = value;
129 | 
130 |   final maxWidthProperty = ProxyValue<Distance>();
131 |   Distance get maxWidth => maxWidthProperty.value;
132 |   set maxWidth(Distance value) => maxWidthProperty.value = value;
133 | 
134 |   final heightProperty = ProxyValue<dynamic>();
135 |   dynamic get height => heightProperty.value;
136 |   set height(dynamic value) => heightProperty.value = value;
137 | 
138 |   final minHeightProperty = ProxyValue<Distance>();
139 |   Distance get minHeight => minHeightProperty.value;
140 |   set minHeight(Distance value) => minHeightProperty.value = value;
141 | 
142 |   final maxHeightProperty = ProxyValue<Distance>();
143 |   Distance get maxHeight => maxHeightProperty.value;
144 |   set maxHeight(Distance value) => maxHeightProperty.value = value;
145 | 
146 |   final marginLeftProperty = ProxyValue<Distance>();
147 |   Distance get marginLeft => marginLeftProperty.value;
148 |   set marginLeft(Distance value) => marginLeftProperty.value = value;
149 | 
150 |   final marginTopProperty = ProxyValue<Distance>();
151 |   Distance get marginTop => marginTopProperty.value;
152 |   set marginTop(Distance value) => marginTopProperty.value = value;
153 | 
154 |   final marginRightProperty = ProxyValue<Distance>();
155 |   Distance get marginRight => marginRightProperty.value;
156 |   set marginRight(Distance value) => marginRightProperty.value = value;
157 | 
158 |   final marginBottomProperty = ProxyValue<Distance>();
159 |   Distance get marginBottom => marginBottomProperty.value;
160 |   set marginBottom(Distance value) => marginBottomProperty.value = value;
161 | 
162 |   final paddingLeftProperty = ProxyValue<Distance>();
163 |   Distance get paddingLeft => paddingLeftProperty.value;
164 |   set paddingLeft(Distance value) => paddingLeftProperty.value = value;
165 | 
166 |   final paddingTopProperty = ProxyValue<Distance>();
167 |   Distance get paddingTop => paddingTopProperty.value;
168 |   set paddingTop(Distance value) => paddingTopProperty.value = value;
169 | 
170 |   final paddingRightProperty = ProxyValue<Distance>();
171 |   Distance get paddingRight => paddingRightProperty.value;
172 |   set paddingRight(Distance value) => paddingRightProperty.value = value;
173 | 
174 |   final paddingBottomProperty = ProxyValue<Distance>();
175 |   Distance get paddingBottom => paddingBottomProperty.value;
176 |   set paddingBottom(Distance value) => paddingBottomProperty.value = value;
177 | 
178 |   final leftProperty = ProxyValue<dynamic>();
179 |   dynamic get left => leftProperty.value;
180 |   set left(dynamic value) => leftProperty.value = value;
181 | 
182 |   final topProperty = ProxyValue<dynamic>();
183 |   dynamic get top => topProperty.value;
184 |   set top(dynamic value) => topProperty.value = value;
185 | 
186 |   final rightProperty = ProxyValue<dynamic>();
187 |   dynamic get right => rightProperty.value;
188 |   set right(dynamic value) => rightProperty.value = value;
189 | 
190 |   final bottomProperty = ProxyValue<dynamic>();
191 |   dynamic get bottom => bottomProperty.value;
192 |   set bottom(dynamic value) => bottomProperty.value = value;
193 | 
194 |   final boldProperty = ProxyValue<bool>();
195 |   bool get bold => boldProperty.value;
196 |   set bold(bool value) => boldProperty.value = value;
197 | 
198 |   final fontFamilyProperty = ProxyValue<String>();
199 |   String get fontFamily => fontFamilyProperty.value;
200 |   set fontFamily(String value) => fontFamilyProperty.value = value;
201 | 
202 |   final fontSizeProperty = ProxyValue<Distance>();
203 |   Distance get fontSize => fontSizeProperty.value;
204 |   set fontSize(Distance value) => fontSizeProperty.value = value;
205 | 
206 |   final colorProperty = ProxyValue<String>();
207 |   String get color => colorProperty.value;
208 |   set color(String value) => colorProperty.value = value;
209 | 
210 |   final backgroundColorProperty = ProxyValue<String>();
211 |   String get backgroundColor => backgroundColorProperty.value;
212 |   set backgroundColor(String value) => backgroundColorProperty.value = value;
213 | 
214 |   final backgroundImageProperty = ProxyValue<String>();
215 |   String get backgroundImage => backgroundImageProperty.value;
216 |   set backgroundImage(String value) => backgroundImageProperty.value = value;
217 | 
218 |   EdgeInset get padding => EdgeInset(
219 |       left: paddingLeft,
220 |       top: paddingTop,
221 |       right: paddingRight,
222 |       bottom: paddingBottom);
223 | 
224 |   set padding(EdgeInset value) {
225 |     paddingLeft = value.left;
226 |     paddingTop = value.top;
227 |     paddingRight = value.right;
228 |     paddingBottom = value.bottom;
229 |   }
230 | 
231 |   EdgeInset get margin => EdgeInset(
232 |       left: marginLeft,
233 |       top: marginTop,
234 |       right: marginRight,
235 |       bottom: marginBottom);
236 | 
237 |   set margin(EdgeInset value) {
238 |     marginLeft = value.left;
239 |     marginTop = value.top;
240 |     marginRight = value.right;
241 |     marginBottom = value.bottom;
242 |   }
243 | 
244 |   final onClick = StreamBackedEmitter<ClickEvent>();
245 |   final onMouseDown = StreamBackedEmitter<ClickEvent>();
246 |   final onMouseMove = StreamBackedEmitter<ClickEvent>();
247 |   final onMouseUp = StreamBackedEmitter<ClickEvent>();
248 | }
249 | 
250 | class RxChildList<S> extends BoundList<S, View> {
251 |   RxChildList(RxList<S> binding, ChildrenListComposer<S, View> composer)
252 |       : super(binding, composer);
253 | }
254 | 


--------------------------------------------------------------------------------
/pubspec.yaml:
--------------------------------------------------------------------------------
 1 | name: nuts
 2 | description: >
 3 |   Nuts and bolts for building cross-platform UI (HTML, Flutter, CLI) using Dart. Also screw frameworks (React, Vue,
 4 |   Angular).
 5 | version: 2.1.4
 6 | homepage: https://github.com/Jaguar-dart/nuts
 7 | author: Ravi Teja Gudapati <tejainece@gmail.com>
 8 | 
 9 | environment:
10 |   sdk: '>=2.0.0-dev.65.0 <3.0.0'
11 | 
12 | dependencies:
13 |   collection: ^1.14.10
14 |   observable_ish: ^2.1.4
15 | 
16 | dev_dependencies:
17 |   build_runner: ^0.9.0
18 |   build_web_compilers: ^0.4.0
19 | 


--------------------------------------------------------------------------------
/web/binding/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta name="scaffolded-by" content="https://github.com/google/stagehand">
 9 |     <title>nuts</title>
10 |     <link rel="stylesheet" href="styles.css">
11 |     <link rel="stylesheet" href="/packages/nuts/styles.css">
12 |     <link rel="icon" href="favicon.ico">
13 |     <script defer src="main.dart.js"></script>
14 | </head>
15 | 
16 | <body>
17 | 
18 |   <div id="output"></div>
19 | 
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/web/binding/main.dart:
--------------------------------------------------------------------------------
 1 | import 'dart:html';
 2 | import 'package:nuts/nuts.dart';
 3 | import 'package:nuts/html_renderer.dart';
 4 | 
 5 | class Counter implements Component {
 6 |   @override
 7 |   String key;
 8 | 
 9 |   final count = RxValue<int>(initial: 0);
10 | 
11 |   Counter() {
12 |     view = _makeView();
13 |   }
14 | 
15 |   @override
16 |   View view;
17 | 
18 |   View _makeView() {
19 |     return Box(children: [
20 |       HBox(children: [
21 |         TextField(text: 'Count: '),
22 |         IntField(text: count, class_: 'count')
23 |       ]),
24 |       HBox(children: [
25 |         Button(text: 'Increment', onClick: () => count.value++),
26 |         Button(text: 'Decrement', onClick: () => count.value--),
27 |       ]),
28 |     ]);
29 |   }
30 | }
31 | 
32 | void main() {
33 |   querySelector('#output').append(defaultRenderers.render(Counter()));
34 | }
35 | 


--------------------------------------------------------------------------------
/web/binding/styles.css:
--------------------------------------------------------------------------------
 1 | @import url(https://fonts.googleapis.com/css?family=Roboto);
 2 | 
 3 | html, body {
 4 |   width: 100%;
 5 |   height: 100%;
 6 |   margin: 0;
 7 |   padding: 0;
 8 |   font-family: 'Roboto', sans-serif;
 9 | }
10 | 
11 | #output {
12 |   padding: 20px;
13 |   text-align: center;
14 | }
15 | 
16 | .count {
17 |     font-weight: bold;
18 | }


--------------------------------------------------------------------------------
/web/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jaguar-dart/nuts/920ed99df55f7181af2c6cabbd2ddae02ee8c248/web/favicon.ico


--------------------------------------------------------------------------------
/web/query/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta name="scaffolded-by" content="https://github.com/google/stagehand">
 9 |     <title>nuts</title>
10 |     <link rel="stylesheet" href="styles.css">
11 |     <link rel="stylesheet" href="/packages/nuts/styles.css">
12 |     <link rel="icon" href="../favicon.ico">
13 |     <script defer src="main.dart.js"></script>
14 | </head>
15 | 
16 | <body>
17 | 
18 |   <div id="output"></div>
19 | 
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/web/query/main.dart:
--------------------------------------------------------------------------------
 1 | import 'dart:html';
 2 | import 'package:nuts/nuts.dart';
 3 | import 'package:nuts/html_renderer.dart';
 4 | 
 5 | class Counter implements Component {
 6 |   @override
 7 |   String key;
 8 | 
 9 |   int count = 0;
10 | 
11 |   Counter() {
12 |     view = _makeView();
13 |   }
14 | 
15 |   @override
16 |   View view;
17 | 
18 |   View _makeView() {
19 |     Box ret;
20 |     ret = Box(children: [
21 |       TextField(text: 'Count: $count', key: 'info'),
22 |       HBox(children: [
23 |         Button(
24 |             text: 'Increment',
25 |             onClick: () {
26 |               ret.getByKey<TextField>('info').text = 'Count: ${++count}';
27 |             }),
28 |         Button(
29 |             text: 'Decrement',
30 |             onClick: () {
31 |               ret.getByKey<TextField>('info').text = 'Count: ${--count}';
32 |             }),
33 |       ]),
34 |     ]);
35 |     return ret;
36 |   }
37 | }
38 | 
39 | void main() {
40 |   querySelector('#output').append(defaultRenderers.render(Counter()));
41 | }
42 | 


--------------------------------------------------------------------------------
/web/query/styles.css:
--------------------------------------------------------------------------------
 1 | @import url(https://fonts.googleapis.com/css?family=Roboto);
 2 | 
 3 | html, body {
 4 |   width: 100%;
 5 |   height: 100%;
 6 |   margin: 0;
 7 |   padding: 0;
 8 |   font-family: 'Roboto', sans-serif;
 9 | }
10 | 
11 | #output {
12 |   padding: 20px;
13 |   text-align: center;
14 | }
15 | 


--------------------------------------------------------------------------------