react-x11 0.0.1 → 1.2.0

package/src/styles.js

@@ -0,0 +1,189 @@
+// Style props → yoga setters (layout) and paint metadata. Flat, ink-style
+// props: <box flexDirection="row" padding={8} backgroundColor="#eee">.
+// Numbers are pixels; strings like '50%' / 'auto' pass through to yoga.
+// Yoga comes from ntk (>= 3.1.0) so renderer and ntk widgets share one
+// WASM instance and enum set.
+import { Yoga } from 'ntk';
+
+export { Yoga };
+
+const FLEX_DIRECTION = {
+  row: Yoga.FLEX_DIRECTION_ROW,
+  'row-reverse': Yoga.FLEX_DIRECTION_ROW_REVERSE,
+  column: Yoga.FLEX_DIRECTION_COLUMN,
+  'column-reverse': Yoga.FLEX_DIRECTION_COLUMN_REVERSE,
+};
+
+const JUSTIFY = {
+  'flex-start': Yoga.JUSTIFY_FLEX_START,
+  center: Yoga.JUSTIFY_CENTER,
+  'flex-end': Yoga.JUSTIFY_FLEX_END,
+  'space-between': Yoga.JUSTIFY_SPACE_BETWEEN,
+  'space-around': Yoga.JUSTIFY_SPACE_AROUND,
+  'space-evenly': Yoga.JUSTIFY_SPACE_EVENLY,
+};
+
+const ALIGN = {
+  auto: Yoga.ALIGN_AUTO,
+  'flex-start': Yoga.ALIGN_FLEX_START,
+  center: Yoga.ALIGN_CENTER,
+  'flex-end': Yoga.ALIGN_FLEX_END,
+  stretch: Yoga.ALIGN_STRETCH,
+  baseline: Yoga.ALIGN_BASELINE,
+  'space-between': Yoga.ALIGN_SPACE_BETWEEN,
+  'space-around': Yoga.ALIGN_SPACE_AROUND,
+};
+
+const FLEX_WRAP = {
+  nowrap: Yoga.WRAP_NO_WRAP,
+  wrap: Yoga.WRAP_WRAP,
+  'wrap-reverse': Yoga.WRAP_WRAP_REVERSE,
+};
+
+const POSITION = {
+  static: Yoga.POSITION_TYPE_STATIC,
+  relative: Yoga.POSITION_TYPE_RELATIVE,
+  absolute: Yoga.POSITION_TYPE_ABSOLUTE,
+};
+
+const DISPLAY = {
+  flex: Yoga.DISPLAY_FLEX,
+  none: Yoga.DISPLAY_NONE,
+};
+
+const OVERFLOW = {
+  visible: Yoga.OVERFLOW_VISIBLE,
+  hidden: Yoga.OVERFLOW_HIDDEN,
+  scroll: Yoga.OVERFLOW_SCROLL,
+};
+
+const pick = (map, value, name) => {
+  if (value === undefined) return undefined;
+  if (!(value in map)) {
+    throw new Error(
+      `react-x11: invalid ${name} "${value}" (expected one of ${Object.keys(map).join(', ')})`,
+    );
+  }
+  return map[value];
+};
+
+// Each entry: prop name -> (yogaNode, value) applier. `undefined` resets.
+const LAYOUT_APPLIERS = {
+  width: (n, v) => n.setWidth(v),
+  height: (n, v) => n.setHeight(v),
+  minWidth: (n, v) => n.setMinWidth(v),
+  minHeight: (n, v) => n.setMinHeight(v),
+  maxWidth: (n, v) => n.setMaxWidth(v),
+  maxHeight: (n, v) => n.setMaxHeight(v),
+  flexDirection: (n, v) =>
+    n.setFlexDirection(
+      pick(FLEX_DIRECTION, v, 'flexDirection') ?? Yoga.FLEX_DIRECTION_COLUMN,
+    ),
+  justifyContent: (n, v) =>
+    n.setJustifyContent(
+      pick(JUSTIFY, v, 'justifyContent') ?? Yoga.JUSTIFY_FLEX_START,
+    ),
+  alignItems: (n, v) =>
+    n.setAlignItems(pick(ALIGN, v, 'alignItems') ?? Yoga.ALIGN_STRETCH),
+  alignSelf: (n, v) =>
+    n.setAlignSelf(pick(ALIGN, v, 'alignSelf') ?? Yoga.ALIGN_AUTO),
+  alignContent: (n, v) =>
+    n.setAlignContent(pick(ALIGN, v, 'alignContent') ?? Yoga.ALIGN_FLEX_START),
+  flexWrap: (n, v) =>
+    n.setFlexWrap(pick(FLEX_WRAP, v, 'flexWrap') ?? Yoga.WRAP_NO_WRAP),
+  flexGrow: (n, v) => n.setFlexGrow(v ?? 0),
+  flexShrink: (n, v) => n.setFlexShrink(v ?? 1),
+  flexBasis: (n, v) => n.setFlexBasis(v),
+  position: (n, v) =>
+    n.setPositionType(
+      pick(POSITION, v, 'position') ?? Yoga.POSITION_TYPE_RELATIVE,
+    ),
+  top: (n, v) => n.setPosition(Yoga.EDGE_TOP, v),
+  right: (n, v) => n.setPosition(Yoga.EDGE_RIGHT, v),
+  bottom: (n, v) => n.setPosition(Yoga.EDGE_BOTTOM, v),
+  left: (n, v) => n.setPosition(Yoga.EDGE_LEFT, v),
+  margin: (n, v) => n.setMargin(Yoga.EDGE_ALL, v),
+  marginTop: (n, v) => n.setMargin(Yoga.EDGE_TOP, v),
+  marginRight: (n, v) => n.setMargin(Yoga.EDGE_RIGHT, v),
+  marginBottom: (n, v) => n.setMargin(Yoga.EDGE_BOTTOM, v),
+  marginLeft: (n, v) => n.setMargin(Yoga.EDGE_LEFT, v),
+  padding: (n, v) => n.setPadding(Yoga.EDGE_ALL, v),
+  paddingTop: (n, v) => n.setPadding(Yoga.EDGE_TOP, v),
+  paddingRight: (n, v) => n.setPadding(Yoga.EDGE_RIGHT, v),
+  paddingBottom: (n, v) => n.setPadding(Yoga.EDGE_BOTTOM, v),
+  paddingLeft: (n, v) => n.setPadding(Yoga.EDGE_LEFT, v),
+  gap: (n, v) => n.setGap(Yoga.GUTTER_ALL, v ?? 0),
+  rowGap: (n, v) => n.setGap(Yoga.GUTTER_ROW, v ?? 0),
+  columnGap: (n, v) => n.setGap(Yoga.GUTTER_COLUMN, v ?? 0),
+  aspectRatio: (n, v) => n.setAspectRatio(v),
+  display: (n, v) =>
+    n.setDisplay(pick(DISPLAY, v, 'display') ?? Yoga.DISPLAY_FLEX),
+  overflow: (n, v) =>
+    n.setOverflow(pick(OVERFLOW, v, 'overflow') ?? Yoga.OVERFLOW_VISIBLE),
+  borderWidth: (n, v) => n.setBorder(Yoga.EDGE_ALL, v ?? 0),
+};
+
+// Props that only affect painting, not geometry.
+const PAINT_PROPS = new Set([
+  'backgroundColor',
+  'borderColor',
+  'borderRadius',
+  'zIndex',
+]);
+
+// Text style props. All affect measurement except color.
+export const TEXT_LAYOUT_PROPS = new Set([
+  'fontFamily',
+  'fontSize',
+  'fontWeight',
+  'fontStyle',
+  'textAlign',
+  'lineHeight',
+]);
+
+export const isLayoutProp = (name) =>
+  Object.prototype.hasOwnProperty.call(LAYOUT_APPLIERS, name);
+export const isPaintProp = (name) => PAINT_PROPS.has(name);
+export const isEventProp = (name) => /^on[A-Z]/.test(name);
+
+/**
+ * Apply changed layout props to a yoga node.
+ * @returns true if any layout-affecting prop changed
+ */
+export function applyLayoutStyle(yogaNode, props, oldProps = {}) {
+  let changed = false;
+  for (const key of Object.keys(LAYOUT_APPLIERS)) {
+    if (props[key] !== oldProps[key]) {
+      LAYOUT_APPLIERS[key](yogaNode, props[key]);
+      changed = true;
+    }
+  }
+  return changed;
+}
+
+/** @returns true if any paint-only prop changed */
+export function paintPropsChanged(props, oldProps = {}) {
+  for (const key of PAINT_PROPS) {
+    if (props[key] !== oldProps[key]) return true;
+  }
+  return props.color !== oldProps.color;
+}
+
+/** Resolved text style (TextLayout base style) from props + inherited. */
+export function textStyleFrom(props, inherited) {
+  return {
+    family: props.fontFamily ?? inherited.family,
+    size: props.fontSize ?? inherited.size,
+    weight: props.fontWeight ?? inherited.weight,
+    style: props.fontStyle ?? inherited.style,
+    color: props.color ?? inherited.color,
+  };
+}
+
+export const DEFAULT_TEXT_STYLE = {
+  family: 'sans-serif',
+  size: 14,
+  weight: 'normal',
+  style: 'normal',
+  color: 'black',
+};

