@aj-shadow/actorjs-app 0.0.0-aj-beta.227 → 0.0.0-aj-beta.237

package/project/client/components/middle/actor-editor/middle-actor-editor-toolbar.jsx

@@ -1,34 +1,38 @@
 
-'use strict';
+// SPDX-License-Identifier: MIT; Copyright (c) 2026 Hagnell Konsulting AB
 
-import ActorEditorStore from '../../../stores/actor-editor-store';
+import { ActorEditorStore } from '../../../stores/actor-editor-store';
 import { ActionActorEditorPersistentDataUpdate } from '../../../actions/action-actor-editor/action-actor-editor-persistent-data';
 import { ActionActorEditorProjectUpdate } from '../../../actions/action-actor-editor/action-actor-editor-project';
 import { ActionActorEditorFolderNew, ActionActorEditorFolderAdd, ActionActorEditorFolderUpdate, ActionActorEditorFolderRemove, ActionActorEditorFolderDelete } from '../../../actions/action-actor-editor/action-actor-editor-folder';
 import { ActionActorEditorFileNew, ActionActorEditorFileAdd, ActionActorEditorFileRename, ActionActorEditorFileUpdate, ActionActorEditorFileUpdateAll, ActionActorEditorFileRemove, ActionActorEditorFileDelete, ActionActorEditorBuild } from '../../../actions/action-actor-editor/action-actor-editor-file';
-import ModalDialogStore from 'z-abs-complayer-modaldialog-client/client/stores/modal-dialog-store';
-import { ActionModalDialogShow, ActionModalDialogHide, ActionModalDialogPending, ActionModalDialogResult } from 'z-abs-complayer-modaldialog-client/client/actions/action-modal-dialog';
-import ActorImage from 'z-abs-complayer-modaldialog-client/client/images/actor-image';
-import FileImage from 'z-abs-complayer-modaldialog-client/client/images/file-image';
-import MsgImage from 'z-abs-complayer-modaldialog-client/client/images/msg-image';
-import ModalDialogFolderAdd from 'z-abs-complayer-modaldialog-client/client/modal-dialog-folder-add';
-import ModalDialogFolderNew from 'z-abs-complayer-modaldialog-client/client/modal-dialog-folder-new';
-import ModalDialogFolderProperties from 'z-abs-complayer-modaldialog-client/client/modal-dialog-folder-properties';
-import ModalDialogFolderRemove from 'z-abs-complayer-modaldialog-client/client/modal-dialog-folder-remove';
-import ModalDialogFileAdd from 'z-abs-complayer-modaldialog-client/client/modal-dialog-file-add';
-import ModalDialogFileNew from 'z-abs-complayer-modaldialog-client/client/modal-dialog-file-new';
-import ModalDialogFileProperties from 'z-abs-complayer-modaldialog-client/client/modal-dialog-file-properties';
-import ModalDialogFileRemove from 'z-abs-complayer-modaldialog-client/client/modal-dialog-file-remove';
-import ButtonNew from 'z-abs-complayer-bootstrap-client/client/button-new';
-import { ActionDialogFileGet, ActionDialogFileSet } from 'z-abs-corelayer-client/client/actions/action-dialog-file';
-import DialogFileStore from 'z-abs-corelayer-client/client/stores/dialog-file-store';
-import ReactComponentRealtime from 'z-abs-corelayer-client/client/react-component/react-component-realtime';
-import React from 'react';
+import * as CompLayerModaldialogClient from 'z-abs-complayer-modaldialog-client/client/actions/action-modal-dialog';
+import * as CompLayerModaldialogClient1 from 'z-abs-complayer-modaldialog-client/client/actions/action-modal-dialog';
+import * as CompLayerModaldialogClient2 from 'z-abs-complayer-modaldialog-client/client/actions/action-modal-dialog';
+import * as CompLayerModaldialogClient3 from 'z-abs-complayer-modaldialog-client/client/actions/action-modal-dialog';
+import * as CompLayerModaldialogClient4 from 'z-abs-complayer-modaldialog-client/client/stores/modal-dialog-store';
+import * as CompLayerModaldialogClient5 from 'z-abs-complayer-modaldialog-client/client/images/actor-image';
+import * as CompLayerModaldialogClient6 from 'z-abs-complayer-modaldialog-client/client/images/file-image';
+import * as CompLayerModaldialogClient7 from 'z-abs-complayer-modaldialog-client/client/images/msg-image';
+import * as CompLayerModaldialogClient8 from 'z-abs-complayer-modaldialog-client/client/modal-dialog-folder-add';
+import * as CompLayerModaldialogClient9 from 'z-abs-complayer-modaldialog-client/client/modal-dialog-folder-new';
+import * as CompLayerModaldialogClient10 from 'z-abs-complayer-modaldialog-client/client/modal-dialog-folder-properties';
+import * as CompLayerModaldialogClient11 from 'z-abs-complayer-modaldialog-client/client/modal-dialog-folder-remove';
+import * as CompLayerModaldialogClient12 from 'z-abs-complayer-modaldialog-client/client/modal-dialog-file-add';
+import * as CompLayerModaldialogClient13 from 'z-abs-complayer-modaldialog-client/client/modal-dialog-file-new';
+import * as CompLayerModaldialogClient14 from 'z-abs-complayer-modaldialog-client/client/modal-dialog-file-properties';
+import * as CompLayerModaldialogClient15 from 'z-abs-complayer-modaldialog-client/client/modal-dialog-file-remove';
+import * as CompLayerBootstrapClient from 'z-abs-complayer-bootstrap-client/client/button-new';
+import * as CoreLayerClient from 'z-abs-corelayer-client/client/actions/action-dialog-file';
+import * as CoreLayerClient1 from 'z-abs-corelayer-client/client/actions/action-dialog-file';
+import * as CoreLayerClient2 from 'z-abs-corelayer-client/client/stores/dialog-file-store';
+import * as CoreLayerClient3 from 'z-abs-corelayer-client/client/react-component/react-component-realtime';
+import * as React from 'react';
 
 
-export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
+export class MiddleActorEditorToolbar extends CoreLayerClient.ReactComponentRealtime {
   constructor(props) {
-    super(props, [ActorEditorStore, ModalDialogStore, DialogFileStore]);
+    super(props, [ActorEditorStore.getInstance(), CompLayerModaldialogClient.ModalDialogStore.getInstance(), CoreLayerClient.DialogFileStore.getInstance()]);
     this.boundKeyDown = this._keyDown.bind(this);
     this.buttonFileSaveDisabled = true;
     this.buttonFileSaveAllDisabled = true;
@@ -121,7 +125,7 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
   }
   
   _fileSave() {
-    this.dispatch(ActorEditorStore, new ActionActorEditorFileUpdate(this.state.ActorEditorStore.current.file.key));
+    this.dispatch(ActorEditorStore.getInstance(), new ActionActorEditorFileUpdate(this.state.ActorEditorStore.current.file.key));
   }
   
   _fileSaveAll() {
@@ -131,7 +135,7 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
         keys.push(file.key);
       }
     });
