Tree editor rework

comindware · Apr 23, 2021 · 7886cd9 · 7886cd9
1 parent 0d580da
commit 7886cd9
Show file tree

Hide file tree

Showing 15 changed files with 224 additions and 207 deletions.
diff --git a/resources/styles/form.css b/resources/styles/form.css
@@ -256,6 +256,10 @@ td > .icon-true {
 .editor_disabled .checkbox {
     cursor: auto;
 }
+.editor_readonly .checkbox:hover,
+.editor_disabled .checkbox:hover {
+    box-shadow: none;
+}
 
 .checkbox-text {
     color: var(--theme-colors__text);

diff --git a/resources/styles/list.css b/resources/styles/list.css
@@ -386,6 +386,11 @@ tr.empty-view {
     flex: none;
 }
 
+.grid-container .toolbar {
+    padding: 0 0 10px;
+    height: auto;
+}
+
 .grid-toolbar-wrp{
     display: flex;
     flex-direction: row;

diff --git a/resources/styles/treeEditor.css b/resources/styles/treeEditor.css
@@ -12,17 +12,18 @@
     color: var(--theme-colors__text_strong);
 }
 
-.drag-wrap {
-    font-style: normal;
-    display: none;
+.leaf-item:hover .drag-wrap {
+    visibility: visible;
 }
 
-.leaf-item:hover .drag-wrap {
-    display: block;
+.drag-wrap {
+    visibility: hidden;
+    font-style: normal;
     font-size: 1.5em;
     position: absolute;
     left: 2px;
     cursor: move;
+    width: 10px;
 }
 
 .branch-header {

diff --git a/src/components/treeEditor/TreeEditor.ts b/src/components/treeEditor/TreeEditor.ts
@@ -3,6 +3,8 @@ import NodeViewFactory from './services/NodeViewFactory';
 import DiffController from './controllers/DiffController';
 import { TTreeEditorOptions, GraphModel } from './types';
 import ConfigDiff from './classes/ConfigDiff';
+import Backbone from 'backbone';
+import _ from 'underscore';
 
 const defaultOptions = {
     eyeIconClass: 'eye',
@@ -16,114 +18,96 @@ const defaultOptions = {
 };
 
 export default class TreeEditor {
+    options: TTreeEditorOptions;
     configDiff: ConfigDiff;
     model: GraphModel;
-    view: Backbone.View;
+    view: Marionette.View<Backbone.Model>;
+    reqres: Backbone.Radio.Channel;
     controller: DiffController;
+
     constructor(options: TTreeEditorOptions) {
         _.defaults(options, defaultOptions);
-        this.storageConfigDiff = options.configDiff;
         this.configDiff = options.configDiff;
-        this.showPanelViewOnly = options.showPanelViewOnly;
         this.model = options.model;
+        this.options = options;
 
-        const reqres = Backbone.Radio.channel(_.uniqueId('treeEditor'));
+        const reqres = this.reqres = Backbone.Radio.channel(_.uniqueId('treeEditor'));
         const nestingOptions = options.nestingOptions;
-        this.controller = new DiffController({ configDiff: this.configDiff, graphModel: this.model, reqres, nestingOptions });
-
-        if (this.showPanelViewOnly) {
-            const View = NodeViewFactory.getRootView({
-                model: this.model,
-                unNamedType: options.unNamedType,
-                nestingOptions,
-                showToolbar: options.showToolbar,
-                showResetButton: options.showResetButton
-            });
-            this.view = new View({
-                ...options,
-                reqres,
-                maxWidth: 300
-            });
-        } else {
-            this.view = Core.dropdown.factory.createPopout({
-                buttonView: TEButtonView,
-                buttonViewOptions: {
-                    iconClass: options.eyeIconClass
-                },
-
-                panelView: NodeViewFactory.getRootView({
-                    model: this.model,
-                    unNamedType: options.unNamedType,
-                    nestingOptions,
-                    showToolbar: options.showToolbar,
-                    showResetButton: options.showResetButton
-                }),
-                panelViewOptions: {
-                    ...options,
-                    reqres,
-                    maxWidth: 300
-                },
-                showDropdownAnchor: false
-            });
-            reqres.reply('treeEditor:collapse', () => this.view.adjustPosition(false));
-            this.view.listenTo(reqres, 'treeEditor:diffApplied', () => this.view.trigger('treeEditor:diffApplied'));
-
-            this.view.once('attach', () => this.view.adjustPosition(false)); // TODO it doesn't work like this
-
-            if (options.showToolbar) {
-                reqres.reply('command:execute', actionModel => this.__commandExecute(actionModel));
-            } else {
-                this.view.listenTo(this.view, 'close', () => this.__onSave());
-            }
-
-            if (options.hidden) {
-                this.view.el.setAttribute('hidden', true);
-            }
-        }
+        this.controller = new DiffController({
+            configDiff: this.configDiff,
+            graphModel: this.model,
+            initialModel: options.initialModel,
+            calculateDiff: options.calculateDiff,
+            reqres,
+            nestingOptions
+        });
+    }
 
-        this.view.getConfigDiff = this.__getConfigDiff.bind(this);
-        this.view.setVisibleConfigDiffInit = this.__setVisibleConfigDiffInit.bind(this);
-        this.view.setConfigDiff = this.__setConfigDiff.bind(this);
-        this.view.resetConfigDiff = this.__resetConfigDiff.bind(this);
-        this.view.setInitConfig = this.setInitConfig.bind(this);
-        this.view.reorderCollectionByIndex = this.controller.__reorderCollectionByIndex;
-        this.view.getRootCollection = this.__getRootCollection.bind(this);
+    getView() {
+        const options = this.options;
+        const reqres = this.reqres;
+        const nestingOptions = options.nestingOptions;
+        const View = NodeViewFactory.getRootView({
+            model: this.model,
+            unNamedType: options.unNamedType,
+            nestingOptions,
+            showToolbar: options.showToolbar,
+            showResetButton: options.showResetButton
+        });
+        this.view = new View({
+            ...options,
+            reqres,
+            maxWidth: 300
+        });
 
         return this.view;
     }
 
-    __setVisibleConfigDiffInit() {
-        this.controller.setVisibleConfigDiffInit();
+    destroy() {
+        if (this.view) {
+            this.view.destroy();
+        }
+    }
+
+    applyModelToDiff(properties: string[]) {
+        this.controller.applyModelToDiff(properties);
+    }
+
+    applyDiffToModel(properties: string[]) {
+        this.controller.applyDiffToModel(properties);
+    }
+
+    applyInitialConfigToModel(properties: string[]) {
+        this.controller.applyInitialConfigToModel(properties);
     }
 
-    __getRootCollection() {
-        return this.model.get(this.model.childrenAttribute);
+    getRootCollection() {
+        return this.model.childrenAttribute ? this.model.get(this.model.childrenAttribute) : undefined;
     }
 
-    __getConfigDiff() {
+    getConfigDiff() {
         return this.controller.configDiff.__mapChildsToObjects();
     }
 
-    __setConfigDiff(configDiff: ConfigDiff) {
+    setConfigDiff(configDiff: ConfigDiff) {
         this.controller.set(configDiff);
     }
 
     setInitConfig(initConfig: ConfigDiff) {
         this.controller.setInitConfig(initConfig);
     }
 
-    __resetConfigDiff() {
-        this.controller.reset();
-        this.controller.setVisibleConfigDiffInit();
+    resetConfigDiff(properties: string[] | void) {
+        this.controller.reset(properties);
         this.view.trigger('reset');
     }
 
     __onSave() {
-        this.view.trigger('save', this.__getConfigDiff());
+        this.view.trigger('save', this.getConfigDiff());
     }
 
     __onReset() {
-        this.__resetConfigDiff();
+        this.resetConfigDiff();
     }
 
     __commandExecute(actionModel: Backbone.Model) {

diff --git a/src/components/treeEditor/behaviors/NodeBehavior.ts b/src/components/treeEditor/behaviors/NodeBehavior.ts
@@ -29,11 +29,6 @@ export default Marionette.Behavior.extend({
         drop: '__handleDrop',
         dragstart: '__handleDragStart'
     },
-
-    onRender() {
-        this.__toggleHiddenClass();
-    },
-
     __onEyeBtnClick(event: MouseEvent) {
         event.stopPropagation();
         setModelHiddenAttribute(this.view.options.model);
@@ -42,27 +37,11 @@ export default Marionette.Behavior.extend({
     __onCheckboxClick(event: MouseEvent) {
         event.stopPropagation();
         setModelHiddenAttribute(this.view.options.model);
-        this.view.render();
     },
 
     __handleHiddenChange() {
-        this.view.options.reqres.request('treeEditor:setWidgetConfig', this.__getWidgetId(), { isHidden: this.view.model.get('isHidden') });
-
-        this.__toggleHiddenClass();
-    },
-
-    __toggleHiddenClass() {
-        const isHidden = !!this.view.model.get('isHidden');
-        const uiEyeElement = this.ui.eyeBtn[0];
-
-        if (uiEyeElement) {
-            uiEyeElement.classList.remove(...getIconAndPrefixerClasses(this.view.__getIconClass(!isHidden)));
-            uiEyeElement.classList.add(...getIconAndPrefixerClasses(this.view.__getIconClass(isHidden)));
-        }
-
-        this.el.classList.toggle(classes.hiddenClass, isHidden);
+        this.view.render();
     },
-
     __handleDragStart(event: JQueryEventObject) {
         event.stopPropagation();
         this.view.model.collection.draggingModel = this.view.model;
@@ -143,10 +122,6 @@ export default Marionette.Behavior.extend({
         const startIndex = oldIndex > newIndex ? newIndex : oldIndex;
         const endIndex = oldIndex > newIndex ? oldIndex : newIndex;
         const reqres = this.view.options.reqres;
-
-        for (let i = startIndex; i <= endIndex; i++) {
-            reqres.request('treeEditor:setWidgetConfig', this.__getWidgetId(collection.at(i)), { index: i });
-        }
     },
 
     __getWidgetId(model = this.view.model) {

diff --git a/src/components/treeEditor/classes/ConfigDiff.ts b/src/components/treeEditor/classes/ConfigDiff.ts
@@ -53,6 +53,18 @@ export default class ConfigDiff extends BaseDiffMap<DiffItem> {
         return super.set(key, diffItem);
     }
 
+
+    unset(properties: string[] = []) {
+        this.forEach((value, key) => {
+            const diffItem = this.get(key);
+            if (diffItem) {
+                properties.forEach(property => {
+                    diffItem.delete(property);
+                })
+            }
+        });
+    }
+
     renameKeys(replacer: (key: string) => string) {
         const mappedInitialConfig = new Map();
 

diff --git a/src/components/treeEditor/classes/DiffItem.ts b/src/components/treeEditor/classes/DiffItem.ts
@@ -19,7 +19,8 @@ export default class DiffItem extends BaseDiffMap<NodeConfig> {
     }
 
     set(key: string, value: SingleItem) {
-        if (_.isEqual(value, this.initialConfig[key])) {
+        // eslint-disable-next-line eqeqeq
+        if (value == undefined || _.isEqual(value, this.initialConfig[key])) {
             this.delete(key);
 
             return this;