update

Author: Theo-Jaunet

assets/css/main.css

@@ -1,5 +1,6 @@
 body {
     font-family: Helvetica Neue, sans-serif;
+    user-select: none;
 }
 
 .editCat {
@@ -85,6 +86,8 @@ body {
 
 }
 
+
+
 #catData {
     width: 30%;
     margin-left: 2%;
@@ -417,6 +420,7 @@ canvas {
     left: 550px;
     background-color: #424242;
     color: #fff;
+    z-index: 99;
 
 
 }
@@ -489,24 +493,32 @@ table th {
     width: 75px;
 }
 
+.paletteName {
+    display: flex;
+}
+
+#palettePlusMark {
+filter: invert(1);
+}
 
 .waypointTitle {
+    background-color: #424242 !important;
     font-weight: 600;
     text-align: left;
-    margin-left: 29px;
-    color: #333;
+    margin-left: 10px;
+    color: #fff;
     border-radius: 0 !important;
     border: none !important;
     border-color: #333;
     border-bottom: 1px solid !important;;
     /*padding: 5px 10px !important;*/
     padding: 5px 2px !important;
     outline: none !important;
-    width: 15%;
-    font-size: 20pt;
+    /*width: 15%;*/
+    font-size: 14pt;
     margin-right: 10px;
-    margin-top: 14px;
     min-width: 90px;
+    height: 27px !important;
 }
 
 #sampledMarks canvas {
@@ -767,16 +779,17 @@ li .fakeGrammarRow {
 
 .exportPaletteBtn {
     cursor: pointer;
-    width: 50px;
+    width: 32px;
     padding: 0;
     height: 29px;
-    margin-top: 35px;
+    /*margin-top: 35px;*/
 }
 
 .exportPaletteBtn img {
     transform: scaleX(-1);
     width: 21px;
     height: 21px;
+    filter: invert(1);
 }
 
 .canPreview {
@@ -859,7 +872,7 @@ p, h3, h4, h5, img {
     width: 32px;
     height: 35px;
     background-color: inherit;
-    left: -22px;
+    left: -12px;
     border-radius: 5px;
     transition: .5s;
 }
@@ -870,11 +883,11 @@ p, h3, h4, h5, img {
 }
 
 #AllPaletteCont {
-    overflow-y: auto;
-    height: 74vh;
+    overflow-y: scroll;
+    height: 50vh;
     width: 300px;
-    -ms-overflow-style: none; /* Internet Explorer 10+ */
-    scrollbar-width: none; /* Firefox, Safari 18.2+, Chromium 121+ */
+    /*-ms-overflow-style: none; !* Internet Explorer 10+ *!*/
+    /*scrollbar-width: none; !* Firefox, Safari 18.2+, Chromium 121+ *!*/
     /*border: 1px solid #555;*/
 }
 
@@ -915,8 +928,53 @@ p, h3, h4, h5, img {
     border-radius: 10px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     padding: 20px;
+    z-index: 99;
 }
 
-#svgDisplay image{
+#sampleDisplay image{
     pointer-events: all;
+
+}
+
+#sampleDisplay .sample {
+    outline: solid 1px #424242;
+}
+
+.LassoControls {
+    cursor: pointer;
+}
+
+.LassoControls circle {
+    fill: rgba(244, 244, 244, 0.9);
+    stroke-width: 2px;
+    stroke: #222
+}
+
+.LassoControls:hover {
+    fill: rgba(244, 244, 244, 0.5);
+}
+
+
+#composition path:hover {
+
+    stroke-width: 6px ;
+    cursor: pointer;
+
+}
+
+#composition circle:hover {
+
+    r: 9px ;
+    cursor: grab;
+
+
+}
+.dataRow {
+    display: flex;
+    justify-content: center;
+}
+
+.dataColumn {
+    font-weight: 600;
+    text-decoration: underline;
 }

assets/js/AllPalettes.js