-    this.dispatch(ActorEditorStore, new ActionActorEditorFileUpdateAll(keys));
+    this.dispatch(ActorEditorStore.getInstance(), new ActionActorEditorFileUpdateAll(keys));
   }
   
   _keyDown(e) {
@@ -152,13 +156,13 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
   renderButtonSaveProject() {
     const disabled = this.state.ActorEditorStore.projectGlobal.isSaved() && this.state.ActorEditorStore.projectLocal.isSaved();
     return (
-      <ButtonNew id="actor_editor_project_save" colorMark="markup_color" icon="icon-project-save" size="aj_btn_sm" placement="bottom" heading="Save" content="Project" disabled={disabled}
+      <CompLayerBootstrapClient.ButtonNew id="actor_editor_project_save" colorMark="markup_color" icon="icon-project-save" size="aj_btn_sm" placement="bottom" heading="Save" content="Project" disabled={disabled}
         onClick={(e) => {
           if(!this.state.ActorEditorStore.projectGlobal.isSaved()) {
-            this.dispatch(ActorEditorStore, new ActionActorEditorProjectUpdate(this.state.ActorEditorStore.projectGlobal.projectId));
+            this.dispatch(ActorEditorStore.getInstance(), new ActionActorEditorProjectUpdate(this.state.ActorEditorStore.projectGlobal.projectId));
           }
           if(!this.state.ActorEditorStore.projectLocal.isSaved()) {
-            this.dispatch(ActorEditorStore, new ActionActorEditorProjectUpdate(this.state.ActorEditorStore.projectLocal.projectId));
+            this.dispatch(ActorEditorStore.getInstance(), new ActionActorEditorProjectUpdate(this.state.ActorEditorStore.projectLocal.projectId));
           }
         }}
       />
@@ -167,9 +171,9 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
   
   renderButtonFolderNew() {
     return (
-      <ButtonNew id="actor_editor_folder_new" colorMark="markup_color" icon="icon-folder-new" size="aj_btn_sm" placement="bottom" heading="New" content="Folder" disabled={'folder' !== this.state.ActorEditorStore.current.type}
+      <CompLayerBootstrapClient.ButtonNew id="actor_editor_folder_new" colorMark="markup_color" icon="icon-folder-new" size="aj_btn_sm" placement="bottom" heading="New" content="Folder" disabled={'folder' !== this.state.ActorEditorStore.current.type}
         onClick={(e) => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogShow('Actor_Folder_New'));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogShow('Actor_Folder_New'));
         }}
       />
     );
@@ -177,13 +181,13 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
   
   renderButtonFolderAdd() {
     return (
-      <ButtonNew id="actor_editor_folder_add" colorMark="markup_color" icon="icon-folder-add" size="aj_btn_sm" placement="bottom" heading="Add" content="Folder" disabled={'folder' !== this.state.ActorEditorStore.current.type}
+      <CompLayerBootstrapClient.ButtonNew id="actor_editor_folder_add" colorMark="markup_color" icon="icon-folder-add" size="aj_btn_sm" placement="bottom" heading="Add" content="Folder" disabled={'folder' !== this.state.ActorEditorStore.current.type}
         onClick={(e) => {
           const folder = this.state.ActorEditorStore.current.folder;
           const dir = `${folder.data.path}/${folder.title}`;
-          const project = ActorEditorStore.getProject(folder.projectId);
-          this.dispatch(DialogFileStore, new ActionDialogFileGet(dir, project.getRootName(), [dir], project.getFileNames(dir), 'folder'));
-          this.dispatch(ModalDialogStore, new ActionModalDialogShow('Actor_Folder_Add'));
+          const project = ActorEditorStore.getInstance().getProject(folder.projectId);
+          this.dispatch(CoreLayerClient.DialogFileStore.getInstance(), new CoreLayerClient.ActionDialogFileGet(dir, project.getRootName(), [dir], project.getFileNames(dir), 'folder'));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogShow('Actor_Folder_Add'));
         }}
       />
     );
@@ -191,9 +195,9 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
   
   renderButtonFolderProperties() {
     return (
-      <ButtonNew id="actor_editor_folder_properties" colorMark="markup_color" icon="icon-folder-property" size="aj_btn_sm" placement="bottom" heading="Properties" content="Folder" disabled={'folder' !== this.state.ActorEditorStore.current.type}
+      <CompLayerBootstrapClient.ButtonNew id="actor_editor_folder_properties" colorMark="markup_color" icon="icon-folder-property" size="aj_btn_sm" placement="bottom" heading="Properties" content="Folder" disabled={'folder' !== this.state.ActorEditorStore.current.type}
         onClick={(e) => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogShow('Actor_Folder_Properties'));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogShow('Actor_Folder_Properties'));
         }}
       />
     );
