31:T620,viewof svg = { const W = 550 const H = 400 const scale = .45 const svg = d3.select(DOM.svg(W, H)).call(gridtexture).attr('fill', 'white') const g = svg.append('g').attr('transform', `scale(${scale})`) g.append('rect').attr('width', W/scale).attr('height', H/scale).attr('fill', gridtexture.url()) const drawing_layer = g.append('g').attr('class', 'drawing_layer') const handle_layer = g.append('g').attr('class', 'handle_layer') const handles = [A, B, C, D]; function update () { const h = handle_layer.selectAll('g').data(handles, h => h.id) const h_add = h.enter().append('g').attr('class', 'handle'); h_add.append('circle').attr('r', 24) .attr('fill', '#fff') .attr('stroke', 'none') .style('cursor', 'pointer') .call(d3.drag().on('drag', drag_handle)) h_add.append('text').attr('y', -14).text(h => h.id) .attr('font-family', 'monospace').attr('font-size', 50) const h_upd = h_add.merge(h) h_upd.select('circle').attr('cx', h => h.get()[0]).attr('cy', h => h.get()[1]) h_upd.select('text').attr('x', h => h.get()[0]+10).attr('y', h => h.get()[1]-30) } function drag_handle (h) { const p = [ d3.event.x, d3.event.y, ]; h.set(p); update(); //svg.node().dispatchEvent(new CustomEvent('input')) } update() const root = html`

${svg.node()}

`; root.value = g g.div = d3.select(root.querySelector('div.details')) return root }32:T4ff,{ model; const l = Math.hypot(F[0]-E[0], F[1]-E[1]); svg.div.html((md`- Zitvlak: **${fmt(params.tafelblad[1]*model.snede)}** - Rugleuning: **${fmt(params.tafelblad[1]*(1-model.snede))}** - Steiger: **${fmt(l)}**`).outerHTML); svg.select('g.drawing_layer').html(` `) return md`**[Update logic]**`; }33:T1632,// https://riccardoscalco.github.io/textures/ textures = { var t=function(){return(Math.random().toString(36)+"00000000000000000").replace(/[^a-z]+/g,"").slice(0,5)};return{circles:function(){var r=20,n="",e=2,a=!1,u="#343434",i="#343434",c=0,l=t(),o=function(t){var o=t.append("defs").append("pattern").attr("id",l).attr("patternUnits","userSpaceOnUse").attr("width",r).attr("height",r);n&&o.append("rect").attr("width",r).attr("height",r).attr("fill",n),o.append("circle").attr("cx",r/2).attr("cy",r/2).attr("r",e).attr("fill",u).attr("stroke",i).attr("stroke-width",c),a&&[[0,0],[0,r],[r,0],[r,r]].forEach(function(t){o.append("circle").attr("cx",t[0]).attr("cy",t[1]).attr("r",e).attr("fill",u).attr("stroke",i).attr("stroke-width",c)})};return o.heavier=function(t){return 0===arguments.length?e*=2:e*=2*t,o},o.lighter=function(t){return 0===arguments.length?e/=2:e/=2*t,o},o.thinner=function(t){return 0===arguments.length?r*=2:r*=2*t,o},o.thicker=function(t){return 0===arguments.length?r/=2:r/=2*t,o},o.background=function(t){return n=t,o},o.size=function(t){return r=t,o},o.complement=function(t){return a=0===arguments.length||t,o},o.radius=function(t){return e=t,o},o.fill=function(t){return u=t,o},o.stroke=function(t){return i=t,o},o.strokeWidth=function(t){return c=t,o},o.id=function(t){return 0===arguments.length?l:(l=t,o)},o.url=function(){return"url(#"+l+")"},o},lines:function(){var r=20,n="#343434",e=2,a="",u=t(),i=["diagonal"],c="auto",l=function(t){var n=r;switch(t){case"0/8":case"vertical":return"M "+n/2+", 0 l 0, "+n;case"1/8":return"M "+n/4+",0 l "+n/2+","+n+" M "+-n/4+",0 l "+n/2+","+n+" M "+3*n/4+",0 l "+n/2+","+n;case"2/8":case"diagonal":return"M 0,"+n+" l "+n+","+-n+" M "+-n/4+","+n/4+" l "+n/2+","+-n/2+" M "+.75*n+","+5/4*n+" l "+n/2+","+-n/2;case"3/8":return"M 0,"+.75*n+" l "+n+","+-n/2+" M 0,"+n/4+" l "+n+","+-n/2+" M 0,"+5*n/4+" l "+n+","+-n/2;case"4/8":case"horizontal":return"M 0,"+n/2+" l "+n+",0";case"5/8":return"M 0,"+-n/4+" l "+n+","+n/2+"M 0,"+n/4+" l "+n+","+n/2+" M 0,"+3*n/4+" l "+n+","+n/2;case"6/8":return"M 0,0 l "+n+","+n+" M "+-n/4+","+.75*n+" l "+n/2+","+n/2+" M "+3*n/4+","+-n/4+" l "+n/2+","+n/2;case"7/8":return"M "+-n/4+",0 l "+n/2+","+n+" M "+n/4+",0 l "+n/2+","+n+" M "+3*n/4+",0 l "+n/2+","+n;default:return"M "+n/2+", 0 l 0, "+n}},o=function(t){var o=t.append("defs").append("pattern").attr("id",u).attr("patternUnits","userSpaceOnUse").attr("width",r).attr("height",r);a&&o.append("rect").attr("width",r).attr("height",r).attr("fill",a),i.forEach(function(t){o.append("path").attr("d",l(t)).attr("stroke-width",e).attr("shape-rendering",c).attr("stroke",n).attr("stroke-linecap","square")})};return o.heavier=function(t){return 0===arguments.length?e*=2:e*=2*t,o},o.lighter=function(t){return 0===arguments.length?e/=2:e/=2*t,o},o.thinner=function(t){return 0===arguments.length?r*=2:r*=2*t,o},o.thicker=function(t){return 0===arguments.length?r/=2:r/=2*t,o},o.background=function(t){return a=t,o},o.size=function(t){return r=t,o},o.orientation=function(){for(var t=arguments.length,r=Array(t),n=0;n\n.handle circle {\n fill: transparent;\n}\n.handle:hover circle {\n fill: #fff;\n}\n[Styling]`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"e = Math.atan2(F[1]-E[1], F[0]-E[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"E = (model, mid(A.get(), B.get()))","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"F = (model, mid(C.get(), D.get()))","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"A = handle({\n id: 'A',\n get: () => (mutable model).A,\n set: p => ((mutable model).A = p, mutable model = (mutable model)),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"B = handle({\n id: 'B',\n get () {\n const { A, a, snede } = (mutable model);\n const len = params.tafelblad[1] * snede;\n return [A[0] + Math.cos(a)*len, A[1] + Math.sin(a)*len];\n },\n set (B) {\n const { A } = (mutable model);\n const d = [ B[0]-A[0], B[1]-A[1] ];\n const len = Math.hypot(d[0], d[1]);\n const snede = len / params.tafelblad[1];\n (mutable model).snede = snede;\n (mutable model).a = Math.atan2(d[1], d[0])\n mutable model = (mutable model);\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"C = handle({\n id: 'C',\n get () {\n const { D, d, snede } = (mutable model);\n const len = params.tafelblad[1] * (1-snede);\n return [D[0] + Math.cos(d)*len, D[1] + Math.sin(d)*len];\n },\n set (C) {\n const { D } = (mutable model);\n const d = [ C[0]-D[0], C[1]-D[1] ];\n const len = Math.hypot(d[0], d[1]);\n const snede = 1 - (len / params.tafelblad[1]);\n (mutable model).snede = snede;\n (mutable model).d = Math.atan2(d[1], d[0])\n mutable model = (mutable model);\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"D = handle({\n id: 'D',\n get: () => (mutable model).D,\n set: p => ((mutable model).D = p, mutable model = (mutable model)),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"mutable model = ({\n A: [200, 700], // voorkant van het zitvlak\n a: .03, // hoek zitvlak\n \n D: [820, 210], // bovenkant van de rugleuning\n d: 1.7, // hoek rugleuning\n \n snede: .6, // groote zitvlak van tafelblad\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"params = ({\n tafelblad: [1467,853,20], // grootte tafelblad\n steigerplank: [200, 30], // dikte/breedte steigerplank\n r: 20, // radius van de metalen staaf\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"handle = o => _.extend(o, {\n x (v) {\n if (v != undefined) {\n o.set([v, o.get()[1]]);\n } else {\n return o.get()[0];\n }\n },\n y (v) {\n if (v != undefined) {\n o.set([o.get()[0], v]);\n } else {\n return o.get()[1];\n }\n },\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"gridtexture = textures.lines()\n .orientation(\"vertical\", \"horizontal\")\n .size(100)\n .strokeWidth(3)\n .shapeRendering(\"crispEdges\")\n .background('#2961bc')\n .stroke(\"#789edb\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import { slider } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"mid = (a, b) => [a[0] + (b[0]-a[0])/2, a[1] + (b[1]-a[1])/2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"constrain = (x, min, max) => Math.max(Math.min(x, max), min)","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"fmt = d3.format('d')","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"d3 = require('https://d3js.org/d3.v5.min.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}