Specs: Initial hack at extensible style/layout

sky/examples/style/hex-layout.sky

+#!mojo mojo:sky
+<import src="sky:core" as="sky"/>
+<script>
+ class BeehiveLayoutManager extends sky.LayoutManager {
+   function layout(width, height) {
+     if (width == null)
+       width = this.getIntrinsicWidth().value;
+     let autoHeight = false;
+     if (height == null) {
+       height = 0;
+       autoHeight = true;
+     }
+     this.assumeDimensions(width, height);
+     let cellCount = this.node.getProperty('beehive-count');
+     let cellDim = width / cellCount;
+     let children = this.walkChildren();
+     let loop = children.next();
+     let x = 0;
+     let y = 0;
+     while (!loop.done) {
+       let child = loop.value;
+       if (child.needsLayout) {
+         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);
+       }
+       this.setChildPosition(child, x * cellDim + (y % 2) * cellDim/2, y * 3/4 * cellDim);
+       x += 1;
+       if (x > cellCount) {
+         y += 1;
+         x = 0;
+       }
+       loop = children.next();
+     }
+     if (height == 0)
+       height = (1 + y * 3/4) * cellDim;
+     return {
+       width: width,
+       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') {
+       // e.g. height: auto
+       width = this.getIntrinsicWidth().value;
+       let cellCount = this.node.getProperty('beehive-count');
+       let cellDim = width / cellCount;
+       let children = this.walkChildren();
+       let loop = children.next();
+       let childCount = 0;
+       while (!loop.done) {
+         childCount += 1;
+         loop.next();
+       }
+       if (childCount > 0)
+         height = cellDim * (1/4 + Math.ceil(childCount / cellCount) * 3/4);
+       else
+         height = 0;
+     }
+     return super(height); // does the equivalent of getIntrinsicWidth() above, applying min-height etc
+   }
+   function paintChildren(RenderingSurface canvas) {
+     let width = this.node.width;
+     let cellCount = this.node.getProperty('beehive-count');
+     let cellDim = width / cellCount;
+     let children = this.walkChildren();
+     let loop = children.next();
+     while (!loop.done) {
+       let child = loop.value;
+       if (child.needsPaint) {
+         canvas.save();
+         try {
+           canvas.beginPath();
+           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);
+         } finally {
+           canvas.restore();
+         }
+       }
+       loop = children.next();
+     }
+   }
+ }
+ sky.registerLayoutManager('beehive', BeehiveLayoutManager);
+ let BeehiveCountStyleValueType = new StyleValueType();
+ BeehiveCountStyleValueType.addParser((tokens) => {
+   let token = tokens.next();
+   if (token.done) throw new Error();
+   if (token.value.kind != 'number') throw new Error();
+   if (token.value.value <= 0) throw new Error();
+   if (Math.trunc(token.value.value) != token.value.value) throw new Error();
+   let result = token.value.value;
+   if (!token.next().done) throw new Error();
+   return result;
+ });
+ sky.registerProperty({
+   name: 'beehive-count',
+   type: BeehiveCountStyleValueType,
+   inherits: true,
+   initialValue: 5,
+   needsLayout: true,
+ });
+</script>
+<style>
+ div { display: beehive; beehive-count: 3; }
+</style>
+<div>
+ <t>Hello</t>
+ <t>World</t>
+ <t>How</t>
+ <t>Are</t>
+ <t>You</t>
+ <t>Today?</t>
+</div>