Editor Page and canvas upates

Author: tbarlow12

src/common/mockFactory.ts

@@ -802,8 +802,6 @@ export default class MockFactory {
             save: jest.fn((project: IProject) => Promise.resolve(project)),
             delete: jest.fn((project: IProject) => Promise.resolve()),
             isDuplicate: jest.fn((project: IProject, projectList: IProject[]) => true),
-            renameTag: jest.fn(),
-            deleteTag: jest.fn(),
         };
     }
 

src/react/components/pages/editorPage/canvas.tsx

@@ -192,12 +192,20 @@ export default class Canvas extends React.Component<ICanvasProps, ICanvasState>
         return this.state.currentAsset.regions.filter((r) => selectedRegions.find((id) => r.id === id));
     }
 
-    public updateCanvasToolsRegions = (): void => {
-        for (const region of this.state.currentAsset.regions) {
-            this.editor.RM.updateTagsById(
-                region.id,
-                CanvasHelpers.getTagsDescriptor(this.props.project.tags, region),
-            );
+    public updateCanvasToolsRegions = (asset?: IAssetMetadata): void => {
+        if (asset) {
+            this.setState({
+                currentAsset: asset,
+            });
+            this.clearAllRegions();
+            this.addRegionsToCanvasTools(asset.regions);
+        } else {
+            for (const region of this.state.currentAsset.regions) {
+                this.editor.RM.updateTagsById(
+                    region.id,
+                    CanvasHelpers.getTagsDescriptor(this.props.project.tags, region),
+                );
+            }
         }
     }
 

src/react/components/pages/editorPage/editorPage.tsx

@@ -229,7 +229,7 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
                         </div>
                         <div className="editor-page-right-sidebar">
                             <TagInput
-                                tags={this.state.project.tags}
+                                tags={this.props.project.tags}
                                 lockedTags={this.state.lockedTags}
                                 selectedRegions={this.state.selectedRegions}
                                 onChange={this.onTagsChanged}
@@ -313,13 +313,18 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
         const assetService = new AssetService(project);
         const asset = await assetService.renameTag(project.assets, tagName, newTagName, selectedAsset);
 
-        const projectService = new ProjectService();
-        const newProject = projectService.renameTag(project, tagName, newTagName);
-        await this.props.actions.saveProject(newProject);
-
+        const newProject: IProject = {
+            ...project,
+            tags: project.tags.map((t) => (t.name === tagName) ? {...t, name: newTagName} : t),
+        }
         this.setState({
-            selectedAsset: asset,
             project: newProject,
+            selectedAsset: asset || selectedAsset,
+        }, async () => {
+            await this.props.actions.saveProject(newProject);
+            if (asset) {
+                this.canvas.current.updateCanvasToolsRegions(asset);
+            }
         });
     }
 
@@ -328,18 +333,21 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
     }
 
     private onTagDeleted = async (tagName: string): Promise<void> => {
-        const { project, selectedAsset } = this.state;
-        const assetService = new AssetService(project);
-        const asset = await assetService.deleteTag(project.assets, tagName, selectedAsset);
-
-        const projectService = new ProjectService();
-        const newProject = projectService.deleteTag(project, tagName);
+        const { selectedAsset } = this.state;
+        const { project } = this.props;
+        const newProject: IProject = {
+            ...project,
+            tags: project.tags.filter((t) => t.name !== tagName)
+        }
         await this.props.actions.saveProject(newProject);
+        debugger;
 
-        this.setState({
-            selectedAsset: asset,
-            project: newProject,
-        });
+        const assetService = new AssetService(project);
+        const asset = await assetService.deleteTag(project.assets, tagName, selectedAsset);
+        if (asset) {
+            this.canvas.current.updateCanvasToolsRegions(asset);
+            this.setState({selectedAsset: asset});
+        }
     }
 
     private onCtrlTagClicked = (tag: ITag): void => {

src/services/assetService.ts

@@ -243,6 +243,9 @@ export class AssetService {
             tagName: string,
             transformer: (tags: string[]) => string[],
             currentAsset?: IAssetMetadata): Promise<IAssetMetadata> {
+        if (!assets) {
+            return;
+        }
         const assetKeys = Object.keys(assets);
         // Loop over assets and update if necessary
         for (const assetKey of assetKeys) {

src/services/projectService.test.ts

@@ -157,33 +157,4 @@ describe("Project Service", () => {
         await projectSerivce.delete(testProject);
         expect(storageProviderMock.deleteFile.mock.calls).toHaveLength(assets.length + 1);
     });
-
-    it("Deletes a tag from project", () => {
-        const tag = MockFactory.createTestTag();
-        const project: IProject = {
-            ...MockFactory.createTestProject(),
-            tags: [tag],
-        };
-        const projectService = new ProjectService();
-        expect(projectSerivce.deleteTag(project, tag.name)).toEqual({
-            ...project,
-            tags: [],
-        });
-    });
-
-    it("Renames a tag within project", () => {
-        const tag = MockFactory.createTestTag();
-        const project: IProject = {
-            ...MockFactory.createTestProject(),
-            tags: [tag],
-        };
-        const projectService = new ProjectService();
-        expect(projectSerivce.renameTag(project, tag.name, "test")).toEqual({
-            ...project,
-            tags: [{
-                name: "test",
-                color: expect.any(String),
-            }],
-        });
-    });
 });

src/services/projectService.ts

@@ -1,14 +1,12 @@
 import _ from "lodash";
 import shortid from "shortid";
 import { StorageProviderFactory } from "../providers/storage/storageProviderFactory";
-import { IProject, ISecurityToken, AppError, ErrorCode, AssetState, IAssetMetadata } from "../models/applicationState";
+import { IProject, ISecurityToken, AppError, ErrorCode, AssetState } from "../models/applicationState";
 import Guard from "../common/guard";
 import { constants } from "../common/constants";
 import { ExportProviderFactory } from "../providers/export/exportProviderFactory";
 import { decryptProject, encryptProject } from "../common/utils";
 import packageJson from "../../package.json";
-import { AssetService } from "./assetService";
-import { forEachAsync } from "../common/extensions/array";
 
 /**
  * Functions required for a project service
@@ -20,8 +18,6 @@ export interface IProjectService {
     save(project: IProject, securityToken: ISecurityToken): Promise<IProject>;
     delete(project: IProject): Promise<void>;
     isDuplicate(project: IProject, projectList: IProject[]): boolean;
-    deleteTag(project: IProject, tagName: string): IProject;
-    renameTag(project: IProject, tagName: string, newTagName: string);
 }
 
 /**
@@ -104,20 +100,6 @@ export default class ProjectService implements IProjectService {
         return (duplicateProjects !== undefined);
     }
 
-    public deleteTag(project: IProject, tagName: string): IProject {
-        return {
-            ...project,
-            tags: project.tags.filter((t) => t.name !== tagName),
-        };
-    }
-
-    public renameTag(project: IProject, tagName: string, newTagName: string): IProject {
-        return {
-            ...project,
-            tags: project.tags.map((t) => (t.name === tagName) ? {...t, name: newTagName} : t),
-        };
-    }
-
     private async saveExportSettings(project: IProject): Promise<void> {
         if (!project.exportFormat || !project.exportFormat.providerType) {
             return Promise.resolve();