choo setup 🚂

.eslintrc

@@ -0,0 +1,8 @@
+{
+  "ecmaFeatures": { "modules": true },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  }
+}

demo.js

@@ -0,0 +1,37 @@
+const startApp = require('./src/app')
+
+const pattern = {
+  parts: [
+    {
+      points: [
+        {x: 0, y: 0},
+        {x: 20, y: -10},
+        {x: 40, y: -10},
+        {x: 40, y: 10},
+        {x: 20, y: 10},
+        {x: 20, y: 60},
+        {x: 0, y: 60},
+        {x: -20, y: 60},
+        {x: -20, y: 10},
+        {x: -40, y: 10},
+        {x: -40, y: -10},
+        {x: -20, y: -10},
+      ],
+      distances: [
+        // height
+        {a: 0, b: 6, distance: 100},
+        // bust
+        {a: 4, b: 8, distance: 100},
+        // sleeve
+        {a: 1, b: 2, distance: 60},
+        {a: 10, b: 11, distance: 60},
+      ],
+      // angles: [
+      //   {a: 0, b: 1, c: 2, angle: Math.PI/4},
+      // ],
+    },
+  ],
+}
+
+const el = startApp({pattern})
+document.body.appendChild(el)

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "softfab",
+  "version": "0.0.1",
+  "description": "WIP",
+  "main": "tshirt.js",
+  "scripts": {
+    "start": "bankai start demo.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/softfab/tshirt.git"
+  },
+  "keywords": [
+    "softfab"
+  ],
+  "author": "forresto",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/softfab/tshirt/issues"
+  },
+  "homepage": "https://github.com/softfab/tshirt#readme",
+  "devDependencies": {
+    "bankai": "^5.4.0"
+  },
+  "dependencies": {
+    "choo": "^4.1.0",
+    "nanocomponent": "^1.1.2",
+    "xtend": "^4.0.1",
+    "yo-yo": "^1.4.0"
+  }
+}

src/app.js

@@ -0,0 +1,69 @@
+const html = require('choo/html')
+const choo = require('choo')
+const xtend = require('xtend')
+
+const BaseShape = require('./base-shape')
+
+const model = {
+  state: {
+    pattern: {},
+    selectedPart: null,
+    selectedPoint: null,
+  },
+  reducers: {
+    setPart: function (state, data) {
+
+    },
+    setPoint: function (state, data) {
+
+    },
+    update: function (state, data) {
+      console.log(state, data)
+      return { title: data }
+    }
+  }
+}
+
+function mainView (state, prev, send) {
+  return html`
+    <main>
+      ${BaseShape(state.pattern.parts)}
+      <pre>${JSON.stringify(state.pattern, null, 2)}</pre>
+    </main>
+  `
+
+  function update (e) {
+    send('update', e.target.value)
+  }
+}
+
+function startApp (initialState) {
+  const app = choo()
+  app.router(['/', mainView])
+  if (initialState) {
+    model.state = xtend(model.state, initialState)
+  }
+  app.model(model)
+  const el = app.start()
+  return el
+}
+
+
+// const yo = require('yo-yo')
+
+// class App {
+//   constructor (initialState) {
+//     this.el = this.render(initialState)
+//   }
+//   render (state) {
+//     return yo`
+//       <pre>${JSON.stringify(state, null, 2)}</pre>
+//     `
+//   }
+//   setState (state) {
+//     const el = this.render(state)
+//     yo.update(this.el, el)
+//   }
+// }
+
+module.exports = startApp

src/base-shape.js

@@ -0,0 +1,17 @@
+const html = require('choo/html')
+const svgPoly = require('./svg-poly')
+
+function renderPart (part) {
+  const {points} = part
+  return svgPoly(points)
+}
+
+function baseShape (parts) {
+  return html`
+  <div>
+    ${parts.map(renderPart)}
+  </div>
+  `
+}
+
+module.exports = baseShape

src/svg-poly.js

@@ -0,0 +1,43 @@
+const html = require('choo/html')
+
+function minMaxBox (points) {
+  let top = -Infinity
+  let right = -Infinity
+  let bottom = Infinity
+  let left = Infinity
+  for (let i = 0, len = points.length; i < len; i++) {
+    const {x, y} = points[i]
+    top = Math.max(top, y)
+    right = Math.max(right, x)
+    bottom = Math.min(bottom, y)
+    left = Math.min(left, x)
+  }
+  return [left, bottom, right-left, top-bottom].join(' ')
+}
+
+function path (points) {
+  return 'M ' +
+    points
+      .map(function (point) {
+        return point.x + ' ' + point.y
+      })
+      .join(' L ') +
+    ' L ' +
+    points[0].x + ' ' + points[0].y
+}
+
+function svgPoly (points, width = 72, height = 72) {
+  return html`
+    <svg
+      width="${width}" height="${height}"
+      viewBox="${minMaxBox(points)}"
+    >
+      <path
+        d="${path(points)}"
+        fill="none" stroke="black"
+      />
+    </svg>
+  `
+}
+
+module.exports = svgPoly