2d:null 2e:["$","title",null,{"children":"1-bit SVG pixel pattern maker | cubeghost | Observable"}] 33:T542,const cssPositionsForm = (label, defaultValue) => Inputs.form({ top: Inputs.number({label: "Top", value: defaultValue}), right: Inputs.number({label: "Right", value: defaultValue}), bottom: Inputs.number({label: "Bottom", value: defaultValue}), left: Inputs.number({label: "Left", value: defaultValue}), }, { template: (inputs) => htl.html`

${label}

${Object.values(inputs)}

` }); const formatCssPositions = (positions, unit = "") => { const {top, right, bottom, left} = positions; return [top, unit, " ", right, unit, " ", bottom, unit, " ", left, unit].join(""); } const previewForm = [ {id: "border", name: "Border", form: { slice: cssPositionsForm("Slice", 3), width: cssPositionsForm("Width", 6), repeatX: Inputs.radio(["stretch", "repeat", "round", "space"], {label: "Repeat X", value: "stretch"}), repeatY: Inputs.radio(["stretch", "repeat", "round", "space"], {label: "Repeat Y", value: "stretch"}), fill: Inputs.toggle({label: "Fill"}) }}, {id: "background", name: "Background", form: { sizeX: Inputs.number({label: "Size X", value: 8}), sizeY: Inputs.number({label: "Size Y", value: 8}), }}, ]; const previewMode = view(detailsTabMode(previewForm, {label: "Preview mode"}));34:T4f0,const graph = buildPixelGraph(value.pixels, value.width); const groups = connectedComponents(graph); const paths = groups.map((group) => group.reduce((path, key) => { const {x, y} = graph.getNodeAttributes(key); if (!path) { path = PathKit.NewPath(); path.rect(x, y, 1, 1); } else { const pixel = PathKit.NewPath(); pixel.rect(x, y, 1, 1); path.op(pixel, PathKit.PathOp.UNION); } return path; }, undefined)); paths.forEach(p => p.simplify()); const optimizedPaths = paths.map(p => new SVGPathCommander(p.toSVGString()).optimize().toString()); const svgOutlines = svg`

${(pixels ?? d3.range(0, height * width)).map((v, i) => { const value = pixels ? v === 1 : false; const label = getCoords(i, width, height).join(","); return html`` })}`; const clearButton = html`