@@ -202,9 +206,9 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
   renderButtonFolderDelete() {
     const disabled = 'folder' !== this.state.ActorEditorStore.current.type || !(this.state.ActorEditorStore.projectGlobal.isSaved() && this.state.ActorEditorStore.projectLocal.isSaved());
     return (
-      <ButtonNew id="actor_editor_folder_delete" colorMark="markup_color" icon="icon-folder-delete" size="aj_btn_sm" placement="bottom" heading="Remove or Delete" content="Folder" disabled={disabled}
+      <CompLayerBootstrapClient.ButtonNew id="actor_editor_folder_delete" colorMark="markup_color" icon="icon-folder-delete" size="aj_btn_sm" placement="bottom" heading="Remove or Delete" content="Folder" disabled={disabled}
         onClick={(e) => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogShow('Actor_Folder_Remove'));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogShow('Actor_Folder_Remove'));
         }}
       />
     );
@@ -212,9 +216,9 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
   
   renderButtonFileNew() {
     return (
-      <ButtonNew id="actor_editor_file_new" colorMark="markup_color" icon="icon-file-new" size="aj_btn_sm" placement="bottom" heading="New" content="File" disabled={'folder' !== this.state.ActorEditorStore.current.type}
+      <CompLayerBootstrapClient.ButtonNew id="actor_editor_file_new" colorMark="markup_color" icon="icon-file-new" size="aj_btn_sm" placement="bottom" heading="New" content="File" disabled={'folder' !== this.state.ActorEditorStore.current.type}
         onClick={(e) => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogShow('Actor_File_New'));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogShow('Actor_File_New'));
         }}
       />
     );