package/.npmignore

@@ -1,17 +0,0 @@
-lib-cov
-*.seed
-*.log
-*.csv
-*.dat
-*.out
-*.pid
-*.gz
-.DS_Store
-
-tmp
-pids
-logs
-
-node_modules
-npm-debug.log
-

package/combobox.jsx

@@ -1,69 +0,0 @@
-var React   = require('./react-x11');
-var View    = React.View;
-var Text    = React.Text;
-var P       = React.P;
-
-module.exports = function() {
-
-  this.render = function() {
-  function handleClick(pt) {
-    console.log('handle click!', pt);
-    this.setProps({
-      style: {
-        color: parseInt(0.1*(pt.x - this.props.left)*(pt.y - this.props.top))
-      }
-    });
-    console.log(this.props.style);
-  }
-
-  var p = <P onClick={ handleClick }>
-    Lorem ipsum foo bar blah blah
-    Lorem ipsum foo bar blah blah
-    Lorem ipsum foo bar blah blah
-    Lorem ipsum foo bar blah blah
-    Lorem ipsum foo bar blah blah
-    Lorem ipsum foo bar blah blah
-    Lorem ipsum foo bar blah blah
-    Lorem ipsum foo bar blah blah
-    Lorem ipsum foo bar blah blah
-    Lorem ipsum foo bar blah blah
-    Lorem ipsum foo bar blah blah
-    Lorem ipsum foo bar blah blah
-    Lorem ipsum foo bar blah blah
-    Lorem ipsum foo bar blah blah
-    Lorem ipsum foo bar blah blah
-    Lorem ipsum foo bar blah blah
-  </P>
-
-  var haha = 1;
-
-  var pp = <View style={ { color: 0xffffff } }>
-    <View style={{ color: 0xffff00 }} >A lot of flexboxes with flexWrap=wrap </View>
-    <View style={{ color: 0xf0ff0f }}>{ p }</View>
-  </View>
-
-  var content = <View style={ { flexDirection: 'column', color: 0xfefefe, justifyContent: 'space-between', alignItems: 'stretch' } }>
-    <View test="foo" onMousemove={ function(ev) { console.log(ev.x, ev.y); }  }>
-      <Text text={ "haha " + haha }/>
-    </View>
-    <View foo="test" style={ { color: 0xffa0a0 } } onClick={ function() { console.log(this.props.foo); } }>
-      Subview 0.1
-    </View>
-    <View foo="test" style={ { color: 0xa0a0a0, padding: 20, alignItems: 'stretch' } }>
-      { p }
-      <View foo="test" style={ { color: 0xffffff,  padding: 25 } } onMousemove={ handleClick }>
-        Subview 0.2.1
-      </View>
-    </View>
-  </View>
-
-  //setInterval( function() {
-  //  console.log('set haha to ' + haha);
-  //  haha++;
-  //  content.props.children[0].props.children[0].props.text = ''+ haha;
-  //}, 1000);
-
-
-  return content;
-  }
-}

