From 5c19aab68c5e87ef829cc37fbd2d1c7235fba61f Mon Sep 17 00:00:00 2001
From: ival <610568032@qq.com>
Date: Fri, 9 Apr 2021 16:50:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=20=E5=88=9B=E5=BB=BAiscs?=
 =?UTF-8?q?=E5=88=9B=E5=BB=BA=E5=85=83=E7=B4=A0=E7=9A=84=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/iscs_new/core/form/builderFactory.js      |  38 ----
 src/iscs_new/core/form/elementConst.js        |  29 +--
 src/iscs_new/core/form/formBuilder.js         |  67 +++---
 src/iscs_new/map.js                           |  12 +-
 src/iscs_new/plugins/shapeBuilder/entry.vue   |  36 +++-
 src/iscs_new/plugins/shapeBuilder/index.js    |  20 +-
 .../plugins/shapeContextMenu/entry.vue        | 121 +++++++++++
 .../plugins/shapeContextMenu/index.js         |  79 +++++++
 .../plugins/shapeContextMenu/menu-item.vue    | 202 ++++++++++++++++++
 src/iscs_new/plugins/shapeProperty/entry.vue  |  15 +-
 src/iscs_new/plugins/shapeProperty/index.js   |  16 +-
 src/iscs_new/selectingHandle.js               |   6 +-
 src/iscs_new/utils/events.js                  |   2 +-
 src/views/iscs_new/components/dataForm.vue    |  28 +--
 src/views/iscs_new/iscsDesign/index.vue       |   4 +-
 src/views/iscs_new/iscsDraw/index.vue         |  12 +-
 src/views/iscs_new/iscsDraw/iscsCanvas.vue    |   6 +-
 src/views/test/index.vue                      |   4 +-
 18 files changed, 536 insertions(+), 161 deletions(-)
 delete mode 100644 src/iscs_new/core/form/builderFactory.js
 create mode 100644 src/iscs_new/plugins/shapeContextMenu/entry.vue
 create mode 100644 src/iscs_new/plugins/shapeContextMenu/index.js
 create mode 100644 src/iscs_new/plugins/shapeContextMenu/menu-item.vue

diff --git a/src/iscs_new/core/form/builderFactory.js b/src/iscs_new/core/form/builderFactory.js
deleted file mode 100644
index 37dd19cad..000000000
--- a/src/iscs_new/core/form/builderFactory.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import {elementConst} from './elementConst';
-import form2Base from './form2Base';
-class BuilderFactory {
-    constructor() {
-        this.formList = [];
-    }
-    getFormList() {
-        const elementList = Object.values(elementConst);
-        elementList.forEach(element=>{
-            const temp = {};
-            temp.code = element.code;
-            temp.name = element.name;
-            temp.formGroup = [];
-            temp.model = {};
-            temp.model['name'] = '<名称>';
-            // 添加通用配置
-            temp.model['base'] = {};
-            form2Base.forEach(each=>{
-                temp.model['base'][each.prop] = each.value;
-            });
-            temp.formGroup.push({name:'通用配置', code:'base', styleList:form2Base});
-
-            const list = [{name:'绘图配置', type:'shape'}, {name:'样式配置', type:'style'}];
-            list.forEach(eachType=>{
-                temp.model[eachType.type] = {};
-                const eachList = element.formList[eachType.type];
-                eachList.forEach(each=>{
-                    temp.model[eachType.type][each.prop] = each.value;
-                });
-                temp.formGroup.push({name:eachType.name, code:eachType.type, styleList:eachList});
-            });
-            this.formList.push(temp);
-        });
-        return this.formList;
-    }
-}
-
-export default BuilderFactory;
diff --git a/src/iscs_new/core/form/elementConst.js b/src/iscs_new/core/form/elementConst.js
index a90884cf8..19c5e1c58 100644
--- a/src/iscs_new/core/form/elementConst.js
+++ b/src/iscs_new/core/form/elementConst.js
@@ -5,9 +5,9 @@ import form2TextStyle from './form2TextStyle';
 import types from './types';
 const graphicType = Object.fromEntries(Object.keys(graphic).map(type => [type, type]));
 