@@ -222,13 +226,13 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
   
   renderButtonFileAdd() {
     return (
-      <ButtonNew id="actor_editor_file_add" colorMark="markup_color" icon="icon-file-add" size="aj_btn_sm" placement="bottom" heading="Add" content="File" disabled={'folder' !== this.state.ActorEditorStore.current.type}
+      <CompLayerBootstrapClient.ButtonNew id="actor_editor_file_add" colorMark="markup_color" icon="icon-file-add" size="aj_btn_sm" placement="bottom" heading="Add" content="File" disabled={'folder' !== this.state.ActorEditorStore.current.type}
         onClick={(e) => {
           const folder = this.state.ActorEditorStore.current.folder;
           const dir = `${folder.data.path}/${folder.title}`;
-          const project = ActorEditorStore.getProject(folder.projectId);
-          this.dispatch(DialogFileStore, new ActionDialogFileGet(dir, project.getRootName(), [dir], project.getFileNames(dir), 'file'));
-          this.dispatch(ModalDialogStore, new ActionModalDialogShow('Actor_File_Add'));
+          const project = ActorEditorStore.getInstance().getProject(folder.projectId);
+          this.dispatch(CoreLayerClient.DialogFileStore.getInstance(), new CoreLayerClient.ActionDialogFileGet(dir, project.getRootName(), [dir], project.getFileNames(dir), 'file'));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogShow('Actor_File_Add'));
         }}
       />
     );
@@ -237,7 +241,7 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
   renderButtonFileSave() {
     this.buttonFileSaveDisabled = ('file' !== this.state.ActorEditorStore.current.type && 'file_inline' !== this.state.ActorEditorStore.current.type) || !this.state.ActorEditorStore.current.file.codeChanged;
     return (
-      <ButtonNew id="actor_editor_file_save" colorMark="markup_color" icon="icon-file-save" size="aj_btn_sm" placement="bottom" heading="Save" content="File" shortcut="Ctrl+S" disabled={this.buttonFileSaveDisabled }
+      <CompLayerBootstrapClient.ButtonNew id="actor_editor_file_save" colorMark="markup_color" icon="icon-file-save" size="aj_btn_sm" placement="bottom" heading="Save" content="File" shortcut="Ctrl+S" disabled={this.buttonFileSaveDisabled }
         onClick={(e) => {
            this._fileSave();
         }}
@@ -251,7 +255,7 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
       this.buttonFileSaveAllDisabled = this.buttonFileSaveAllDisabled && !file.codeChanged;
     });
     return (
-      <ButtonNew ButtonNew id="actor_editor_files_save" colorMark="markup_color" icon="icon-files-save" size="aj_btn_sm" placement="bottom" heading="Save" content="All Files" shortcut="Ctrl+Shift+S" disabled={this.buttonFileSaveAllDisabled}
+      <CompLayerBootstrapClient.ButtonNew id="actor_editor_files_save" colorMark="markup_color" icon="icon-files-save" size="aj_btn_sm" placement="bottom" heading="Save" content="All Files" shortcut="Ctrl+Shift+S" disabled={this.buttonFileSaveAllDisabled}
         onClick={(e) => {
           this._fileSaveAll();
         }}
@@ -261,9 +265,9 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
   
   renderButtonFileProperties() {
     return (
-      <ButtonNew id="actor_editor_file_properties" colorMark="markup_color" icon="icon-file-property" size="aj_btn_sm" placement="bottom" heading="Properties" content="File" disabled={'file' !== this.state.ActorEditorStore.current.type}
+      <CompLayerBootstrapClient.ButtonNew id="actor_editor_file_properties" colorMark="markup_color" icon="icon-file-property" size="aj_btn_sm" placement="bottom" heading="Properties" content="File" disabled={'file' !== this.state.ActorEditorStore.current.type}
         onClick={(e) => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogShow('Actor_File_Properties'));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogShow('Actor_File_Properties'));
         }}
       />
     );
@@ -272,9 +276,9 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
   renderButtonFileDelete() {
    const disabled = ('file' !== this.state.ActorEditorStore.current.type && 'invalid_file' !== this.state.ActorEditorStore.current.type) || !(this.state.ActorEditorStore.projectGlobal.isSaved() && this.state.ActorEditorStore.projectLocal.isSaved());
    return (
-      <ButtonNew id="actor_editor_file_delete" colorMark="markup_color" icon="icon-file-delete" size="aj_btn_sm" placement="bottom" heading="Remove or Delete" content="File" disabled={disabled}
+      <CompLayerBootstrapClient.ButtonNew id="actor_editor_file_delete" colorMark="markup_color" icon="icon-file-delete" size="aj_btn_sm" placement="bottom" heading="Remove or Delete" content="File" disabled={disabled}
         onClick={(e) => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogShow('Actor_File_Remove'));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogShow('Actor_File_Remove'));
         }}
       />
     );
@@ -294,9 +298,9 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
     }
     const disabled = 'file' !== this.state.ActorEditorStore.current.type && 'file_inline' !== this.state.ActorEditorStore.current.type;
     return (
-      <ButtonNew id="actor_file_check" className={className} colorMark="markup_color" icon="icon-not-implemented" size="aj_btn_sm" placement="bottom" heading="Check" content="Code" disabled={disabled}
+      <CompLayerBootstrapClient.ButtonNew id="actor_file_check" className={className} colorMark="markup_color" icon="icon-not-implemented" size="aj_btn_sm" placement="bottom" heading="Check" content="Code" disabled={disabled}
         onClick={(e) => {
-          this.dispatch(ActorEditorStore, new ActionActorEditorBuild());
+          this.dispatch(ActorEditorStore.getInstance(), new ActionActorEditorBuild());
         }}
       />
     );
@@ -305,15 +309,15 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
   renderModalDialogFolderNew() {
     const name = 'Actor_Folder_New';
     return (
-      <ModalDialogFolderNew name={name} folder={this.state.ActorEditorStore.current.folder} heading="New Folder" modalResults={this.state.ModalDialogStore.modalResults}
+      <CompLayerModaldialogClient.ModalDialogFolderNew name={name} folder={this.state.ActorEditorStore.current.folder} heading="New Folder" modalResults={this.state.ModalDialogStore.modalResults}
         onFolderNew={(projectId, title, data) => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
-          this.dispatch(ActorEditorStore, new ActionActorEditorFolderNew(projectId, title, data), (response) => {
-            this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, response.result));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogPending(name));
+          this.dispatch(ActorEditorStore.getInstance(), new ActionActorEditorFolderNew(projectId, title, data), (response) => {
+            this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogResult(name, response.result));
           });
         }}
         onHide={() => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogHide(name));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogHide(name));
         }}
       />
     );
@@ -324,21 +328,21 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
     const folder = this.state.ActorEditorStore.current.folder;
     const projectId = folder !== null ? folder.projectId : null;
     return (
-      <ModalDialogFolderAdd name={name} heading="Add Folder" folder={this.state.ActorEditorStore.current.folder} project={this.state.DialogFileStore.project} current={this.state.DialogFileStore.current} original={this.state.DialogFileStore.original} modalResults={this.state.ModalDialogStore.modalResults}
+      <CompLayerModaldialogClient.ModalDialogFolderAdd name={name} heading="Add Folder" folder={this.state.ActorEditorStore.current.folder} project={this.state.DialogFileStore.project} current={this.state.DialogFileStore.current} original={this.state.DialogFileStore.original} modalResults={this.state.ModalDialogStore.modalResults}
         onAdd={(projectId, title, data) => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
-          this.dispatch(ActorEditorStore, new ActionActorEditorFolderAdd(projectId, title, data));
-          this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, {
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogPending(name));
+          this.dispatch(ActorEditorStore.getInstance(), new ActionActorEditorFolderAdd(projectId, title, data));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogResult(name, {
             code: 'success',
             error: null,
             msg: ''
           }));
         }}
         onChoose={(path) => {
-          this.dispatch(DialogFileStore, new ActionDialogFileSet(path));
+          this.dispatch(CoreLayerClient.DialogFileStore.getInstance(), new CoreLayerClient.ActionDialogFileSet(path));
         }}
         onHide={() => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogHide(name));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogHide(name));
         }}
       />
     );
@@ -347,15 +351,15 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
   renderModalDialogFolderProperties() {
     const name = 'Actor_Folder_Properties';
     return (
-      <ModalDialogFolderProperties name={name} folder={this.state.ActorEditorStore.current.folder} heading="Folder Properties" modalResults={this.state.ModalDialogStore.modalResults}
+      <CompLayerModaldialogClient.ModalDialogFolderProperties name={name} folder={this.state.ActorEditorStore.current.folder} heading="Folder Properties" modalResults={this.state.ModalDialogStore.modalResults}
         onFolderProperties={(projectId, title, newTitle, data) => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
-          this.dispatch(ActorEditorStore, new ActionActorEditorFolderUpdate(projectId, title, newTitle, data), (response) => {
-            this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, response.result));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogPending(name));
+          this.dispatch(ActorEditorStore.getInstance(), new ActionActorEditorFolderUpdate(projectId, title, newTitle, data), (response) => {
+            this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogResult(name, response.result));
           });
         }}
         onHide={() => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogHide(name));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogHide(name));
         }}
       />
     );
@@ -364,24 +368,24 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
   renderModalDialogFolderRemove() {
     const name = 'Actor_Folder_Remove';
     return (
-      <ModalDialogFolderRemove name={name} folder={this.state.ActorEditorStore.current.folder} heading="Remove or Delete Folder" modalResults={this.state.ModalDialogStore.modalResults}
+      <CompLayerModaldialogClient.ModalDialogFolderRemove name={name} folder={this.state.ActorEditorStore.current.folder} heading="Remove or Delete Folder" modalResults={this.state.ModalDialogStore.modalResults}
         onFolderRemove={(projectId, title, key, data) => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
-          this.dispatch(ActorEditorStore, new ActionActorEditorFolderRemove(projectId, title, key, data));
-          this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, {
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogPending(name));
+          this.dispatch(ActorEditorStore.getInstance(), new ActionActorEditorFolderRemove(projectId, title, key, data));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogResult(name, {
             code: 'success',
             error: null,
             msg: ''
           }));
         }}
         onFolderDelete={(projectId, title, key, data) => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
-          this.dispatch(ActorEditorStore, new ActionActorEditorFolderDelete(projectId, title, key, data), (response) => {
-            this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, response.result));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogPending(name));
+          this.dispatch(ActorEditorStore.getInstance(), new ActionActorEditorFolderDelete(projectId, title, key, data), (response) => {
+            this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogResult(name, response.result));
           });
         }}
         onHide={() => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogHide(name));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogHide(name));
         }}
       />
     );
