${i}

demo = { let t0, t1; const perfs = []; const margin = 4; const boxHeight = width / 3.5; const boxWidth = boxHeight * 3.49; const boxHeightRatio = boxHeight / width; const bboxHeightRatio = (bbox.height + margin * 2) / boxHeight; const scale = boxHeightRatio * bboxHeightRatio; const xmlns = 'http://www.w3.org/2000/svg'; // Prepare our svg const s = document.createElementNS(xmlns, 'svg'); s.setAttributeNS( null, 'viewBox', `${ bbox.x1 - margin } ${ bbox.y1 - margin } ${ bbox.width * 2 + margin * 4 } ${ bbox.height + margin * 2 }` ); s.setAttributeNS(null, 'width', boxWidth); s.setAttributeNS(null, 'height', boxHeight); s.setAttributeNS(null, 'style', `padding: 20px 0; background-color: ${theme.background}`); // Draw options const showRects = drawOptions.includes('rect'); const showSubdivision = drawOptions.includes('subdivision'); const showPoints = drawOptions.includes('points'); // Round path corners if needed; t0 = performance.now(); const roundedPolygon = union.polygons.map( poly => roundSvgPath( // Non rounded path to be rounded poly.map( (point, i) => `${i === 0 ? 'M' : 'L'}${point.join(' ')}${i === poly.length - 1 ? 'z' : ''}` ).join( ' ' ), scale * radius * 2 ) ).join(' '); t1 = performance.now(); const roundingTime = t1 - t0; // Draw original rectangles t0 = performance.now(); showRects && rects.forEach((r, i) => s.appendChild( svg` ` )); // Position on the x-axis of the resulting polygon const polygonOffset = p( (showRects ? 1 : 0.5) * (bbox.width + margin * 2 - (showRects ? margin / 3 : 0)) ); // Draw the subdivisions from the first step if (showSubdivision) { // Keep an index of the x positions we already drawn to avoid duplicates const alreadyDrawn = {}; // Polygon to use as a mask s.appendChild( svg` `); // The subdivision lines as a group, masked using the polygon // we need -webkit-clip-path to get the mask to work in safari const g = svg``; s.appendChild(g); subdivision.result.forEach( (r, i) => { if (!alreadyDrawn[r[1][0]] && i !== subdivision.result.length - 1) { alreadyDrawn[r[1][0]] = true; g.appendChild( svg`` ) } } ); } // Draw final polygon s.appendChild( svg` `); // Draw circles at points coordinates showPoints && union.polygons.forEach( poly => poly.forEach( (point, i) => s.appendChild( svg` ${i} ` ) ) ) // All done, measure and store perfs t1 = performance.now(); perfs.push({event: 'Drawing', time: t1 - t0}); perfs.push({event: 'Subdivision', time: subdivision.totalTime}); perfs.push({event: 'Union', time: union.totalTime}); perfs.push({event: 'Round polygon path', time: roundingTime}) s.totalTime = perfs.reduce((acc, v) => acc + v.time, 0); s.perfs = perfs; // Return the svg return s; }