fix: must alert user about bad matrix separators

kylehue · Apr 7, 2024 · a9b3c2d · a9b3c2d
1 parent d9e61b6
commit a9b3c2d
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 19 deletions.
diff --git a/src/panes/design-area/canvas.vue b/src/panes/design-area/canvas.vue
@@ -73,21 +73,30 @@ function handleCanvasMouseDown() {
    const tool = designerStore.activeTool;
    const layer = projectStore.selectedLayer;
    const material = projectStore.selectedMaterial;
-   if (
-      (tool == "brush" || tool == "eraser" || tool == "paint-bucket") &&
-      !layer
-   ) {
+   const isToolForEdit =
+      tool == "brush" || tool == "eraser" || tool == "paint-bucket";
+   if (!!layer && layer.isLocked && isToolForEdit) {
+      message.warning("This layer is locked!");
+   } else if (isToolForEdit && !layer) {
       message.warning("Please select a layer.");
    } else if ((tool == "brush" || tool == "paint-bucket") && !material) {
       message.warning("Please select a material.");
    }
 
    if (
-      !!layer &&
-      layer.isLocked &&
-      (tool == "brush" || tool == "eraser" || tool == "paint-bucket")
+      !!material &&
+      material.getMatrixId().indexOf(projectStore.matrixSeparator) !== -1 &&
+      isToolForEdit
    ) {
-      message.warning("This layer is locked!");
+      message.error(
+         `The material '${material.getName()}' has the matrix separator '${
+            projectStore.matrixSeparator
+         }' in its matrix id! Please modify its matrix id or change the matrix separator to avoid corrupt matrices.`,
+         {
+            closable: true,
+            duration: 1000 * 60,
+         }
+      );
    }
 }
 

diff --git a/src/panes/navbar.vue b/src/panes/navbar.vue
@@ -44,6 +44,7 @@ import { useSettingsStore } from "../store/settings";
 import { PhStackSimple } from "@phosphor-icons/vue";
 import { ProjectSaver } from "../utils/save";
 import { useDesignerStore } from "../store/designer";
+import { escapeRegex } from "../utils/escape-regex";
 
 enum Navigation {
    FILE_DROPDOWN,
@@ -356,19 +357,70 @@ function promptChangeEmptyMatrixId() {
 }
 
 function promptChangeMatrixSeparator() {
+   let newSep = projectStore.matrixSeparator;
    dialog.create({
-      title: "Change matrix separator",
+      title: "Change Matrix Separator",
       showIcon: false,
       content() {
-         return h("div", {}, [
-            h(NInput, {
-               "onUpdate:value": (n) => {
-                  if (!n) return;
-                  projectStore.setMatrixSeparator(n);
-               },
-               value: projectStore.matrixSeparator,
-            }),
-         ]);
+         return h(
+            "div",
+            {
+               class: "w-full flex flex-col items-end gap-2",
+            },
+            [
+               h(NInput, {
+                  "onUpdate:value": (n) => {
+                     newSep = n;
+                  },
+                  defaultValue: newSep,
+               }),
+               h(
+                  NButton,
+                  {
+                     type: "error",
+                     quaternary: true,
+                     async onClick(e) {
+                        let isInvalidSeparator = false;
+                        for (const material of projectStore.materials) {
+                           const matrixId = material.getMatrixId();
+                           if (matrixId.indexOf(newSep) !== -1) {
+                              isInvalidSeparator = true;
+                              break;
+                           }
+                        }
+
+                        let shouldChange = !isInvalidSeparator;
+                        if (isInvalidSeparator) {
+                           await new Promise((resolve) => {
+                              dialog.error({
+                                 title: "Change Matrix Separator",
+                                 content: `The separator you picked ('${newSep}') is currently being used by other materials. Do you want to change it anyway?`,
+                                 onAfterLeave() {
+                                    resolve(1);
+                                 },
+                                 positiveText: "Change all",
+                                 positiveButtonProps: {
+                                    type: "error",
+                                    quaternary: true,
+                                 },
+                                 onPositiveClick(e) {
+                                    shouldChange = true;
+                                    resolve(1);
+                                 },
+                              });
+                           });
+                        }
+
+                        if (shouldChange) {
+                           projectStore.setMatrixSeparator(newSep);
+                           dialog.destroyAll();
+                        }
+                     },
+                  },
+                  () => "Change"
+               ),
+            ]
+         );
       },
       autoFocus: true,
    });

diff --git a/src/store/project.ts b/src/store/project.ts
@@ -16,6 +16,7 @@ import { cantor } from "../utils/cantor";
 import { Material } from "../utils/Material";
 import { useDesignerStore } from "./designer";
 import { useSettingsStore } from "./settings";
+import { escapeRegex } from "../utils/escape-regex";
 
 export const useProjectStore = defineStore("project", () => {
    const designerStore = useDesignerStore();
@@ -262,7 +263,20 @@ export const useProjectStore = defineStore("project", () => {
       const material = new Material();
       await material.getTexture().init(textureBase);
       material.setName(name);
-      material.setMatrixId(name);
+
+      // Create matrix id for the material (based on name)
+      // Make sure the matrix id doesn't contain the matrix separator
+      const separatorRegex = new RegExp(
+         escapeRegex(_matrixSeparator.value),
+         "g"
+      );
+      const separatorReplacement = _matrixSeparator.value === " " ? "-" : " ";
+      const assignedMatrixId = name.replace(
+         separatorRegex,
+         separatorReplacement
+      );
+      material.setMatrixId(assignedMatrixId);
+
       _materials.unshift(material);
       if (options.splitData) {
          material.setSplitData(options.splitData);

diff --git a/src/utils/escape-regex.ts b/src/utils/escape-regex.ts
@@ -0,0 +1,3 @@
+export function escapeRegex(str: string) {
+   return str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
+}