@@ -391,25 +395,25 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
     const name = 'Actor_File_New';
     const heading = 'Stack';
     return (
-      <ModalDialogFileNew name={name} heading="New Actor File" templateNames={MiddleActorEditorToolbar.TEMPLATE_NAMES} folder={this.state.ActorEditorStore.current.folder} modalResults={this.state.ModalDialogStore.modalResults}
+      <CompLayerModaldialogClient.ModalDialogFileNew name={name} heading="New Actor File" templateNames={MiddleActorEditorToolbar.TEMPLATE_NAMES} folder={this.state.ActorEditorStore.current.folder} modalResults={this.state.ModalDialogStore.modalResults}
         onRenderIcon={(template, templateName) => {
           if('actor' === template.icon) {
-            return (<ActorImage template={template} stackName={templateName ? templateName : 'unknown'} />);
+            return (<CompLayerModaldialogClient.ActorImage template={template} stackName={templateName ? templateName : 'unknown'} />);
           }
           else if('msg' === template.icon) {
-            return (<MsgImage id="msg_image_icon" />);
+            return (<CompLayerModaldialogClient.MsgImage id="msg_image_icon" />);
           }
           else if('class' === template.icon) {
-            return (<FileImage id="file_image_icon" />);
+            return (<CompLayerModaldialogClient.FileImage id="file_image_icon" />);
           }
           else if('none' === template.icon) {
-            return (<FileImage id="empty_file_image_icon" />);
+            return (<CompLayerModaldialogClient.FileImage id="empty_file_image_icon" />);
           }
         }}
         onFileNew={(projectId, path, title, type, templateName, dynamicTemplateName, dynamicTemplateName2) => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
-          this.dispatch(ActorEditorStore, new ActionActorEditorFileNew(projectId, path, title, type, templateName, dynamicTemplateName, dynamicTemplateName2), (response) => {
-            this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, response.result));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogPending(name));
+          this.dispatch(ActorEditorStore.getInstance(), new ActionActorEditorFileNew(projectId, path, title, type, templateName, dynamicTemplateName, dynamicTemplateName2), (response) => {
+            this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogResult(name, response.result));
           });
         }}
         onTemplate={(templateName) => {
@@ -435,7 +439,7 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
           }
         }}
         onHide={() => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogHide(name));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogHide(name));
         }}
       />
     );
@@ -446,21 +450,21 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
     const folder = this.state.ActorEditorStore.current.folder;
     const projectId = folder !== null ? folder.projectId : null;
     return (
-      <ModalDialogFileAdd name={name} heading="Add Actor File" folder={this.state.ActorEditorStore.current.folder} project={this.state.DialogFileStore.project} current={this.state.DialogFileStore.current} original={this.state.DialogFileStore.original} modalResults={this.state.ModalDialogStore.modalResults}
+      <CompLayerModaldialogClient.ModalDialogFileAdd name={name} heading="Add Actor File" folder={this.state.ActorEditorStore.current.folder} project={this.state.DialogFileStore.project} current={this.state.DialogFileStore.current} original={this.state.DialogFileStore.original} modalResults={this.state.ModalDialogStore.modalResults}
         onAdd={(projectId, title, path, type) => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
-          this.dispatch(ActorEditorStore, new ActionActorEditorFileAdd(projectId, title, path, type));
-          this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, {
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogPending(name));
+          this.dispatch(ActorEditorStore.getInstance(), new ActionActorEditorFileAdd(projectId, title, path, type));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogResult(name, {
             code: 'success',
             error: null,
             msg: ''
           }));
         }}
         onChoose={(path) => {
-          this.dispatch(DialogFileStore, new ActionDialogFileSet(path));
+          this.dispatch(DialogFileStore.getInstance(), new CoreLayerClient.ActionDialogFileSet(path));
         }}
         onHide={() => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogHide(name));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogHide(name));
         }}
       />
     );
@@ -469,15 +473,15 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
   renderModalDialogFileProperties() {
     const name = 'Actor_File_Properties';
     return (
-      <ModalDialogFileProperties name={name} heading="File Properties" file={this.state.ActorEditorStore.current.file} modalResults={this.state.ModalDialogStore.modalResults}
+      <CompLayerModaldialogClient.ModalDialogFileProperties name={name} heading="File Properties" file={this.state.ActorEditorStore.current.file} modalResults={this.state.ModalDialogStore.modalResults}
         onFileProperties={(projectId, path, title, newTitle) => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
-          this.dispatch(ActorEditorStore, new ActionActorEditorFileRename(projectId, path, title, newTitle), (response) => {
-            this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, response.result));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogPending(name));
+          this.dispatch(ActorEditorStore.getInstance(), new ActionActorEditorFileRename(projectId, path, title, newTitle), (response) => {
+            this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogResult(name, response.result));
           });
         }}
         onHide={() => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogHide(name));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogHide(name));
         }}
       />
     );
