From a21c4386bd96ece3a74f2485d746bf9b45b0951a Mon Sep 17 00:00:00 2001 From: Alex Heneveld Date: Wed, 7 Nov 2018 10:16:17 +0000 Subject: [PATCH 1/5] initial refactor for a mgmt view --- .../catalog-selector.directive.js | 12 +- .../components/designer/designer.directive.js | 4 +- ...-blueprint.js => d3-blueprint-abstract.js} | 165 ++---------------- .../components/util/d3-blueprint-mgmt-view.js | 151 ++++++++++++++++ 4 files changed, 181 insertions(+), 151 deletions(-) rename ui-modules/blueprint-composer/app/components/util/{d3-blueprint.js => d3-blueprint-abstract.js} (88%) create mode 100755 ui-modules/blueprint-composer/app/components/util/d3-blueprint-mgmt-view.js diff --git a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.directive.js b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.directive.js index b8b3bc608..38f670a26 100644 --- a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.directive.js +++ b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.directive.js @@ -99,9 +99,13 @@ export function catalogSelectorSearchFilter() { let fieldNum = 0; return found && FIELDS_TO_SEARCH.reduce((match, field) => { - if (match) return true; + if (match) { + return true; + } fieldNum++; - if (!item.hasOwnProperty(field) || !item[field]) return false; + if (!item.hasOwnProperty(field) || !item[field]) { + return false; + } let text = item[field]; if (!text.toLowerCase) { text = JSON.stringify(text).toLowerCase(); @@ -109,7 +113,9 @@ export function catalogSelectorSearchFilter() { text = text.toLowerCase(); } let index = text.indexOf(part); - if (index == -1) return false; + if (index == -1) { + return false; + } // found, set relevance -- uses an ad hoc heuristic preferring first fields and short text length, // earlier occurrences and earlier words weighted more highly (smaller number is better) let score = fieldNum * (2 / (1 + wordNum)) * Math.log(1 + text.length * index); diff --git a/ui-modules/blueprint-composer/app/components/designer/designer.directive.js b/ui-modules/blueprint-composer/app/components/designer/designer.directive.js index e70492817..a6d954ea7 100644 --- a/ui-modules/blueprint-composer/app/components/designer/designer.directive.js +++ b/ui-modules/blueprint-composer/app/components/designer/designer.directive.js @@ -17,7 +17,7 @@ * under the License. */ import {Entity} from "../util/model/entity.model"; -import {D3Blueprint} from "../util/d3-blueprint"; +import {D3BlueprintMgmtView} from "../util/d3-blueprint-mgmt-view"; import {EntityFamily} from '../util/model/entity.model'; import {graphicalEditEntityState} from '../../views/main/graphical/edit/entity/edit.entity.controller'; import {graphicalEditSpecState} from '../../views/main/graphical/edit/spec/edit.spec.controller'; @@ -38,7 +38,7 @@ export function designerDirective($log, $state, $q, iconGenerator, catalogApi, b return directive; function link($scope, $element) { - let blueprintGraph = new D3Blueprint($element[0]).center(); + let blueprintGraph = new D3BlueprintMgmtView($element[0]).center(); $scope.blueprint = blueprintService.get(); $scope.$watch('blueprint', ()=> { diff --git a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js b/ui-modules/blueprint-composer/app/components/util/d3-blueprint-abstract.js similarity index 88% rename from ui-modules/blueprint-composer/app/components/util/d3-blueprint.js rename to ui-modules/blueprint-composer/app/components/util/d3-blueprint-abstract.js index b25bc046d..8862c9fa1 100755 --- a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js +++ b/ui-modules/blueprint-composer/app/components/util/d3-blueprint-abstract.js @@ -18,23 +18,22 @@ */ import * as d3 from 'd3'; import {PREDICATE_MEMBERSPEC} from './model/entity.model'; -import addIcon from '../../img/icon-add.svg'; import {ISSUE_LEVEL} from './model/issue.model'; -export function D3Blueprint(container) { - let _svg = d3.select(container).append('svg').attr('class', 'blueprint-canvas'); - let _mirror = _svg.append('path').style('display', 'none'); - let _zoomGroup = _svg.append('g').attr('class', 'zoom-group'); - let _parentGroup = _zoomGroup.append('g').attr('class', 'parent-group'); - let _linkGroup = _parentGroup.append('g').attr('class', 'link-group'); - let _relationGroup = _parentGroup.append('g').attr('class', 'relation-group'); - let _specNodeGroup = _parentGroup.append('g').attr('class', 'spec-node-group'); - let _dropZoneGroup = _parentGroup.append('g').attr('class', 'dropzone-group'); - let _ghostNodeGroup = _parentGroup.append('g').attr('class', 'ghost-node-group'); - let _nodeGroup = _parentGroup.append('g').attr('class', 'node-group'); - let _cloneGroup = _parentGroup.append('g').attr('class', 'clone-group'); - - let _dragState = { +export function D3BlueprintAbstract(container) { + let _svg = this._svg = d3.select(container).append('svg').attr('class', 'blueprint-canvas'); + let _mirror = this._mirror = _svg.append('path').style('display', 'none'); + let _zoomGroup = this._zoomGroup = _svg.append('g').attr('class', 'zoom-group'); + let _parentGroup = this._parentGroup = _zoomGroup.append('g').attr('class', 'parent-group'); + let _linkGroup = this._linkGroup = _parentGroup.append('g').attr('class', 'link-group'); + let _relationGroup = this._relationGroup = _parentGroup.append('g').attr('class', 'relation-group'); + let _specNodeGroup = this._specNodeGroup = _parentGroup.append('g').attr('class', 'spec-node-group'); + let _dropZoneGroup = this._dropZoneGroup = _parentGroup.append('g').attr('class', 'dropzone-group'); + let _ghostNodeGroup = this._ghostNodeGroup = _parentGroup.append('g').attr('class', 'ghost-node-group'); + let _nodeGroup = this._nodeGroup = _parentGroup.append('g').attr('class', 'node-group'); + let _cloneGroup = this._cloneGroup = _parentGroup.append('g').attr('class', 'clone-group'); + + let _dragState = this._dragState = { dragInProgress: false, dragStarted: false, clone: null, @@ -42,130 +41,9 @@ export function D3Blueprint(container) { cloneY: 0, }; - const _configHolder = { - nodes: { - root: { - rect: { - class: 'node-root', - x: -125, - y: -50, - width: 250, - height: 100, - rx: 50, - ry: 50, - }, - text: { - class: 'node-name', - width: 250, - height: 100 - }, - maxNameLength: 18 - }, - child: { - circle: { - r: 50, - class: (d)=>(`node-cluster node-cluster-${d}`) - }, - image: { - class: 'node-icon', - width: 64, - height: 64, - x: -32, - y: -32, - opacity: 0 - } - }, - location: { - rect: { - x: -50, - y: -110, - width: 100, - height: 50 - }, - image: { - x: -50, - y: -110, - width: 100, - height: 50, - opacity: 0 - } - }, - dropzonePrev: { - circle: { - cx: -150, - r: 30, - class: 'dropzone dropzone-prev' - }, - }, - dropzoneNext: { - circle: { - cx: 150, - r: 30, - class: 'dropzone dropzone-next' - } - }, - adjunct: { - rect: { - id: (d)=>(`entity-${d._id}`), - class: 'node-adjunct adjunct entity', - width: 20, - height: 20, - transform: 'scale(0)' - } - }, - memberspec: { - circle: { - r: 35, - cx: 0, - cy: 170, - class: 'node-spec-entity', - 'transform-origin': 0 - }, - image: { - x: -20, - y: 150, - width: 40, - height: 40, - opacity: 0, - class: 'node-spec-image', - 'transform-origin': 0 - } - }, - buttongroup: { - line: { - class: 'link', - x1: 0, - x2: 0, - y1: (d)=>(isRootNode(d) ? _configHolder.nodes.root.rect.height / 2 : _configHolder.nodes.child.circle.r), - y2: (d)=>((isRootNode(d) ? _configHolder.nodes.root.rect.height / 2 : _configHolder.nodes.child.circle.r) + 30), - }, - circle: { - class: 'connector', - r: 6, - cy: (d)=>(isRootNode(d) ? _configHolder.nodes.root.rect.height / 2 : _configHolder.nodes.child.circle.r), - } - }, - buttonAdd: { - circle: { - r: 20, - cy: 100 - }, - image: { - width: 50, - height: 50, - x: -25, - y: 75, - 'xlink:href': addIcon - } - } - }, - transition: 300, - grid: { - itemPerCol: 3, - gutter: 15 - }, - }; - let _d3DataHolder = { + const _configHolder = this._configHolder = {}; + + let _d3DataHolder = this._d3DataHolder = { nodes: [], ghostNodes: [], orphans: [], @@ -973,13 +851,8 @@ export function D3Blueprint(container) { } } - function isRootNode(d) { - return d.depth === 0; - } - - function isChildNode(d) { - return d.depth > 0; - } + let isRootNode = this.isRootNode = (d) => d.depth === 0; + let isChildNode = this.isChildNode = (d) => d.depth > 0; function getImportantAdjuncts(d) { let adjuncts = d.data.getPoliciesAsArray().concat(d.data.getEnrichersAsArray()); diff --git a/ui-modules/blueprint-composer/app/components/util/d3-blueprint-mgmt-view.js b/ui-modules/blueprint-composer/app/components/util/d3-blueprint-mgmt-view.js new file mode 100755 index 000000000..7b8171d03 --- /dev/null +++ b/ui-modules/blueprint-composer/app/components/util/d3-blueprint-mgmt-view.js @@ -0,0 +1,151 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import {D3BlueprintAbstract} from './d3-blueprint-abstract'; +import addIcon from '../../img/icon-add.svg'; + +export function D3BlueprintMgmtView(container) { + let d3b = this; + let result = D3BlueprintAbstract.call(d3b, container); + + Object.assign(d3b._configHolder, { + nodes: { + root: { + rect: { + class: 'node-root', + x: -125, + y: -50, + width: 250, + height: 100, + rx: 50, + ry: 50, + }, + text: { + class: 'node-name', + width: 250, + height: 100 + }, + maxNameLength: 18 + }, + child: { + circle: { + r: 50, + class: (d)=>(`node-cluster node-cluster-${d}`) + }, + image: { + class: 'node-icon', + width: 64, + height: 64, + x: -32, + y: -32, + opacity: 0 + } + }, + location: { + rect: { + x: -50, + y: -110, + width: 100, + height: 50 + }, + image: { + x: -50, + y: -110, + width: 100, + height: 50, + opacity: 0 + } + }, + dropzonePrev: { + circle: { + cx: -150, + r: 30, + class: 'dropzone dropzone-prev' + }, + }, + dropzoneNext: { + circle: { + cx: 150, + r: 30, + class: 'dropzone dropzone-next' + } + }, + adjunct: { + rect: { + id: (d)=>(`entity-${d._id}`), + class: 'node-adjunct adjunct entity', + width: 20, + height: 20, + transform: 'scale(0)' + } + }, + memberspec: { + circle: { + r: 35, + cx: 0, + cy: 170, + class: 'node-spec-entity', + 'transform-origin': 0 + }, + image: { + x: -20, + y: 150, + width: 40, + height: 40, + opacity: 0, + class: 'node-spec-image', + 'transform-origin': 0 + } + }, + buttongroup: { + line: { + class: 'link', + x1: 0, + x2: 0, + y1: (d)=>(d3b.isRootNode(d) ? d3b._configHolder.nodes.root.rect.height / 2 : d3b._configHolder.nodes.child.circle.r), + y2: (d)=>((d3b.isRootNode(d) ? d3b._configHolder.nodes.root.rect.height / 2 : d3b._configHolder.nodes.child.circle.r) + 30), + }, + circle: { + class: 'connector', + r: 6, + cy: (d)=>(d3b.isRootNode(d) ? d3b._configHolder.nodes.root.rect.height / 2 : d3b._configHolder.nodes.child.circle.r), + } + }, + buttonAdd: { + circle: { + r: 20, + cy: 100 + }, + image: { + width: 50, + height: 50, + x: -25, + y: 75, + 'xlink:href': d3b.addIcon + } + } + }, + transition: 300, + grid: { + itemPerCol: 3, + gutter: 15 + }, + }); + + return result; +} From 84311027a77968a85d1a0bbf3b10c0cde4262399 Mon Sep 17 00:00:00 2001 From: Alex Heneveld Date: Wed, 7 Nov 2018 11:05:08 +0000 Subject: [PATCH 2/5] new landscape view mode known in code and UI -- does nothing yet, but can click to it --- .../components/designer/designer.directive.js | 4 +- .../util/d3-blueprint-landscape-view.js | 151 ++++++++++++++++++ .../views/main/graphical/graphical.state.html | 3 +- .../views/main/graphical/graphical.state.js | 13 +- .../app/views/main/main.controller.js | 31 ++-- .../app/views/main/main.template.html | 15 +- 6 files changed, 197 insertions(+), 20 deletions(-) create mode 100755 ui-modules/blueprint-composer/app/components/util/d3-blueprint-landscape-view.js diff --git a/ui-modules/blueprint-composer/app/components/designer/designer.directive.js b/ui-modules/blueprint-composer/app/components/designer/designer.directive.js index a6d954ea7..4624b6c6e 100644 --- a/ui-modules/blueprint-composer/app/components/designer/designer.directive.js +++ b/ui-modules/blueprint-composer/app/components/designer/designer.directive.js @@ -18,6 +18,7 @@ */ import {Entity} from "../util/model/entity.model"; import {D3BlueprintMgmtView} from "../util/d3-blueprint-mgmt-view"; +import {D3BlueprintLandscapeView} from "../util/d3-blueprint-landscape-view"; import {EntityFamily} from '../util/model/entity.model'; import {graphicalEditEntityState} from '../../views/main/graphical/edit/entity/edit.entity.controller'; import {graphicalEditSpecState} from '../../views/main/graphical/edit/spec/edit.spec.controller'; @@ -30,6 +31,7 @@ export function designerDirective($log, $state, $q, iconGenerator, catalogApi, b let directive = { restrict: 'E', scope: { + mode: '@?', onSelectionChange: ' { diff --git a/ui-modules/blueprint-composer/app/components/util/d3-blueprint-landscape-view.js b/ui-modules/blueprint-composer/app/components/util/d3-blueprint-landscape-view.js new file mode 100755 index 000000000..443b0966c --- /dev/null +++ b/ui-modules/blueprint-composer/app/components/util/d3-blueprint-landscape-view.js @@ -0,0 +1,151 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import {D3BlueprintAbstract} from './d3-blueprint-abstract'; +import addIcon from '../../img/icon-add.svg'; + +export function D3BlueprintLandscapeView(container) { + let d3b = this; + let result = D3BlueprintAbstract.call(d3b, container); + + Object.assign(d3b._configHolder, { + nodes: { + root: { + rect: { + class: 'node-root', + x: -250, + y: -50, + width: 500, + height: 100, + rx: 50, + ry: 50, + }, + text: { + class: 'node-name', + width: 250, + height: 100 + }, + maxNameLength: 18 + }, + child: { + circle: { + r: 50, + class: (d)=>(`node-cluster node-cluster-${d}`) + }, + image: { + class: 'node-icon', + width: 64, + height: 64, + x: -32, + y: -32, + opacity: 0 + } + }, + location: { + rect: { + x: -50, + y: -110, + width: 100, + height: 50 + }, + image: { + x: -50, + y: -110, + width: 100, + height: 50, + opacity: 0 + } + }, + dropzonePrev: { + circle: { + cx: -150, + r: 30, + class: 'dropzone dropzone-prev' + }, + }, + dropzoneNext: { + circle: { + cx: 150, + r: 30, + class: 'dropzone dropzone-next' + } + }, + adjunct: { + rect: { + id: (d)=>(`entity-${d._id}`), + class: 'node-adjunct adjunct entity', + width: 20, + height: 20, + transform: 'scale(0)' + } + }, + memberspec: { + circle: { + r: 35, + cx: 0, + cy: 170, + class: 'node-spec-entity', + 'transform-origin': 0 + }, + image: { + x: -20, + y: 150, + width: 40, + height: 40, + opacity: 0, + class: 'node-spec-image', + 'transform-origin': 0 + } + }, + buttongroup: { + line: { + class: 'link', + x1: 0, + x2: 0, + y1: (d)=>(d3b.isRootNode(d) ? d3b._configHolder.nodes.root.rect.height / 2 : d3b._configHolder.nodes.child.circle.r), + y2: (d)=>((d3b.isRootNode(d) ? d3b._configHolder.nodes.root.rect.height / 2 : d3b._configHolder.nodes.child.circle.r) + 30), + }, + circle: { + class: 'connector', + r: 6, + cy: (d)=>(d3b.isRootNode(d) ? d3b._configHolder.nodes.root.rect.height / 2 : d3b._configHolder.nodes.child.circle.r), + } + }, + buttonAdd: { + circle: { + r: 20, + cy: 100 + }, + image: { + width: 50, + height: 50, + x: -25, + y: 75, + 'xlink:href': d3b.addIcon + } + } + }, + transition: 300, + grid: { + itemPerCol: 3, + gutter: 15 + }, + }); + + return result; +} diff --git a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html index 711d4c11c..de2a7a7fb 100644 --- a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html +++ b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html @@ -31,7 +31,8 @@ - + +
diff --git a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js index ffb961674..5bb1c134a 100644 --- a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js +++ b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js @@ -24,24 +24,29 @@ import template from './graphical.state.html'; export const graphicalState = { name: 'main.graphical', - url: 'graphical', + url: 'graphical?viewMode', templateProvider: function(composerOverrides) { return composerOverrides.paletteGraphicalStateTemplate || template; }, - controller: ['$scope', '$state', '$filter', 'blueprintService', 'paletteService', graphicalController], + controller: ['$scope', '$state', '$stateParams', '$filter', 'blueprintService', 'paletteService', graphicalController], controllerAs: 'vm', data: { label: 'Graphical Designer' - } + }, }; -function graphicalController($scope, $state, $filter, blueprintService, paletteService) { +function graphicalController($scope, $state, $stateParams, $filter, blueprintService, paletteService) { this.EntityFamily = EntityFamily; this.sections = paletteService.getSections(); this.selectedSection = Object.values(this.sections).find(section => section.type === EntityFamily.ENTITY); $scope.paletteState = {}; // share state among all sections + $scope.useLandscapeMode = true; + if ($stateParams.viewMode) $scope.composerState.viewMode = $stateParams.viewMode; + if (!$scope.composerState.viewMode) $scope.composerState.viewMode = 'mgmt'; + this.viewMode = () => $scope.composerState.viewMode || 'mgmt'; + this.onCanvasSelection = (item) => { $scope.canvasSelectedItem = item; } diff --git a/ui-modules/blueprint-composer/app/views/main/main.controller.js b/ui-modules/blueprint-composer/app/views/main/main.controller.js index d4204f891..fabc2b7c6 100644 --- a/ui-modules/blueprint-composer/app/views/main/main.controller.js +++ b/ui-modules/blueprint-composer/app/views/main/main.controller.js @@ -28,7 +28,7 @@ import {graphicalEditSpecState} from './graphical/edit/spec/edit.spec.controller import bottomSheetTemplate from './bottom-sheet.template.html'; import {ISSUE_LEVEL} from '../../components/util/model/issue.model'; -const layers = [ +const LAYERS = [ { id: 'locations', label: 'Locations', @@ -54,7 +54,8 @@ const layers = [ active: true } ]; -const layerCacheKey = 'blueprint-composer.layers'; + +const COMPOSER_STATE_CACHE_KEY = 'blueprint-composer.state'; export function MainController($scope, $element, $log, $state, $stateParams, brBrandInfo, blueprintService, actionService, catalogApi, applicationApi, brSnackbar, brBottomSheet, edit, yaml, composerOverrides) { $scope.$emit(HIDE_INTERSTITIAL_SPINNER_EVENT); @@ -69,20 +70,26 @@ export function MainController($scope, $element, $log, $state, $stateParams, brB vm.mode = toState; }); - vm.layers = localStorage && localStorage.getItem(layerCacheKey) !== null ? - JSON.parse(localStorage.getItem(layerCacheKey)) : - layers; - $scope.$watch('vm.layers', ()=> { - vm.layers.forEach(layer => { + $scope.composerState = localStorage && localStorage.getItem(COMPOSER_STATE_CACHE_KEY) !== null ? + JSON.parse(localStorage.getItem(COMPOSER_STATE_CACHE_KEY)) : + { + layers: LAYERS, + viewMode: 'mgmt', + }; + if ($stateParams.viewMode) $scope.composerState.viewMode = $stateParams.viewMode; + $scope.$watch('composerState.layers', ()=> { + $scope.composerState.layers.forEach(layer => { document.querySelectorAll(layer.selector).forEach(node => { angular.element(node).css('display', layer.active ? 'block' : 'none'); }); }); + }, true); + $scope.$watch('composerState', ()=> { if (localStorage) { try { - localStorage.setItem(layerCacheKey, JSON.stringify(vm.layers)); + localStorage.setItem(COMPOSER_STATE_CACHE_KEY, JSON.stringify($scope.composerState)); } catch (ex) { - $log.error('Cannot save layers preferences: ' + ex.message); + $log.error('Cannot save composer state preferences: ' + ex.message); } } }, true); @@ -136,6 +143,12 @@ export function MainController($scope, $element, $log, $state, $stateParams, brB vm.isGraphicalMode = () => { return $state.includes(graphicalState.name); }; + vm.viewMode = () => { + if (!vm.isGraphicalMode()) { + return 'yaml'; + } + return $scope.composerState.viewMode; + }; vm.getAllActions = () => { return actionService.getActions(); diff --git a/ui-modules/blueprint-composer/app/views/main/main.template.html b/ui-modules/blueprint-composer/app/views/main/main.template.html index c1c241b86..d50385df3 100644 --- a/ui-modules/blueprint-composer/app/views/main/main.template.html +++ b/ui-modules/blueprint-composer/app/views/main/main.template.html @@ -21,12 +21,17 @@
- - + +
diff --git a/ui-modules/blueprint-composer/app/views/main/main.controller.js b/ui-modules/blueprint-composer/app/views/main/main.controller.js index fabc2b7c6..b3559e4b1 100644 --- a/ui-modules/blueprint-composer/app/views/main/main.controller.js +++ b/ui-modules/blueprint-composer/app/views/main/main.controller.js @@ -65,6 +65,9 @@ export function MainController($scope, $element, $log, $state, $stateParams, brB throw 'Cannot supply both YAML source and a catalog item to edit'; } + // uncomment this to enable dev work on landscape mode + vm.experimental = { enableLandscape: true }; + vm.mode = $state.current; $scope.$on('$stateChangeSuccess', (event, toState)=>{ vm.mode = toState; diff --git a/ui-modules/blueprint-composer/app/views/main/main.template.html b/ui-modules/blueprint-composer/app/views/main/main.template.html index d50385df3..7ce123799 100644 --- a/ui-modules/blueprint-composer/app/views/main/main.template.html +++ b/ui-modules/blueprint-composer/app/views/main/main.template.html @@ -21,12 +21,17 @@