update

Author: Theo-Jaunet

assets/css/main.css

@@ -1019,4 +1019,18 @@ p, h3, h4, h5, img {
 
     background-color: #FFF;
     border: solid 1px #424242;
-}
+}
+
+
+.dragOver {
+    border: 3px dashed red !important;
+    background-color: rgba(50,50,50,0.6) !important;
+}
+
+
+.dropArea {
+    border: 3px dashed #000 !important;
+
+}
+
+

assets/js/AllPalettes.js

@@ -1,14 +1,16 @@
 let allPalettes = []
 
 let palSources = [
+
+    "week15_squares",
+    "week15_RightSymbol",
+    "week15_InnerCircle",
+    "week26_circle",
     "sudoku_time",
     "sudoku_level",
     "sudoku_hint",
     "sudoku_mistake",
-    "week26_circle",
-    "week15_squares",
-    "week15_RightSymbol",
-    "week15_InnerCircle",
+
 ]
 
 const prevW = 160
@@ -62,7 +64,7 @@ async function initAllPalette() {
         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
+                b64 = allMarks[MarkNames[j]].proto.canvas
                 allMarks[MarkNames[j]].source = allMarks[MarkNames[j]].proto.canvas
             }
 
@@ -178,7 +180,7 @@ function openNav() {
 }
 
 
