Skip to content

Z
zeroing-editor
Commit 0ae1e8b9 authored by rockyl's avatar rockyl
Browse files
Options

editor改为input 

增加data属性格式
parent 70194255
Hide whitespace changes
Inline Side-by-side
Showing with 83 additions and 571 deletions
src/locales/en.json
View file @ 0ae1e8b9
...@@ -125,5 +125,10 @@ ...@@ -125,5 +125,10 @@
"Inspector": "Inspector", "Inspector": "Inspector",
"Playground": "Playground", "Playground": "Playground",
"Views": "Views" "Views": "Views"
},
"dataTypes": {
"static": "Static",
"arguments": "Arguments",
"data-center": "DataCenter"
} }
} }
\ No newline at end of file
src/themes/light/behavior.scss
View file @ 0ae1e8b9
...@@ -161,6 +161,10 @@ $dock-pin-width: 9px; ...@@ -161,6 +161,10 @@ $dock-pin-width: 9px;
.string-value { .string-value {
text-align: right; text-align: right;
.tag{
color: $--color-success;
}
} }
.color-value { .color-value {
...@@ -170,11 +174,6 @@ $dock-pin-width: 9px; ...@@ -170,11 +174,6 @@ $dock-pin-width: 9px;
float: right; float: right;
border: 1px solid $--border-color-base; border: 1px solid $--border-color-base;
} }
.linked-icon {
float: right;
color: $--color-success;
}
} }
} }
......
src/views/Editor/behavior-editor/BehaviorEditor.vue
View file @ 0ae1e8b9
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<properties-editor ref="properties"/> <properties-editor ref="properties"/>
</div> </div>
</split-panes> </split-panes>
<meta-editor-dialog ref="metaInputDialog" @input="onSaveMeta"/> <meta-editor-dialog ref="metaEditorDialog" @input="onSaveMeta"/>
</div> </div>
</template> </template>
......
src/views/Editor/behavior-editor/Board/ProcessNode.vue
View file @ 0ae1e8b9
...@@ -15,8 +15,16 @@ ...@@ -15,8 +15,16 @@
<div v-else class="field-item" v-for="(param, key, index) in meta.props" :key="index"> <div v-else class="field-item" v-for="(param, key, index) in meta.props" :key="index">
<span class="key">{{param.alias || key}}</span>: <span class="key">{{param.alias || key}}</span>:
<span class="linked-value" v-if="typeof data.props[key] === 'object'"> <span class="linked-value" v-if="typeof data.props[key] === 'object'">
<span>{{data.props[key].alias || ''}}</span> <span class="string-value">
<i class="el-icon-link linked-icon"></i> <template v-if="data.props[key].type === 'link'">
{{data.props[key].alias || ''}}
<i class="el-icon-link tag"></i>
</template>
<template v-else>
{{data.props[key].value || ''}}
<i class="tag">{{data.props[key].type[0].toUpperCase()}}</i>
</template>
</span>
</span> </span>
<template v-else> <template v-else>
<div v-if="param.type === 'color'"> <div v-if="param.type === 'color'">
...@@ -31,9 +39,9 @@ ...@@ -31,9 +39,9 @@
</div> </div>
<div ref="outputDock" class="dock output"> <div ref="outputDock" class="dock output">
<dock-pin v-for="(pin, key, index) in meta.output" :key="index" :data="pin" <dock-pin v-for="(pin, key, index) in meta.output" :key="index" :data="pin"
@mouseenter="onPinHover" @mouseenter="onPinHover"
@mouseleave="onPinLeave" @mouseleave="onPinLeave"
@mousedown="onPinDown" @mousedown="onPinDown"
></dock-pin> ></dock-pin>
</div> </div>
</div> </div>
...@@ -75,7 +83,7 @@ ...@@ -75,7 +83,7 @@
return this.process.data; return this.process.data;
}, },
...mapState({ ...mapState({
drawState: state=>state.behavior.drawState drawState: state => state.behavior.drawState
}), }),
}, },
watch: { watch: {
...@@ -233,7 +241,7 @@ ...@@ -233,7 +241,7 @@
} }
this.$emit('meta-modified', this.data, this.meta); this.$emit('meta-modified', this.data, this.meta);
this.$nextTick(()=>{ this.$nextTick(() => {
this.updateDockPointPos(); this.updateDockPointPos();
}); });
} }
......
src/views/Editor/behavior-editor/PropsEditorDialog.vue
View file @ 0ae1e8b9
...@@ -96,6 +96,7 @@ ...@@ -96,6 +96,7 @@
'color', 'color',
'asset', 'asset',
'node', 'node',
'data',
], ],
} }
}, },
......
src/views/Editor/behavior-editor/editors/AssetEditor.vue deleted 100644 → 0
View file @ 70194255
<template>
<editor-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>
</editor-wrapper>
</template>
<script>
import {mapMutations} from 'vuex'
import EditorWrapper from "./EditorWrapper";
export default {
name: "AssetEditor",
components: {EditorWrapper,},
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/editors/BooleanEditor.vue deleted 100644 → 0
View file @ 70194255
<template>
<editor-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName">
<el-switch :disabled="!editable" :value="editValue" @input="onInput"
class="picker"></el-switch>
</editor-wrapper>
</template>
<script>
import EditorWrapper from "./EditorWrapper";
export default {
name: "BooleanEditor",
components: {EditorWrapper},
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/editors/ColorEditor.vue deleted 100644 → 0
View file @ 70194255
<template>
<editor-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName" class="color-editor-container">
<el-color-picker
:disabled="!editable"
class="picker"
:value="editValue"
@input="onInput"
show-alpha
:predefine="predefineColors">
</el-color-picker>
</editor-wrapper>
</template>
<script>
import EditorWrapper from "./EditorWrapper";
export default {
name: "ColorEditor",
components: {EditorWrapper,},
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-editor-container {
height: 29px;
overflow: hidden;
}
.picker {
float: right;
}
</style>
src/views/Editor/behavior-editor/editors/EditorWrapper.vue deleted 100644 → 0
View file @ 70194255
<template>
<el-form-item class="editor-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"/>
</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: "EditorWrapper",
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/editors/EnumEditor.vue deleted 100644 → 0
View file @ 70194255
<template>
<editor-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>
</editor-wrapper>
</template>
<script>
import EditorWrapper from "./EditorWrapper";
export default {
name: "EnumEditor",
components: {EditorWrapper,},
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/editors/NodeSelectEditor.vue deleted 100644 → 0
View file @ 70194255
<template>
<editor-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>
</editor-wrapper>
</template>
<script>
import {mapGetters} from "vuex";
import EditorWrapper from "./EditorWrapper";
const nodeScheme = 'node://';
export default {
name: "NodeSelectEditor",
components: {EditorWrapper,},
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/editors/NumberEditor.vue deleted 100644 → 0
View file @ 70194255
<template>
<editor-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>
</editor-wrapper>
</template>
<script>
import EditorWrapper from "./EditorWrapper";
import {getEditorDefaultValue} from "../../../../utils";
export default {
name: "NumberEditor",
components: {EditorWrapper,},
props: ['value', 'container', 'property', 'propertyName', 'editable'],
computed: {
editValue() {
return this.value === undefined ? this.property.default : this.value;
},
defaultValue(){
return getEditorDefaultValue(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/editors/StringEditor.vue deleted 100644 → 0
View file @ 70194255
<template>
<editor-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-editor-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>
</editor-wrapper>
</template>
<script>
import EditorWrapper from "./EditorWrapper";
import {getEditorDefaultValue} from "../../../../utils";
export default {
name: "StringEditor",
components: {EditorWrapper,},
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 getEditorDefaultValue(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>
src/views/Editor/behavior-editor/inputs/DataInput.vue
View file @ 0ae1e8b9
<template> <template>
<input-wrapper :editable="editable" :value="value" :container="container" :property="property" :propertyName="propertyName"> <input-wrapper :editable="editable" :value="value" :container="container" :property="property"
<el-switch :disabled="!editable" :value="editValue" @input="onInput" :propertyName="propertyName">
class="picker"></el-switch> <div style="display: flex;flex: 1;">
<el-popover
placement="top"
popper-class="input-area-popover"
class="string-input-container"
trigger="manual"
v-model="popoverVisible"
:disabled="!editable"
>
<el-radio-group v-model="editValue.type" size="mini" @change="onChange" :disabled="!editable">
<el-radio-button v-for="(item, key) in dataTypes" :label="key">{{item}}</el-radio-button>
</el-radio-group>
<el-input clearable slot="reference" :value="editValue.value" @input="onInput" @change="onChange"
:readonly="!editable"
:placeholder="defaultValue"/>
</el-popover>
<el-button-group>
<el-button @click="onClickEdit" :disabled="!editable">{{editValue.type[0].toUpperCase()}}</el-button>
<el-button icon="el-icon-delete" @click="onClickClean" :disabled="!editable"></el-button>
</el-button-group>
</div>
</input-wrapper> </input-wrapper>
</template> </template>
<script> <script>
import InputWrapper from "./InputWrapper"; import InputWrapper from "./InputWrapper";
import {getInputDefaultValue} from "../../../../utils";
export default { export default {
name: "DataInput", name: "DataInput",
components: {InputWrapper}, components: {InputWrapper,},
props: ['value', 'container', 'property', 'propertyName', 'editable'], props: ['value', 'container', 'property', 'propertyName', 'editable'],
data() { data() {
return {} let dataTypes = this.$t('dataTypes');
return {
editValue: this.value || {type: 'static'},
popoverEditValue: this.value,
popoverVisible: false,
dataTypes,
}
}, },
computed: { computed: {
editValue() { defaultValue() {
return this.value === undefined ? this.property.default : this.value; return getInputDefaultValue(this.property);
},
},
watch: {
value(v) {
this.editValue = v || {type: 'static'};
}, },
}, },
methods: { methods: {
onClickEdit() {
this.popoverVisible = !this.popoverVisible;
},
onClickClean() {
this.$emit('input', undefined, this.container, this.propertyName, this.value);
},
onInput(v) { onInput(v) {
if (v !== this.value) { this.$set(this.editValue, 'value', v);
this.$emit('input', v, this.container, this.propertyName, this.value); },
} onChange() {
} this.$emit('input', this.editValue, this.container, this.propertyName, this.value);
},
}, },
} }
</script> </script>
<style scoped> <style scoped>
.picker { .bottom-bar {
float: right; margin-top: 5px;
margin-top: 4px; display: flex;
align-items: center;
justify-content: space-between;
} }
</style> </style>
src/views/Editor/behavior-editor/inputs/InputWrapper.vue
View file @ 0ae1e8b9
...@@ -60,13 +60,14 @@ ...@@ -60,13 +60,14 @@
}, },
computed: { computed: {
linked() { linked() {
return typeof this.value === 'object' return typeof this.value === 'object' && this.value.type === 'link'
} }
}, },
methods: { methods: {
onChange(v) { onChange(v) {
if (v) { if (v) {
this.$set(this.container.data.props, this.propertyName, { this.$set(this.container.data.props, this.propertyName, {
type: 'link',
alias: undefined, alias: undefined,
}); });
} else { } else {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment