more view menu for show / hide

2021-12-24 20:28:09 +10:00 · 2021-12-24 20:28:09 +10:00 · 84c70588a9
--- a/README.md
+++ b/README.md
@ -71,7 +71,7 @@ A most latest production build to use is available at https://asciibird.jewbird.
 ## Features to Add

 * Save to PNG
-* Delete blocks with Delete key needs undo/redo
+* Delete blocks with Delete when selecting key needs undo/redo
 * Layers undo and redo could be implemented, at the moment there isn't any.
 * Warning on mirc export if ascii exceeds IRCs 512 per chat line limit.
 * Review encodings check on file import - UTF8 vs Latin something
--- a/src/Dashboard.vue
+++ b/src/Dashboard.vue
@ -1,6 +1,8 @@
 <template>
  <div id="app">
-    <div><vue-file-toolbar-menu :content="myMenu" /></div>
+    <div v-show="menuBarVisible">
+      <vue-file-toolbar-menu :content="myMenu" />
+    </div>

    <NewAscii />
    <Options v-if="asciibirdMeta.length" />
@ -124,6 +126,7 @@
        class="bg-gray-500 relative z-auto"
        ref="tabbar"
        :style="toolbarString"
+        v-if="tabsVisible"
      >
        <span
          v-for="(value, key) in asciibirdMeta"
@ -160,7 +163,7 @@
        :brush="drawBrush"
      />

-      <Toolbar :y-offset="scrollOffset" />
+      <Toolbar v-show="toolbarState.visible" :y-offset="scrollOffset" />

      <DebugPanel
        :canvas-x="canvasX"
@ -174,9 +177,16 @@
        :y-offset="scrollOffset"
      />

-      <BrushPreview @inputtingbrush="inputtingbrush" :y-offset="scrollOffset" />
+      <BrushPreview
+        @inputtingbrush="inputtingbrush"
+        :y-offset="scrollOffset"
+        v-show="brushPreviewState.visible"
+      />

-      <LayersLibrary :y-offset="scrollOffset" />
+      <LayersLibrary
+        v-show="layersLibraryState.visible"
+        :y-offset="scrollOffset"
+      />

      <CharPicker
        v-if="toolbarState.isChoosingChar"
