OLD | NEW |
1 Sky Style Language | 1 Sky Style Language |
2 ================== | 2 ================== |
3 | 3 |
4 Planed changes | 4 Planed changes |
5 -------------- | 5 -------------- |
6 | 6 |
7 Add //-to-end-of-line comments to be consistent with the script | 7 Add //-to-end-of-line comments to be consistent with the script |
8 language. | 8 language. |
9 | 9 |
10 | 10 |
(...skipping 334 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
345 // call it | 345 // call it |
346 // cache the value | 346 // cache the value |
347 // if relativeDimension is true, then mark the value as provisional | 347 // if relativeDimension is true, then mark the value as provisional |
348 // return the value | 348 // return the value |
349 // otherwise use the ParsedValue's value; cache it; return it | 349 // otherwise use the ParsedValue's value; cache it; return it |
350 // otherwise, if a pseudo-element was specified, try again without one | 350 // otherwise, if a pseudo-element was specified, try again without one |
351 // otherwise, if the property is inherited and there's a parent: | 351 // otherwise, if the property is inherited and there's a parent: |
352 // get it from the parent (without pseudo); cache it; return it | 352 // get it from the parent (without pseudo); cache it; return it |
353 // otherwise, get the default value; cache it; return it | 353 // otherwise, get the default value; cache it; return it |
354 | 354 |
355 readonly attribute Boolean needsLayout; // means that a property with needsLay
out:true has changed on this node or one of its descendants | 355 readonly attribute Boolean needsLayout; |
| 356 // means that either needsLayout is true or a property with needsLayout:true
has changed on this node |
356 // needsLayout is set to false by the ownerLayoutManager's default layout()
method | 357 // needsLayout is set to false by the ownerLayoutManager's default layout()
method |
| 358 |
| 359 readonly attribute Boolean descendantNeedsLayout; |
| 360 // means that some child of this node has needsLayout set to true |
| 361 // descendantNeedsLayout is set to false by the ownerLayoutManager's default
layout() method |
| 362 |
357 readonly attribute LayoutManager layoutManager; | 363 readonly attribute LayoutManager layoutManager; |
358 | |
359 readonly attribute LayoutManager ownerLayoutManager; // defaults to the parent
Node.layoutManager | 364 readonly attribute LayoutManager ownerLayoutManager; // defaults to the parent
Node.layoutManager |
360 // if you are not the ownerLayoutManager, then ignore this StyleNode in layo
ut() and paintChildren() | 365 // if you are not the ownerLayoutManager, then ignore this StyleNode in layo
ut() and paintChildren() |
361 // using walkChildren() does this for you | 366 // using walkChildren() does this for you |
362 | 367 |
363 readonly attribute Boolean needsPaint; // means that either needsLayout is tru
e or a property with needsPaint:true has changed on this node or one of its desc
endants | 368 readonly attribute Boolean needsPaint; |
| 369 // means that either needsLayout is true or a property with needsPaint:true
has changed on this node |
364 // needsPaint is set to false by the ownerLayoutManager's default paint() me
thod | 370 // needsPaint is set to false by the ownerLayoutManager's default paint() me
thod |
365 | 371 |
| 372 readonly attribute Boolean descendantNeedsPaint; |
| 373 // means that some child of this node has needsPaint set to true |
| 374 // descendantNeedsPaint is set to false by the ownerLayoutManager's default
paint() method |
| 375 |
366 // only the ownerLayoutManager can change these | 376 // only the ownerLayoutManager can change these |
367 readonly attribute Float x; // relative to left edge of ownerLayoutManager | 377 readonly attribute Float x; // relative to left edge of ownerLayoutManager |
368 readonly attribute Float y; // relative to top edge of ownerLayoutManager | 378 readonly attribute Float y; // relative to top edge of ownerLayoutManager |
369 readonly attribute Float width; | 379 readonly attribute Float width; |
370 readonly attribute Float height; | 380 readonly attribute Float height; |
371 } | 381 } |
372 ``` | 382 ``` |
373 | 383 |
374 The flattened tree is represented as a hierarchy of Node objects. For | 384 The flattened tree is represented as a hierarchy of Node objects. For |
375 any element that only contains text node children, the "text" property | 385 any element that only contains text node children, the "text" property |
(...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
441 // returns a generator that iterates over the children backwards, skipping a
ny whose ownerLayoutManager is not |this| | 451 // returns a generator that iterates over the children backwards, skipping a
ny whose ownerLayoutManager is not |this| |
442 | 452 |
443 void assumeDimensions(Float width, Float height); | 453 void assumeDimensions(Float width, Float height); |
444 // sets the assumed dimensions for calls to getProperty() on StyleNodes that
have this as an ownerLayoutManager | 454 // sets the assumed dimensions for calls to getProperty() on StyleNodes that
have this as an ownerLayoutManager |
445 // if the new dimension is different than the last assumed dimensions, and a
ny StyleNodes with an | 455 // if the new dimension is different than the last assumed dimensions, and a
ny StyleNodes with an |
446 // ownerLayoutManager==this have cached values for getProperty() that are ma
rked as provisional, clear them | 456 // ownerLayoutManager==this have cached values for getProperty() that are ma
rked as provisional, clear them |
447 // TODO(ianh): should we force this to match the input to layout(), when cal
led from inside layout() and when | 457 // TODO(ianh): should we force this to match the input to layout(), when cal
led from inside layout() and when |
448 // layout() has a forced width and/or height? | 458 // layout() has a forced width and/or height? |
449 | 459 |
450 virtual LayoutValueRange getIntrinsicWidth(Float? defaultWidth = null); | 460 virtual LayoutValueRange getIntrinsicWidth(Float? defaultWidth = null); |
451 // returns min-width, width, and max-width, normalised, defaulting to values
given in LayoutValueRange | 461 /* |
452 // if argument is provided, it overrides width | 462 function getIntrinsicWidth(defaultWidth) { |
| 463 if (defaultWidth == null) { |
| 464 defaultWidth = this.node.getProperty('width'); |
| 465 if (typeof defaultWidth != 'number') |
| 466 defaultWidth = 0; |
| 467 } |
| 468 let minWidth = this.node.getProperty('min-width'); |
| 469 if (typeof minWidth != 'number') |
| 470 minWidth = 0; |
| 471 let maxWidth = this.node.getProperty('max-width'); |
| 472 if (typeof maxWidth != 'number') |
| 473 maxWidth = Infinity; |
| 474 if (maxWidth < minWidth) |
| 475 maxWidth = minWidth; |
| 476 if (defaultWidth > maxWidth) |
| 477 defaultWidth = maxWidth; |
| 478 if (defaultWidth < minWidth) |
| 479 defaultWidth = minWidth; |
| 480 return { |
| 481 minimum: minWidth, |
| 482 value: defaultWidth, |
| 483 maximum: maxWidth, |
| 484 }; |
| 485 } |
| 486 */ |
453 | 487 |
454 virtual LayoutValueRange getIntrinsicHeight(Float? defaultHeight = null); | 488 virtual LayoutValueRange getIntrinsicHeight(Float? defaultHeight = null); |
455 // returns min-height, height, and max-height, normalised, defaulting to val
ues given in LayoutValueRange | 489 /* |
456 // if argument is provided, it overrides height | 490 function getIntrinsicHeight(defaultHeight) { |
| 491 if (defaultHeight == null) { |
| 492 defaultHeight = this.node.getProperty('height'); |
| 493 if (typeof defaultHeight != 'number') |
| 494 defaultHeight = 0; |
| 495 } |
| 496 let minHeight = this.node.getProperty('min-height'); |
| 497 if (typeof minHeight != 'number') |
| 498 minHeight = 0; |
| 499 let maxHeight = this.node.getProperty('max-height'); |
| 500 if (typeof maxHeight != 'number') |
| 501 maxHeight = Infinity; |
| 502 if (maxHeight < minHeight) |
| 503 maxHeight = minHeight; |
| 504 if (defaultHeight > maxHeight) |
| 505 defaultHeight = maxHeight; |
| 506 if (defaultHeight < minHeight) |
| 507 defaultHeight = minHeight; |
| 508 return { |
| 509 minimum: minHeight, |
| 510 value: defaultHeight, |
| 511 maximum: maxHeight, |
| 512 }; |
| 513 } |
| 514 */ |
457 | 515 |
458 void markAsLaidOut(); // sets this.node.needsLayout to false | 516 void markAsLaidOut(); // sets this.node.needsLayout and this.node.descendantNe
edsLayout to false |
459 virtual Dimensions layout(Number? width, Number? height); | 517 virtual Dimensions layout(Number? width, Number? height); |
460 // default implementation calls markAsLaidOut() and returns arguments, with
null values resolved to intrinsic dimensions | 518 // call markAsLaidOut(); |
461 // this should always call this.markAsLaidOut() to reset needsLayout | 519 // if width is null, set width to getIntrinsicWidth().value |
462 // the return value should include the final value for whichever of the widt
h and height arguments that is null | 520 // if height is null, set width height getIntrinsicHeight().value |
| 521 // call this.layoutChildren(width, height); |
| 522 // return { width: width, height: height } |
| 523 // - this should always call this.markAsLaidOut() to reset needsLayout |
| 524 // - the return value should include the final value for whichever of the wi
dth and height arguments |
| 525 // that is null |
| 526 // - subclasses that want to make 'auto' values dependent on the children sh
ould override this |
| 527 // entirely, rather than overriding layoutChildren |
463 | 528 |
464 void markAsPainted(); // sets this.node.needsPaint to false | 529 virtual void layoutChildren(Number width, Number height); |
| 530 // default implementation does nothing |
| 531 // - override this if you want to lay out children but not have the children
affect your dimensions |
| 532 |
| 533 void markAsPainted(); // sets this.node.needsPaint and this.node.descendantNee
dsPaint to false |
465 virtual void paint(RenderingSurface canvas); | 534 virtual void paint(RenderingSurface canvas); |
466 // set a clip rect on the canvas for rect(0,0,this.width,this.height) | 535 // set a clip rect on the canvas for rect(0,0,this.width,this.height) |
467 // call the painter of each property, in order they were registered, which o
n this element has a painter | 536 // if needsPaint is true: |
468 // call this.paintChildren() | 537 // call the painter of each property, in order they were registered, which
on this element has a painter |
| 538 // call this.paintChildren(canvas) |
| 539 // (the default implementation doesn't paint anything on top of the children
) |
469 // unset the clip | 540 // unset the clip |
470 // call markAsPainted() | 541 // call markAsPainted() |
471 | 542 |
472 virtual void paintChildren(RenderingSurface canvas); | 543 virtual void paintChildren(RenderingSurface canvas); |
473 // just calls paint() for each child returned by walkChildren() whose needsP
aint is true, | 544 // if descendantNeedsPaint is true: |
474 // after transforming the coordinate space by translate(child.x,child.y) | 545 // for each child returned by walkChildren(): |
475 // you should skip children that will be clipped out of yourself because the
y're outside your bounds | 546 // if child.needsPaint or child.descendantNeedsPaint: |
| 547 // call this.paintChild(canvas, child) |
| 548 // - you should skip children that will be clipped out of yourself because t
hey're outside your bounds |
| 549 |
| 550 virtual void paintChild(RenderingSurface canvas, LayoutManager child); |
| 551 // insert a "paint this child" instruction in our canvas instruction list (w
e should probably make sure we expose that API directly, too) |
| 552 // start a new canvas for the child: |
| 553 // transform the coordinate space by translate(child.x, child.y) |
| 554 // call child.paint(canvas) |
476 | 555 |
477 virtual Node hitTest(Float x, Float y); | 556 virtual Node hitTest(Float x, Float y); |
478 // default implementation uses the node's children nodes' x, y, | 557 // default implementation uses the node's children nodes' x, y, |
479 // width, and height, skipping any that have width=0 or height=0, or | 558 // width, and height, skipping any that have width=0 or height=0, or |
480 // whose ownerLayoutManager is not |this| | 559 // whose ownerLayoutManager is not |this| |
481 // default implementation walks the tree backwards from its built-in order | 560 // default implementation walks the tree backwards from its built-in order |
482 // if no child is hit, then return this.node | 561 // if no child is hit, then return this.node |
483 // override this if you changed your children's z-order, or if you used take
() to | 562 // override this if you changed your children's z-order, or if you used take
() to |
484 // hoist some descendants up to be your responsibility, or if your children
aren't | 563 // hoist some descendants up to be your responsibility, or if your children
aren't |
485 // rectangular (e.g. you lay them out in a hex grid) | 564 // rectangular (e.g. you lay them out in a hex grid) |
(...skipping 86 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
572 ```javascript | 651 ```javascript |
573 { display: { value: sky.ErrorLayoutManager } } | 652 { display: { value: sky.ErrorLayoutManager } } |
574 ``` | 653 ``` |
575 | 654 |
576 The ``div`` element doesn't have any default styles. | 655 The ``div`` element doesn't have any default styles. |
577 | 656 |
578 These declarations are all shared between all the elements (so e.g. if | 657 These declarations are all shared between all the elements (so e.g. if |
579 you reach in and change the declaration that was added to a ``title`` | 658 you reach in and change the declaration that was added to a ``title`` |
580 element, you're going to change the styles of all the other | 659 element, you're going to change the styles of all the other |
581 default-hidden elements). | 660 default-hidden elements). |
OLD | NEW |