diff --git a/examples/README.md b/examples/README.md index b027ed52f4d..962fcd4d682 100644 --- a/examples/README.md +++ b/examples/README.md @@ -1,2 +1,3 @@ -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. diff --git a/examples/style/block-layout.sky b/examples/style/block-layout.sky index b0e67ba0ddf..a707af0e54a 100644 --- a/examples/style/block-layout.sky +++ b/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); } diff --git a/examples/style/hex-layout.sky b/examples/style/hex-layout.sky index 139e5b49059..2633c0f38c8 100644 --- a/examples/style/hex-layout.sky +++ b/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(); } diff --git a/examples/style/toolbar-layout.sky b/examples/style/toolbar-layout.sky index 4d29219f602..a10191e4c25 100644 --- a/examples/style/toolbar-layout.sky +++ b/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);