spread operator replacing json copy

queviva · Jul 31, 2022 · 9d26f5d · 9d26f5d
1 parent 9325500
commit 9d26f5d
Showing 1 changed file with 51 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -687,6 +687,7 @@
 const log = console.log;
 /////////////////////////////////////////////////////}
 
+
 (() => {
 
 // prefs {
@@ -921,9 +922,27 @@
     this.reCAL = vals.ori ? this.upORG : this.upPOS;
 
     this.doBUB = e => {
+
         e.stopPropagation();
-        Burbujas.show(this);
-        ObjX.sel = this;
+
+        if (e.shiftKey) {
+
+            if (ObjX.sel.indexOf(this) > -1) {
+                ObjX.sel.splice(ObjX.sel.indexOf(this), 1);
+                ObjX.sel.forEach(o => Burbujas.lite(o));
+                return;
+            }
+            ObjX.sel.push(this);
+            todasObj.forEach(TO => TO.bubS.display = 'none');
+            ObjX.sel.forEach(SO => {
+                SO.bubS.display = 'block';
+                Burbujas.lite(SO);
+            });
+
+        } else {
+            Burbujas.show(this);
+            ObjX.sel[0] = this;
+        }
     };
 
     this.beBUB = v => {
@@ -1098,15 +1117,15 @@
 
 const ObjX = {
 
-    sel: '',
+    sel: [],
 
     add: () => {
 
-        if (!ObjX.sel) return;
+        ObjX.sel.forEach(o => {
 
-        let L = JSON.parse(JSON.stringify(TPO[ObjX.sel.typ]));
+        let L = {...TPO[o.typ]};
 
-        L.typ = ObjX.sel.typ;
+        L.typ = o.typ;
 
         L.pos = [rand(sceneQ[0]), rand(sceneQ[1]), 0];
 
@@ -1121,17 +1140,23 @@
         );
 
         todasObj.at(-1).reCAL();
+        });
 
     },
 
     rem: () => {
-        if (!ObjX.sel) return;
-        ['obj','out','bub'].forEach(v =>
-            this[v+'Div'].removeChild(ObjX.sel[v])
-        );
-        todasObj = todasObj.filter(to => to !== ObjX.sel);
-        ObjX.sel = '';
+        if (!ObjX.sel.length) return;
+
+        ObjX.sel.forEach(o => {
+
+            ['obj', 'out', 'bub'].forEach(v =>
+                this[v + 'Div'].removeChild(o[v])
+            );
+            todasObj = todasObj.filter(to => to !== o);
+
+        });
         Burbujas.hide();
+        ObjX.sel = [];
     },
 
     key: e => {
@@ -1143,7 +1168,7 @@
 
 const Burbujas = {
 
-    show : PO => {
+    lite : PO => {
 
         PO.bubS.left   = PO.pos[2][0] - PO.siz[0] +'px';
         PO.bubS.top    = PO.pos[2][1] - PO.siz[0] +'px';
@@ -1154,6 +1179,12 @@
         PO.obj.removeEventListener('mouseover', PO.hiBUB);
         PO.obj.removeEventListener('mouseout',  PO.loBUB);
 
+    },
+
+    show : PO => {
+
+        Burbujas.lite(PO);
+
         todasObj.filter(to => to !== PO).forEach(TO => {
 
             let rad = zonaMesa[PO.typ][TO.typ];
@@ -1163,6 +1194,7 @@
             TO.bubS.width  = 2 * rad +'px';
             TO.bubS.height = 2 * rad +'px';
             TO.bubS.borderColor = 'var(--lightness)';
+            TO.bubS.display = 'block';
 
             TO.obj.addEventListener('mouseover', TO.hiBUB);
             TO.obj.addEventListener('mouseout',  TO.loBUB);
@@ -1188,7 +1220,7 @@
 
 const Pause = {
     cnt: 0,
-    dwn: () => { Burbujas.hide(); ObjX.sel = ''; },
+    dwn: () => { Burbujas.hide(); ObjX.sel = []; },
     tog: () => [() => {
 
         window.addEventListener('keypress', ObjX.key);
@@ -1223,8 +1255,8 @@
 };
 
 const addList = () => {
-    lista.forEach(L => ObjX.add(ObjX.sel = {typ:L.typ}));
-    ObjX.sel = '';
+    lista.forEach(L => ObjX.add(ObjX.sel[0] = {typ:L.typ}));
+    ObjX.sel = [];
 }
 
 //}
@@ -1244,7 +1276,7 @@
       sceneHolder, 'pointerup', e => Obscene.unobserve(scene),
       addButt, 'pointerdown', e => {
           e.stopPropagation();
-          if (ObjX.sel === '') return;
+          if (ObjX.sel.length === 0) return;
           ObjX.add();
           let TO = todasObj.at(-1);
           TO.beBUB(true);
@@ -1261,13 +1293,13 @@
       },
       remButt, 'pointerdown', e => {
           e.stopPropagation();
-          if (ObjX.sel === '') return;
+          if (ObjX.sel === []) return;
           ObjX.rem();
       },
       remButt, 'dblclick', e => {
           e.stopPropagation();
           todasObj.forEach(TO => {
-              ObjX.sel = TO;
+              ObjX.sel[0] = TO;
               ObjX.rem();
           });
       },