Specs: update the layout and paint schemes to match discussions better

Review URL: https://codereview.chromium.org/745863002

examples/README.md

-These are work-in-progress examples of how the language might look.
-They won't currently work.
+Some of these examples are examples of what sky supports now.
+Others are examples of what sky hopes to one day support.
+Therefore not all these examples actually work today.

examples/style/block-layout.sky

@@ -21,7 +21,7 @@ SKY MODULE
      let y = 0;
      while (!loop.done) {
        let child = loop.value;
-       if (child.needsLayout) {
+       if (child.needsLayout || child.descendantNeedsLayout) {
          let dims = child.layoutManager.layout(width, null);
          this.setChildSize(child, dims.width, dims.height);
        }

examples/style/hex-layout.sky

@@ -20,7 +20,7 @@
      let y = 0;
      while (!loop.done) {
        let child = loop.value;
-       if (child.needsLayout) {
+       if (child.needsLayout || child.descendantNeedsLayout) {
          child.layoutManager.layout(cellDim, cellDim);
          // we ignore the size the child reported from layout(), and force it to the cell dimensions
          this.setChildSize(child, cellDim, cellDim);
@@ -40,30 +40,6 @@
        height: height,
      }
    }
-   function getIntrinsicWidth() {
-     // this is the logic that LayoutManager.getIntrinsicWidth() has by default
-     // shown here because I wrote it before realising it should be the default
-     let width = this.node.getProperty('width');
-     if (typeof width != 'number')
-       width = 0;
-     let minWidth = this.node.getProperty('min-width');
-     if (typeof width != 'number')
-       minWidth = 0;
-     let maxWidth = this.node.getProperty('max-width');
-     if (typeof width != 'number')
-       maxWidth = Infinity;
-     if (maxWidth < minWidth)
-       maxWidth = minWidth;
-     if (width > maxWidth)
-       width = maxWidth;
-     if (width < minWidth)
-       width = minWidth;
-     return {
-       minimum: minWidth,
-       value: width,
-       maximum: maxWidth,
-     };
-   }
    function getIntrinsicHeight() {
      let height = this.node.getProperty('height');
      if (typeof height != 'number') {
@@ -93,20 +69,19 @@
      let loop = children.next();
      while (!loop.done) {
        let child = loop.value;
-       if (child.needsPaint) {
+       if (child.needsPaint || child.descendantNeedsPaint) {
          canvas.save();
          try {
            canvas.beginPath();
-           canvas.translate(child.x, child.y);
-           canvas.moveTo(0, cellDim/4);
-           canvas.lineTo(cellDim/2, 0);
-           canvas.lineTo(cellDim, cellDim/4);
-           canvas.lineTo(cellDim, 3*cellDim/4);
-           canvas.lineTo(cellDim/2, cellDim);
-           canvas.moveTo(0, 3*cellDim/4);
+           canvas.moveTo(child.x, child.y + cellDim/4);
+           canvas.lineTo(child.x + cellDim/2, child.y);
+           canvas.lineTo(child.x + cellDim, child.y + cellDim/4);
+           canvas.lineTo(child.x + cellDim, child.y + 3*cellDim/4);
+           canvas.lineTo(child.x + cellDim/2, child.y + cellDim);
+           canvas.moveTo(child.x, child.y + 3*cellDim/4);
            canvas.closePath();
            canvas.clip();
-           child.paint(canvas);
+           this.paintChild(child);
          } finally {
            canvas.restore();
          }

examples/style/toolbar-layout.sky

@@ -52,7 +52,7 @@ SKY MODULE
          springCount += 1;
          pendingSpacing = spacing; // not +=, because we only have one extra spacing per batch of springs
        } else {
-         if (child.needsLayout) {
+         if (child.needsLayout || child.descendantNeedsLayout) {
            childHeight = child.layoutManager.getIntrinsicHeight();
            if (childHeight.value < height)
              childHeight = childHeight.value;
@@ -185,25 +185,25 @@ SKY MODULE
    }
    function paintChildren(canvas) {
      let width = this.node.width;
+     let children = this.walkChildren();
      let loop = children.next();
      while ((!loop.done) && (loop.value != this.firstSkippedChild))
        this.paintChild(loop.value, canvas);
      if (this.showingOverflow)
        this.paintChild(this.overflowChild, canvas);
    }
-   function paintChild(child, canvas) {
-     if (child.needsPaint) {
-       canvas.save();
-       try {
-         canvas.beginPath();
-         canvas.translate(child.x, child.y);
-         canvas.rect(0, 0, child.width, child.height);
-         canvas.clip();
-         child.paint(canvas);
-       } finally {
-         canvas.restore();
-       }
-     }
+   function inChild(child, x, y) {
+     return (x >= child.x) && (y >= child.y) && (x < child.x+child.width) && (y < child.y+child.height);
+   }
+   function hitTest(x, y) {
+     let children = this.walkChildrenBackwards();
+     let loop = children.next();
+     while ((!loop.done) && (loop.value != this.firstSkippedChild))
+       if (this.inChild(loop.value, x, y))
+         return loop.value;
+     if (this.showingOverflow)
+       if (this.inChild(this.overflowChild, x, y))
+         return this.overflowChild;
    }
  }
  sky.registerLayoutManager('toolbar', module.exports.ToolbarLayoutManager);