cursor por tool + correciones diseño + refactor render

-cursor -context menu -rejilla => regla - refactorisacion render loop
elmarceloc · May 19, 2021 · 3d95a05 · 3d95a05
1 parent c62c1eb
commit 3d95a05
Show file tree

Hide file tree

Showing 5 changed files with 330 additions and 220 deletions.
diff --git a/client/index.html b/client/index.html
@@ -555,7 +555,7 @@ <h3 class="uk-card-title">{{project.name}}</h3>
                                         <td><i class="fas fa-circle"></i> Beads usados</td>
                                         <td style="width: 120px;">{{total}}</td>
                                     </tr>
-                                    <tr id="publicTr" data-html2canvas-ignore="True">
+                                    <tr v-if="beta" id="publicTr" data-html2canvas-ignore="True">
                                         <td><i class="fas fa-cloud-upload-alt"></i> Publicar</td>
                                         <td style="width: 120px;"><input id="public" type="checkbox"
                                                 onclick="event.preventDefault()" uk-toggle="target: #modal-publish"

diff --git a/client/js/events.js b/client/js/events.js
@@ -201,6 +201,10 @@ function updateScreenSize() {
   panels["tools"].x = window.innerWidth / 2 - 96 * 2;
   panels["tools"].y = window.innerHeight - 74 - navbarSize;
 
+  panels["palete"].x = panels.colors.width + 10;
+
+  document.getElementById('search').style.width = panels.colors.width + 6;
+
   // panels["transform"].x = window.innerWidth / 2 + 400;
   // panels["transform"].y = window.innerHeight - 80 - navbarSize;
 
@@ -523,6 +527,8 @@ if (navigator.userAgent.toLowerCase().indexOf(" electron/") > -1) {
       );
       pensPerRow = Math.ceil(colorPalette.length / pensPerCol) - 1;
 
+      const menu = new Menu();
+
       if (isBead(...getPosScreenToGrid(...mouse), width)) {
         if (isInside(...getPosScreenToGrid(...mouse))) {
           let mouseOnPanel = false;
@@ -531,8 +537,6 @@ if (navigator.userAgent.toLowerCase().indexOf(" electron/") > -1) {
 
           if (mouseOnPanel) return;
 
-          const menu = new Menu(); // FIXME: mover afuera si se agrega menu global
-
           let color = getBeadColor(...getPosScreenToGrid(...mouse));
 
           //  console.log(color);
@@ -551,14 +555,20 @@ if (navigator.userAgent.toLowerCase().indexOf(" electron/") > -1) {
           menu.append(
             new MenuItem({
               label: "Borrar color",
+              toolTip: 'Borra todas las apariciones de este color.',
               click: function () {
                 replaceBead(color, 0);
                 save();
               },
             })
           );
 
-          menu.popup({ window: remote.getCurrentWindow() });
+          menu.append(
+            new MenuItem({
+              type: 'separator'
+            })
+          );
+
         }
       }
       // FIXME: no cubre toda la box
@@ -605,6 +615,12 @@ if (navigator.userAgent.toLowerCase().indexOf(" electron/") > -1) {
               })
             );
 
+            menu.append(
+              new MenuItem({
+                type: 'separator'
+              })
+            );
+
             menu.popup({ window: remote.getCurrentWindow() });
           }
         } else {
@@ -621,7 +637,32 @@ if (navigator.userAgent.toLowerCase().indexOf(" electron/") > -1) {
           }
         }
       }
-      // mostrar "selecionar color" al darle click derecho a un color en pantalla...
+
+      menu.append(
+        new MenuItem({
+          label: "Reglas",
+          type: 'checkbox',
+          checked: showGrid,
+          click: function () {
+            showGrid = !showGrid;
+          }
+        })
+      );
+
+      menu.append(
+        new MenuItem({
+          label: "Colores",
+          type: 'checkbox',
+          checked: showIds,
+          click: function () {
+            showIds = !showIds;
+          }
+        })
+      );
+
+      menu.popup({ window: remote.getCurrentWindow() });
+
+      //TODO: mostrar "selecionar color" al darle click derecho a un color en pantalla...
     },
     false
   );