Add zindex to panel (#736)

* Add z-index options back to panel

* Add formatting for z-index panel buttons

* make z-index buttons all the same width

* make z-index button spacing even

* use svg icons & translations

* add ui legend

Co-authored-by: David Luzar <luzar.david@gmail.com>

src/actions/actionZindex.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Action } from "./types";
 import {
   moveOneLeft,
@@ -7,6 +8,98 @@ import {
 } from "../zindex";
 import { getSelectedIndices } from "../scene";
 import { KEYS } from "../keys";
+import { t } from "../i18n";
+
+const ICONS = {
+  bringForward: (
+    <svg
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path
+        d="M16 3.556C16 2.696 15.303 2 14.444 2H3.556C2.696 2 2 2.697 2 3.556v10.888C2 15.304 2.697 16 3.556 16h10.888c.86 0 1.556-.697 1.556-1.556V3.556z"
+        fill="none"
+        stroke="#000"
+        stroke-width="1.9988945999999999"
+      />
+      <path
+        d="M22 9.556C22 8.696 21.303 8 20.444 8H16v8H8v4.444C8 21.304 8.697 22 9.556 22h10.888c.86 0 1.556-.697 1.556-1.556V9.556z"
+        stroke="#000"
+        stroke-width="1.9988945999999999"
+      />
+    </svg>
+  ),
+  sendBackward: (
+    <svg
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path
+        d="M16 3.556C16 2.696 15.303 2 14.444 2H3.556C2.696 2 2 2.697 2 3.556v10.888C2 15.304 2.697 16 3.556 16h10.888c.86 0 1.556-.697 1.556-1.556V3.556z"
+        fill="none"
+        stroke="#000"
+        stroke-width="1.9988945999999999"
+      />
+      <path
+        d="M22 9.556C22 8.696 21.303 8 20.444 8H9.556C8.696 8 8 8.697 8 9.556v10.888C8 21.304 8.697 22 9.556 22h10.888c.86 0 1.556-.697 1.556-1.556V9.556z"
+        stroke="#000"
+        stroke-width="1.9988945999999999"
+      />
+    </svg>
+  ),
+  bringToFront: (
+    <svg
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path
+        d="M13 21a1 1 0 001 1h7a1 1 0 001-1v-7a1 1 0 00-1-1h-3v5h-5v3zM11 3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h3V6h5V3z"
+        stroke="#000"
+        stroke-width="2"
+      />
+      <path
+        d="M18 7.333C18 6.597 17.403 6 16.667 6H7.333C6.597 6 6 6.597 6 7.333v9.334C6 17.403 6.597 18 7.333 18h9.334c.736 0 1.333-.597 1.333-1.333V7.333z"
+        fill="none"
+        stroke="#000"
+        stroke-width="2.00001"
+      />
+    </svg>
+  ),
+  sendToBack: (
+    <svg
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path
+        d="M18 7.333C18 6.597 17.403 6 16.667 6H7.333C6.597 6 6 6.597 6 7.333v9.334C6 17.403 6.597 18 7.333 18h9.334c.736 0 1.333-.597 1.333-1.333V7.333z"
+        fill="none"
+        stroke="#000"
+        stroke-width="2.00001"
+      />
+      <path
+        d="M11 3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h8V3zM22 14a1 1 0 00-1-1h-7a1 1 0 00-1 1v7a1 1 0 001 1h8v-8z"
+        stroke="#000"
+        stroke-width="2"
+      />
+    </svg>
+  ),
+};
 
 export const actionSendBackward: Action = {
   name: "sendBackward",
@@ -20,6 +113,16 @@ export const actionSendBackward: Action = {
   keyPriority: 40,
   commitToHistory: () => true,
   keyTest: event => event[KEYS.META] && event.altKey && event.key === "B",
+  PanelComponent: ({ updateData }) => (
+    <button
+      type="button"
+      className="zIndexButton"
+      onClick={e => updateData(null)}
+      title={t("labels.sendBackward")}
+    >
+      {ICONS.sendBackward}
+    </button>
+  ),
 };
 
 export const actionBringForward: Action = {
@@ -34,6 +137,16 @@ export const actionBringForward: Action = {
   keyPriority: 40,
   commitToHistory: () => true,
   keyTest: event => event[KEYS.META] && event.altKey && event.key === "F",
+  PanelComponent: ({ updateData }) => (
+    <button
+      type="button"
+      className="zIndexButton"
+      onClick={e => updateData(null)}
+      title={t("labels.bringForward")}
+    >
+      {ICONS.bringForward}
+    </button>
+  ),
 };
 
 export const actionSendToBack: Action = {
@@ -47,6 +160,16 @@ export const actionSendToBack: Action = {
   contextItemLabel: "labels.sendToBack",
   commitToHistory: () => true,
   keyTest: event => event[KEYS.META] && event.shiftKey && event.key === "B",
+  PanelComponent: ({ updateData }) => (
+    <button
+      type="button"
+      className="zIndexButton"
+      onClick={e => updateData(null)}
+      title={t("labels.sendToBack")}
+    >
+      {ICONS.sendToBack}
+    </button>
+  ),
 };
 
 export const actionBringToFront: Action = {
@@ -60,4 +183,14 @@ export const actionBringToFront: Action = {
   commitToHistory: () => true,
   contextItemLabel: "labels.bringToFront",
   keyTest: event => event[KEYS.META] && event.shiftKey && event.key === "F",
+  PanelComponent: ({ updateData }) => (
+    <button
+      type="button"
+      className="zIndexButton"
+      onClick={e => updateData(null)}
+      title={t("labels.bringToFront")}
+    >
+      {ICONS.bringToFront}
+    </button>
+  ),
 };

src/index.tsx

@@ -275,6 +275,16 @@ const LayerUI = React.memo(
 
             {actionManager.renderAction("changeOpacity")}
 
+            <fieldset>
+              <legend>{t("labels.layers")}</legend>
+              <div className="buttonList">
+                {actionManager.renderAction("sendToBack")}
+                {actionManager.renderAction("sendBackward")}
+                {actionManager.renderAction("bringToFront")}
+                {actionManager.renderAction("bringForward")}
+              </div>
+            </fieldset>
+
             {actionManager.renderAction("deleteSelectedElements")}
           </div>
         </Island>

src/locales/en.json

@@ -39,7 +39,8 @@
     "fileTitle": "File title",
     "colorPicker": "Color picker",
     "canvasBackground": "Canvas background",
-    "drawingCanvas": "Drawing Canvas"
+    "drawingCanvas": "Drawing Canvas",
+    "layers": "Layers"
   },
   "buttons": {
     "clearReset": "Clear the canvas & reset background color",

src/styles.scss

@@ -87,6 +87,7 @@ button,
   border-radius: 4px;
   margin: 0.125rem 0;
   padding: 0.25rem;
+  white-space: nowrap;
 
   cursor: pointer;
 
@@ -248,6 +249,11 @@ button,
   white-space: nowrap; /* added line */
 }
 
+.zIndexButton {
+  width: 26px;
+  margin: 0 5px;
+}
+
 .scroll-back-to-content {
   position: fixed;
   left: 50%;