31:T5a7,{ const flex = width > 400 ? "display:flex;flex-direction:row" : "display:flex;flex-direction:column"; const margin = width > 400 ? "0px" : "5px"; const form = html`

None

Unify

Intersect

Subtract (A minus B)

Subtract (B minus A)

` let radios = document.getElementsByName('op'); form.querySelector("#button").onclick = () => { for (let radio of radios) { if (radio.checked) { // mutable op = radio.value; apply(radio.value); break; } } }; return form; }32:[] 2f:{"title":"Boolean Operations Test","cells":[{"id":0,"value":"md`# Boolean Operations Test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"{\n update(); \n return stage.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"function apply(op) {\n let {unify, intersect, subtract} = BooleanOp\n let polygon1 = input_data[0];\n let polygon2 = input_data[1];\n let polygon;\n switch (op) {\n case \"none\":\n update();\n break;\n case \"unify\":\n polygon = unify(polygon1, polygon2);\n update(polygon);\n break;\n case \"intersect\":\n polygon = intersect(polygon1, polygon2);\n update(polygon);\n break;\n case \"subtract_ab\":\n polygon = subtract(polygon1, polygon2);\n update(polygon);\n break;\n case \"subtract_ba\":\n polygon = subtract(polygon2, polygon1);\n update(polygon);\n break;\n default:\n update();\n break;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"function update(polygon) {\n let data = [];\n let polygon1 = input_data[0];\n let polygon2 = input_data[1];\n \n if (polygon) {\n data = [polygon1, polygon2, polygon, ...polygon.vertices];\n }\n else {\n data = [...input_data, ...input_data[0].vertices, ...input_data[1].vertices];\n }\n \n let svg = data.reduce( (acc, shape) => acc + shape.svg(), \"\" );\n stage.html(svg);\n \n stage.selectAll('path')\n .attr('fill-opacity', 0.4)\n \n if (polygon) {\n stage.selectAll('*')\n .data(data)\n .transition().duration(1000).attr('fill-opacity',\n d => d.faces ? (d === polygon ? 0.4 : 0.1) : 1.0)\n .attr('stroke-width', d => d.faces ? (d === polygon ? 2 : 1) : 2)\n .attr('stroke', d => d.faces ? (d === polygon ? \"black\" : \"lightgray\") : \"black\")\n }\n else {\n stage.selectAll('*')\n .data(data)\n }\n \n let zoom_handler = zoom();\n initial_transform(width, height, zoom_handler);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"input_data = {\n let {Polygon, point} = Flatten;\n \n let polygon1 = new Polygon([point(200,10), point(100, 300), point(400, 150), point(250, 10)]);\n let polygon2 = new Polygon([point(450, 10), point(0, 150), point(300,300), point(600, 300)]);\n \n return [polygon1, polygon2]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":254,"value":"height = width < 400 ? 200 : 320","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"stage = d3.select(DOM.svg(width, height))","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"mutable transform = {}","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"function zoom() {\n let elements = stage.selectAll('*');\n \n //specify what to do when zoom event listener is triggered \n function zoom_action(){\n // mutable transform = d3.event.transform;\n elements.attr(\"stroke-width\", 1/d3.event.transform.k);\n elements.attr(\"r\", 3/d3.event.transform.k);\n elements.attr(\"transform\", d3.event.transform);\n }\n\n //create zoom handler \n let zoom_handler = d3.zoom()\n .on(\"zoom\", zoom_action);\n\n // Create zoom behavior\n stage.call(zoom_handler)\n\n return zoom_handler\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"function total_box() {\n let selection = stage.selectAll('*')\n let box = new Flatten.Box();\n selection.each( geom => box = box.merge(geom.box) )\n return box;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"// Given array of geom with box property, return \n// initial transformation to the center of the canvas [canvasWidth/2, canvasHeight/2]\nfunction initial_transform(canvasWidth, canvasHeight, zoom_handler) {\n let box = total_box();\n let width = box.xmax - box.xmin;\n let height = box.ymax - box.ymin;\n if (width === 0) width = 400;\n if (height === 0) height = 400;\n let k = Math.min( canvasWidth / (1.1*width), canvasHeight / (1.1*height) );\n let tx = canvasWidth/2 - k*(box.xmin + box.xmax)/2;\n let ty = canvasHeight/2 - k*(box.ymin + box.ymax)/2;\n \n let t = d3.zoomIdentity.translate(tx, ty).scale(k, -k);\n stage.call(zoom_handler.transform, t);\n // stage.transition().duration(1000).call(zoom_handler.transform, t);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"BooleanOp = require(\"@flatten-js/boolean-op\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"Flatten = require(\"@flatten-js/core\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}