package/react-x11.js

@@ -1,119 +0,0 @@
-//var x11 = require('x11');
-//var React = {}
-//React.createConnection = function(cb) {
-//  x11.createConnection();
-//};
-
-var clone = function(obj) {
-  return JSON.parse(JSON.stringify(obj));
-};
-
-module.exports = {
-  createElement: function() {
-      //return arguments;
-
-      var component = arguments[0];
-      var props     = arguments[1];
-      var children  = [];
-      var ch;
-      for (var i=2; i < arguments.length; ++i) {
-        ch = arguments[i];
-        if (typeof ch == 'string') {
-          children.push(new module.exports.Text({ text: ch }));
-        }
-        else
-          children.push(arguments[i]);
-      }
-      var c = new component(props, children);
-      c.hitTest = function(pt) {
-        var res = [];
-        if (c.props && c.props.left <= pt.x && c.props.top <= pt.y && c.props.left + c.props.width >= pt.x && c.props.top + c.props.height >= pt.y ) {
-          res.push(this);
-          if (this.props && this.props.children) {
-          for (var i=0; i < this.props.children.length; ++i) {
-            var ch = this.props.children[i];
-            if (ch && ch.hitTest) {
-              var hits = ch.hitTest(pt);
-              res = res.concat(hits);
-            }
-          }
-
-          }
-        }
-        return res;
-      }
-
-      c.setProps = function(newProps) {
-        var e = c;
-        var needsUpdate = false;
-        for (var key in newProps) {
-          if (this.props[key] != newProps[key]) {
-            this.props[key] = newProps[key];
-            needsUpdate = true;
-          }
-        }
-        this._needsUpdate = needsUpdate;
-      };
-      return c;
-  },
-  View: function(args, children) {
-    if (!args)
-      args = {};
-    this.props = args;
-    this.props.children = children;
-    this.props.style = args.style || { color: 0xa0a0a0 };
-    this.render = function() {
-      return this;
-    };
-    this.draw = function(ctx) {
-      console.log(this.props.style.color);
-      //ctx.setForeground(this.props.style.color);
-      ctx.fillRect(this.props.left, this.props.top, this.props.width, this.props.height, 0.5, 0.5, 0.5, 1);
-      //ctx.setForeground(0);
-      //ctx.rectangle(this.props);
-      if (this.props.children) {
-        this.props.children.forEach(function(c) {
-          c.draw(ctx);
-        });
-      }
-    };
-  },
-  Text: function Text(args) {
-    this.fontHeight = 12;
-    this.fontWidth = 5;
-    this.props = args;
-    //var width = ctx.measureText(this.props.text).width;
-    var width = this.props.text.length*15;
-    this.props.style = { margin: 5, width: width, height: 2*this.fontHeight };
-    if (!this.props.text)
-      this.props.text = '';
-    this.render = function() {
-      return this;
-    };
-    this.draw = function(ctx) {
-      //ctx.setForeground(0);
-      ctx.fillText(this.props.text, this.props.left, this.props.top + this.fontHeight);
-    };
-  },
-
-  P: function(args, children) {
-    this.props = args || {};
-    this.props.style = this.props.style || { flexDirection: 'row', flexWrap: 'wrap' };
-    this.props.p = children[0].props.text;
-    this.props.children = this.props.p.split(' ').map( function(w) { return new module.exports.createElement(module.exports.Text, { text: w, onMousemove: function() { console.log(this.props.text);} }); });
-    this.render = function() {
-      return this;
-    };
-    this.draw = function(ctx) {
-      //ctx.setForeground(0xfef0f0); //this.props.style.color);
-      console.log('P', this.props);
-      //ctx.fillRect(this.props);
-      //ctx.rectangle(this.props);
-      this.props.children.forEach(function(c) {
-        //ctx.setForeground(0);
-        //ctx.rectangle(c.props);
-        c.draw(ctx);
-      });
-    };
-  }
-};