-export const elementConst = {
+const elementConst = {
     [graphicType.Line]: {
-        code: graphicType.Line,
+        type: graphicType.Line,
         name:'线段',
         formList: {
             style: [
@@ -66,7 +66,7 @@ export const elementConst = {
         }
     },
     [graphicType.Text]: {
-        code: graphicType.Text,
+        type: graphicType.Text,
         name:'文字',
         formList: {
             style: [
@@ -77,7 +77,7 @@ export const elementConst = {
         }
     },
     [graphicType.Rect]: {
-        code: graphicType.Rect,
+        type: graphicType.Rect,
         name:'矩形',
         formList: {
             style: [
@@ -158,7 +158,7 @@ export const elementConst = {
         }
     },
     [graphicType.Circle]: {
-        code: graphicType.Circle,
+        type: graphicType.Circle,
         name:'圆形',
         formList:{
             style: [
@@ -214,7 +214,7 @@ export const elementConst = {
         }
     },
     [graphicType.Polygon]: {
-        code: graphicType.Polygon,
+        type: graphicType.Polygon,
         name:'多边形',
         formList: {
             style: [
@@ -260,7 +260,7 @@ export const elementConst = {
         }
     },
     [graphicType.Arrow]: {
-        code: graphicType.Arrow,
+        type: graphicType.Arrow,
         name:'箭头',
         formList: {
             style: [
@@ -272,7 +272,7 @@ export const elementConst = {
         }
     },
     [graphicType.Polyline]: {
-        code: graphicType.Polyline,
+        type: graphicType.Polyline,
         name:'多边形折线段',
         formList: {
             style: [
@@ -308,7 +308,7 @@ export const elementConst = {
         }
     },
     [graphicType.Isogon]: {
-        code: graphicType.Isogon,
+        type: graphicType.Isogon,
         name:'正多边形',
         formList: {
             style: [
@@ -377,7 +377,7 @@ export const elementConst = {
         }
     },
     [graphicType.Ellipse]: {
-        code: graphicType.Ellipse,
+        type: graphicType.Ellipse,
         name:'椭圆',
         formList: {
             style: [
@@ -446,7 +446,7 @@ export const elementConst = {
         }
     },
     [graphicType.Arc]: {
-        code: graphicType.Arc,
+        type: graphicType.Arc,
         name:'圆弧',
         formList: {
             style: [
@@ -531,7 +531,7 @@ export const elementConst = {
         }
     },
     [graphicType.Sector]: {
-        code: graphicType.Sector,
+        type: graphicType.Sector,
         name:'扇形',
         formList: {
             style: [
@@ -638,7 +638,7 @@ export const elementConst = {
         }
     },
     [graphicType.Heart]: {
-        code: graphicType.Heart,
+        type: graphicType.Heart,
         name:'心形',
         formList: {
             style: [
@@ -707,7 +707,7 @@ export const elementConst = {
         }
     },
     [graphicType.Droplet]: {
-        code: graphicType.Droplet,
+        type: graphicType.Droplet,
         name:'水滴',
         formList: {
             style: [
@@ -775,3 +775,4 @@ export const elementConst = {
         }
     }
 };
+export default elementConst
diff --git a/src/iscs_new/core/form/formBuilder.js b/src/iscs_new/core/form/formBuilder.js
index 7b9da0b1c..8027f570e 100644
--- a/src/iscs_new/core/form/formBuilder.js
+++ b/src/iscs_new/core/form/formBuilder.js
@@ -1,37 +1,40 @@
-class FormBuilder {
-	constructor(formStyle = {}) {
-		this.formStyle = {
-			style: {},
-			...JSON.parse(JSON.stringify(formStyle)),
-		}
-	}
+import elementConst from './elementConst';
+import form2Base from './form2Base';
 
-	setBase(base = {}) {
-		Object.assign(this.formStyle,
-			Object.fromEntries(
-				Object.entries(base).filter(el => !['style'].includes(el[0]))
-			)
-		);
-		return this;
-	}
+const formBuilder = {
+	buildForm(el) {
+		const form = {};
+		form.type = el.type;
+		form.name = el.name;
+		form.formGroup = [];
+		form.model = {};
 
-	setStyle(style = {}) {
-		Object.assign(this.formStyle.style,
-			Object.fromEntries(
-				Object.entries(style).filter(el => !['truncate'].includes(el[0]))
-			)
-		);
-		return this;
-	}
+		// 添加通用配置
+		form.model['base'] = {};
+		form2Base.forEach(each=>{
+			form.model['base'][each.prop] = each.value;
+		});
+		form.formGroup.push({name:'通用配置', type:'base', styleList:form2Base});
 
-	setTruncate(truncate = {}) {
-		this.formStyle.style.truncate = { ...truncate }
-		return this;
-	}
-
-	build() {
-		return this.formStyle;
-	}
+		const list = [{name:'绘图配置', type:'shape'}, {name:'样式配置', type:'style'}];
+		list.forEach(eachType=>{
+			form.model[eachType.type] = {};
+			const eachList = el.formList[eachType.type];
+			eachList.forEach(each=>{
+				form.model[eachType.type][each.prop] = each.value;
+			});
+			form.formGroup.push({name:eachType.name, type: eachType.type, styleList:eachList});
+		});
+		return form;
+	},
+    buildFormList() {
+		const formList = [];
+        const elementList = Object.values(elementConst);
+        elementList.forEach(el=>{
+            formList.push(this.buildForm(el));
+        });
+        return formList;
+    }
 }
 
-export default FormBuilder;
+export default formBuilder;
diff --git a/src/iscs_new/map.js b/src/iscs_new/map.js
index b246e57d9..ae55759aa 100644
--- a/src/iscs_new/map.js
+++ b/src/iscs_new/map.js
@@ -341,9 +341,9 @@ class JMap {
 			case events.Keyup:
 				this.$controller.on(events.Keyup, cb, context);
 				break;
-			case events.BuildShape:
-				this.$controller.on(events.BuildShape, cb, context);
-				break;
+			// case events.BuildShape:
+			// 	this.$controller.on(events.BuildShape, cb, context);
+			// 	break;
 			}
 		}
 	}
@@ -392,9 +392,9 @@ class JMap {
 			case events.Keyup:
 				this.$controller.off(events.Keyup, cb);
 				break;
-			case events.BuildShape:
-				this.$controller.off(events.BuildShape, cb);
-				break;
+			// case events.BuildShape:
+			// 	this.$controller.off(events.BuildShape, cb);
+			// 	break;
 			}
 		}
 	}
diff --git a/src/iscs_new/plugins/shapeBuilder/entry.vue b/src/iscs_new/plugins/shapeBuilder/entry.vue
index 5f3d1e19e..f7ce0c83b 100644
--- a/src/iscs_new/plugins/shapeBuilder/entry.vue
+++ b/src/iscs_new/plugins/shapeBuilder/entry.vue
@@ -1,35 +1,51 @@
 <template>
-  <div class="container" v-show="visible">
-    <div class="loading__container">
-		<el-radio-group v-model="subType" @change="doSelect">
-			<el-radio-button v-for="(subType,i) in graphicType" :key="i" :label="subType"/>
-		</el-radio-group>
+  <div class="builder" v-show="visible">
+    <div class="container">
+		<el-button-group>
+			<el-button v-for="(type,i) in graphicType" :key="i" @click="doBuilder(type)">
+				{{type}}
+			</el-button>
+		</el-button-group>
     </div>
   </div>
 </template>
 
 <script>
 import * as graphic from '../../core/graphic';
+import * as utils from '@/iscs_new/utils/utils';
+import shapeType from '@/iscs_new/constant/shapeType.js';
+import orders from '@/iscs_new/utils/orders';
+import elementConst from '@/iscs_new/core/form/elementConst';
+import formBuilder from '@/iscs_new/core/form/formBuilder';
 
 export default {
     data () {
         return {
 			visible: true,
-			subType: '',
 			graphicType: Object.fromEntries(Object.keys(graphic).filter(type => !['Group'].includes(type)).map(type => [type, type]))
         };
     },
 	methods: {
-		doSelect(type) {
-			this.subType = type;
-			this.$emit('select', type)
+		doBuilder(type) {
+			console.log(elementConst, type)
+			const form = formBuilder.buildForm(elementConst[type]);
+			const model = utils.deepClone(form.model);
+			model.code = utils.getUID(type);
+			model.type = type;
+			model.name = '<名称>';
+			model.base.position = [300, 100];
+			model.stateList = [];
+			this.$iscs && this.$iscs.render([{model, action: {shapeType: shapeType.Element, order: orders.Add}}]);
 		}
 	}
 };
 </script>
 
 <style lang="scss" scoped>
-	.container {
+	.builder {
+		background: #f1f1f1;
+		height: 100%;
+		width: 120px;
 		position: absolute;
 	    top: 0;
 	}
diff --git a/src/iscs_new/plugins/shapeBuilder/index.js b/src/iscs_new/plugins/shapeBuilder/index.js
index 2e67e4238..9722321a8 100644
--- a/src/iscs_new/plugins/shapeBuilder/index.js
+++ b/src/iscs_new/plugins/shapeBuilder/index.js
@@ -3,28 +3,17 @@ import events from '@/iscs_new/utils/events';
 import entry from './entry.vue';
 
 const VuePage = Vue.extend(entry);
-const toggling = (page, show) => {
-    if (show) {
-        Vue.nextTick(() => {
-            page.visible = true;
-        });
-    } else {
-        page.visible = false;
-    }
-};
 
 const handle = {
 	onClick(e) {
 		if (!e) {
 			this.page.type = '';
 		}
-		console.log('onClick', this, e)
 	},
 	onContextMenu(e) {
-		console.log('onContextMenu', this, e)
-	},
-	onBuildShape(e) {
-		console.log('onBuildShape', this, e)
+		if (!e) {
+			this.page.type = '';
+		}
 	}
 }
 class ShapeBuilder {
@@ -50,10 +39,8 @@ class ShapeBuilder {
 
 	addEventListener() {
 		if (this.map) {
-			console.log(this.map)
 			this.map.on(events.Click, handle.onClick, this);
 			this.map.on(events.ContextMenu, handle.onContextMenu, this);
-			this.map.on(events.BuildShape, handle.onBuildShape, this);
 		}
 	}
 
@@ -61,7 +48,6 @@ class ShapeBuilder {
 		if (this.map) {
 			this.map.off(events.Click, handle.onClick, this);
 			this.map.off(events.ContextMenu, handle.onContextMenu, this);
-			this.map.off(events.BuildShape, handle.onBuildShape, this);
 		}
 	}
 }
diff --git a/src/iscs_new/plugins/shapeContextMenu/entry.vue b/src/iscs_new/plugins/shapeContextMenu/entry.vue
new file mode 100644
index 000000000..5fac4b939
--- /dev/null
+++ b/src/iscs_new/plugins/shapeContextMenu/entry.vue
@@ -0,0 +1,121 @@
+<template>
+  	<div class="container">
+		<div v-if="visible" class="menus" :style="{ left: position.x+'px', top: position.y+'px' }">
+			<menu-item v-for="(el, i) in menus" :key="i" :option="el" @close="doClose" />
+		</div>
+	</div>
+</template>
+
+<script>
+import MenuItem from './menu-item';
+import shapeType from '@/iscs_new/constant/shapeType.js';
+import orders from '@/iscs_new/utils/orders';
+import * as utils from '@/iscs_new/utils/utils';
+
+export default {
+	components: {
+		MenuItem
+	},
+    data () {
+        return {
+			visible: true,
+			selected: null,
+			position: {
+				x: 0,
+				y: 0
+			},
+			menus: [],
+			list: [
+				{
+					label: '组合',
+					handler: this.doBinding,
+					disabledCb: selected => {
+						const storage = this.$iscs.getController().getStorage();
+						return storage.values().length <= 1;
+					}
+				},
+				{
+					label: '解组',
+					handler: this.unBinding,
+					disabledCb: selected => {
+						return selected.shapeType != shapeType.Compose;
+					}
+				}
+			]
+        };
+    },
+	methods: {
+		doShow(point) {
+			this.menus = this.list.map(el => { el.disabled = el.disabledCb(this.selected); return el} );
+			if (this.menus &&
+				this.menus.length) {
+				this.position = {...point}
+				this.visible = true;
+            }
+		},
+		doClose() {
+			this.position = {x: 0, y: 0};
+			this.visible = false;
+		},
+		doBinding(el) {
+			const controller = this.$iscs.getController();
+			const storage = controller.getStorage()
+			const values = storage.values();
+			if (values.length > 1) {
+				const elem = {
+					model: {
+						code: utils.getUID('compose'),
+						type: 'Device',
+						elementCodes: values.map(el => el.model.code),
+						base: {
+							scale: [1, 1],
+							position: [0, 0],
+							rotation: 0,
+							hide: false,
+						},
+						composeCode: '',
+					},
+					action: { order: orders.Binding, shapeType: shapeType.Compose }
+				}
+				this.$iscs.render([elem]);
+			} else {
+				this.$message.info('请选择两个及其以上数目元素');
+			}
+		},
+		unBinding(el) {
+			console.log(this.selected);
+			if (this.selected) {
+				this.$iscs.render([
+					{
+						model: this.selected.model,
+						action: { order: orders.Unbinding, shapeType: shapeType.Compose }
+					}
+				]);
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		position: absolute;
+		height: 100%;
+		width: 100%;
+		z-index: 2000;
+		top: 0;
+		left: 0;
+		pointer-events: none;
+		overflow: hidden;
+		.menus {
+			position: absolute;
+			pointer-events: all;
+			background: #f1f1f1;
+			box-shadow: 0 2px 12px rgba(0,0,0,0.3);
+		}
+		&::-webkit-scrollbar {
+			display:none;
+		}
+	}
+</style>
+
diff --git a/src/iscs_new/plugins/shapeContextMenu/index.js b/src/iscs_new/plugins/shapeContextMenu/index.js
new file mode 100644
index 000000000..f544a5dc6
--- /dev/null
+++ b/src/iscs_new/plugins/shapeContextMenu/index.js
@@ -0,0 +1,79 @@
+import Vue from 'vue';
+import events from '@/iscs_new/utils/events';
+import entry from './entry.vue';
+
+const elPage = Vue.extend(entry);
+
+const toggling = (page, e) => {
+    if (e&&e.code) {
+        Vue.nextTick(() => {
+			page.doShow({x: e.clientX, y: e.clientY});
+        });
+    } else {
+        page.doClose();
+    }
+};
+
+
+const handle = {
+	onClick(e) {
+		if (this.page) {
+			this.page.selected = e;
+			toggling(this.page, {});
+		}
+	},
+	onContextMenu(e) {
+		if (this.page) {
+			toggling(this.page, e);
+		}
+	}
+}
+
+class ShapeBuilder {
+	constructor(map) {
+		this.zr = map.getZr();
+		this.map = map;
+		this.page =  this.initUI();
+	}
+
+	initUI() {
+		const el = this.zr.dom;
+		const page = new elPage({
+			el: document.createElement('div'),
+			data () {}
+		});
+		el.page = page;
+		el.dom = page.$el;
+		el.grSelectStyle = {};
+		el.appendChild(el.dom);
+		return page;
+	}
+
+	addEventListener() {
+		if (this.map) {
+			this.map.on(events.Click, handle.onClick, this);
+			this.map.on(events.ContextMenu, handle.onContextMenu, this);
+		}
+	}
+
+	removeEventListener() {
+		if (this.map) {
+			this.map.off(events.Click, handle.onClick, this);
+			this.map.off(events.ContextMenu, handle.onContextMenu, this);
+		}
+	}
+}
+
+export default {
+	el: null,
+	install(map) {
+		this.el = new ShapeBuilder(map);
+		this.el.addEventListener();
+	},
+	uninstall(map) {
+		if (this.el) {
+			this.el.removeEventListener();
+			this.el = null;
+		}
+	}
+}
diff --git a/src/iscs_new/plugins/shapeContextMenu/menu-item.vue b/src/iscs_new/plugins/shapeContextMenu/menu-item.vue
new file mode 100644
index 000000000..ec2687e95
--- /dev/null
+++ b/src/iscs_new/plugins/shapeContextMenu/menu-item.vue
@@ -0,0 +1,202 @@
+<template>
+	<li v-if="option.children && option.children.length" class="menu-item"  @mouseenter="enter($vnode.key)" @mouseleave="leave">
+		<div ref="flexBox" class="flex-box">
+		<el-button type="text" class="item" :disabled="checkDisabled(option)">
+			<el-link v-if="option.tipsType" :type="option.tipsType" :underline="false">{{ option.label }}</el-link>
+			<span v-else :style="{color: textColor(option) }">{{ option.label }}</span>
+		</el-button>
+		<i class="el-icon-arrow-right" />
+		</div>
+		<ul v-if="isPopup" ref="popup" class="menu" :style="{display: isShow? 'block': 'table', marginLeft: marginLeft+'px'}">
+		<div class="menu-pop pop-menu">
+			<div v-show="isShow" class="arrow  el-icon-arrow-down" />
+			<pop-menu-item v-for="(el, i) in option.children" :key="i" :option="el" :allowedColor="allowedColor" :disabledColor="disabledColor" @close="close" />
+			<div v-show="isShow" class="arrow  el-icon-arrow-up" />
+		</div>
+		</ul>
+	</li>
+	<li v-else-if="checkVisible(option)" class="menu-item" >
+		<div v-if="option.type === 'separator'" class="separator">&ensp;</div>
+		<el-button v-else-if="option.type ==='file'" type="text" class="uploadDemo item" :disabled="checkDisabled(option)">
+		<input :ref="option.label" type="file" class="file_box" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" @change="doHandle(option, true)">
+		<el-link v-if="option.tipsType" :type="option.tipsType" :underline="false">{{ option.label }} </el-link>
+		<span v-else :style="{color: textColor(option) }">{{ option.label }}</span>
+		</el-button>
+		<el-button v-else type="text" class="item" :disabled="checkDisabled(option)" @click="doHandle(option, false)">
+		<el-link v-if="option.tipsType" :type="option.tipsType" :underline="false">{{ option.label }}</el-link>
+		<span v-else :style="{color: textColor(option) }">{{ option.label }}</span>
+		</el-button>
+	</li>
+</template>
+
+<script>
+
+export default {
+    name: 'PopMenuItem',
+    props: {
+        option: {
+            type: Object,
+            default() {
+                return [];
+            }
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+		disabledColor: {
+			type: String,
+			default: '#ccc',
+		},
+		allowedColor: {
+			type: String,
+			default: '#000'
+		}
+    },
+    data() {
+        return {
+            active: -1
+        };
+    },
+    computed: {
+        isPopup() {
+            return this.active == this.$vnode.key;
+        },
+        isShow() {
+            return this.option.children.length > 12;
+        },
+        marginLeft() {
+            return this.$refs.flexBox.offsetWidth;
+        }
+    },
+    methods: {
+        checkDisabled(option) {
+            return option.disabled || this.disabled;
+        },
+        checkVisible(option) {
+            if (typeof (option.show) === 'undefined') {
+                return true;
+            } else {
+                return option.show;
+            }
+        },
+        textColor(option) {
+            return this.checkDisabled(option) ? this.disabledColor : this.allowedColor;
+        },
+        doHandle(option, isFile) {
+            if (option.handler && !this.checkDisabled(option)) {
+                if (isFile) {
+                    const obj = this.$refs[option.label][0];
+                    if (obj.files) {
+                        const file = obj.files[0];
+                        option.handler(file);
+                        obj.value = '';
+                    }
+                } else {
+                    option.handler(option);
+                }
+
+                this.close();
+            }
+        },
+        close() {
+            this.$emit('close');
+        },
+        enter(active) {
+            this.active = active;
+        },
+        leave(e) {
+            this.active = -1;
+        }
+    }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+    $bg: #FFFFFF;
+    $item-hover: #CFE8FC;
+    $item-text: #606266;
+    $item-separator: #666;
+    $item-border: #909399;
+    $item-disabled: #cccccc;
+    $item-height: 30px;
+
+    /deep/ {
+        .el-button--text {
+            padding: 6px 15px;
+            text-align: left;
+        }
+    }
+
+	.menu {
+		padding: 0;
+		position: absolute;
+		margin-top: -$item-height - 1;
+		max-height: 360px;
+		overflow: auto;
+
+		&-pop {
+			display:table;
+			border: 1px solid $item-border;
+			.arrow {
+				display: flex;
+				justify-content: center;
+				background: $bg;
+			}
+		}
+
+		&::-webkit-scrollbar {
+			display:none;
+		}
+	}
+
+	.flex-box{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		flex-direction: row;
+		padding-right: 3px;
+	}
+
+	.menu-item {
+		list-style: none;
+		min-width: 110px;
+		border-bottom: 1px solid #ebeef5;
+	    box-sizing: content-box;
+	}
+
+	.menu-item:hover {
+		background: $item-hover;
+	}
+
+	.separator {
+		background: $item-separator;
+		width: 100%;
+		height: 1px;
+		position: relative;
+	}
+
+	.item {
+		color: $item-text;
+		height: $item-height;
+		width: 100%;
+	}
+
+	.uploadDemo {
+		position: relative;
+		overflow: hidden;
+		width: 100%;
+		cursor: pointer;
+		border: 1px solid transparent;
+		color: $item-text;
+
+		input {
+			opacity: 0;
+			cursor: pointer;
+			position: absolute;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+</style>
diff --git a/src/iscs_new/plugins/shapeProperty/entry.vue b/src/iscs_new/plugins/shapeProperty/entry.vue
index c9eea5e49..dd8b046b5 100644
--- a/src/iscs_new/plugins/shapeProperty/entry.vue
+++ b/src/iscs_new/plugins/shapeProperty/entry.vue
@@ -1,21 +1,22 @@
 <template>
   	<el-drawer
-		class="container"
+		class="property"
 		title="我是标题"
 		:modal="false"
 		:visible.sync="visible"
 		:with-header="false">
-		<span>我来啦!</span>
+		<div class="container">
+			<span>我来啦!</span>
+		</div>
 	</el-drawer>
 </template>
 
 <script>
-import * as graphic from '../../core/graphic';
 
 export default {
     data () {
         return {
-			visible: true,
+			visible: true
         };
     },
 	methods: {
@@ -24,8 +25,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	.container {
+	.property {
+		pointer-events: none;
 		position: absolute;
 	    top: 0;
+		.container {
+			padding: 30px;
+		}
 	}
 </style>
diff --git a/src/iscs_new/plugins/shapeProperty/index.js b/src/iscs_new/plugins/shapeProperty/index.js
index 29ba3ace5..6cfd56574 100644
--- a/src/iscs_new/plugins/shapeProperty/index.js
+++ b/src/iscs_new/plugins/shapeProperty/index.js
@@ -4,8 +4,8 @@ import entry from './entry.vue';
 
 const elPage = Vue.extend(entry);
 
-const toggling = (page, show) => {
-    if (show) {
+const toggling = (page, e) => {
+    if (!!e) {
         Vue.nextTick(() => {
 			page.visible = true;
         });
@@ -17,15 +17,13 @@ const toggling = (page, show) => {
 
 const handle = {
 	onClick(e) {
-		console.log(this)
-		toggling(this.page, !!e);
-		// console.log('onClick', this, e)
+		toggling(this.page, e);
 	},
 	onContextMenu(e) {
-		// console.log('onContextMenu', this, e)
 	},
-	onBuildShape(e) {
-		// console.log('onBuildShape', this, e)
+	onModify(e) {
+	},
+	onDelete(e) {
 	}
 }
 
@@ -53,7 +51,6 @@ class ShapeBuilder {
 		if (this.map) {
 			this.map.on(events.Click, handle.onClick, this);
 			this.map.on(events.ContextMenu, handle.onContextMenu, this);
-			this.map.on(events.BuildShape, handle.onBuildShape, this);
 		}
 	}
 
@@ -61,7 +58,6 @@ class ShapeBuilder {
 		if (this.map) {
 			this.map.off(events.Click, handle.onClick, this);
 			this.map.off(events.ContextMenu, handle.onContextMenu, this);
-			this.map.off(events.BuildShape, handle.onBuildShape, this);
 		}
 	}
 }
diff --git a/src/iscs_new/selectingHandle.js b/src/iscs_new/selectingHandle.js
index 34f9910e0..92119c7cd 100644
--- a/src/iscs_new/selectingHandle.js
+++ b/src/iscs_new/selectingHandle.js
@@ -260,9 +260,9 @@ export default class SelectingHandle {
 			}
 		});
 
-		if (['Alt'].includes(keyStr)) {
-			this.$controller.trigger(events.BuildShape, {...selectingRect, option: this.$map.getOption()});
-		}
+		// if (['Alt'].includes(keyStr)) {
+		// 	this.$controller.trigger(events.BuildShape, {...selectingRect, option: this.$map.getOption()});
+		// }
 
 		this.clear();
 	}
diff --git a/src/iscs_new/utils/events.js b/src/iscs_new/utils/events.js
index d0795bd07..8561a5d53 100644
--- a/src/iscs_new/utils/events.js
+++ b/src/iscs_new/utils/events.js
@@ -12,5 +12,5 @@ export default {
 	ViewUpdate: 'viewUpdate',
 	StateUpdate: 'stateUpdate',
 	OptionUpdate: 'optionUpdate',
-	BuildShape: 'buildShape'
+	// BuildShape: 'buildShape'
 }
diff --git a/src/views/iscs_new/components/dataForm.vue b/src/views/iscs_new/components/dataForm.vue
index a105268ff..e09147c94 100644
--- a/src/views/iscs_new/components/dataForm.vue
+++ b/src/views/iscs_new/components/dataForm.vue
@@ -16,8 +16,8 @@
           {{ styleGroup.name }}
         </div>
         <template v-for="item in styleGroup.styleList">
-          <el-form-item :key="item.prop" :prop="styleGroup.code+'.'+item.prop" :label="item.label" class="formName" :rules="item.rules?item.rules:[]">
-            <!-- {{ tempModel=styleGroup.code?formModel[styleGroup.code]:formModel }} -->
+          <el-form-item :key="item.prop" :prop="styleGroup.type+'.'+item.prop" :label="item.label" class="formName" :rules="item.rules?item.rules:[]">
+            <!-- {{ tempModel=styleGroup.type?formModel[styleGroup.type]:formModel }} -->
             <el-tooltip
               v-if="item.description"
               :id="item.prop"
@@ -32,7 +32,7 @@
             <template v-if="checkFieldType(item, 'Number')">
               <el-input-number
                 v-if="item.precision!=undefined"
-                v-model="formModel[styleGroup.code][item.prop]"
+                v-model="formModel[styleGroup.type][item.prop]"
                 size="small"
                 :min="isNaN(item.min) ? -Infinity : item.min"
                 :max="isNaN(item.max)? Infinity : item.max"
@@ -41,7 +41,7 @@
               />
               <el-input-number
                 v-else
-                v-model="formModel[styleGroup.code][item.prop]"
+                v-model="formModel[styleGroup.type][item.prop]"
                 size="small"
                 :min="isNaN(item.min) ? -Infinity : item.min"
                 :max="isNaN(item.max)? Infinity : item.max"
@@ -50,7 +50,7 @@
             </template>
             <template v-else-if="checkFieldType(item, 'Boolean')">
               <el-switch
-                v-model="formModel[styleGroup.code][item.prop]"
+                v-model="formModel[styleGroup.type][item.prop]"
                 style="vertical-align: top;"
                 size="small"
                 :active-color="item.activeColor || '#409eff'"
@@ -59,7 +59,7 @@
             </template>
             <template v-else-if="checkFieldType(item, 'Color')">
               <el-color-picker
-                v-model="formModel[styleGroup.code][item.prop]"
+                v-model="formModel[styleGroup.type][item.prop]"
                 show-alpha
                 size="small"
               />
@@ -68,7 +68,7 @@
               <el-input-number
                 v-for="count in item.length"
                 :key="count"
-                v-model="formModel[styleGroup.code][item.prop][count-1]"
+                v-model="formModel[styleGroup.type][item.prop][count-1]"
                 style="margin:6px 0px 0px 5px"
                 size="small"
                 :min="isNaN(item.min) ? -Infinity : item.min"
@@ -79,16 +79,16 @@
             </template>
             <template v-else-if="checkFieldType(item, 'Points')">
               <div class="point-section">
-                <template v-for="(point, j) in formModel[styleGroup.code][item.prop]">
+                <template v-for="(point, j) in formModel[styleGroup.type][item.prop]">
                   <div :key="j" style="overflow: hidden;">
-                    <el-input-number v-model="point[0]" size="mini" @blur="changeNumber(0,j,formModel[styleGroup.code],item.prop)" />
+                    <el-input-number v-model="point[0]" size="mini" @blur="changeNumber(0,j,formModel[styleGroup.type],item.prop)" />
                     <span class="pointSplice">, </span>
-                    <el-input-number v-model="point[1]" size="mini" @blur="changeNumber(1,j,formModel[styleGroup.code],item.prop)" />
+                    <el-input-number v-model="point[1]" size="mini" @blur="changeNumber(1,j,formModel[styleGroup.type],item.prop)" />
                     <el-button
                       icon="el-icon-plus"
                       circle
                       class="point-button"
-                      @click="addPoint(j,formModel[styleGroup.code],item.prop)"
+                      @click="addPoint(j,formModel[styleGroup.type],item.prop)"
                     />
                     <el-button
                       icon="el-icon-minus"
@@ -96,7 +96,7 @@
                       circle
                       class="point-button"
                       style="margin-left: 4px;"
-                      @click="delPoint(j,formModel[styleGroup.code],item.prop)"
+                      @click="delPoint(j,formModel[styleGroup.type],item.prop)"
                     />
                   </div>
                 </template>
@@ -105,7 +105,7 @@
             <template v-else-if="checkFieldType(item, 'Select')">
               <el-select
                 :ref="'select_'+item.prop"
-                v-model="formModel[styleGroup.code][item.prop]"
+                v-model="formModel[styleGroup.type][item.prop]"
                 size="small"
               >
                 <el-option
@@ -118,7 +118,7 @@
             </template>
             <template v-else-if="checkFieldType(item, 'String')">
               <el-input
-                v-model="formModel[styleGroup.code][item.prop]"
+                v-model="formModel[styleGroup.type][item.prop]"
                 size="small"
                 type="text"
                 style="width:200px"
diff --git a/src/views/iscs_new/iscsDesign/index.vue b/src/views/iscs_new/iscsDesign/index.vue
index 44d3197a1..59dbf3d46 100644
--- a/src/views/iscs_new/iscsDesign/index.vue
+++ b/src/views/iscs_new/iscsDesign/index.vue
@@ -32,7 +32,7 @@
 <script>
 import localStore from 'storejs';
 import iscsCanvas from './iscsCanvas';
-import BuilderFactory from '@/iscs_new/core/form/builderFactory';
+import formBuilder from '@/iscs_new/core/form/formBuilder';
 import DataForm from '../components/dataForm';
 import orders from '@/iscs_new/utils/orders';
 import * as utils from '@/iscs_new/utils/utils';
@@ -70,7 +70,7 @@ export default {
     },
     mounted() {
         this.composeName = this.$route.query.composeName;
-        this.elementList = new BuilderFactory().getFormList();
+        this.elementList = formBuilder.buildFormList();
         this.enabledTab = this.elementList[0].code;
     },
     beforeDestroy() {
diff --git a/src/views/iscs_new/iscsDraw/index.vue b/src/views/iscs_new/iscsDraw/index.vue
index 67d7b75ee..4cdd2b926 100644
--- a/src/views/iscs_new/iscsDraw/index.vue
+++ b/src/views/iscs_new/iscsDraw/index.vue
@@ -15,8 +15,8 @@
             >保存</el-button>
           </div>
           <el-tabs v-model="enabledTab" class="card" type="card" @tab-click="onSelectTab">
-            <el-tab-pane v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.code" :lazy="true">
-              <data-form :ref="'dataform'+element.code" :form="element" :form-model="element.model" :rules="element.rules" />
+            <el-tab-pane v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.type" :lazy="true">
+              <data-form :ref="'dataform'+element.type" :form="element" :form-model="element.model" :rules="element.rules" />
             </el-tab-pane>
           </el-tabs>
           <div class="bottomBtnGroup">
@@ -32,7 +32,7 @@
 <script>
 import localStore from 'storejs';
 import iscsCanvas from './iscsCanvas';
-import BuilderFactory from '@/iscs_new/core/form/builderFactory';
+import formBuilder from '@/iscs_new/core/form/formBuilder';
 import DataForm from '../components/dataForm';
 import orders from '@/iscs_new/utils/orders';
 import * as utils from '@/iscs_new/utils/utils';
@@ -71,8 +71,8 @@ export default {
     },
     mounted() {
         this.composeName = this.$route.query.composeName;
-        this.elementList = new BuilderFactory().getFormList();
-        this.enabledTab = this.elementList[0].code;
+        this.elementList = formBuilder.buildFormList();
+        this.enabledTab = this.elementList[0].type;
     },
     methods: {
         onIscsChange(mode, system, part) {
@@ -106,7 +106,7 @@ export default {
 		onSelected(em) {
 			if (em.model) {
 				this.selected = utils.deepClone(em.model);
-				const elem = this.elementList.find(el => el.code == this.selected.type);
+				const elem = this.elementList.find(el => el.type == this.selected.type);
 				if (elem) {
 					elem.model = this.selected;
           this.enabledTab=this.selected.type;
diff --git a/src/views/iscs_new/iscsDraw/iscsCanvas.vue b/src/views/iscs_new/iscsDraw/iscsCanvas.vue
index 34bd551e9..5ee9582aa 100644
--- a/src/views/iscs_new/iscsDraw/iscsCanvas.vue
+++ b/src/views/iscs_new/iscsDraw/iscsCanvas.vue
@@ -10,6 +10,7 @@ import Iscs from '@/iscs_new/map';
 import Idb from '../utils/indexedDb.js';
 import ShapeBuilder from '@/iscs_new/plugins/shapeBuilder';
 import ShapeProperty from '@/iscs_new/plugins/shapeProperty';
+import ShapeContextMenu from '@/iscs_new/plugins/shapeContextMenu';
 import { mapGetters } from 'vuex';
 
 export default {
@@ -81,8 +82,9 @@ export default {
                     offsetY: 0
                 },
 				plugins: [
-					// ShapeBuilder,
-					// ShapeProperty
+					ShapeBuilder,
+					// ShapeProperty,
+					ShapeContextMenu
 				]
             });
 
diff --git a/src/views/test/index.vue b/src/views/test/index.vue
index f1e225046..9539a35d8 100644
--- a/src/views/test/index.vue
+++ b/src/views/test/index.vue
@@ -18,6 +18,7 @@ import orders from '@/iscs_new/utils/orders';
 import shapeType from '@/iscs_new/constant/shapeType';
 import ShapeBuilder from '@/iscs_new/plugins/shapeBuilder';
 import ShapeProperty from '@/iscs_new/plugins/shapeProperty';
+import ShapeContextMenu from '@/iscs_new/plugins/shapeContextMenu';
 import { mapGetters } from 'vuex';
 import { exitFullscreen } from '@/utils/screen';
 import * as utils from '@/iscs_new/utils/utils';
@@ -93,7 +94,8 @@ export default {
                 },
 				plugins: [
 					ShapeBuilder,
-					// ShapeProperty
+					ShapeProperty,
+					ShapeContextMenu
 				]
             });