editor改为input

public/index.html

@@ -14,7 +14,7 @@
 </noscript>
 <script>
 	window.__data = {
-		token : 'eyJhbGciOiJIUzI1NiJ9.5Yqz55Cq5bOw.wixVqBeqGS2FBY_VWF1cC_Vg5Zr0vYgRTfuncjGthYY'//'$TOKEN$'
+		token : "<%= process.env.NODE_ENV === 'development' ? 'eyJhbGciOiJIUzI1NiJ9.5Yqz55Cq5bOw.wixVqBeqGS2FBY_VWF1cC_Vg5Zr0vYgRTfuncjGthYY' : '$TOKEN$' %>"
 	}
 </script>
 <div id="app"></div>

src/config.js

@@ -2,9 +2,13 @@
  * Created by rockyl on 2019-09-19.
  */
 
-//export const API_HOST = 'http://beacon.duibadev.com.cn';
-export const API_HOST = 'http://10.10.95.74:7777';
-//export const API_HOST = 'http://localhost:3002';
+export let API_HOST;
+if(process.env.NODE_ENV === 'development'){
+	//API_HOST = 'http://10.10.95.74:7777';
+	API_HOST = 'http://localhost:3002';
+}else{
+	API_HOST = 'http://beacon.duibadev.com.cn'
+}
 
 export const UPLOAD_FILE_URL = API_HOST + '/api/uploadFile';
 export const PARSE_BUNDLE_URL = API_HOST + '/api/parsePSD';

src/locales/en.json

@@ -15,6 +15,7 @@
   "Edit": "Edit",
   "ID": "ID",
   "Name": "Name",
+  "Alias": "Alias",
   "Output": "Output",
   "Code": "Code",
   "Desc": "Desc",

src/themes/light/behavior.scss

@@ -295,7 +295,7 @@ $dock-pin-width: 9px;
 						flex: 1;
 					}
 
-					.string-editor-container {
+					.string-input-container {
 						flex: 1;
 						height: 28px;
 					}

src/utils/index.js

@@ -79,7 +79,7 @@ export function saveAs(blob, fileName) {
 	}
 }
 
