refactor of drawSvg + updateSvg, drag individual anchors, week15

Author: Theo-Jaunet

assets/css/main.css

@@ -17,6 +17,7 @@ body {
     display: flex;
     width: fit-content;
     flex-direction: column;
+    position: relative;
 }
 
 .paletteMark canvas {
@@ -983,4 +984,17 @@ p, h3, h4, h5, img {
 .dataColumn {
     font-weight: 600;
     text-decoration: underline;
+}
+
+.markAnchorSvg {
+    /*background-color: rgba(255,10,10,0.7);*/
+    position: absolute;
+    top: 18px;
+    pointer-events: none;
+
+}
+
+.markAnchorSvg circle{
+    pointer-events: all;
+    cursor: grab;
 }

assets/js/AllPalettes.js

@@ -5,8 +5,10 @@ let palSources = [
     "sudoku_level",
     "sudoku_hint",
     "sudoku_mistake",
-    "week26_circle"
-
+    "week26_circle",
+    "week15_squares",
+    "week15_RightSymbol",
+    "week15_InnerCircle",
 ]
 
 const prevW = 160
@@ -58,8 +60,13 @@ async function initAllPalette() {
         canContainer.style.height = prevH + "px"
 
         for (let j = n - 1; j > -1; j--) {
+            let b64 = allMarks[MarkNames[j]].source
+            if (allMarks[MarkNames[j]].source === undefined) {
+                b64 =  allMarks[MarkNames[j]].proto.canvas
+                allMarks[MarkNames[j]].source = allMarks[MarkNames[j]].proto.canvas
+            }
 
-            let tcan = cloneCanvas(allMarks[MarkNames[j]].source)
+            let tcan = cloneCanvas(b64)
             tcan.style.width = `${subW}px`
             tcan.style.height = `${subH}px`
 

assets/js/collageGrid.js

@@ -281,8 +281,6 @@ function makeCollageFromData(palettes, order, marks, row, color = undefined, siz
                 toOffX = selfAnchor.rx * sourceW
                 toOffY = selfAnchor.ry * sourceH
 
-                console.log(toOffX * sourceW,toOffY)
-
                 tcon.drawImage(can,
                     offX - toOffX,
                     offY - toOffY,

assets/js/dragStuff.js

@@ -23,7 +23,6 @@ function dragElement(elmnt) {
         }
 
 
-
         const rect = elmnt.getBoundingClientRect();
 
         offsetX = e.clientX - rect.left;
@@ -146,16 +145,16 @@ function dragElement2(elmnt) {
             console.log(id);
             console.log(selectedDataColumn);
 
-            megaGlyph[id].dataColumn =   selectedDataColumn
+            megaGlyph[id].dataColumn = selectedDataColumn
 
-            dataBinding[id]  = selectedDataColumn
+            dataBinding[id] = selectedDataColumn
 
-            drawSvg()
+            updateSvg()
 
 
         }
 
-        selectedDataColumn =  ""
+        selectedDataColumn = ""
 
 
     }
@@ -168,21 +167,40 @@ function dropPalette(e, elmnt) {
 
         let num = +elmnt.getAttribute("number")
         let name = elmnt.getAttribute("name")
-        console.log(num);
         let tpal = allPalettes[num]
 
+
+        if (megaPalettes[name] !== undefined) {
+            name += Object.keys(megaPalettes[name]).length
+        }
         megaPalettes[name] = tpal
 
         fillPalette()
 
         let tPalCont = document.getElementById("paletteCont")
         tPalCont.classList.remove("draggedover")
+
     } else if (e.target.matches("#composition")) {
 
 
         let num = +elmnt.getAttribute("number")
         let name = elmnt.getAttribute("name")
+
+        if (megaPalettes[name] !== undefined) {
+            name += Object.keys(megaPalettes).length
+        }
+
+        let tflag = false
+
+        if( Object.keys(megaPalettes).length === 0 ) {
+            tflag = true
+        }
+
         megaPalettes[name] = allPalettes[num]
+
+        dataBinding[name] = ""
+
+
         addPaletteInfoToCollage(allPalettes[num], name)
 
 
@@ -198,9 +216,15 @@ function dropPalette(e, elmnt) {
             }
         }
         megaGlyph[name].color = makeColorScale(name, "")
-        makeMarkTree()
+        // makeMarkTree()
 
         displayPalette(name)
+
+        if (tflag) {
+            tdrawRefactor()
+        } else {
+            updateSvg()
+        }
     }
 }
 
@@ -235,7 +259,7 @@ function dropCanvas(e, elmnt) {
 
         }
 
-        drawSvg()
+        updateSvg()
 
     }
 }
@@ -349,6 +373,7 @@ function dragged(event, d) {
 function dragended(event, d) {
     // d3.select(this).attr("stroke", null);
     // let elem = d3.select(this)
+    updateSvg()
 }
 
 

assets/js/main.js

@@ -2,7 +2,7 @@ let currImg;
 let tsaveim
 let viewDim = []
 let sampleData = []
-const totalExamples = 28
+const totalExamples = 50
 let categories = {
     default: {
         name: "default",
@@ -166,7 +166,8 @@ async function init() {
     // await loadDataset("assets/tempData/datasets/week26.csv")
 
     chartDataset.data = fakeWeek26()
-    drawSvg()
+    // drawSvg()
+    // tdrawRefactor()
     fillSidePanel()
     // document.getElementById("jsonLoader").addEventListener("change", importFromJson);
     document.getElementById("imgLoader").addEventListener("change", importImg);

assets/js/newCollage.js

@@ -259,14 +259,19 @@ function hidePalette() {
 
 function delPalette() {
     console.log(selectedPalette)
-    delete  megaPalettes[selectedPalette]
-    delete  megaGlyph[selectedPalette]
-    delete  dataBinding[selectedPalette]
-    d3.select("#collage-"+selectedPalette).remove()
-    drawSvg()
+    delete megaPalettes[selectedPalette]
+    delete megaGlyph[selectedPalette]
+    delete dataBinding[selectedPalette]
+    d3.select("#collage-" + selectedPalette).remove()
+    updateSvg()
     hidePalette()
 }
 
+
+function newSavePalette() {
+    savePalette2(selectedPalette)
+}
+
 function displayPalette(name) {
 
     selectedPalette = name
@@ -332,9 +337,6 @@ function displayPalette(name) {
     tdiv_mark.setAttribute("key", name)
 
     tdiv_mark.onclick = function (e) {
-
-        console.log("dasdasdadasdas dasd asdad asd ");
-
         if (mode !== "anchor") {
             if (e.target.matches("canvas")) {
                 editPalette(this)
@@ -393,6 +395,7 @@ function setAnchorOnAllMarks(name, x, y, from) {
             ry: y / 60,
         }
     }
+    d3.selectAll(".markAnchorSvg circle").transition().duration(60).attr("cx", x).attr("cy", y)
 }
 
 

assets/js/paletteHandler.js

@@ -281,7 +281,7 @@ function fillPalette(reset = false) {
     }
     // populateSelect()
     // updateLink2Palette()
-    drawSvg()
+    updateSvg()
 }
 
 
@@ -830,7 +830,7 @@ function savePalette() {
 
     // fillPalette()
 
-    drawSvg()
+ updateSvg()
 }
 
 
@@ -1430,54 +1430,83 @@ function makeRangeMark(key, tdiv, value, typesDisplay) {
     for (const [name, value] of Object.entries(marks)) {
         let tmark = makeSingleMark(key, name, "range", value.proto.canvas)
         tdiv.appendChild(tmark)
+        let tcan = tmark.lastChild;
+        let trect = tcan.getBoundingClientRect()
+
+        let tsvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        tmark.appendChild(tsvg)
+        tsvg = d3.select(tsvg)
+
+        tsvg
+            .attr("id", "svg" + key)
+            .attr("class", "markAnchorSvg")
+            .attr("viewBox", `0 0 ${trect.width} ${trect.height}`)
+            .attr("width", trect.width)
+            .attr("height", trect.height)
+
+
+        if (value.proto.anchors) {
+            for (const [id, coords] of Object.entries(value.proto.anchors)) {
+                tsvg.append("circle")
+                    .attr("cx", trect.width * coords.rx)
+                    .attr("cy", trect.height * coords.ry)
+                    .attr("num", id)
+                    .attr("palette", key)
+                    .attr("name", name)
+                    .attr("r", "5")
+                    .call(d3.drag()
+                        .on("start", nodeDragst)
+                        .on("drag", nodeDragged)
+                        .on("end", nodeDragend))
+            }
+
+        }
+
     }
 
-    /*    for (let i = 0; i < tnb; i++) {
+    let moreCan = document.createElement("div")
 
+    moreCan.innerHTML = ` <img  id="palettePlusMark" src="assets/images/buttons/plus.png" class="buttonImg" 
+ style=";margin-top: 41px;width: 25px; margin-left: 5px;cursor: pointer" onclick="addACan(this,'${key}')">`
+    tdiv.appendChild(moreCan)
+}
 
 
+function nodeDragst() {
 
+}
 
-            const tdiv_mark = document.createElement("div")
-            tdiv_mark.id = "mark_" + key
-            tdiv_mark.className = "paletteMark"
-            tdiv_mark.setAttribute("number", "" + i)
-            tdiv_mark.setAttribute("key", key)
-            tdiv_mark.setAttribute("type", "range")
-            tdiv_mark.innerHTML = "<input type='text' value='mark" + i + "' class='paletteMarkName'>"
-            if (marks[i]) {
-                tdiv_mark.append(value[i].proto.canvas)
-            } else {
-                const tcan = document.createElement("canvas")
-                tcan.width = 60
-                tcan.height = 60
-                tdiv_mark.append(tcan)
-                marks[i] = {
-                    value: i,
-                    type: "fake",
-                    proto: {canvas: tcan, corners: [[0, 0], [tcan.width, tcan.height]]},
-                }
-            }
-            tdiv_mark.onclick = function (e) {
+function nodeDragged(event) {
+    let elem = d3.select(this)
+    let htmlSvg = elem.node().parentElement
+    let svg = d3.select(htmlSvg)
 
-                if (mode !== "anchor") {
-                    editPalette(this)
-                } else {
-                    //TODO: Set for CATA and other primitive
-                    setAnchorOnProto(e, this)
-                }
-            }*/
-    // tdiv.appendChild(tdiv_mark)
+    let x = clampVal(event.x, 0, htmlSvg.getAttribute("width"));
+    let y = clampVal(event.y, 0, htmlSvg.getAttribute("height"));
+
+    elem.attr("cx", x)
+    elem.attr("cy", y)
+
+    let pal = elem.attr("palette")
+    let mark = elem.attr("name")
+    let num = elem.attr("num")
+
+
+
+    megaPalettes[pal].encodings.range.marks[mark].proto.anchors[num].x = x
+    megaPalettes[pal].encodings.range.marks[mark].proto.anchors[num].y = y
+    megaPalettes[pal].encodings.range.marks[mark].proto.anchors[num].rx = x / htmlSvg.getAttribute("width")
+    megaPalettes[pal].encodings.range.marks[mark].proto.anchors[num].ry = y / htmlSvg.getAttribute("height")
 
 
-    let moreCan = document.createElement("div")
 
-    moreCan.innerHTML = ` <img  id="palettePlusMark" src="assets/images/buttons/plus.png" class="buttonImg" style=";margin-top: 41px;
-  width: 25px;
-  margin-left: 5px;cursor: pointer" onclick="addACan(this,'${key}')">`
-    tdiv.appendChild(moreCan)
 }
 
+function nodeDragend() {
+    updateSvg()
+}
+
+
 function addACan(elem, key, img = undefined) {
     let len = Object.keys(megaPalettes[key].encodings.range.marks).length
 
@@ -1538,10 +1567,12 @@ function makeSingleMark(key, label, type, can = undefined) {
         */
 
         tdiv_mark.innerHTML = `${mess}
-            <canvas id='${"canvas_" + key}' style='width: 60px;height: 60px'>`
+            <canvas id='${"canvas_" + key}' style='width: 60px;height: 60px'></canvas>`
     } else {
         tdiv_mark.innerHTML = mess
         tdiv_mark.appendChild(can)
+
+
         can.id = `${"canvas_" + key}`
 
     }
@@ -1562,15 +1593,14 @@ function makeSingleMark(key, label, type, can = undefined) {
 }
 
 function renameRow(elem, key) {
-
     let name = elem.value
 
-
     document.getElementById("exportPaletteBtn_" + key).setAttribute("name", name)
 
     if (name !== "" && !palSources.includes(key)) {
         megaPalettes[name] = megaPalettes[key]
         delete megaPalettes[key]
+        selectedPalette = name
     }