package/test-canvas.js

@@ -1,98 +0,0 @@
-require('node-jsx').install();
-
-var ntk = require('ntk');
-
-ntk.createClient(main);
-
-var computeLayout = require('css-layout');
-var React    = require('./react-x11');
-var ComboBox = require('./combobox.jsx');
-
-var clone = function(obj) {
-  return JSON.parse(JSON.stringify(obj));
-};
-
-function unprops(node) {
-  var props = clone(node.props);
-  delete props.children;
-  if (node.props.children)
-    props.children = node.props.children.map(unprops);
-
-  //console.log('UNPROPS:', props);
-  return props;
-}
-
-function reflow(node, width, height) {
-  var window = { style: { width: width, height: height, justifyContent: 'stretch', alignItems: 'stretch' }, children: [ unprops(node) ] };
-  window.children[0].style.width = width;
-  window.children[0].style.height = height;
-  var layout = computeLayout(window);
-  //console.log(layout);
-  function applyLayout(node, layout, left, top) {
-
-    //console.log(left, top, node);
-    //console.log(JSON.stringify(layout, null, 2));
-    //debugger
-
-    node.props.width  = layout.width;
-    node.props.height = layout.height;
-    node.props.left   = layout.left + left;
-    node.props.top  = layout.top + top;
-
-    if (node.props.children)
-    for (var i=0; i < node.props.children.length; ++i) {
-      applyLayout(node.props.children[i], layout.children[i], layout.left + left, layout.top + top);
-    }
-  }
-  applyLayout({ props: { children: [node] } }, layout, 0, 0);
-}
-
-function main(err, app) {
-  var pix = app.createPixmap({ depth: 24, width: 1000, height: 1000 });
-  var mainwnd = app.createWindow({title: "Layout demo", pixmap: pix}).map();
-  var rootEle = React.createElement(ComboBox, { foo: 'blah blah' });
-
-  var ctx  = pix.getContext('2d');
-  var ctxWin  = mainwnd.getContext('2d');
-  var black   = ctx.createSolidPicture(0, 0, 0, 1);
-  ctx.setBackground(black);
-  ctx.font = '8mm CourierNew';
-
-  var rootNode;
-  var prevW = 0;
-  var prevH = 0;
-  mainwnd.on('resize', function(ev) {
-  if ( (ev.width != prevW) || (ev.height != prevH) ) {
-      console.log([prevW, ev.width, prevH, ev.height]);
-      rootNode = rootEle.render();
-      reflow(rootNode, ev.width, ev.height);
-      rootNode.draw(ctx);
-      // TODO
-      ctxWin.draw(ctx);
-      prevW = ev.width;
-      prevH = ev.height;
-    }
-  }).on('expose', function(ev) {
-    ctxWin.draw(ctx);
-  }).on('mousedown', function(ev) {
-    if (!rootNode) return;
-    // 1 build list of matching views
-    // 2 check for handlers up
-    var hits = rootNode.hitTest(ev);
-    for (var i=1; i <= hits.length; i++) {
-      var component = hits[hits.length - i];
-      if (component.props.onClick) {
-        component.props.onClick.call(component, ev);
-      }
-    }
-  }).on('mousemove', function(ev) {
-    if (!rootNode) return;
-    var hits = rootNode.hitTest(ev);
-    for (var i=1; i <= hits.length; i++) {
-      var component = hits[hits.length - i];
-      if (component.props.onMousemove) {
-        component.props.onMousemove.call(component, ev);
-      }
-    }
-  });
-}