-function appendSingle(palette,name) {
+function appendSingle(palette, name) {
     const container = document.getElementById("AllPaletteCont");
 
 
@@ -188,7 +190,7 @@ function appendSingle(palette,name) {
 
     let tdiv = document.createElement("div");
     tdiv.className = "allPaletteRow";
-    tdiv.setAttribute("number", palSources.length-1)
+    tdiv.setAttribute("number", palSources.length - 1)
     tdiv.setAttribute("name", name)
 
     let canContainer = document.createElement("div");

assets/js/datasetStuff.js

@@ -1,4 +1,39 @@
-let dataList = ["week26.csv", "pinguins.csv"]
+let dataList = ["week15.csv", "week26.csv", "pinguins.csv"]
+
+
+Array.prototype.sample = function(){
+    return this[Math.floor(Math.random()*this.length)];
+}
+
+
+
+function fakeWeek15() {
+
+    let dataProfile = {
+        "topics": ["work", "dear-data", "looks", "personality", "specific"],
+        "who": ["boyfriend", "stefanie", "friend", "acquaintance", "coworker","family","stranger"],
+        "medium": ["twitter", "email", "text", "real-life", "phone"],
+        "compliment": ["gave", "received"]
+    }
+
+    let n = 87
+
+    let tkeys = Object.keys(dataProfile)
+
+    const dataset = []
+
+    for (let i = 0; i < n; i++) {
+
+        let t = {}
+        for (let j = 0; j < tkeys.length; j++) {
+            t[tkeys[j]] = dataProfile[tkeys[j]].sample()
+
+        }
+        dataset.push(t)
+    }
+
+    return dataset
+}
 
 function fillSidePanel() {
 

assets/js/dragStuff.js

@@ -11,7 +11,7 @@ function dragElement(elmnt) {
     var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
 
     elmnt.onmousedown = dragMouseDown;
-
+    let tsvg = document.getElementById("composition");
     function dragMouseDown(e) {
         e = e || window.event;
         e.preventDefault();
@@ -23,6 +23,8 @@ function dragElement(elmnt) {
         }
 
 
+
+
         const rect = elmnt.getBoundingClientRect();
 
         offsetX = e.clientX - rect.left;
@@ -34,6 +36,7 @@ function dragElement(elmnt) {
         document.onmouseup = closeDragElement;
         // call a function whenever the cursor moves:
         document.onmousemove = elementDrag;
+        tsvg.classList.add("dropArea")
     }
 
     function elementDrag(e) {
@@ -48,15 +51,21 @@ function dragElement(elmnt) {
         // set the element's new position:
         elmnt.style.position = "absolute";
 
+        document.body.style.cursor = "grabbing";
 
         elmnt.style.left =
             (e.pageX - offsetX) + "px";
 
         elmnt.style.top =
             (e.pageY - offsetY + 50) + "px";
 
-        // elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
-        // elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+        if (e.target === tsvg) {
+            tsvg.classList.add("dragOver")
+            tsvg.classList.remove("dropArea")
+        } else {
+            tsvg.classList.remove("dragOver")
+            tsvg.classList.add("dropArea")
+        }
 
     }
 
@@ -69,6 +78,12 @@ function dragElement(elmnt) {
         document.onmousemove = null;
         dragging = false
 
+        document.body.style.cursor = "";
+
+
+        tsvg.classList.remove("dragOver")
+        tsvg.classList.remove("dropArea")
+
         if (dragMode === "canvas") {
             dropCanvas(e, elmnt)
         } else {

assets/js/main.js

@@ -168,7 +168,7 @@ async function init() {
     // await loadDataset("assets/tempData/datasets/penguins.csv")
     // await loadDataset("assets/tempData/datasets/week26.csv")
 
-    chartDataset.data = fakeWeek26()
+    chartDataset.data = fakeWeek15()
     // drawSvg()
     // tdrawRefactor()
     fillSidePanel()

index.html

@@ -185,7 +185,8 @@ <h3 style="display: inline;font-weight:700;margin-left:10px;color: #eeeeee">Desc
             <div id="selFlat"></div>
 
             <div style="display: flex;">
-                <div id="inVisHolder" style="width: calc(100% - 35px);position: relative;background-color:#fff;">
+                <div id="inVisHolder"
+                     style="width: calc(100% - 35px);position: relative;background-color:#fff;max-height: 80vh;">
 
                     <canvas id="inVis"
                             style="width: 100%;height: 100%;border-radius: 5px;border: solid 1px #555;"></canvas>
@@ -236,11 +237,11 @@ <h3 style="display: inline;font-weight:700;margin-left:10px;color: #eeeeee">Desc
             <div style="" class="sideContent">
                 <div>
                     <p style="margin: 0;font-size:16pt;font-weight: 600;"> Dataset</p>
-                    <select id="availableData"> </select>
-                    <button onclick="">Import CSV</button>
+                    <!--                    <select id="availableData"> </select>-->
+                    <!--                    <button onclick="">Import CSV</button>-->
                     <h5>Data Columns</h5>
 
-                    <div id="datasetInfo" style="border-top:  solid 1px #424242"> </div>
+                    <div id="datasetInfo" style="border-top:  solid 1px #424242;"></div>
                 </div>
 
 
@@ -253,20 +254,27 @@ <h5>Data Columns</h5>
         </div>
 
         <!--        <div id="fakePreview">-->
-<!--        <div>
-            <button style="border: darkred solid 1px" onclick="switchForce()"> Force Layout</button>
-            <button  onclick="switchGrid()"> Grid Layout</button>
+        <!--        <div>
+                    <button style="border: darkred solid 1px" onclick="switchForce()"> Force Layout</button>
+                    <button  onclick="switchGrid()"> Grid Layout</button>
 
-        </div>-->
+                </div>-->
         <svg style="background-color:#fff;" id="fakePreviewSvg"></svg>
 
-        <div id="datasetContainer" style="width: 100%">
-            <div id="sandboxControls" style="width: 100%"><h4>Dataset </h4></div>
+        <div id="datasetContainer"
+             style="width: 98%; padding: 20px;display: flex;justify-content: space-around;flex-direction: column;">
+            <div id="sandboxControls" style="width: 100%;display: flex;justify-content: center;">
+                <h4 style="margin-right: 15px">Dataset </h4>
+                <select id="availableData" style="margin-right: 15px"> </select>
+                <button onclick="">Import CSV</button>
 
-            <table id="newDataTable">
-<!--                <tr> <th>Id</th><th>Category</th><th>x</th><th>y</th></tr>-->
-            </table>
+            </div>
 
+            <div style="width: 100%;height: 320px;overflow-y: scroll;">
+                <table id="newDataTable" style="height: 250px;display: table;width: 100%">
+                    <!--                <tr> <th>Id</th><th>Category</th><th>x</th><th>y</th></tr>-->
+                </table>
+            </div>
         </div>
 
         <!--        </div>-->