28:null 29:["$","title",null,{"children":"My Street Network Creator | linard-y | Observable"}] 2f:T19aa,streetNetworkCreator = { const options = preciousOptions({id: "StreetNetworkCreator_Options", height: 280}); const imageLoader = preciousImageLoader({id: "StreetNetworkCreator_ImageLoader"}); const currentType = preciousDotTypeSelector({id: "StreetNetworkCreator_DotTypeSelector", value:POINTTYPE.ROOT}); const clickType = preciousModeSelector({id: "StreetNetworkCreator_ModeSelector"}); const precision = preciousSizeDotInput({id:"StreetNetworkCreator_DotSizeRange", value:10}); const historyManager = preciousHistoryManager({id:"StreetNetworkCreator_HistoryManager", size:30}); const colorChooser = preciousColorChooser({id:"StreetNetworkCreator_ColorChooser", color1:'#000000', color2:'#888888'}); const dataStorage = preciousDataStore({id:"StreetNetworkCreator_DataStore"}); const pad = preciousCanvas({id:"StreetNetworkCreator_Pad", points:[], ptType:parseInt(currentType.value), mode:parseInt(clickType.value) , primaryColor: colorChooser.color1, secondaryColor: colorChooser.color2, ptSize:parseInt(precision.value), eps:parseInt(precision.value), options:options.value}); const editor = preciousDataEditor([], { columns: ["uid", "lbl", "strPath"], headers: { uid:"Id", lbl:"Name", strPath:"SVG Path"}, format: { lbl: (d) => Inputs.text({value: d}) }, tableclass: "veg", stylesheet: `.col-uid form { width: 100px }`, select: true, delete: true } ); options.addEventListener('change', (e) => { pad.options = options.value; }); precision.addEventListener('change', (e) => { pad.dotSize = parseInt(precision.value); pad.eps = parseInt(precision.value); }); clickType.addEventListener('change', (e) => { pad.mode = parseInt(clickType.value); }); currentType.addEventListener('change', (e) => { pad._type = parseInt(currentType.value); }); colorChooser.addEventListener('change', (e) => { pad.color = colorChooser.color1; pad.second_color = colorChooser.color2; }); imageLoader.addEventListener('click', (e) => { pad.bkgImg = imageLoader.value; }); historyManager.addEventListener('input', (e) => { pad.points = historyManager.value["points"]; pad.bkgImg = historyManager.value["image"]; pad.type = historyManager.value["typePoint"]; }); pad.addEventListener('dotTypeModified', (e) => { currentType.value = e.detail.typePoint; historyManager.store(e.detail); }); pad.addEventListener('pointsModified', (e) => { historyManager.store(e.detail); }); pad.addEventListener('pointsStored', (e) => { editor.data = pad.storage; historyManager.store(e.detail); }); dataStorage.addEventListener('store', (e) => { let data = {uid:Date.now(), lbl:e.detail, points:pad.points, toClose:pad.options.autoClose, strPath:produceSVGPath(pad.points, pad.options.autoClose).toString()}; pad.store(data); // --> update also editor.data }); dataStorage.addEventListener('download', (e) => { if (editor.data.length>0) { let s = JSON.stringify(editor.data); let blob = new Blob([s], {type: "application/json"}) ; const url = URL.createObjectURL(blob); const element = DOM.element('a') d3.select(element) .attr('href', url) .attr('download', 'untitled') .style('display', 'none') document.body.appendChild(element) element.click() document.body.removeChild(element) } }); dataStorage.addEventListener('upload', (e) => { const element = DOM.element('input') d3.select(element) .attr('type', 'file') .attr('accept', "json") .attr('multiple', false) .style('display', 'none') .on('change', async event => { let data = JSON.parse(await event.srcElement.files[0].text()); data.map(d => { d.points = d.points.map(ptJSON => { return Dot.deserialize(ptJSON)}) }) pad._storage = data; editor._data = data; }) document.body.appendChild(element) element.click() document.body.removeChild(element) }); // https://github.com/AdrienCastex/HTML5-Canvas-Path-Creator/blob/master/docs/index.html const wrapper = html`

${options} ${imageLoader} ${colorChooser} ${dataStorage}

${currentType} ${clickType} ${precision} ${historyManager}

${pad}

${editor}

`; wrapper.storage = () => { return editor.data; } wrapper.points = () => { return pad.points; } wrapper.image = () => { return pad.bkgImg; } wrapper.starters = (storageOnly) => { var starters = []; var connexions = wrapper.connexions(storageOnly); for (let i=0; i !connexions.some(c => c.distanceTo(s)<=parseInt(precision.value))); } wrapper.connexions = (storageOnly) => { var intersects = []; for (let i=0; i {return new Point({x:d.x, y:d.y});})); } } if (!storageOnly) { var currentPath = Snap().path(produceSVGPath(wrapper.points, options.value.autoClose).toString()); editor.data.map(data => { var selectedPath = Snap().path(data.strPath); intersects.push(Snap.path.intersection(currentPath,selectedPath).map(d => {return new Point({x:d.x, y:d.y});})); }) } return intersects.flat(); } return wrapper }30:T4dd,preciousModeSelector = ({id = '', value = ACTIONMODE.ADD} = {}) => { const clickType = html``; clickType.selectedIndex = value - 1; let wrapper = html`

${clickType}

` Object.defineProperties(wrapper, { _mode: { value: value || ACTIONMODE.ADD, enumerable: false, writable: true }, value: { get: () => { return wrapper._mode; }, set: (newValue) => { // Note that no 'input' event is emittted when the value property is set programatically if (wrapper._mode !== newValue) { wrapper._mode = newValue; clickType.value = newValue; } }, enumerable: true } }); clickType.onchange = (e) => { wrapper._mode = clickType.value wrapper.dispatchEvent(new CustomEvent('change')) } // we need to have a starting checked value wrapper.value = value; return wrapper }31:T53d,preciousDotTypeSelector = ({id = '', value = POINTTYPE.ROOT} = {}) => { const currentType = html``; currentType.selectedIndex = value - 1; let wrapper = html`

${currentType}

` Object.defineProperties(wrapper, { _type: { value: value || POINTTYPE.ROOT, enumerable: false, writable: true }, value: { get: () => { return wrapper._type; }, set: (newValue) => { // Note that no 'input' event is emittted when the value property is set programatically if (wrapper._type !== newValue) { wrapper._type = newValue; currentType.value = newValue; } }, enumerable: true } }); currentType.onchange = (e) => { wrapper._type = currentType.value wrapper.dispatchEvent(new CustomEvent('change')) } // we need to have a starting checked value wrapper.value = value; return wrapper }32:T592,preciousColorChooser = ({id = '', color1 = "#000000", color2 = "#888888"} = {}) => { const mainColor = html``; const subColor = html``; let wrapper = html`

Colors

${mainColor}

primary

${subColor}

secondary

` mainColor.addEventListener('change', (e) => { wrapper.color1 = mainColor.value; wrapper.value = {color1:mainColor.value, color2:subColor.value}; wrapper.dispatchEvent(new CustomEvent('input')) }) subColor.addEventListener('change', (e) => { wrapper.color2 = subColor.value; wrapper.value = {color1:mainColor.value, color2:subColor.value}; wrapper.dispatchEvent(new CustomEvent('input')) }) // we need to have a starting value wrapper.color1 = mainColor.value wrapper.color2 = subColor.value wrapper.value = {color1:mainColor.value, color2:subColor.value}; return wrapper }33:T90c,preciousHistoryManager = ({id = '', size = 30} = {}) => { let backward_btn = html``; let forward_btn = html``; let clear_btn = html``; let wrapper = html`

${backward_btn} ${forward_btn} ${clear_btn}

` let history = []; let pointer = undefined; let forward = []; Object.defineProperties(wrapper, { _history: { value: [], enumerable: false, writable: true }, history: { get: () => { return wrapper._history; }, set: (newValue) => { wrapper._history = newValue; }, enumerable: true } }); wrapper.store = (data) => { forward = []; if (pointer) { wrapper.history.push(pointer) } pointer = {...data}; while (wrapper.history.length > size) { wrapper.history.shift() } } const goBack = () => { if (wrapper.history.length > 0) { forward.push(pointer); const result = wrapper.history.pop(); pointer = result; return result; } } const goForward = () => { if (forward.length > 0) { wrapper.history.push(pointer); const result = forward.pop(); pointer = result; return result; } } clear_btn.addEventListener('click', (e) => { wrapper.value = []; wrapper.store() wrapper.dispatchEvent(new CustomEvent('input')) }) forward_btn.addEventListener('click', (e) => { wrapper.value = goForward(); wrapper.dispatchEvent(new CustomEvent('input')) }) backward_btn.addEventListener('click', (e) => { wrapper.value = goBack(); wrapper.dispatchEvent(new CustomEvent('input')) }) wrapper.value = null; return wrapper }34:Ta4d,preciousOptions = ({id = "options"} = {}) => { const ctrl_AutoClose = html`` const ctrl_ShowDots = html`` const ctrl_Fill = html`` const ctrl_KeepAlign = html`` const ctrl_HideBkgImg = html`` const wrapper = html`

${ctrl_AutoClose} Automaticaly close the shape
${ctrl_ShowDots} Show points
${ctrl_Fill} Fill the shape
${ctrl_KeepAlign} Keep bezier cursors aligned
${ctrl_HideBkgImg} Hide the background image

` const dispatch = (e) => { wrapper.value = Object({ autoClose: ctrl_AutoClose.checked, showDots: ctrl_ShowDots.checked, fill: ctrl_Fill.checked, keepBezierCursorsAligned: ctrl_KeepAlign.checked, hideBackgroundImage: ctrl_HideBkgImg.checked, }); wrapper.dispatchEvent(new CustomEvent('change', {detail: e.srcElement.id})) } ctrl_AutoClose.onchange = (e) => { dispatch(e) }; ctrl_ShowDots.onchange = (e) => { dispatch(e) }; ctrl_Fill.onchange = (e) => { dispatch(e) }; ctrl_KeepAlign.onchange = (e) => { dispatch(e) }; ctrl_HideBkgImg.onchange = (e) => { dispatch(e) }; // we need to have a starting value wrapper.value = Object({ autoClose: ctrl_AutoClose.checked, showDots: ctrl_ShowDots.checked, fill: ctrl_Fill.checked, keepBezierCursorsAligned: ctrl_KeepAlign.checked, hideBackgroundImage: ctrl_HideBkgImg.checked }); return wrapper }35:T874,preciousImageLoader = ({id = 'ImageLoaderCtrl', value = ''} = {}) => { const image_url = html``; const urlFile = html``; //const load_image = html``; const load_image = html``; let wrapper = html`

${image_url}

${urlFile}

${load_image}

`; image_url.oninput = () => { const url = image_url.value.toString(); if(url) { wrapper.value = url; wrapper.dispatchEvent(new CustomEvent('change')); } } urlFile.oninput = () => { const file = urlFile.files[0]; if (file) { wrapper.value = URL.createObjectURL(file); image_url.value = wrapper.value; wrapper.dispatchEvent(new CustomEvent('change')); } } load_image.onclick = () => { const url = image_url.value; if(url) { var image = new Image(); image.src = url; image.crossOrigin = "anonymous"; image.onload = () => { wrapper.value = image; wrapper.dispatchEvent(new CustomEvent("click")); }; image.onerror = error => { wrapper.value = error; wrapper.dispatchEvent(new CustomEvent("click")); }; } } // we need to have a starting checked value wrapper.value = value; return wrapper }36:T6094,preciousCanvas = ({id="PadCtrl", points=[], ptType=POINTTYPE.ROOT, mode=ACTIONMODE.ADD, primaryColor='#000000', secondaryColor='#888888', ptSize=10, eps=10, options } = {}) => { const transfMousePos = event => { return new Point({ x:(event.offsetX - wrapper.transform.x) / wrapper.transform.k, y:(event.offsetY - wrapper.transform.y) / wrapper.transform.k}); } const wrapper = html`

`; const canvas = html`

`; const ctx = canvas.getContext('2d'); const container = html`

${canvas}

`; const lastLocation = html`

(0, 0)

`; const currentLocation = html`

(0, 0)

`; const info = html`

waiting...

`; const transformStatus = html`

pan x:: 0 y:: 0 -- zoom 1

`; wrapper.draggedPt = undefined; wrapper.lastClickedPoint = undefined; wrapper.inCanvas = false; Object.defineProperties(wrapper, { _points: { value: points || [], enumerable: false, writable: true }, points: { get: () => { return wrapper._points; }, set: (newValue) => { if (wrapper._points !== newValue) { wrapper._points = newValue; wrapper.dispatchEvent(new CustomEvent('pointsModified', {detail: {tick:new Date(), points:newValue, action:"setting points", point:null, typePoint:wrapper.type, image:wrapper.bkgImg}})); redraw(); } }, enumerable: true }, _storage: { value: [], enumerable: false, writable: true }, storage: { get: () => { return wrapper._storage; }, set: (newValue) => { if (wrapper._storage !== newValue) { wrapper._storage = newValue; wrapper.dispatchEvent(new CustomEvent('pointsStored', {detail: {tick:new Date(), points:newValue, action:"setting storage", point:wrapper.lastClickedPoint, typePoint:wrapper.type, image:wrapper.bkgImg}})); redraw(); } }, enumerable: true }, _type: { value: ptType || POINTTYPE.ROOT, enumerable: false, writable: true }, type: { get: () => { return wrapper._type; }, set: (newValue) => { if (wrapper._type !== newValue) { wrapper._type = newValue; wrapper.dispatchEvent(new CustomEvent('dotTypeModified', {detail: {tick:new Date(), points:wrapper.points, action:"modifying type point points", point:wrapper.lastClickedPoint, typePoint:newValue, image:wrapper.bkgImg}})); } }, enumerable: true }, _mode: { value: mode || ACTIONMODE.ADD, enumerable: false, writable: true }, mode: { get: () => { return wrapper._mode; }, set: (newValue) => { // Note that no 'input' event is emittted when the value property is set programatically if (wrapper._mode !== newValue) { wrapper._mode = newValue; } }, enumerable: true }, _dotSize: { value: ptSize || 10, enumerable: false, writable: true }, dotSize: { get: () => { return wrapper._dotSize; }, set: (newValue) => { // Note that no 'input' event is emittted when the value property is set programatically if (wrapper._dotSize !== newValue) { wrapper._dotSize = newValue; redraw(); } }, enumerable: true }, _precision: { value: eps || 10, enumerable: false, writable: true }, precision: { get: () => { return wrapper._precision; }, set: (newValue) => { // Note that no 'input' event is emittted when the value property is set programatically if (wrapper._precision !== newValue) { wrapper._precision = newValue; } }, enumerable: true }, _zoomRange: { value: [1, 1.5, 2, 2.5, 3, 3.5, 4], enumerable: false, writable: true }, _imgSize: { value: [1000, 500], enumerable: false, writable: true }, _canvasWidth: { value: 1000, enumerable: false, writable: true }, _canvasHeight: { value: 500, enumerable: false, writable: true }, _bkgImg: { value: undefined, enumerable: false, writable: true }, bkgImg: { get: () => { return wrapper._bkgImg; }, set: (newValue) => { if (wrapper._bkgImg !== newValue && newValue) { wrapper._bkgImg = newValue; redraw(); wrapper._imgSize = [wrapper.bkgImg.width, wrapper.bkgImg.height]; let rw = Math.round((1000 / wrapper._imgSize[0])*Math.pow(10, 4)) / Math.pow(10, 4); let rh = Math.round((500 / wrapper._imgSize[1])*Math.pow(10, 4)) / Math.pow(10, 4); let ratio0 = d3.min([rw, rh]); wrapper._canvasWidth = wrapper._imgSize[0] * ratio0; wrapper._canvasHeight = wrapper._imgSize[1] * ratio0; d3.select(canvas) .attr("width", `${wrapper._canvasWidth}px`) .attr("height",`${wrapper._canvasHeight}px`); let ratio = ratio0; wrapper._zoomRange = [] while (ratio < 4) { wrapper._zoomRange.push(ratio); ratio += ratio0; } wrapper.transform = {x:0, y:0, k:wrapper._zoomRange[0]}; wrapper.dispatchEvent(new CustomEvent('imageChanged', {detail: {tick:new Date(), points:deepClone(wrapper.points), action:"changing background image", point:wrapper.lastClickedPoint, typePoint:wrapper.type, image:wrapper.bkgImg}})); } }, enumerable: true }, _transform: { value: { x: 0, y: 0, k: 1 }, enumerable: false, writable: true }, transform: { get: () => { return wrapper._transform; }, set: (newValue) => { if (wrapper._transform !== newValue) { wrapper._transform = newValue; transformStatus.innerText = `pan x:: ${~~wrapper._transform.x} y:: ${~~wrapper._transform.y} -- zoom ${Math.round(wrapper._transform.k*Math.pow(10, 2)) / Math.pow(10, 2)}`; redraw(); } }, enumerable: true }, _options: { value: options || {autoClose: false, showDots: true, fill: false, keepBezierCursorsAligned: false, hideBackgroundImage: false}, enumerable: false, writable: true }, options: { get: () => { return wrapper._options; }, set: (newValue) => { // Note that no 'input' event is emittted when the value property is set programatically wrapper._options = {...newValue}; redraw(); }, enumerable: true }, _color: { value: primaryColor || '#000000', enumerable: false, writable: true }, color: { get: () => { return wrapper._color; }, set: (newValue) => { // Note that no 'input' event is emittted when the value property is set programatically if (wrapper._color !== newValue) { wrapper._color = newValue; redraw(); } }, enumerable: true }, _second_color: { value: secondaryColor || '#888888', enumerable: false, writable: true }, second_color: { get: () => { return wrapper._second_color; }, set: (newValue) => { // Note that no 'input' event is emittted when the value property is set programatically if (wrapper._second_color !== newValue) { wrapper._second_color = newValue; redraw(); } }, enumerable: true } }); wrapper.append(html`

${info}

${transformStatus}

${container}

${currentLocation}

${lastLocation}

`); wrapper.store = (data) => { wrapper.storage.push( data); wrapper.points = []; // --> redraw() wrapper.dispatchEvent(new CustomEvent('pointsStored', {detail: {tick:new Date(), points:[], action:"storing points", point:wrapper.lastClickedPoint, typePoint:wrapper.type, image:wrapper.bkgImg}})); if (wrapper.type != POINTTYPE.ROOT) { wrapper.type = POINTTYPE.ROOT; } }; d3.select(window).on("keydown", (event) => { if (wrapper.inCanvas && event.key == "+") { let i = wrapper._zoomRange.indexOf(wrapper.transform.k); if (i 0) { newPanX = 0;} if (newPanX < (wrapper._canvasWidth - wrapper._imgSize[0] *new_k)) { newPanX = (wrapper._canvasWidth - wrapper._imgSize[0] *new_k);} let newPanY = wrapper.transform.y * new_k / old_k; if (newPanY > 0) { newPanY = 0;} if (newPanY < (wrapper._canvasHeight - wrapper._imgSize[1] *new_k)) { newPanY = (wrapper._canvasHeight - wrapper._imgSize[1] *new_k);} wrapper.transform = {x:newPanX, y:newPanY, k:new_k}; } } if (wrapper.inCanvas && event.key == "-") { let i = wrapper._zoomRange.indexOf(wrapper.transform.k); if (i>0) { let old_k = wrapper.transform.k; let new_k = wrapper._zoomRange[i-1]; let newPanX = wrapper.transform.x * new_k / old_k; if (newPanX > 0) { newPanX = 0;} if (newPanX < (wrapper._canvasWidth - wrapper._imgSize[0] *new_k)) { newPanX = (wrapper._canvasWidth - wrapper._imgSize[0] *new_k);} let newPanY = wrapper.transform.y * new_k / old_k; if (newPanY > 0) { newPanY = 0;} if (newPanY < (wrapper._canvasHeight - wrapper._imgSize[1] *new_k)) { newPanY = (wrapper._canvasHeight - wrapper._imgSize[1] *new_k);} wrapper.transform = {x:newPanX, y:newPanY, k:new_k}; } } if (wrapper.inCanvas && event.key == "ArrowUp") { let increment = ~~(10*wrapper.transform.k); let newPanY = wrapper.transform.y + increment; if (newPanY <= 0 && newPanY >= (wrapper._canvasHeight - wrapper._imgSize[1] * wrapper.transform.k)) { wrapper.transform = {x:wrapper.transform.x, y:newPanY, k:wrapper.transform.k}; } } if (wrapper.inCanvas && event.key == "ArrowDown") { let increment = ~~(10*wrapper.transform.k); let newPanY = wrapper.transform.y - increment; if (newPanY <= 0 && newPanY >= (wrapper._canvasHeight - wrapper._imgSize[1] * wrapper.transform.k)) { wrapper.transform = {x:wrapper.transform.x, y:newPanY, k:wrapper.transform.k}; } } if (wrapper.inCanvas && event.key == "ArrowLeft") { let increment = ~~(10*wrapper.transform.k); let newPanX = wrapper.transform.x - increment; if (newPanX <= 0 && newPanX >= (wrapper._canvasWidth - wrapper._imgSize[0] * wrapper.transform.k)) { wrapper.transform = {x:newPanX, y:wrapper.transform.y, k:wrapper.transform.k}; } } if (wrapper.inCanvas && event.key == "ArrowRight") { let increment = ~~(10*wrapper.transform.k); let newPanX = wrapper.transform.x + increment; if (newPanX <= 0 && newPanX >= (wrapper._canvasWidth - wrapper._imgSize[0] * wrapper.transform.k)) { wrapper.transform = {x:newPanX, y:wrapper.transform.y, k:wrapper.transform.k}; } } }); canvas.onmouseenter = () => wrapper.inCanvas = true; canvas.onmouseleave = () => wrapper.inCanvas = false; canvas.ondblclick = (event) => { if (!event.ctrlKey) { const point = transfMousePos(event); const selectedPt = selectedPoint(point); // return null, a Dot or a Controller if (selectedPt instanceof Controller) { selectedPt.align(); wrapper.redraw(); } } } canvas.onmousedown = (event) => { if (!event.ctrlKey) { const point = transfMousePos(event); const selectedPt = selectedPoint(point); // return null, a Dot or a Controller if (selectedPt) { //selectedPt not null if (selectedPt instanceof Controller) { // a Controller has been selected... wrapper.lastClickedPoint = new Point({x: selectedPt.owner.x, y: selectedPt.owner.y}); } else { // a Dot has been selected... wrapper.lastClickedPoint = new Point({x: selectedPt.x, y: selectedPt.y}); } lastLocation.innerText = wrapper.lastClickedPoint.toString(); if (wrapper.mode === ACTIONMODE.REMOVE) { removePoint(wrapper.lastClickedPoint); displayInfo("removing point", "waiting..."); wrapper.dispatchEvent(new CustomEvent('pointsModified', {detail: {tick:new Date(), points:deepClone(wrapper.points), action:"removing point", point:wrapper.lastClickedPoint, typePoint:wrapper.type, image:wrapper.bkgImg}})); wrapper.lastClickedPoint = undefined; } else { wrapper.draggedPt = selectedPt; if (selectedPt instanceof Controller) { displayInfo("modifying controller", null); } else { displayInfo("dragging point", null); } } } else { //selectedPt is null, the click is going to generate a new Dot wrapper.lastClickedPoint = point; lastLocation.innerText = point.toString(); if (wrapper.mode === ACTIONMODE.ADD) { wrapper.draggedPt = undefined; let newPoint = new Dot({point:point, type:wrapper.type}); if (newPoint.type === POINTTYPE.BEZIER) { newPoint.setController("from", {x: 20, y: 0}); if (wrapper.points.length > 0) { const lastDot = wrapper.points[wrapper.points.length - 1]; lastDot.setController("to", {x: 20, y: 0}); if ("from" in lastDot.controllers) { lastDot.controllers["from"].align(lastDot) } } } wrapper.points.push(newPoint); displayInfo(`adding ${newPoint.toString()},a new Dot of type ${POINTTYPE.reverseLookup(newPoint.type)}...`, "waiting..."); wrapper.dispatchEvent(new CustomEvent('pointsModified', {detail: {tick:new Date(), points:deepClone(wrapper.points), action:"adding point", point:newPoint, typePoint:wrapper.type, image:wrapper.bkgImg}, bubbles:true})); if (wrapper.type === POINTTYPE.ROOT) { wrapper.type = POINTTYPE.REGULAR; } } } redraw(); } } canvas.onmouseup = (event) => { if (!event.ctrlKey) { const point = transfMousePos(event); const isShiftPressed = event.shiftKey; if(wrapper.draggedPt) { movedraggedPt(point, isShiftPressed); displayInfo(null, "waiting..."); if (wrapper.draggedPt instanceof Dot) { wrapper.dispatchEvent(new CustomEvent('pointsModified', {detail: {tick:new Date(), points:deepClone(wrapper.points), action:"moving point", point:wrapper.draggedPt, typePoint:wrapper.type, image:wrapper.bkgImg}})); } if (wrapper.draggedPt instanceof Controller) { wrapper.dispatchEvent(new CustomEvent('pointsModified', {detail: {tick:new Date(), points:deepClone(wrapper.points), action:"modifying controller", point:wrapper.draggedPt, typePoint:wrapper.type, image:wrapper.bkgImg}})); } wrapper.draggedPt = undefined; } redraw(); } } canvas.onmousemove = (event) => { if (!event.ctrlKey) { const point = transfMousePos(event); const isShiftPressed = event.shiftKey; currentLocation.innerText = point.toString(); if (wrapper.draggedPt) { movedraggedPt(point, isShiftPressed); info.innerText = "dragging point..."; redraw(); } } } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// const movedraggedPt = (point, isShiftPressed) => { if (wrapper.draggedPt instanceof Controller) { const owner = wrapper.draggedPt.owner; const newPt = new Point({ x: point.x - owner.x, y: point.y - owner.y}); if(isShiftPressed) { const angle = Math.atan2(wrapper.draggedPt.y, -wrapper.draggedPt.x) + Math.PI; const otherAngle = angle - Math.PI / 2 + Math.PI; let otherDistance = newPt.distance(); wrapper.draggedPt.x = Math.sin(otherAngle) * otherDistance; wrapper.draggedPt.y = Math.cos(otherAngle) * otherDistance; } else { wrapper.draggedPt.x = newPt.x; wrapper.draggedPt.y = newPt.y; if(wrapper.options.keepBezierCursorsAligned) { wrapper.draggedPtalignBezierControllers(); } } } else { wrapper.draggedPt.x = point.x; wrapper.draggedPt.y = point.y; } } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// const displayInfo = (text, text_back) => { if (text) { info.innerText = text; } if(text_back) { d3.select(info) .transition() .delay(500) .duration(1000) .text(text_back); } } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// const drawStoredData = (ctx) => { ctx.save(); ctx.fillStyle = 'red'; ctx.strokeStyle = 'red'; ctx.beginPath(); wrapper.storage.map(d => { d.points.map((point, i) => { switch(point.type) { case POINTTYPE.REGULAR: ctx.lineTo(point.x, point.y); break; case POINTTYPE.ROOT: ctx.moveTo(point.x, point.y); break; case POINTTYPE.BEZIER: if(i>0) { const absoluteC2 = d.points[i-1].controllers["to"].absPos(); const absoluteC1 = point.controllers["from"].absPos(); ctx.bezierCurveTo(absoluteC2.x, absoluteC2.y, absoluteC1.x, absoluteC1.y, point.x, point.y); } else { ctx.moveTo(point.x, point.y); } break; } }) if (d.toClose) { ctx.closePath();} ctx.stroke(); d.points.map(pt => { pt.draw(ctx, 'red', 'white', wrapper.dotSize/4, wrapper.transform, d3.symbolCircle); }) }) ctx.restore(); } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// const redraw = () => { ctx.save(); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.translate(wrapper.transform.x, wrapper.transform.y); ctx.scale(wrapper.transform.k, wrapper.transform.k); if( wrapper.bkgImg && !wrapper.options.hideBackgroundImage) { ctx.drawImage(wrapper.bkgImg, 0, 0); } drawStoredData(ctx); ctx.fillStyle = wrapper.color; ctx.strokeStyle = wrapper.color; ctx.beginPath(); wrapper.points.map((point, i) => { switch(point.type) { case POINTTYPE.REGULAR: ctx.lineTo(point.x, point.y); break; case POINTTYPE.ROOT: ctx.moveTo(point.x, point.y); break; case POINTTYPE.BEZIER: if(i>0) { const absoluteC2 = wrapper.points[i-1].controllers["to"].absPos(); const absoluteC1 = point.controllers["from"].absPos(); ctx.bezierCurveTo(absoluteC2.x, absoluteC2.y, absoluteC1.x, absoluteC1.y, point.x, point.y); } else { ctx.moveTo(point.x, point.y); } break; } }) if (wrapper.options.autoClose) { ctx.closePath();} if (wrapper.options.fill) { ctx.fill();} ctx.stroke(); //ctx.endPath(); if (wrapper.options.showDots) { wrapper.points.map((point) => { point.draw(ctx, wrapper.color, wrapper.color, wrapper.dotSize, wrapper.transform); if(!wrapper.options.showConstructionDotsOnLastClickedPointOnly || wrapper.lastClickedPoint === point) { point.drawCtrls(ctx, wrapper.second_color, wrapper.second_color, wrapper.dotSize, wrapper.transform) } }) } ctx.restore(); } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// const selectedPoint = (location) => { let selection = null; let dots = wrapper.points.filter((pt) => { return location.distanceTo(pt) <= wrapper.precision; }); let ctrls = wrapper.points.map((pt) => Object.values(pt.controllers)).flat().filter((pt) => { return location.distanceTo(pt.absPos()) <= wrapper.precision; }); if (dots.length > 0) { selection = dots[0]; } else if (ctrls.length > 0) { selection = ctrls[0]; } return selection; } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// const removePoint = (point) => { [...wrapper.points].map((pt, i) => { if(pt.x === point.x && pt.y === point.y) { wrapper.points.splice(i, 1); } }) } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// const deepClone = (obj, hash = new WeakMap()) => { // Do not try to clone primitives or functions if (Object(obj) !== obj || obj instanceof Function) return obj; if (hash.has(obj)) return hash.get(obj); // Cyclic reference try { // Try to run constructor (without arguments, as we don't know them) var result = new obj.constructor(); } catch (e) { // Constructor failed, create object without running the constructor result = Object.create(Object.getPrototypeOf(obj)); } // Optional: support for some standard constructors (extend as desired) if (obj instanceof Map) Array.from(obj, ([key, val]) => result.set(deepClone(key, hash), deepClone(val, hash))); else if (obj instanceof Set) Array.from(obj, (key) => result.add(deepClone(key, hash))); // Register in hash hash.set(obj, result); // Clone and assign enumerable own properties recursively return Object.assign(result, ...Object.keys(obj).map(key => ({ [key]: deepClone(obj[key], hash) }))); } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // we need to have a starting value wrapper.value = wrapper.points; return wrapper }37:T76d,preciousDataStore = ({id = 'DataStoreCtrl', value = "unknown"} = {}) => { const text = html``; const submit = html``; const upload = html``; const download = html``; const wrapper = html`

STORE

${text}

${submit}

${upload}

${download}

`; wrapper.value = value; submit.addEventListener("click", event => { event.preventDefault(); wrapper.value = text.value; text.value=null; wrapper.dispatchEvent(new CustomEvent("store", {detail:wrapper.value})); }); upload.addEventListener("click", event => { event.preventDefault(); wrapper.dispatchEvent(new CustomEvent('upload')); }); download.addEventListener("click", event => { event.preventDefault(); wrapper.dispatchEvent(new CustomEvent('download')); }); return wrapper; }38:T1b0b,preciousDataEditor = ( records, options = { select: true, delete: true } ) => { if (options.select !== false) options.select = true; if (options.delete !== false) options.delete = true; let dragging = null; let dragover = null; const selected = Inputs.input({}); if (!options.tableclass) options.tableclass = options.tableClass || "dataeditor"; if (!options.columns) options.columns = Object.keys(records[0]); const topBorder ='solid 1px transparent'; const bottomBorder = 'solid 1px #ddd'; const dragBorder = 'solid 3px blue'; const reset = (li) => { if (li) { li.style['border-top'] = topBorder; li.style['border-bottom'] = bottomBorder; } } const getTr = (target) => { if (!target) return false; while (target.nodeName.toLowerCase() != 'tr' && target.nodeName.toLowerCase() != 'table' ) { target = target.parentNode; } if ( target.nodeName.toLowerCase() == 'table' ||target.parentNode.nodeName.toLowerCase() == 'thead') { return false; } else { return target; } } const columnTrash = () => { let trash = html``; //trash.addEventListener("click", (evt) => { // const index = [...table.data].findIndex( (e) => e === evt.srcElement.parentElement.parentElement); // let deletedData = table.splice(index, 1); // table.dispatchEvent(new CustomEvent("input", {detail: evt.srcElement.parentElement.parentElement, bubbles: true })); //}) return html`${trash}`; } const elementCell = (column, d) => options?.format ? options.format.hasOwnProperty(column) ? options.format[column](d[column]) : html`${d[column]}` : html`${d[column]}`; const dataCell = (column, d) => html`${ elementCell(column, d) }`; const row = (d) => html` ${ options.select ? html`` : "" } ${ options.delete ? columnTrash() : ""} ${options.columns.map((column) => dataCell(column, d))} `; const table = html` ${options.select ? html`` : ""} ${options.delete ? html`` : ""} ${options.columns.map( (column, ci) => html`` )} ${ (records.length>0) ? records.map(row) : ' '}

			${(options?.headers ? options.headers[column] : column)}

`; Object.defineProperties(table, { _data: { value: [], enumerable: false, writable: true }, data: { get: () => { return table._data; }, set: (newValue) => { table._data = newValue; }, enumerable: true } }); table.addEventListener("input", (evt) => { const checkboxes = [...table.querySelectorAll(".rowselect")]; Object.keys(selected.value).forEach((i) => { if (i >= checkboxes.length || !checkboxes[i].checked) { delete selected.value[i]; } }); checkboxes.map((c, i) => { if (c.checked) selected.value[i] = true; }); }); function splice(index, numDelete, ...items) { const newData = [...table.data]; newData.splice( index, numDelete, ...items.map((item, itemIndex) => row(item)) ); table.data = newData.map((sv) => sv.value); } function ondragstart(event) { var target = getTr(event.target); dragging = target; if (event.dataTransfer) event.dataTransfer.setData("text/plain", null); } function ondragover(event, eventTarget, clientY) { event.preventDefault(); var target = getTr(eventTarget || event.target); if (!target) { reset(dragover); dragover = undefined; } var bounding = target.getBoundingClientRect(); var offset = bounding.y + bounding.height / 2; reset(dragover); dragover = target; if ((clientY || event.clientY) - offset > 0) { target.style["border-bottom"] = dragBorder; target.style["border-top"] = topBorder; target.inserting = "below"; } else { target.style["border-top"] = dragBorder; target.style["border-bottom"] = bottomBorder; target.inserting = "above"; } } function ondragleave(event) { reset(dragover); dragover = null; } function ondrop(event) { event.preventDefault(); const index = [...table.data].findIndex((e) => e === dragging); const newData = [ ...[...table.data].slice(0, index), ...[...table.data].slice(index + 1, table.data.length) ]; if (dragover.inserting === "below") { const insert = newData.findIndex((e) => e === dragover.nextSibling); newData.splice(insert === -1 ? newData.length : insert, 0, dragging); } else { const insert = newData.findIndex((e) => e === dragover); newData.splice(insert, 0, dragging); } reset(dragover); dragover = null; debugger; table.data = _.cloneDeep(newData.map((row) => row.value)); const newEvent = new Event("input", { bubbles: true }); newEvent.isUser = true; table.dispatchEvent(newEvent); } function ontouchstart(event) { if (event.target.draggable) { ondragstart(event); } } function ontouchmove(event) { if (dragging) { const target = document.elementFromPoint( event.touches[0].clientX, event.touches[0].clientY ); if (target) { ondragover(event, target, event.touches[0].clientY); } else { reset(dragover); dragover = null; } } } function ontouchend(event) { if (dragging) { if (dragover) { ondrop(event); } ondragleave(event); } dragging = null; } return Object.assign(table, { splice, ondragstart, ondragover, ondragleave, ondrop, oninput, ontouchstart, ontouchmove, ontouchend }); }39:T5e7,class Dot extends Point { constructor({point = new Point(), type = 1, controllers = {}} = {}) { super({x:point.x, y:point.y}); this.type = type; this.controllers = controllers; } static deserialize(data) { let newDot = new Dot({point:new Point({x:data.x, y:data.y}), type:data.type, controllers: {}}); if (Object.keys(data.controllers).length > 0) { Object.keys(data.controllers).map(key => newDot.controllers[key] = Controller.deserialize(data.controllers[key])); } return newDot; } getController(key) { return this.controllers[key]; } setController(key, loc) { this.controllers[key] = new Controller({x: loc.x, y: loc.y, owner: this.loc(), type:key=="from"?CONTROLLERTYPE.FROM:CONTROLLERTYPE.TO}); } draw(contex, strokeColor, fillColor, size, transform, symbol=d3.symbolSquare) { contex.save(); contex.fillStyle = fillColor; contex.strokeStyle = strokeColor; var canvasSymbol = d3.symbol() .size(size*10) .type(symbol); canvasSymbol.context(contex); contex.translate(this.x, this.y); contex.beginPath(); canvasSymbol(); contex.stroke(); contex.fill(); contex.restore(); } drawCtrls(contex, strokeColor, fillColor, size, transform) { Object.keys(this.controllers).map(key => { this.controllers[key].draw(contex, strokeColor, fillColor, size, transform); }) } }3a:T714,class Controller extends Point { constructor({x = 0, y = 0, owner = undefined, type = CONTROLLERTYPE.FROM} = {}) { super({x:x, y:y}); this.owner = owner; this.type = type; } static deserialize(data) { let newController = new Controller({...data}); newController.owner = Point.deserialize(data.owner); return newController; } absPos() { return new Point({x: this.x + this.owner.x, y: this.y + this.owner.y}); } draw(contex, strokeColor, fillColor, size, transform, symbol = d3.symbolDiamond2) { contex.save(); contex.fillStyle = fillColor; contex.strokeStyle = strokeColor; var canvasSymbol = d3.symbol() .size(size*10) .type(symbol); canvasSymbol.context(contex); contex.translate(this.absPos().x, this.absPos().y); contex.beginPath(); canvasSymbol(); contex.stroke(); contex.fill(); contex.translate(-this.absPos().x, -this.absPos().y); contex.beginPath(); contex.moveTo(this.owner.x, this.owner.y); contex.lineTo(this.absPos().x, this.absPos().y); contex.stroke(); contex.restore(); } align(dot) { let adjustPoint; if(this.type === CONTROLLERTYPE.FROM) { adjustPoint = dot.controllers["to"]; } else if(this.type === CONTROLLERTYPE.TO) { adjustPoint = dot.controllers["from"]; } if(adjustPoint) { const angle = Math.atan2(this.y, -this.x) + Math.PI; const otherAngle = angle - Math.PI / 2; const length = adjustPoint.distance(); adjustPoint.x = Math.sin(otherAngle) * length; adjustPoint.y = Math.cos(otherAngle) * length; } } }3b:T4cf,produceSVGPath = (pts, toClose) => { let js = ''; const addLine = (line) => { js = `${js}\n ${line}`.trim(); } const xCoord = (c) => { return `${c}`; }; const yCoord = (c) => { return `${c}`; }; pts.map((point, i) => { switch(point.type) { case POINTTYPE.REGULAR: addLine(`ctx.lineTo(${xCoord(point.x)}, ${yCoord(point.y)});`); break; case POINTTYPE.ROOT: addLine(`ctx.moveTo(${xCoord(point.x)}, ${yCoord(point.y)});`); break; case POINTTYPE.BEZIER: if(i>0) { const absoluteC2 = pts[i-1].controllers["to"].absPos(); const absoluteC1 = point.controllers["from"].absPos(); addLine(`ctx.bezierCurveTo(${xCoord(absoluteC2.x)}, ${yCoord(absoluteC2.y)}, ${xCoord(absoluteC1.x)}, ${yCoord(absoluteC1.y)}, ${xCoord(point.x)}, ${yCoord(point.y)})`); } else { addLine(`ctx.moveTo(${xCoord(point.x)}, ${yCoord(point.y)});`); } break; } }) if(toClose) { addLine(`ctx.closePath();`); } addLine(`return ctx;`); return new Function(['ctx'], `${js}`)(d3.path()); }3c:[{"id":"9a03b2c5298fe1c9549ad1638b70f81cdd40ee640562876eaaff383081b907a7a2e94cf0a5b30fc4711e0f02403426afd13e7e7d7bea8217c0facf9146404c82","href":"https://static.observableusercontent.com/files/9a03b2c5298fe1c9549ad1638b70f81cdd40ee640562876eaaff383081b907a7a2e94cf0a5b30fc4711e0f02403426afd13e7e7d7bea8217c0facf9146404c82","name":"laelith2.jpg","type":"image/jpeg","lastModified":1705235453093.393,"size":4541330}] 2c:{"id":"e319bb0efc375fd1","slug":null,"title":"My Street Network Creator","thumbnail":"ee70e4ee3da5ec02f2ec9c7c4f9c49d4e441c997cdbe8444ca544500932ba2ae","access_level":"public","create_time":"$D2024-01-13T15:07:29.872Z","update_time":"$D2024-03-04T19:18:28.830Z","view_time":null,"first_public_time":"$D2024-01-13T15:07:29.872Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024"},"version":2735,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null}],"members":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"My Street Network Creator","cells":[{"id":0,"value":"# My Street Network Creator","pinned":false,"hidden":false,"mode":"md"},{"id":769,"value":"mutable spyé = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"preciousCheckBox = ({id = '', lbl = '', checked = false} = {}) => {\n let check = html``;\n let label = html`${lbl}`;\n let wrapper = html`

${check}${label}

` ;\n check.checked = checked;\n\n check.addEventListener('change', (e) => {\n wrapper.checked = check.checked;\n wrapper.value = check.checked?1:0;\n wrapper.dispatchEvent(new CustomEvent('input'));\n })\n \n // we need to have a starting checked value\n wrapper.checked = check.checked;\n wrapper.value = check.checked?1:0;\n \n return wrapper\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":925,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1390,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"preciousSizeDotInput = ({id = '', value = 10} = {}) => {\n let precision = html``;\n let wrapper = html`\n

\n Points size\n

\n ${precision}\n

\n px\n

`\n \n precision.addEventListener('change', (e) => {\n wrapper.value = precision.value\n wrapper.dispatchEvent(new CustomEvent('input'))\n })\n \n // we need to have a starting value\n wrapper.value = precision.value\n \n return wrapper\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1407,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1878,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2437,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"stylesheet = html`\nCSS \n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"class Point {\n constructor({x = null, y = null} = {}) {\n this.x = x;\n this.y = y;\n }\n\n static deserialize(data) {\n let newPoint = new Point({...data});\n return newPoint;\n }\n\n loc() {\n return new Point({x:this.x, y:this.y})\n }\n \n toString() {\n return `(${Math.round(this.x)}, ${Math.round(this.y)})`;\n };\n\n distanceTo(point) {\n return Math.sqrt( Math.pow((point.x-this.x), 2) + Math.pow((point.y-this.y), 2) )\n }\n\n distance() {\n return Math.sqrt( Math.pow(this.x, 2) + Math.pow(this.y, 2) )\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1152,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":2195,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"POINTTYPE = EnumFactory(\n ['ROOT', 0x01],\n ['REGULAR', 0x02],\n ['BEZIER', 0x03]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1161,"value":"CONTROLLERTYPE = EnumFactory(\n ['FROM', 0x01],\n ['TO', 0x02]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"ACTIONMODE = EnumFactory(\n ['ADD', 0x01],\n ['REMOVE', 0x02],\n ['MOVE', 0x03]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"import {EnumFactory} from \"@ada-lovecraft/javascript-enums-by-proxy\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2684,"value":"import {YLUText, YLUDropdown, YLUOptionsChooser, YLUImageLoader, YLURadioSelector, YLUIncrementer, YLUDotSelector, YLUHistoryManager,YLUColorConfigurator, YLUInputRow, YLUDataAdder, YLUDataEditor, YLUButtonToolBar, YLUVectGraph} from '@linard-y/yludataeditor'","pinned":true,"hidden":false,"mode":"ojs"},{"id":475,"value":"Snap = require('snapsvg@0.5.1/dist/snap.svg.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 2d:"$2c:body"