@@ -486,24 +490,24 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
   renderModalDialogFileRemove() {
     const name = 'Actor_File_Remove';
     return (
-      <ModalDialogFileRemove name={name} file={this.state.ActorEditorStore.current.file} doDelete={'invalid_file' !== this.state.ActorEditorStore.current.type} heading="Remove or Delete Actor File" modalResults={this.state.ModalDialogStore.modalResults}
+      <CompLayerModaldialogClient.ModalDialogFileRemove name={name} file={this.state.ActorEditorStore.current.file} doDelete={'invalid_file' !== this.state.ActorEditorStore.current.type} heading="Remove or Delete Actor File" modalResults={this.state.ModalDialogStore.modalResults}
         onFileRemove={(projectId, key) => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
-          this.dispatch(ActorEditorStore, new ActionActorEditorFileRemove(projectId, key));
-          this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, {
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogPending(name));
+          this.dispatch(ActorEditorStore.getInstance(), new ActionActorEditorFileRemove(projectId, key));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogResult(name, {
             code: 'success',
             error: null,
             msg: ''
           }));
         }}
         onFileDelete={(projectId, key) => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogPending(name));
-          this.dispatch(ActorEditorStore, new ActionActorEditorFileDelete(projectId, key), (response) => {
-            this.dispatch(ModalDialogStore, new ActionModalDialogResult(name, response.result));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogPending(name));
+          this.dispatch(ActorEditorStore.getInstance(), new ActionActorEditorFileDelete(projectId, key), (response) => {
+            this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogResult(name, response.result));
           });
         }}
         onHide={() => {
-          this.dispatch(ModalDialogStore, new ActionModalDialogHide(name));
+          this.dispatch(CompLayerModaldialogClient.ModalDialogStore.getInstance(), new CompLayerModaldialogClient.ActionModalDialogHide(name));
         }}
       />
     );
@@ -527,7 +531,7 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
   renderCopyButton() {
     if('file' === this.state.ActorEditorStore.current.type) {
       return (
-        <ButtonNew id="actor_editor_copy" colorMark="markup_color" icon="icon-markup-copy" size="aj_btn_sm" placement="bottom" heading="Copy" content="Markup name" shortcut="Ctrl+C"
+        <CompLayerBootstrapClient.ButtonNew id="actor_editor_copy" colorMark="markup_color" icon="icon-markup-copy" size="aj_btn_sm" placement="bottom" heading="Copy" content="Markup name" shortcut="Ctrl+C"
           onClick={(e) => {
             navigator.clipboard.writeText(this._getActorFullName()).then(() => {
               /* clipboard successfully set */
@@ -544,9 +548,9 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
     const darkMode = this.state.ActorEditorStore.persistentData.darkMode;
     const icon = darkMode ? 'icon-mode-dark' : 'icon-mode-light';
     return (
-      <ButtonNew id="actor_editor_darkmode" colorMark="test_case_debug" icon={icon} size="aj_btn_sm" active={darkMode} placement="bottom" heading="View" content="Dark mode"
+      <CompLayerBootstrapClient.ButtonNew id="actor_editor_darkmode" colorMark="test_case_debug" icon={icon} size="aj_btn_sm" active={darkMode} placement="bottom" heading="View" content="Dark mode"
         onClick={(e) => {
-          this.dispatch(ActorEditorStore, new ActionActorEditorPersistentDataUpdate('', 'darkMode', !darkMode));
+          this.dispatch(ActorEditorStore.getInstance(), new ActionActorEditorPersistentDataUpdate('', 'darkMode', !darkMode));
         }}
       />
     );
@@ -555,9 +559,9 @@ export default class MiddleActorEditorToolbar extends ReactComponentRealtime {
   renderButtonEmptyLine() {
     const emptyLine = this.state.ActorEditorStore.persistentData.emptyLine;
     return (
-      <ButtonNew id="actor_editor_empty_line" icon="icon-empty-line" size="aj_btn_sm" active={emptyLine} placement="bottom" heading="View" content="Empty Line"
+      <CompLayerBootstrapClient.ButtonNew id="actor_editor_empty_line" icon="icon-empty-line" size="aj_btn_sm" active={emptyLine} placement="bottom" heading="View" content="Empty Line"
         onClick={(e) => {
-          this.dispatch(ActorEditorStore, new ActionActorEditorPersistentDataUpdate('', 'emptyLine', !emptyLine));
+          this.dispatch(ActorEditorStore.getInstance(), new ActionActorEditorPersistentDataUpdate('', 'emptyLine', !emptyLine));
         }}
       />
     );