2c:null 2d:["$","title",null,{"children":"Boolean Operations Test Issue #2 | Alex Bol | Observable"}] 32: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; }33:T447,input_data = { let {Polygon, segment, arc, point} = Flatten; let {unify, intersect, subtract} = BooleanOp; let myPoly = new Polygon(); myPoly.addFace([point(50, 50), point(50,950), point(950, 950), point(950, 50)]); let myCircle = new Polygon(); myCircle.addFace([arc(point(0,1000),980, 0, 2*Math.PI)]); myPoly = intersect(myPoly,myCircle); myCircle = new Polygon(); myCircle.addFace([arc(point(0,1000),780, 0, 2*Math.PI)]); myPoly = subtract(myPoly,myCircle); myCircle = new Polygon(); myCircle.addFace([arc(point(1000,1000),1330, 0, 2*Math.PI)]); myPoly = intersect(myPoly,myCircle); myCircle = new Polygon(); myCircle.addFace([arc(point(1000,1000),1130, 0, 2*Math.PI)]); // myPoly = subtract(myPoly,myCircle); // myCircle = new Polygon(); // myCircle.addFace([arc(point(1000,0),980, 0, 2*Math.PI)]); // myPoly = intersect(myPoly,myCircle); // The last subtraction will be returned to be visualized above. // myCircle = new Polygon(); // myCircle.addFace([arc(point(1000,0), 780, 0, 2*Math.PI)]); return [myPoly, myCircle] }34:[] 30:{"id":"5a8f2a31d856b86f","slug":"boolean-operations-test-issue-2","title":"Boolean Operations Test Issue #2","thumbnail":"14e8bc445930873e127bb40da63c300c8543c029c0261fc5d4ac1e80517c3fb0","access_level":"public","create_time":"$D2018-09-25T05:58:19.217Z","update_time":"$D2018-09-29T14:24:55.667Z","view_time":null,"first_public_time":"$D2018-09-25T06:02:29.196Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"d9808e97c5e7c8d3","login":"alexbol99","name":"Alex Bol","avatar_url":"https://avatars-next.observableusercontent.com/ddbf5410a247e0bc9d5f2922c07823af267bcf2bdeb40df78ca23d6c1edb557b","tier":"starter_2024"},"version":329,"publish_version":329,"role":null,"authored":false,"authors":[{"type":"individual","id":"80ba0ddf01f68474","login":"alexbol99","name":"Alex Bol","avatar_url":"https://avatars-next.observableusercontent.com/ddbf5410a247e0bc9d5f2922c07823af267bcf2bdeb40df78ca23d6c1edb557b","tier":null}],"members":[{"type":"individual","id":"80ba0ddf01f68474","login":"alexbol99","name":"Alex Bol","avatar_url":"https://avatars-next.observableusercontent.com/ddbf5410a247e0bc9d5f2922c07823af267bcf2bdeb40df78ca23d6c1edb557b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Boolean Operations Test Issue #2","cells":[{"id":0,"value":"md`# Boolean Operations Test Issue #2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"{\n update(); \n return stage.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"height = width < 400 ? 200 : 320","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"stage = d3.select(DOM.svg(width, height))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"mutable transform = {}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"BooleanOp = require(\"flatten-boolean-op/dist/flatten-boolean-op.umd.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"Flatten = require(\"flatten-js/dist/flatten.umd.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"