@@ -76,21 +76,20 @@ async function initAllPalette() {
     let tPalCont = document.getElementById("paletteCont")
 
 
-    tPalCont.onmouseover= function (e) {
+    tPalCont.onmouseover = function (e) {
         if (dragging) {
 
-        this.classList.add("draggedover");
+            this.classList.add("draggedover");
         }
     }
 
-    tPalCont.onmouseleave= function (e) {
+    tPalCont.onmouseleave = function (e) {
         if (dragging) {
             this.classList.remove("draggedover");
         }
     }
 
 
-
 }
 
 
@@ -169,4 +168,57 @@ function openNav() {
     }
 
 
+}
+
+
+function appendSingle(palette,name) {
+    const container = document.getElementById("AllPaletteCont");
+
+
+    palSources.push(name)
+
+    console.log(palette);
+
+    let tdiv = document.createElement("div");
+    tdiv.className = "allPaletteRow";
+    tdiv.setAttribute("number", palSources.length-1)
+    tdiv.setAttribute("name", name)
+
+    let canContainer = document.createElement("div");
+    tdiv.innerHTML = `<p>${name}</p>`;
+    canContainer.className = "canPreview";
+
+    tdiv.appendChild(canContainer);
+    container.appendChild(tdiv);
+
+    dragElement(tdiv)
+    let allMarks = palette.encodings.range.marks;
+
+    let MarkNames = Object.keys(allMarks)
+    let n = MarkNames.length;
+    let offx = 14
+    let offy = 3
+
+    if (offx * n + subW > prevW || offy * n + subH > prevH) {
+        offx = (prevW - subW) / n
+        offy = (prevH - subH) / n
+    }
+    canContainer.style.width = prevW + "px"
+    canContainer.style.height = prevH + "px"
+
+    for (let j = n - 1; j > -1; j--) {
+
+        let tcan = cloneCanvas(allMarks[MarkNames[j]].proto.canvas)
+        tcan.style.width = `${subW}px`
+        tcan.style.height = `${subH}px`
+
+        tcan.style.left = `${offx + (j * offx)}px`
+        tcan.style.top = `${(prevH - subH) - (j * offy)}px`
+
+
+        canContainer.appendChild(tcan);
+
+        allPalettes.push(palette)
+    }
+
 }

assets/js/canvasSampleHandler.js

@@ -157,10 +157,10 @@ async function addRectSample(x, y, width, height) {
 
 
     sampleData.push(tres)
-/*
-    let marks = document.getElementById("marks")
+    /*
+        let marks = document.getElementById("marks")
 
-    marks.append(tcan)*/
+        marks.append(tcan)*/
 
     tcont.drawImage(currImg,
         Math.round(dp.rx * currImg.width),
@@ -172,7 +172,10 @@ async function addRectSample(x, y, width, height) {
         dp.width,
         dp.height);
 
+    let svg = d3.select("#sampleDisplay")
+
     fillSvg(sampleData)
+    showControls(svg, [tres.x -25, tres.y-25], tcan)
 }
 
 
@@ -181,7 +184,7 @@ async function addGrabSample(x, y, width, height) {
 
     let coords = curateCoordinates(x, y, width, height);
 
-    otherGrab(coords);
+    // otherGrab(coords);
 
     let can = document.getElementById("inVis")
     let trec = can.getBoundingClientRect()
@@ -403,9 +406,9 @@ async function addFreeSample(points) {
     )
 
 
-/*    let marks = document.getElementById("marks")
+    /*    let marks = document.getElementById("marks")
 
-    marks.append(tcan)*/
+        marks.append(tcan)*/
     sampleData.push(tres)
     fillSvg(sampleData)
 }

assets/js/collageHandler.js

@@ -1,6 +1,6 @@
 let options_type = {}
 let displayedMarks = {}
-let dataList = {}
+// let dataList = {}
 
 
 function populateSelect() {