-export function getEditorDefaultValue(property) {
+export function getInputDefaultValue(property) {
 	return property.hasOwnProperty('default') ? property.default + '' : 'unset';
 }
 

src/views/Editor/behavior-editor/BehaviorEditor.vue

@@ -17,7 +17,7 @@
 				<properties-editor ref="properties"/>
 			</div>
 		</split-panes>
-		<meta-editor-dialog ref="metaEditorDialog" @input="onSaveMeta"/>
+		<meta-editor-dialog ref="metaInputDialog" @input="onSaveMeta"/>
 	</div>
 </template>
 

src/views/Editor/behavior-editor/MetaEditorDialog.vue

@@ -57,7 +57,7 @@
 </template>
 
 <script>
-	import ElFormItem from "./editors/form-item";
+	import ElFormItem from "./inputs/form-item";
 	import PropsEditorDialog from "./PropsEditorDialog";
 	import copy from 'copy-to-clipboard'
 

src/views/Editor/behavior-editor/PropertiesEditor.vue

@@ -7,7 +7,7 @@
 		              view-class="scrollbar-view">
 			<el-form v-model="process" size="mini" label-width="80px" label-position="left" @submit.native.prevent>
 				<component v-for="(property, key) in process.meta.props"
-				           :is="getEditor(property)"
+				           :is="getInput(property)"
 				           v-model="process.data.props[key]"
 				           :propertyName="key"
 				           :property="property"
@@ -22,27 +22,31 @@
 
 <script>
 	import {mapState} from "vuex";
-	import NumberEditor from "./editors/NumberEditor";
-	import StringEditor from "./editors/StringEditor";
-	import EnumEditor from "./editors/EnumEditor";
-	import BooleanEditor from "./editors/BooleanEditor";
-	import ColorEditor from "./editors/ColorEditor";
-	import AssetEditor from "./editors/AssetEditor";
-	import NodeSelectEditor from "./editors/NodeSelectEditor";
+	import NumberInput from "./inputs/NumberInput";
+	import StringInput from "./inputs/StringInput";
+	import EnumInput from "./inputs/EnumInput";
+	import BooleanInput from "./inputs/BooleanInput";
+	import ColorInput from "./inputs/ColorInput";
+	import AssetInput from "./inputs/AssetInput";
+	import NodeSelectInput from "./inputs/NodeSelectInput";
+	import DataInput from "./inputs/DataInput";
 
-	const editorMapping = {
-		number: 'NumberEditor',
-		string: 'StringEditor',
-		enum: 'EnumEditor',
-		boolean: 'BooleanEditor',
-		color: 'ColorEditor',
-		asset: 'AssetEditor',
-		node: 'NodeSelectEditor',
+	const inputMapping = {
+		number: 'NumberInput',
+		string: 'StringInput',
+		enum: 'EnumInput',
+		boolean: 'BooleanInput',
+		color: 'ColorInput',
+		asset: 'AssetInput',
+		node: 'NodeSelectInput',
+		data: 'DataInput',
 	};
 
 	export default {
-		name: "PropertiesEditor",
-		components: {NodeSelectEditor, AssetEditor, ColorEditor, BooleanEditor, EnumEditor, NumberEditor, StringEditor},
+		name: "PropertiesInput",
+		components: {
+			DataInput,
+			NodeSelectInput, AssetInput, ColorInput, BooleanInput, EnumInput, NumberInput, StringInput},
 		data() {
 			return {
 				process: null,
@@ -57,8 +61,8 @@
 			edit(process) {
 				this.process = process;
 			},
-			getEditor(property) {
-				return editorMapping[property.type];
+			getInput(property) {
+				return inputMapping[property.type];
 			},
 		}
 	}

src/views/Editor/behavior-editor/inputs/AssetInput.vue

+<template>
+	<input-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName">
+		<el-select :disabled="!editable" :value="editValue" filterable @input="onInput" :placeholder="property.default" class="el-select">
+			<el-option
+				v-for="(item, key) in assets"
+				:key="key"
+				:label="item.name"
+				:value="item.uuid">
+				<span>{{item.name}}</span>
+			</el-option>
+		</el-select>
+	</input-wrapper>
+</template>
+
+<script>
+	import {mapMutations} from 'vuex'
+	import InputWrapper from "./InputWrapper";
+
+	export default {
+		name: "AssetInput",
+		components: {InputWrapper,},
+		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		computed: {
+			editValue() {
+				return this.value === undefined ? this.property.default : this.value;
+			},
+			...mapMutations({
+				assets(){
+					return this.$store.state.behavior.data.assets;
+				}
+			}),
+		},
+		methods: {
+			onInput(v, oldValue){
+				if(v !== this.value){
+					this.$emit('input', v, this.container, this.propertyName, oldValue);
+				}
+			}
+		},
+	}
+</script>
+
+<style scoped>
+
+</style>

src/views/Editor/behavior-editor/inputs/BooleanInput.vue

+<template>
+	<input-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName">
+		<el-switch :disabled="!editable" :value="editValue" @input="onInput"
+		           class="picker"></el-switch>
+	</input-wrapper>
+</template>
+
+<script>
+	import InputWrapper from "./InputWrapper";
+
+	export default {
+		name: "BooleanInput",
+		components: {InputWrapper},
+		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		data() {
+			return {}
+		},
+		computed: {
+			editValue() {
+				return this.value === undefined ? this.property.default : this.value;
+			},
+		},
+		methods: {
+			onInput(v) {
+				if (v !== this.value) {
+					this.$emit('input', v, this.container, this.propertyName, this.value);
+				}
+			}
+		},
+	}
+</script>
+
+<style scoped>
+	.picker {
+		float: right;
+		margin-top: 4px;
+	}
+</style>

src/views/Editor/behavior-editor/inputs/ColorInput.vue

+<template>
+	<input-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName" class="color-input-container">
+		<el-color-picker
+			:disabled="!editable"
+			class="picker"
+			:value="editValue"
+			@input="onInput"
+			show-alpha
+			:predefine="predefineColors">
+		</el-color-picker>
+	</input-wrapper>
+</template>
+
+<script>
+	import InputWrapper from "./InputWrapper";
+
+	export default {
+		name: "ColorInput",
+		components: {InputWrapper,},
+		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		data() {
+			return {
+				predefineColors: [
+					'#ff4500',
+					'#ff8c00',
+					'#ffd700',
+					'#90ee90',
+					'#00ced1',
+					'#1e90ff',
+					'#c71585',
+					'rgba(255, 69, 0, 0.68)',
+					'rgb(255, 120, 0)',
+					'hsv(51, 100, 98)',
+					'hsva(120, 40, 94, 0.5)',
+					'hsl(181, 100%, 37%)',
+					'hsla(209, 100%, 56%, 0.73)',
+					'#c7158577'
+				]
+			}
+		},
+		computed: {
+			editValue() {
+				return this.value === undefined ? this.property.default : this.value;
+			},
+		},
+		methods: {
+			onInput(v) {
+				if (v !== this.value) {
+					this.$emit('input', v, this.container, this.propertyName, this.value);
+				}
+			}
+		},
+	}
+</script>
+
+<style scoped>
+	.color-input-container {
+		height: 29px;
+		overflow: hidden;
+	}
+
+	.picker {
+		float: right;
+	}
+</style>

src/views/Editor/behavior-editor/inputs/DataInput.vue

+<template>
+	<input-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName">
+		<el-switch :disabled="!editable" :value="editValue" @input="onInput"
+		           class="picker"></el-switch>
+	</input-wrapper>
+</template>
+
+<script>
+	import InputWrapper from "./InputWrapper";
+
+	export default {
+		name: "DataInput",
+		components: {InputWrapper},
+		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		data() {
+			return {}
+		},
+		computed: {
+			editValue() {
+				return this.value === undefined ? this.property.default : this.value;
+			},
+		},
+		methods: {
+			onInput(v) {
+				if (v !== this.value) {
+					this.$emit('input', v, this.container, this.propertyName, this.value);
+				}
+			}
+		},
+	}
+</script>
+
+<style scoped>
+	.picker {
+		float: right;
+		margin-top: 4px;
+	}
+</style>

src/views/Editor/behavior-editor/inputs/EnumInput.vue

+<template>
+	<input-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName">
+		<el-select :disabled="!editable" :value="editValue" @input="onInput" :placeholder="property.default" class="el-select">
+			<el-option
+				v-for="(item, key) in property.enum"
+				:key="item"
+				:label="item"
+				:value="item">
+				<span>{{item}}</span>
+				<span class="comment"></span>
+			</el-option>
+		</el-select>
+	</input-wrapper>
+</template>
+
+<script>
+	import InputWrapper from "./InputWrapper";
+
+	export default {
+		name: "EnumInput",
+		components: {InputWrapper,},
+		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		computed: {
+			editValue() {
+				return this.value === undefined ? this.property.default : this.value;
+			},
+		},
+		methods: {
+			onInput(v, oldValue){
+				if(v !== this.value){
+					this.$emit('input', v, this.container, this.propertyName, oldValue);
+				}
+			}
+		},
+	}
+</script>
+
+<style scoped>
+
+</style>

src/views/Editor/behavior-editor/inputs/InputWrapper.vue

+<template>
+	<el-form-item class="input-wrapper" :label="property.alias || propertyName" content-float="right"
+	              :content-width="contentWidth" :labelOffsetTop="labelOffsetTop">
+		<template v-if="linked">
+			<span class="linked">Linked to parent</span>
+		</template>
+		<template v-else>
+			<slot></slot>
+		</template>
+		<el-popover
+			trigger="click"
+			:disabled="!editable"
+		>
+			<div class="linked-prop-popover">
+				<div>
+					<span>{{$t('Link to parent')}}: </span>
+					<el-switch :value="linked" @input="onChange"/>
+				</div>
+				<div v-if="linked">
+					<el-input size="mini" v-model="value.alias" :placeholder="$t('Alias')"/>
+				</div>
+			</div>
+			<el-link style="padding: 3px;" slot="reference" icon="el-icon-link" :underline="false"
+			         :type="linked ? 'success' : 'default'" :disabled="!editable"/>
+		</el-popover>
+	</el-form-item>
+</template>
+
+<script>
+	import camelcase from 'camelcase'
+	import ElFormItem from "./form-item";
+
+	export default {
+		name: "InputWrapper",
+		components: {ElFormItem},
+		props: {
+			property: Object,
+			value: {},
+			container: {},
+			propertyName: String,
+			editable: Boolean,
+			contentWidth: {
+				type: String,
+				default: '65%',
+			},
+			labelOffsetTop: {
+				type: Number,
+				default: 0,
+			},
+		},
+		data(){
+			return {
+
+			}
+		},
+		watch: {
+			value(v){
+
+			}
+		},
+		computed: {
+			linked() {
+				return typeof this.value === 'object'
+			}
+		},
+		methods: {
+			onChange(v) {
+				if (v) {
+					this.$set(this.container.data.props, this.propertyName, {
+						alias: undefined,
+					});
+				} else {
+					this.$delete(this.container.data.props, this.propertyName);
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/Editor/behavior-editor/inputs/NodeSelectInput.vue

+<template>
+	<input-wrapper :editable="editable" :value="value" :container="container" :property="property"
+	                :propertyName="propertyName">
+		<div style="display: flex;flex: 1;">
+			<el-popover
+				placement="top"
+				popper-class="node-select-popover"
+				class="node-select-container"
+				trigger="manual"
+				width="400"
+				v-model="popoverVisible"
+			>
+				<div>
+					<el-scrollbar class="tree-scrollbar" wrap-class="wrap-x-hidden">
+						<el-tree
+							:data="behavior_views"
+							:props="defaultProps"
+							:expand-on-click-node="false"
+							draggable
+							highlight-current
+							:default-expand-all="true"
+							@node-click="handleNodeClick"
+							empty-text=""
+						>
+							<div slot-scope="{ node, data }" class="tree-node">
+								{{data.name}}
+							</div>
+						</el-tree>
+					</el-scrollbar>
+					<div class="bottom-bar">
+						<div></div>
+						<el-button-group>
+							<el-button @click="onCancel" plain>Cancel</el-button>
+							<el-button @click="onConfirm" type="primary" plain>Confirm</el-button>
+						</el-button-group>
+					</div>
+				</div>
+				<el-input clearable slot="reference" v-model="editValue" @change="onInput" placeholder="unset"
+				          :readonly="!editable">
+					<template slot="prepend">node://</template>
+				</el-input>
+			</el-popover>
+			<el-button-group>
+				<el-button :icon="editButtonIcon" @click="onClickEdit" :disabled="!editable"></el-button>
+				<el-button icon="el-icon-delete" @click="onClickClean" :disabled="!editable"></el-button>
+			</el-button-group>
+		</div>
+	</input-wrapper>
+</template>
+
+<script>
+	import {mapGetters} from "vuex";
+	import InputWrapper from "./InputWrapper";
+
+	const nodeScheme = 'node://';
+
+	export default {
+		name: "NodeSelectInput",
+		components: {InputWrapper,},
+		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		data() {
+			return {
+				editValueOrigin: this.value,
+				popoverVisible: false,
+				defaultProps: {
+					children: 'children',
+					label: 'name'
+				},
+			}
+		},
+		watch: {
+			value(v) {
+				this.editValueOrigin = v;
+			}
+		},
+		computed: {
+			...mapGetters([
+				'behavior_views'
+			]),
+			editValue: {
+				get() {
+					return this.editValueOrigin && typeof this.editValueOrigin !== 'object'? this.editValueOrigin.replace(nodeScheme, '') : '';
+				},
+				set(v) {
+					this.editValueOrigin = v;
+				},
+			},
+			editButtonIcon() {
+				return this.popoverVisible ? 'el-icon-check' : 'el-icon-edit';
+			},
+		},
+		methods: {
+			onInput(v, oldValue) {
+				if (v !== this.value) {
+					this.$emit('input', v ? nodeScheme + v : undefined, this.container, this.propertyName, oldValue);
+				}
+			},
+			onChange() {
+				this.$emit('input', nodeScheme + this.selectedNodeUUID, this.container, this.propertyName, this.value);
+			},
+			onClickEdit() {
+				this.popoverVisible = !this.popoverVisible;
+			},
+			onClickClean() {
+				this.$emit('input', undefined, this.container, this.propertyName, this.value);
+			},
+			onConfirm() {
+				this.editValue = this.selectedNodeUUID;
+				this.onChange();
+				this.popoverVisible = false;
+			},
+			onCancel() {
+				this.$emit('cancel');
+				this.popoverVisible = false;
+			},
+			handleNodeClick(data, node) {
+				this.selectedNodeUUID = data.uuid;
+			},
+		},
+	}
+</script>
+
+<style scoped>
+
+</style>

src/views/Editor/behavior-editor/inputs/NumberInput.vue

+<template>
+	<input-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName">
+		<el-input-number :disabled="!editable" :value="editValue" @input="onInput" controls-position="right"
+		                 :placeholder="defaultValue"></el-input-number>
+	</input-wrapper>
+</template>
+
+<script>
+	import InputWrapper from "./InputWrapper";
+	import {getInputDefaultValue} from "../../../../utils";
+
+	export default {
+		name: "NumberInput",
+		components: {InputWrapper,},
+		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		computed: {
+			editValue() {
+				return this.value === undefined ? this.property.default : this.value;
+			},
+			defaultValue(){
+				return getInputDefaultValue(this.property);
+			},
+		},
+		methods: {
+			onInput(v) {
+				if(v !== this.value){
+					this.$emit('input', v, this.container, this.propertyName, this.value);
+				}
+			}
+		},
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/Editor/behavior-editor/inputs/StringInput.vue

+<template>
+	<input-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName">
+		<div style="display: flex;flex: 1;">
+			<el-popover
+				placement="top"
+				popper-class="input-area-popover"
+				class="string-input-container"
+				trigger="manual"
+				width="400"
+				v-model="popoverVisible"
+				:disabled="!editable"
+			>
+				<div>
+					<el-input
+						type="textarea"
+						v-model="popoverEditValue"
+						:placeholder="defaultValue"
+						:rows="6"
+					>
+					</el-input>
+					<div class="bottom-bar">
+						<el-button @click="onClean" type="danger" plain>Clean</el-button>
+						<el-button-group>
+							<el-button @click="onCancel" plain>Cancel</el-button>
+							<el-button @click="onConfirm" type="primary" plain>Confirm</el-button>
+						</el-button-group>
+					</div>
+				</div>
+				<el-input clearable slot="reference" :value="editValue" @input="onInput" @change="onChange" :readonly="!editable"
+				          :placeholder="defaultValue"/>
+			</el-popover>
+			<el-button-group>
+				<el-button :icon="editButtonIcon" @click="onClickEdit" :disabled="!editable"></el-button>
+				<el-button icon="el-icon-delete" @click="onClickClean" :disabled="!editable"></el-button>
+			</el-button-group>
+		</div>
+	</input-wrapper>
+</template>
+
+<script>
+	import InputWrapper from "./InputWrapper";
+	import {getInputDefaultValue} from "../../../../utils";
+
+	export default {
+		name: "StringInput",
+		components: {InputWrapper,},
+		props: ['value', 'container', 'property', 'propertyName', 'editable'],
+		data() {
+			return {
+				editValueOrigin: this.value,
+				popoverEditValue: this.value,
+				popoverVisible: false,
+			}
+		},
+		computed: {
+			editValue() {
+				return this.editable ? this.editValueOrigin : '';
+			},
+			editButtonIcon() {
+				return this.popoverVisible ? 'el-icon-check' : 'el-icon-edit';
+			},
+			defaultValue() {
+				return getInputDefaultValue(this.property);
+			},
+		},
+		watch: {
+			value(v) {
+				this.editValueOrigin = v;
+			},
+			popoverVisible(v) {
+				if (v) {
+					this.popoverEditValue = this.editValue;
+				}
+			}
+		},
+		methods: {
+			onClickEdit() {
+				this.popoverVisible = !this.popoverVisible;
+			},
+			onClickClean() {
+				this.$emit('input', undefined, this.container, this.propertyName, this.value);
+			},
+			onInput(v) {
+				this.editValueOrigin = v;
+			},
+			onChange() {
+				this.$emit('input', this.editValue, this.container, this.propertyName, this.value);
+			},
+			onConfirm() {
+				this.editValueOrigin = this.popoverEditValue;
+				this.onChange();
+				this.popoverVisible = false;
+			},
+			onCancel() {
+				this.$emit('cancel');
+				this.popoverVisible = false;
+			},
+			onClean() {
+				this.popoverEditValue = '';
+			},
+		},
+	}
+</script>
+
+<style scoped>
+	.bottom-bar {
+		margin-top: 5px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+</style>