@ -335,9 +345,6 @@ export default {
    debugPanelState() {
      return this.$store.getters.debugPanel;
    },
-    brushLibraryState() {
-      return this.$store.getters.brushLibraryState;
-    },
    currentAscii() {
      return this.$store.getters.currentAscii;
    },
@ -373,9 +380,6 @@ export default {

      return menu.reverse();
    },
-    currentAsciiLayers() {
-      return this.$store.getters.currentAsciiLayers;
-    },
    selectedLayer() {
      return this.$store.getters.selectedLayer;
    },
@ -413,12 +417,27 @@ export default {
    brushBlocks() {
      return this.$store.getters.brushBlocks;
    },
+    tabsVisible() {
+      return this.$store.getters.tabsVisible;
+    },
+    menuBarVisible() {
+      return this.$store.getters.menuBarVisible;
+    },
    currentAsciiLayerBlocks() {
      return this.currentSelectedLayer.data;
    },
    currentAsciiLayers() {
      return this.$store.getters.currentAsciiLayers;
    },
+    brushLibraryState() {
+      return this.$store.getters.brushLibraryState;
+    },
+    brushPreviewState() {
+      return this.$store.getters.brushPreviewState;
+    },
+    layersLibraryState() {
+      return this.$store.getters.layersLibraryState;
+    },
    currentSelectedLayer() {
      return this.currentAsciiLayers[this.currentAscii.selectedLayer];
    },
@ -591,11 +610,11 @@ export default {
                  // Reset and hide the select after successful copy
                  this.$store.dispatch("updateAsciiBlocksAsync", {
                    blocks: this.currentAsciiLayerBlocks,
-                    diff: { ...this.diffBlocks },
+                    diff: {},
                  });

                  this.$emit("updatecanvas");
-
+                  this.selectedBlocks = [];
                  this.$toasted.show("Deleted blocks!", {
                    type: "success",
                    icon: "fa-check-circle",
@ -622,20 +641,31 @@ export default {
              // Show Hide Things
              menu: [
                {
-                  text: `${
-                    this.brushLibraryState.visible ? "Hide" : "Show"
-                  } Brush Library`,
-                  icon: this.brushLibraryState.visible
+                  text: `${this.tabsVisible ? "Hide" : "Show"} Tabs`,
+                  icon: this.tabsVisible
                    ? "check_box"
                    : "check_box_outline_blank",
-                  hotkey: "ctrl+alt+l",
+                  hotkey: "ctrl+alt+t",
+                  click: (e) => {
+                    this.$store.commit("changeTabsVisible", !this.tabsVisible);
+                  },
+                },
+                {
+                  text: `${this.menuBarVisible ? "Hide" : "Show"} Toolbar Menu`,
+                  icon: this.menuBarVisible
+                    ? "check_box"
+                    : "check_box_outline_blank",
+                  hotkey: "ctrl+alt+m",
                  click: (e) => {
                    this.$store.commit(
-                      "toggleBrushLibrary",
-                      !this.brushLibraryState.visible
+                      "changeMenuBarVisible",
+                      !this.menuBarVisible
                    );
                  },
                },
+                {
+                  is: "separator",
+                },
                {
                  text: `${
                    this.debugPanelState.visible ? "Hide" : "Show"
@ -651,6 +681,68 @@ export default {
                    );
                  },
                },
+                {
+                  text: `${
+                    this.brushLibraryState.visible ? "Hide" : "Show"
+                  } Brush Library`,
+                  icon: this.brushLibraryState.visible
+                    ? "check_box"
+                    : "check_box_outline_blank",
+                  hotkey: "ctrl+alt+b",
+                  click: (e) => {
+                    this.$store.commit(
+                      "toggleBrushLibrary",
+                      !this.brushLibraryState.visible
+                    );
+                  },
+                },
+                {
+                  text: `${
+                    this.layersLibraryState.visible ? "Hide" : "Show"
+                  } Layers`,
+                  icon: this.layersLibraryState.visible
+                    ? "check_box"
+                    : "check_box_outline_blank",
+                  hotkey: "ctrl+alt+l",
+                  click: (e) => {
+                    this.layersLibraryState.visible =
+                      !this.layersLibraryState.visible;
+                    this.$store.commit(
+                      "changeLayersLibraryState",
+                      this.layersLibraryState
+                    );
+                  },
+                },
+                {
+                  text: `${
+                    this.toolbarState.visible ? "Hide" : "Show"
+                  } Toolbar`,
+                  icon: this.toolbarState.visible
+                    ? "check_box"
+                    : "check_box_outline_blank",
+                  hotkey: "ctrl+alt+n",
+                  click: (e) => {
+                    this.toolbarState.visible = !this.toolbarState.visible;
+                    this.$store.commit("changeToolBarState", this.toolbarState);
+                  },
+                },
+                {
+                  text: `${
+                    this.brushPreviewState.visible ? "Hide" : "Show"
+                  } Brush Preview`,
+                  icon: this.brushPreviewState.visible
+                    ? "check_box"
+                    : "check_box_outline_blank",
+                  hotkey: "ctrl+alt+e",
+                  click: (e) => {
+                    this.brushPreviewState.visible =
+                      !this.brushPreviewState.visible;
+                    this.$store.commit(
+                      "changeBrushPreviewState",
+                      this.brushPreviewState
+                    );
+                  },
+                },
              ],
            },
            {
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@ -69,7 +69,6 @@
            <span class="material-icons">more_vert</span>
          </t-button>

-
          <t-button
            type="button"
            :class="`rounded-3xl w-10 h-10 mt-1 ml-1 ${
@ -86,7 +85,6 @@
            <span class="material-icons">more_horiz</span>
          </t-button>

-
          <t-button
            type="button"
            :class="`rounded-3xl w-10 h-10 mt-1 ml-1 ${
@ -97,7 +95,11 @@
            @click="
              $store.commit('toggleUpdateBrush', updateBrush);
              toolbarState.updateBrush = !toolbarState.updateBrush;
-              $toasted.show(`Update Brush when colours or char changes ${toolbarState.updateBrush ? 'enabled' : 'disabled'}`);
+              $toasted.show(
+                `Update Brush when colours or char changes ${
+                  toolbarState.updateBrush ? 'enabled' : 'disabled'
+                }`
+              );
            "
          >
            <span class="material-icons">color_lens</span>
@ -113,7 +115,9 @@
            @click="
              $store.commit('toggleGridView', gridView);
              toolbarState.gridView = !toolbarState.gridView;
-              $toasted.show(`Grid view ${toolbarState.gridView ? 'enabled' : 'disabled'}`);
+              $toasted.show(
+                `Grid view ${toolbarState.gridView ? 'enabled' : 'disabled'}`
+              );
            "
          >
            <span class="material-icons">{{
@ -123,21 +127,20 @@
        </div>

        <div class="border-t border-black border-opacity-10 pt-2">
-        <t-button
-          type="button"
-          v-for="(value, keyToolbar) in toolbarIcons"
-          :key="keyToolbar + 50"
-          :class="`rounded-3xl w-10 h-10 mt-1 ml-1 ${
-            currentTool.name === value.name
-              ? 'border-gray-900 bg-blue-500'
-              : 'border-gray-200 bg-gray-500'
-          }`"
-          @click="$store.commit('changeTool', keyToolbar)"
-        >
-          <span class="material-icons">{{ value.icon }}</span>
-        </t-button>
+          <t-button
+            type="button"
+            v-for="(value, keyToolbar) in toolbarIcons"
+            :key="keyToolbar + 50"
+            :class="`rounded-3xl w-10 h-10 mt-1 ml-1 ${
+              currentTool.name === value.name
+                ? 'border-gray-900 bg-blue-500'
+                : 'border-gray-200 bg-gray-500'
+            }`"
+            @click="$store.commit('changeTool', keyToolbar)"
+          >
+            <span class="material-icons">{{ value.icon }}</span>
+          </t-button>
        </div>
-          
      </t-card>
    </vue-draggable-resizable>
  </div>
@ -153,6 +156,7 @@ export default {
    this.toolbar.y = this.toolbarState.y;
    this.toolbar.w = this.toolbarState.w;
    this.toolbar.h = this.toolbarState.h;
+    this.toolbar.visible = this.toolbarState.visible;

    this.mirror.x = this.mirrorX;
    this.mirror.y = this.mirrorY;
@ -254,6 +258,7 @@ export default {
        y,
        w: this.toolbar.w,
        h: this.toolbar.h,
+        visible: true,
      });
    },
    onDragStop(x, y) {
@ -265,6 +270,7 @@ export default {
        y,
        w: this.toolbar.w,
        h: this.toolbar.h,
+        visible: true,
      });
    },
  },
--- a/src/store/index.js
+++ b/src/store/index.js
@ -76,6 +76,7 @@ export default new Vuex.Store({
      draggable: true,
      updateBrush: true,
      gridView: false,
+      visible: true,
    },
    debugPanelState: {
      x: blockWidth * 40,
@ -148,6 +149,7 @@ export default new Vuex.Store({
      state.toolbarState.y = payload.y;
      state.toolbarState.w = payload.w;
      state.toolbarState.h = payload.h;
+      state.toolbarState.visible = payload.visible;
    },
    changeToolBarDraggable(state, payload) {
      state.toolbarState.draggable = payload;
@ -199,6 +201,14 @@ export default new Vuex.Store({
    changeTargetingChar(state, payload) {
      state.toolbarState.targetingChar = payload;
    },
+
+    changeMenuBarVisible(state, payload) {
+      state.desktopState.menuBarVisible = payload;
+    },
+    changeTabsVisible(state, payload) {
+      state.desktopState.tabsVisible = payload;
+    },
+
    newAsciibirdMeta(state, payload) {
      state.asciibirdMeta.push(payload);
      state.tab = state.asciibirdMeta.length - 1;
@ -216,7 +226,8 @@ export default new Vuex.Store({
        state.asciibirdMeta[state.tab].history.shift()
      }

-      let tempLayers = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab].layers))
+      let tempLayers = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
+        .layers))

      tempLayers[state.asciibirdMeta[state.tab].selectedLayer].data = payload.blocks

@ -224,16 +235,19 @@ export default new Vuex.Store({
        tempLayers));

      // state.asciibirdMeta[state.tab].current = LZString.compressToUTF16(JSON.stringify(mergeLayers()));
-      
+
      let historyIndex = state.asciibirdMeta[state.tab].historyIndex;

      if (payload.diff && payload.diff.new && payload.diff.new.length) {
        if (state.asciibirdMeta[state.tab].history.length !== historyIndex) {
-          state.asciibirdMeta[state.tab].history.splice(historyIndex,state.asciibirdMeta[state.tab].history.length);
+          state.asciibirdMeta[state.tab].history.splice(historyIndex, state.asciibirdMeta[state
+            .tab].history.length);
        }

-        state.asciibirdMeta[state.tab].history.push(LZString.compressToUTF16(JSON.stringify(payload.diff)))       
-        state.asciibirdMeta[state.tab].historyIndex = state.asciibirdMeta[state.tab].history.length;
+        state.asciibirdMeta[state.tab].history.push(LZString.compressToUTF16(JSON.stringify(
+          payload.diff)))
+        state.asciibirdMeta[state.tab].historyIndex = state.asciibirdMeta[state.tab].history
+          .length;
      }

      return;
@ -291,16 +305,16 @@ export default new Vuex.Store({
      state.asciibirdMeta[state.tab].layers = LZString.compressToUTF16(JSON.stringify(
        mergedLayers));

-        // Remove our undos here for the layer
-        let history = state.asciibirdMeta[state.tab].history;
+      // Remove our undos here for the layer
+      let history = state.asciibirdMeta[state.tab].history;

-        for (let i in history) {
-          let data = JSON.parse(LZString.decompressFromUTF16(history[i]));
-          data.l = 0;
-          history[i] = LZString.compressToUTF16(JSON.stringify(data));
-        }
+      for (let i in history) {
+        let data = JSON.parse(LZString.decompressFromUTF16(history[i]));
+        data.l = 0;
+        history[i] = LZString.compressToUTF16(JSON.stringify(data));
+      }

-        state.asciibirdMeta[state.tab].historyIndex = history.length;
+      state.asciibirdMeta[state.tab].historyIndex = history.length;
    },
    changeLayer(state, payload) {
      state.asciibirdMeta[state.tab].selectedLayer = payload
@ -333,7 +347,7 @@ export default new Vuex.Store({

        }

-        state.asciibirdMeta[state.tab].historyIndex = history.length-1;
+        state.asciibirdMeta[state.tab].historyIndex = history.length - 1;

        // Automatically select the next best layer to avoid bugs
        if (tempLayers[payload + 1]) {
@ -433,20 +447,23 @@ export default new Vuex.Store({
    undoBlocks(state) {
      let historyIndex = state.asciibirdMeta[state.tab].historyIndex;

-      if (state.asciibirdMeta[state.tab].history[historyIndex-1]) {
-        let prev = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab].history[
-                historyIndex - 1]));
+      if (state.asciibirdMeta[state.tab].history[historyIndex - 1]) {
+        let prev = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
+          .history[
+            historyIndex - 1]));

-      let tempLayers = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
-        .layers))
+        let tempLayers = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
+          .layers))

        if (prev.old) {
-          for(let change in prev.old) {           
+          for (let change in prev.old) {
            let data = prev.old[change];
-            tempLayers[prev.l].data[data.y][data.x] = { ... data.b };
+            tempLayers[prev.l].data[data.y][data.x] = {
+              ...data.b
+            };
          }
        }
-           
+
        state.asciibirdMeta[state.tab].layers = LZString.compressToUTF16(JSON.stringify(
          tempLayers));

@ -457,8 +474,9 @@ export default new Vuex.Store({
      let historyIndex = state.asciibirdMeta[state.tab].historyIndex;

      if (state.asciibirdMeta[state.tab].history[historyIndex]) {
-        let prev = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab].history[
-          historyIndex]));
+        let prev = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
+          .history[
+            historyIndex]));

        let tempLayers = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
          .layers))
@ -655,6 +673,8 @@ export default new Vuex.Store({
    options: (state) => state.options,
    toolbarState: (state) => state.toolbarState,
    debugPanel: (state) => state.debugPanelState,
+    tabsVisible: (state) => state.desktopState.tabsVisible,
+    menuBarVisible: (state) => state.desktopState.menuBarVisible,
    currentTool: (state) => state.toolbarState.currentTool,
    isTargettingBg: (state) => state.toolbarState.targetingBg,
    isTargettingFg: (state) => state.toolbarState.targetingFg,
@ -707,8 +727,8 @@ export default new Vuex.Store({
      commit
    }, data) {
      return new Promise((resolve, reject) => {
-          commit('updateAsciiBlocks', data);
-          resolve();
+        commit('updateAsciiBlocks', data);
+        resolve();
      })
    }
  },