31:T564,viewof iconsUrl = { const urls = [ { name : "Prod > Boilerplate: Vectuel Icons", url : "https://api.mappr.online/project/5d5fcf9375289a0007c2e90a_380cd568-76c4-4c86-bb99-9e2c7d6d0dfa/fonts/VectuelIcons/VectuelIcons.json" }, { name : "Prod > Boilerplate: Clichy Icons", url : "https://api.mappr.online/project/5d5fcf9375289a0007c2e90a_380cd568-76c4-4c86-bb99-9e2c7d6d0dfa/fonts/ClichyIcons/ClichyIcons.json" }, { name : "Localhost > 8085: Vectuel Icons", url : "http://127.0.0.1:8080/MyIcons.json" }, { name : "Localhost > IconSet Service (8084): ABC Icons", url : "http://localhost:8084/project/ooo/fonts/abc/abc.json" }, { name : "Localhost > Static Dir on 8080: My Icons", url : "http://127.0.0.1:8080/fonts/MyIcons/MyIcons.json" } ]; return html``; // let url; // url = "http://localhost:8085/project/boilerplate/fonts/VectuelIcons/VectuelIcons.json" // url = "http://127.0.0.1:8080/fonts/MyIcons/MyIcons.json" // // url = "http://localhost:8084/project/ooo/fonts/abc/abc.json" // const form = text({ // title: "URL of the IconSet JSON file", // placeholder: "IconSet URL", // value : url // }) // form.input.style.width = "100%"; // return form; }32:T67e,{ const width = markerSize; const size = Math.max(currentIcon.height, currentIcon.width); let w, h; w = h = width; // Create a "numeric" context generating polygons from icons let t = tolerance; // t = width / 1024; // OK! const transformRings = (ring => { const after = t > 0 ? simplifyRing(ring, t) : ring; console.log(' - SIMPLIFY', `width=${width}, tolerance=${t}: ${ring.length} => ${after.length}`); return after; }); const nctx = newNumericContext(transformRings); // Add missing methods Object.assign(nctx, { stroke : () => {}, fill : () => {}, canvas : { width, height : width } }); drawIcon({ context : nctx, icon : currentIcon, iconScale, color : 'red', strokeScale : 0, circleScale : 0 }); // Stroke and fill polygons created on the previous step const rings = nctx.rings; const data = new Uint8Array(w * h); const geom = newGeometry((x, y) => data[y * w + x] ^= 255); for (let ring of rings) { geom.fillPolygon(ring); } // Build SDF fields let distances; if (generateSdf) { const min = Math.min(w, h); const sdf = new Sdf({ width : w, height : h, radius : min / 10, cutoff : 0.1 }); distances = sdf.build(data); } else { distances = data.map(_ => _ ? 255 : 0); } // Visualize data const ctx = DOM.context2d(w, h, 1); const imageData = ctx.createImageData(w, h); for (let i = 0; i < distances.length; i++) { imageData.data[4 * i + 3] = 255 - distances[i]; // Math.round(Math.sqrt(distances[i]) * 2); } ctx.putImageData(imageData, 0, 0); return ctx.canvas; }33:T5fd, /** * This function compiles the given SVG path to a function accepting a canvas-like * context and drawing the corresponding image. This method can also accept "x" and "y" * functions allowing to transform path coordinates. It can be useful for example to scale, * translate or round path coordinates. Note that all possible SVG path command are reduced * to the following 4 method calls: * - M: moveTo * - L: lineTo * - C: bezierCurveTo * - Z: closePath * All coordinates are transformed to absolute onces. * * @param {Object} options parameters of this method * @param {String} path SVG path used to compile to a function * @param {Function} x optional function transforming X coordinates of the path * @param {Function} y optional function transforming Y coordinates of the path * @return {Function} function accepting canvas-like context used to draw the image */ function compileSvgPath({ x = _=>_, y = _=>_, path }) { const mapping = { M: "moveTo", L: "lineTo", C: "bezierCurveTo", Z: "closePath" }; const commands = PathData.parse(path, { normalize: true }); const lines = commands .map(({ type, values }) => { const coords = []; for (let i = 0; i < values.length;) { coords.push(x(values[i++], commands)); coords.push(y(values[i++], commands)); } return `context.${mapping[type]}(${coords.join(", ")});` }); lines.unshift(`context.beginPath();`); const f = new Function(['context'], lines.join('\n')); return f; } 34:T60e,drawIcon=(options) => { const { context, icon, iconScale = 0.8, color = 'black', strokeScale = 0.01, circleScale = 0.01, circleColor, circleFillColor } = options; const max = Math.max(icon.width, icon.height); const size = Math.min(context.canvas.width, context.canvas.height); const strokeWidth = strokeScale * size; const circleWidth = circleScale * size; const kX = icon.width / max; const kY = icon.height / max; const w = Math.round(size * kX); const h = Math.round(size * kY); const center = [size / 2, size / 2]; const r = size / 2 - circleWidth; const shiftX = -icon.width / 2; const shiftY = -icon.height / 2; const sX = iconScale * w / icon.width; const sY = iconScale * h / icon.height; if (circleWidth) { context.beginPath(); context.lineWidth = circleWidth; context.moveTo(center[0] + r, center[1]); // if (circleColor) { context.lineColor = circleColor; } if (circleFillColor) { context.fillStyle = circleFillColor; } context.arc(center[0], center[1], r, 0, 2 * Math.PI); context.stroke(); if (circleFillColor) { context.fill(); } context.closePath(); } context.fillStyle = color || 'white'; if (strokeWidth) { context.lineWidth = strokeWidth; } const compiledPath = compileSvgPath({ path : icon.d, x : v => Math.round(center[0] + (v + shiftX) * sX), y : v => Math.round(center[1] + (v + shiftY) * sY) }); compiledPath(context); if (strokeWidth) { context.stroke(); } context.fill(); }35:T9de,// Squared Distance Field generator class Sdf { constructor({ width, height, radius, cutoff }) { this.width = width; this.height = height; this.radius = radius || 8; this.cutoff = cutoff || 0.25; this.v = new Uint16Array(Math.max(this.width, this.height)); this.z = new Float64Array(Math.max(this.width, this.height) + 1); this.f = new Float64Array(Math.max(this.width, this.height)); this.gridOuter = new Float64Array(this.width * this.height); this.gridInner = new Float64Array(this.width * this.height); } build(data) { const INF = 1e16; for (let i = 0; i < this.width * this.height; i++) { var a = data[i]; this.gridOuter[i] = a ? 0 : a === 0 ? INF : Math.pow(Math.max(0, 0.5 - a), 2); this.gridInner[i] = a ? INF : a === 0 ? 0 : Math.pow(Math.max(0, a - 0.5), 2); } edt(this.gridOuter, this.width, this.height, this.f, this.v, this.z); edt(this.gridInner, this.width, this.height, this.f, this.v, this.z); const result = new Uint8ClampedArray(this.width * this.height); for (let i = 0; i < this.width * this.height; i++) { var d = Math.sqrt(this.gridOuter[i]) - Math.sqrt(this.gridInner[i]); result[i] = Math.round(255 - 255 * (d / this.radius + this.cutoff)); } return result; // 2D Euclidean squared distance transform by Felzenszwalb & Huttenlocher https://cs.brown.edu/~pff/papers/dt-final.pdf function edt(data, width, height, f, v, z) { for (var x = 0; x < width; x++) edt1d(data, x, width, height, f, v, z); for (var y = 0; y < height; y++) edt1d(data, y * width, 1, width, f, v, z); } // 1D squared distance transform function edt1d(grid, offset, stride, length, f, v, z) { var q, k, s, r; v[0] = 0; z[0] = -INF; z[1] = INF; for (q = 0; q < length; q++) f[q] = grid[offset + q * stride]; for (q = 1, k = 0, s = 0; q < length; q++) { do { r = v[k]; s = (f[q] - f[r] + q * q - r * r) / (q - r) / 2; } while (s <= z[k] && --k > -1); k++; v[k] = q; z[k] = s; z[k + 1] = INF; } for (q = 0, k = 0; q < length; q++) { while (z[k + 1] < q) k++; r = v[k]; grid[offset + q * stride] = f[r] + (q - r) * (q - r); } } } }36:[] 2f:{"title":"SVG on Canvas","cells":[{"id":0,"value":"md`# SVG on Canvas`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"\nviewof currentIconName = {\n const options = icons.icons.map(_ => ({\n label : `\n ${_.name}\n\n`,\n value : _.name\n }));\n return radio({\n title: 'Choose un icon:',\n options,\n value : options[0].value\n })\n}\n\n// viewof path = html``;\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"currentIcon=icons.icons.find(_ => _.name === currentIconName)","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"currentIcon.d","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"{\n const size = 18;\n const scale = size / Math.max(currentIcon.width, currentIcon.height);\n const color = 'red';\n const svg = ``;\n return html`

Currently selected SVG icon: \"${currentIconName}\" ${svg}

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"md`# Draw icon on canvas`","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"viewof markerSize = {\n const min = 16;\n const n = 1;\n const max = Math.round(width * n);\n return slider({\n min, \n max, \n step: 8, \n title: \"Marker size:\",\n description : `The size of the marker in pixels. Minimal size is ${min}px. Max is ${max}px (${Math.round(100 * n)}% of the full width). `\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"md`## Icon Parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"viewof iconColor = color({\n value: \"#fff600\",\n title: \"Icons fill color:\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"viewof strokeScale = {\n const min = 0;\n const max = 0.1;\n return slider({\n min, \n max, \n step: 0.01, \n title: \"Stroke line width:\",\n description : `Line stroke width as part of the marker size. 0 corresponds to no stroke. Maximal value corresponds to the ${Math.round(max * 100)}% of the marker size.`\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"viewof iconScale = {\n return slider({\n min: 0.1, \n max: 0.9, \n step: 0.05, \n value : 0.75,\n title: \"Icon size:\",\n description : md`**iconScale** values are in the range (0.1...1). Where 1.0 is the full size of the marker.`\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"md`## Circle Parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"viewof circleFillColor = color({\n value: \"#2a04f1\",\n title: \"Circle fill color:\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"md`## Result`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"{\n const w = markerSize;\n const h = Math.round(currentIcon.height * w / currentIcon.width);\n const context = DOM.context2d(w, h, 1);\n drawIcon({\n context, \n icon : currentIcon,\n iconScale,\n color : iconColor,\n strokeScale,\n circleScale : strokeScale,\n circleFillColor\n });\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"md`# SDF generation\n\nIn this section we generate Signed Distance Fields (SDF) from the selected icon. It is used to create MapBoxGL glyphs.\n`\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"md`Sequence of operations:\n- we draw the image in black/white format\n- we apply the Signed Distance Field transformation to it\n- the resulting matrix is visualized as a grayscale image\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":764,"value":"viewof tolerance = {\n const min = 0;\n const max = 5;\n return slider({\n min, \n max, \n step: 0.01, \n value : 1,\n title: \"Tolerance (in pixels):\"\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"viewof generateSdf = checkbox({\n title : `Generate SDF:`,\n options : [{ value : true, label : 'Yes' }],\n value : [ true ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"md`# Constants and variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"md`Information about icons loaded from the server:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"icons=fetch(iconsUrl).then(response => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"md`# Drawing Methods`","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"md`This function compiles the given SVG path to a function accepting a canvas-like context and drawing the corresponding image. This method can also accept the \"x\" and \"y\" functions allowing to transform path coordinates. It can be useful for example to scale, translate or round path coordinates.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":586,"value":"md`\n# Squared Distance Field generator\n\nThis code was copied from the TinySDF library: https://github.com/mapbox/tiny-sdf/blob/master/index.js with minor modificaiton: it is adapted to work with images of various sizes (not only with square glyph fonts).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":581,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"md`# External libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"import {radio, checkbox, slider, select, text, color} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":680,"value":"PathData = require(\"path-data@0.0.2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":736,"value":"import { newGeometry, simplifyRing, newNumericContext } from \"@kotelnikov/datacanvas\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}