From 90cc23ed2b0234e35c2ac86391923c64dca5c53e Mon Sep 17 00:00:00 2001 From: Laurence Maultsby Date: Wed, 11 Jan 2017 13:29:13 -0500 Subject: [PATCH] RIFT-15154: Config parameter map component, intial pass. Signed-off-by: Laurence Maultsby --- .../core/modules/routes/inactivity.js | 2 +- .../ConfigPrimitiveParameters.js | 4 +- .../src/components/EditConfigParameterMap.js | 685 ++++++++++++++++++ .../src/src/styles/CanvasPanelTray.scss | 11 +- 4 files changed, 696 insertions(+), 6 deletions(-) create mode 100644 skyquake/plugins/composer/src/src/components/EditConfigParameterMap.js diff --git a/skyquake/framework/core/modules/routes/inactivity.js b/skyquake/framework/core/modules/routes/inactivity.js index 7c3c4408b..a90258d63 100644 --- a/skyquake/framework/core/modules/routes/inactivity.js +++ b/skyquake/framework/core/modules/routes/inactivity.js @@ -1,6 +1,6 @@ /* - * + * * Copyright 2016 RIFT.IO Inc * * Licensed under the Apache License, Version 2.0 (the "License"); diff --git a/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js b/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js index 362106175..848f0b4e3 100644 --- a/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js +++ b/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js @@ -49,7 +49,7 @@ import imgAdd from '../../../../node_modules/open-iconic/svg/plus.svg' import imgConnection from '../../../../node_modules/open-iconic/svg/random.svg' import imgClassifier from '../../../../node_modules/open-iconic/svg/spreadsheet.svg' import imgReorder from '../../../../node_modules/open-iconic/svg/menu.svg' -import EditDescriptorModelProperties from '../EditDescriptorModelProperties' +import EditConfigParameterMap from '../EditConfigParameterMap' function configParameterMapMap(ap, i) { const context = this; @@ -214,7 +214,7 @@ const ConfigPrimitiveParameters = React.createClass({ { containers.map(function(c, i) { if(c.className == 'ConfigParameterMap') { - return + return } }) } diff --git a/skyquake/plugins/composer/src/src/components/EditConfigParameterMap.js b/skyquake/plugins/composer/src/src/components/EditConfigParameterMap.js new file mode 100644 index 000000000..1add58c4d --- /dev/null +++ b/skyquake/plugins/composer/src/src/components/EditConfigParameterMap.js @@ -0,0 +1,685 @@ +/* + * + * Copyright 2016 RIFT.IO Inc + * + * Licensed 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. + * + */ +/** + * Created by onvelocity on 1/18/16. + * + * This class generates the form fields used to edit the CONFD JSON model. + */ +'use strict'; + +import _ from 'lodash' +import utils from '../libraries/utils' +import React from 'react' +import ClassNames from 'classnames' +import changeCase from 'change-case' +import toggle from '../libraries/ToggleElementHandler' +import Button from './Button' +import Property from '../libraries/model/DescriptorModelMetaProperty' +import ComposerAppActions from '../actions/ComposerAppActions' +import CatalogItemsActions from '../actions/CatalogItemsActions' +import DESCRIPTOR_MODEL_FIELDS from '../libraries/model/DescriptorModelFields' +import DescriptorModelFactory from '../libraries/model/DescriptorModelFactory' +import DescriptorModelMetaFactory from '../libraries/model/DescriptorModelMetaFactory' +import SelectionManager from '../libraries/SelectionManager' +import DeletionManager from '../libraries/DeletionManager' +import DescriptorModelIconFactory from '../libraries/model/IconFactory' +import getEventPath from '../libraries/getEventPath' +import CatalogDataStore from '../stores/CatalogDataStore' + +import imgAdd from '../../../node_modules/open-iconic/svg/plus.svg' +import imgRemove from '../../../node_modules/open-iconic/svg/trash.svg' + +import '../styles/EditDescriptorModelProperties.scss' + + + +function getDescriptorMetaBasicForType(type) { + const basicPropertiesFilter = d => _.includes(DESCRIPTOR_MODEL_FIELDS[type], d.name); + return DescriptorModelMetaFactory.getModelMetaForType(type, basicPropertiesFilter) || {properties: []}; +} + +function getDescriptorMetaAdvancedForType(type) { + const advPropertiesFilter = d => !_.includes(DESCRIPTOR_MODEL_FIELDS[type], d.name); + return DescriptorModelMetaFactory.getModelMetaForType(type, advPropertiesFilter) || {properties: []}; +} + +function getTitle(model = {}) { + if (typeof model['short-name'] === 'string' && model['short-name']) { + return model['short-name']; + } + if (typeof model.name === 'string' && model.name) { + return model.name; + } + if (model.uiState && typeof model.uiState.displayName === 'string' && model.uiState.displayName) { + return model.uiState.displayName + } + if (typeof model.id === 'string') { + return model.id; + } +} +function startEditing() { + DeletionManager.removeEventListeners(); + } + + function endEditing() { + DeletionManager.addEventListeners(); + } + + function onClickSelectItem(property, path, value, event) { + event.preventDefault(); + const root = this.getRoot(); + if (SelectionManager.select(value)) { + CatalogItemsActions.catalogItemMetaDataChanged(root.model); + } + } + + function onFocusPropertyFormInputElement(property, path, value, event) { + + event.preventDefault(); + startEditing(); + + function removeIsFocusedClass(event) { + event.target.removeEventListener('blur', removeIsFocusedClass); + Array.from(document.querySelectorAll('.-is-focused')).forEach(d => d.classList.remove('-is-focused')); + } + + removeIsFocusedClass(event); + + const propertyWrapper = getEventPath(event).reduce((parent, element) => { + if (parent) { + return parent; + } + if (!element.classList) { + return false; + } + if (element.classList.contains('property')) { + return element; + } + }, false); + + if (propertyWrapper) { + propertyWrapper.classList.add('-is-focused'); + event.target.addEventListener('blur', removeIsFocusedClass); + } + + } + + function buildAddPropertyAction(container, property, path) { + function onClickAddProperty(property, path, event) { + event.preventDefault(); + //SelectionManager.resume(); + const create = Property.getContainerCreateMethod(property, this); + if (create) { + const model = null; + create(model, path, property); + } else { + const name = path.join('.'); + const value = Property.createModelInstance(property); + utils.assignPathValue(this.model, name, value); + } + CatalogItemsActions.catalogItemDescriptorChanged(this.getRoot()); + } + return ( +