优化iscs_new 代码

src/iscs_new/controller.js

@@ -59,7 +59,7 @@ export default class Controller extends Eventful {
 		this.selectingHandle = new SelectingHandle(map, this);
 		this.selectHandle = new SelectHandle(map, this);
 		this.keyBoardHandle = new KeyBoardHandle(map, this);
-		this.storage = new Storage();
+		this._storage = new Storage();
 	}
 
 	initHandler(map) {
@@ -147,7 +147,7 @@ export default class Controller extends Eventful {
 	}
 
 	isSelected(code) {
-		return this.storage.has(code)
+		return this._storage.has(code)
 	}
 
 	setTarget(target) {
@@ -177,7 +177,7 @@ export default class Controller extends Eventful {
 
 		zr.dom.focus();
 		this._isNotLeftMouse = eventTool.isMiddleOrRightButtonOnMouseUpDown(e);
-		this.trigger(events.Selected, this._target);
+		this.trigger(events.Click, this._target);
 		this.selectingHandle.clear();
 
 		if (this._isNotLeftMouse) {
@@ -324,12 +324,16 @@ export default class Controller extends Eventful {
 	}
 
 	clear() {
-		this.storage.clear();
+		this._storage.clear();
-		this.storage.clearClipboard();
+		this._storage.clearClipboard();
 		this._target = null;
 		this._pan = false;
 	}
 
+	getStorage() {
+		return this._storage;
+	}
+
 	getKeyStr() {
 		return this._shortcuts;
 	}

src/iscs_new/dragHandle.js

@@ -13,7 +13,8 @@ export default class DragHandle {
 	}
 
 	onDragStart(e) {
-		if (e.code && this.$controller.storage.has(e.code)) {
+		const storage = this.$controller.getStorage();
+		if (e.code && storage.has(e.code)) {
 			this._dragging = true;
 		}
 	}
@@ -22,12 +23,13 @@ export default class DragHandle {
 		const dx = e.dx;
 		const dy = e.dy;
 		const scaleRate = this.$option.getScaleRate();
+		const storage = this.$controller.getStorage();
 
 		e.dx = dx / scaleRate;
 		e.dy = dy / scaleRate;
 
 		if (this._dragging) {
-			this.$controller.storage.values().forEach(target => {
+			storage.values().forEach(target => {
 				if (target) {
 					target.shapeFactory.hideHightLight(target);;
 					target.drift(e);

src/iscs_new/factory/compose.js

@@ -77,13 +77,15 @@ class Compose extends AbstractShape {
 		this.shapeFactory.hideHightLight(this);
 		this.model.elementCodes.forEach(code => {
 			const el = this.shapeFactory.getShapeByCode(code);
-			if (el &&
+			if (el) {
-				el.model) {
+				this.shapeFactory.hideHightLight(el);
+				if (el.model) {
 					this.shapeFactory.removeFromLayer(el.type)(el);
 					this.instance.add(el);
 					el.model.composeCode = this.code;
 					el.attr(el.model);
 				}
+			}
 		})
 	}
 
@@ -93,14 +95,16 @@ class Compose extends AbstractShape {
 		this.shapeFactory.hideHightLight(this);
 		this.model.elementCodes.forEach(code => {
 			const el = this.shapeFactory.getShapeByCode(code);
-			if (el &&
+			if (el) {
-				el.model &&
+				this.shapeFactory.hideHightLight(el);
+				if (el.model &&
 					el.model.composeCode) {
 					this.instance.remove(el);
 					this.shapeFactory.addToLayer(el.type)(el);
 					el.model.composeCode = '';
 					el.attr(el.model);
 				}
+			}
 		})
 		this.model.elementCodes = [];
 	}

src/iscs_new/factory/element.js

@@ -76,11 +76,12 @@ class Element extends AbstractShape {
 		if (compose &&
 			compose.model &&
 			compose.model.elementCodes) {
+			this.shapeFactory.hideHightLight(compose);
 			const index = compose.model.elementCodes.findIndex(this.type);
 			if (index < 0) {
 				compose.model.elementCodes.push(this.type);
 				this.shapeFactory.removeFormLayer(el.type, this);
-				compose.add(this);
+				compose.instance.add(this);
 			}
 		}
 	}
@@ -93,10 +94,11 @@ class Element extends AbstractShape {
 		if (compose &&
 			compose.model &&
 			compose.model.elementCodes) {
+			this.shapeFactory.hideHightLight(compose);
 			const index = compose.model.elementCodes.findIndex(this.type);
 			if (index >= 0) {
 				compose.model.elementCodes.splice(index, 1);
-				compose.remove(this);
+				compose.instance.remove(this);
 				this.shapeFactory.addToLayer(el.type)(this);
 			}
 		}

src/iscs_new/factory/index.js

@@ -110,11 +110,11 @@ class ShapeFactory extends Eventful {
 		try {
 			this.source = source;
 			zrUtil.each(source.elementList ||[], model => {
-				take(this.storageShape(this.createShape(model, shapeType.Element)));
+				take(this.addShape(this.createShape(model, shapeType.Element)));
 			}, this);
 
 			zrUtil.each(source.composeList ||[], model => {
-				take(this.storageShape(this.createShape(model, shapeType.Compose)));
+				take(this.addShape(this.createShape(model, shapeType.Compose)));
 			}, this);
 		} catch (error) {
 			console.error('[ERROR] ', error);
@@ -126,14 +126,15 @@ class ShapeFactory extends Eventful {
 		const shapeBuilder = shapeBuilderMap[shapeType];
 		if (shapeBuilder) {
 			shape = new shapeBuilder({model, shapeType, shapeFactory: this});
-			shape.combine();
 		}
 		return shape;
 	}
 
-	storageShape(shape) {
+	addShape(shape) {
 		if (shape && shape.code) {
+			this.hideHightLight(shape);
 			this.mapShape[shape.code] = shape;
+			shape.combine();
 		}
 		return shape;
 	}
@@ -141,7 +142,7 @@ class ShapeFactory extends Eventful {
 	removeShape(shape) {
 		if (shape && shape.code) {
 			this.hideHightLight(shape);
-			shape.uncouple(shape);
+			shape.uncouple();
 			delete this.mapShape[shape.code];
 		}
 		return shape;
@@ -243,15 +244,15 @@ function update2List(source, model, action, name='') {
 	let updateModel = model;
 	const i = list.findIndex(elem => { return elem.code == model.code; })
 	switch(action.order) {
-		case orders.BINDING:
+		case orders.Binding:
-		case orders.ADD:
+		case orders.Add:
 			list.push(model);
 			break;
-		case orders.UNBINDING:
+		case orders.Unbinding:
-		case orders.DELETE:
+		case orders.Delete:
 			i >= 0 && list.splice(i, 1);
 			break;
-		case orders.UPDATE:
+		case orders.Update:
 			updateModel = Object.assign(list[i]||{}, model)
 			break;
 	}

src/iscs_new/map.js

@@ -9,10 +9,10 @@ import Controller from './controller';
 import StateHandle  from './stateHandle';
 import ShapeFactory from './factory';
 import orders from './utils/orders';
+import shapeType from './constant/shapeType';
 
 const renderer = 'canvas';
 const devicePixelRatio = 1;
-
 class JMap {
 	constructor(opts) {
 		// 内部鼠标事件
@@ -75,9 +75,8 @@ class JMap {
 		};
 
 		// 加载插件
-		if (opts.plugins) {
+		this.plugins = opts.plugins||[];
-			opts.plugins.forEach(el => { this.use(el); });
+		this.plugins.forEach(el => { this.use(el); });
-		}
 	}
 
 	setMap(templates=[], source={}, eventOpts={}) {
@@ -151,7 +150,7 @@ class JMap {
 	repaint(source={}) {
 		this.$shapeFactory.parse(source, shape => {
 			if (shape) {
-				this.$painter.add(shape);
+				this.$painter.add(shape)
 			}
 		});
 		return this;
@@ -168,13 +167,13 @@ class JMap {
 			if (updateModel) {
 				this.$controller.clear()
 				switch(action.order) {
-					case orders.BINDING:
+					case orders.Binding:
-					case orders.ADD:
+					case orders.Add:
 						newShape = this.$shapeFactory.createShape(updateModel, action.shapeType);
-						this.$shapeFactory.storageShape(newShape)
+						this.$shapeFactory.addShape(newShape)
 						this.$painter.add(newShape);
 						break;
-					case orders.DELETE:
+					case orders.Delete:
 						deps = curShape.getDepShapes();
 						deps.forEach(el => {
 							updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(el, {...action, shapeType: el.shapeType}): el;
@@ -186,20 +185,21 @@ class JMap {
 							}
 						});
 						break;
-					case orders.UPDATE:
+					case orders.Update:
-						updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action): model;
 						oldShape = this.$shapeFactory.removeShape(curShape);
 						newShape = this.$shapeFactory.createShape(updateModel, action.shapeType);
 						this.$painter.removeFromLayer(oldShape.type, oldShape.instanceHightLight);
 						this.$painter.removeFromLayer(oldShape.type, newShape.instanceHightLight);
 						this.$painter.remove(oldShape);
-						this.$shapeFactory.storageShape(newShape)
+						this.$shapeFactory.addShape(newShape)
 						this.$painter.add(newShape);
 						break;
-					case orders.UNBINDING:
+					case orders.Unbinding:
 						oldShape = this.$shapeFactory.removeShape(curShape);
 						this.$painter.removeFromLayer(oldShape.type, oldShape.instanceHightLight);
 						this.$painter.remove(oldShape);
+						this.$shapeFactory.addShape(oldShape);
+						this.$painter.add(oldShape);
 						break;
 				}
 			}
@@ -235,6 +235,10 @@ class JMap {
 		return this.$controller;
 	}
 
+	getStorage() {
+		return this.$controller.getStorage();
+	}
+
 	getShapeFactory() {
 		return this.$shapeFactory;
 	}
@@ -275,8 +279,9 @@ class JMap {
 		this.$zr.refresh()
 	}
 
-	use(install) {
+	use(el) {
-		install(this);
+		this.plugins.includes(el)||this.plugins.push(el)
+		el.install(this);
 	}
 
 	destroy() {
@@ -286,6 +291,10 @@ class JMap {
 		this.$controller.destroy();
 		this.$painter.destroy();
 		this.$zr && this.$zr.dispose();
+		this.plugins.forEach(el => {
+			el.uninstall(this);
+		})
+		this.plugins = [];
 	}
 
 	on(name, cb, context) {
@@ -311,8 +320,8 @@ class JMap {
 				this.$eventEmitter.on(events.OptionUpdate, cb, context);
 				break;
 
-			case events.Selected:
+			case events.Click:
-				this.$controller.on(events.Selected, cb, context);
+				this.$controller.on(events.Click, cb, context);
 				break;
 			case events.ContextMenu:
 				this.$controller.on(events.ContextMenu, cb, context);
@@ -362,8 +371,8 @@ class JMap {
 				this.$eventEmitter.off(events.OptionUpdate, cb, context);
 				break;
 
-			case events.Selected:
+			case events.Click:
-				this.$controller.off(events.Selected, cb);
+				this.$controller.off(events.Click, cb);
 				break;
 			case events.ContextMenu:
 				this.$controller.off(events.ContextMenu, cb);

src/iscs_new/plugins/shapeBuilder/entry.vue

@@ -0,0 +1,36 @@
+<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>
+  </div>
+</template>
+
+<script>
+import * as graphic from '../../core/graphic';
+
+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)
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		position: absolute;
+	    top: 0;
+	}
+</style>

src/iscs_new/plugins/shapeBuilder/index.js

@@ -1,80 +1,81 @@
 import Vue from 'vue';
-import shapeTypeSelect from './shapeTypeSelect.vue';
+import events from '@/iscs_new/utils/events';
+import entry from './entry.vue';
 
-const GrSelect = Vue.extend(shapeTypeSelect);
+const VuePage = Vue.extend(entry);
-const toggleVisible = (el, show) => {
+const toggling = (page, show) => {
     if (show) {
         Vue.nextTick(() => {
-            el.instance.visible = true;
+            page.visible = true;
         });
     } else {
-        el.instance.visible = false;
+        page.visible = false;
     }
 };
 
-
+const handle = {
-class Handle {
+	onClick(e) {
-	constructor() {
+		if (!e) {
-		this._shapeType = '';
+			this.page.type = '';
 		}
-
+		console.log('onClick', this, e)
-	accept({shapeType}) {
+	},
-		console.log(111111111111111, 'accept')
-		this._shapeType = shapeType;
-	}
-
-	onSelect(e) {
-		// console.log('onSelect', e)
-	}
-
 	onContextMenu(e) {
-		// console.log('onContextMenu', e)
+		console.log('onContextMenu', this, e)
-	}
+	},
-
 	onBuildShape(e) {
-		// console.log('onBuildShape', e)
+		console.log('onBuildShape', this, e)
 	}
 }
-
 class ShapeBuilder {
-	constructor(map, handle) {
+	constructor(map) {
+		this.zr = map.getZr();
 		this.map = map;
-		this.handle = handle;
+		this.page =  this.initUI();
-		this.initUI(map.getZr());
 	}
 
-	initUI(zr) {
+	initUI() {
-		const el = zr.dom;
+		const el = this.zr.dom;
-		const grSelect = new GrSelect({
+		const page = new VuePage({
 			el: document.createElement('div'),
 			data () {}
 		});
 
-		el.instance = grSelect;
+		el.page = page;
-		el.dom = grSelect.$el;
+		el.dom = page.$el;
 		el.grSelectStyle = {};
 		el.appendChild(el.dom);
-		el.instance.$on('change', e => this.handle.accept(e));
+		return page;
-		this.grSelect = grSelect;
 	}
 
 	addEventListener() {
 		if (this.map) {
-			this.map.on(events.Select, this.handle.onSelect, this.handle);
+			console.log(this.map)
-			this.map.on(events.ContextMenu, this.handle.onContextMenu, this.handle);
+			this.map.on(events.Click, handle.onClick, this);
-			this.map.on(events.BuildShape, this.handle.onBuildShape, this.handle);
+			this.map.on(events.ContextMenu, handle.onContextMenu, this);
+			this.map.on(events.BuildShape, handle.onBuildShape, this);
 		}
 	}
 
 	removeEventListener() {
-		if (this.zr) {
+		if (this.map) {
-			this.map.off(events.Select, this.handle.onSelect, this.handle);
+			this.map.off(events.Click, handle.onClick, this);
-			this.map.off(events.ContextMenu, this.handle.onContextMenu, this.handle);
+			this.map.off(events.ContextMenu, handle.onContextMenu, this);
-			this.map.off(events.BuildShape, this.handle.onBuildShape, this.handle);
+			this.map.off(events.BuildShape, handle.onBuildShape, this);
 		}
 	}
 }
 
-export default function install(map) {
+export default {
-	const shapeBuilder = new ShapeBuilder(map, new Handle());
+	el: null,
+	install(map) {
+		this.el = new ShapeBuilder(map);
+		this.el.addEventListener();
+	},
+	uninstall(map) {
+		if (this.el) {
+			this.el.removeEventListener();
+			this.el = null;
+		}
+	}
 }

src/iscs_new/plugins/shapeBuilder/shapeTypeSelect.vue

@@ -1,24 +0,0 @@
-<template>
-  <div v-show="visible">
-    <div class="loading__container">
-		111111111
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-    data () {
-        return {
-			visible: true,
-        };
-    },
-	mounted() {
-		this.$emit('change', {shapeType: 'Rect'});
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/iscs_new/plugins/shapeProperty/entry.vue

@@ -0,0 +1,31 @@
+<template>
+  	<el-drawer
+		class="container"
+		title="我是标题"
+		:modal="false"
+		:visible.sync="visible"
+		:with-header="false">
+		<span>我来啦!</span>
+	</el-drawer>
+</template>
+
+<script>
+import * as graphic from '../../core/graphic';
+
+export default {
+    data () {
+        return {
+			visible: true,
+        };
+    },
+	methods: {
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		position: absolute;
+	    top: 0;
+	}
+</style>

src/iscs_new/plugins/shapeProperty/index.js

@@ -0,0 +1,81 @@
+import Vue from 'vue';
+import events from '@/iscs_new/utils/events';
+import entry from './entry.vue';
+
+const elPage = Vue.extend(entry);
+
+const toggling = (page, show) => {
+    if (show) {
+        Vue.nextTick(() => {
+			page.visible = true;
+        });
+    } else {
+        page.visible = false;
+    }
+};
+
+
+const handle = {
+	onClick(e) {
+		console.log(this)
+		toggling(this.page, !!e);
+		// console.log('onClick', this, e)
+	},
+	onContextMenu(e) {
+		// console.log('onContextMenu', this, e)
+	},
+	onBuildShape(e) {
+		// console.log('onBuildShape', this, 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);
+			this.map.on(events.BuildShape, handle.onBuildShape, this);
+		}
+	}
+
+	removeEventListener() {
+		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);
+		}
+	}
+}
+
+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;
+		}
+	}
+}

src/iscs_new/selectHandle.js

@@ -13,6 +13,7 @@ export default class SelectHandle {
 
 	onSelected(e) {
 		if (e.target) {
+			const storage = this.$controller.getStorage();
 			this.e = {...e};
 			if ([`Control`].includes(this.$controller.getKeyStr())) {
 				if (this.$controller.isSelected(e.target.code)) {
@@ -21,7 +22,7 @@ export default class SelectHandle {
 				} else {
 					this.addSelected(e.target);
 				}
-			} else if (!this.$controller.storage.has(e.target.code)){
+			} else if (!storage.has(e.target.code)){
  				this.clear();
 				this.addSelected(e.target);
 			} else {
@@ -31,17 +32,20 @@ export default class SelectHandle {
 	}
 
 	addSelected(target) {
-		this.$controller.storage.set(target.code, target);
+		const storage = this.$controller.getStorage();
+		storage.set(target.code, target);
 		target.shapeFactory.showHightLight(target);
 	}
 
 	delSelected(target) {
+		const storage = this.$controller.getStorage();
 		target.shapeFactory.hideHightLight(target);;
-		this.$controller.storage.delete(target.code);
+		storage.delete(target.code);
 	}
 
 	clear() {
-		this.$controller.storage.values().forEach(target => {
+		const storage = this.$controller.getStorage();
+		storage.values().forEach(target => {
 			this.delSelected(target);
 		});
 	}

src/iscs_new/selectingHandle.js

@@ -268,7 +268,8 @@ export default class SelectingHandle {
 	}
 
 	setSelected(target) {
-		this.$controller.storage.set(target.code, target);
+		const storage = this.$controller.getStorage();
+		storage.set(target.code, target);
 		target.shapeFactory.showHightLight(target);
 	}
 

src/iscs_new/utils/events.js

@@ -1,6 +1,6 @@
 export default {
 	Reflect: 'reflect',
-	Selected: 'selected',
+	Click: 'click',
 	ContextMenu: 'contextmenu',
 	DataZoom: 'dataZoom',
 	Keydown: 'keydown',

src/iscs_new/utils/orders.js

@@ -1,7 +1,7 @@
 export default {
-	ADD: '&ADD',
+	Add: '&Add',
-	DELETE: '&DEL',
+	Delete: '&DEL',
-	UPDATE: '&UPT',
+	Update: '&UPT',
-	BINDING: '&BINDING',
+	Binding: '&Binding',
-	UNBINDING: '&UNBINDING',
+	Unbinding: '&Unbinding',
 }

src/views/iscs_new/iscsDraw/index.vue

@@ -36,7 +36,7 @@ import BuilderFactory from '@/iscs_new/core/form/builderFactory';
 import DataForm from '../components/dataForm';
 import orders from '@/iscs_new/utils/orders';
 import * as utils from '@/iscs_new/utils/utils';
-import idb from '../utils/indexedDb.js';
+import Idb from '../utils/indexedDb.js';
 import shapeType from '@/iscs_new/constant/shapeType.js';
 
 export default {
@@ -93,9 +93,9 @@ export default {
 					(temp,el) => el&&temp? temp.union(el.getBoundingRect().clone()): el.getBoundingRect(), null);
 				const position = rect? [(rect.x + rect.width)/2, (rect.y + rect.height)/2]: [0,0];
 				const model = { id, name, type, shapeList, position };
-				idb.delete('composeList', model.id);
+				Idb.delete('composeList', model.id);
-				idb.write('composeList', model);
+				Idb.write('composeList', model);
-				idb.list('composeList').then(list => {
+				Idb.list('composeList').then(list => {
 					console.log(list)
 				})
 			}
@@ -124,7 +124,7 @@ export default {
                     newModel.type = this.enabledTab;
                     newModel.name = '<名称>';
                     newModel.stateList = [];
-                    this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]);
+                    this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.Add}}]);
                     this.clear(this.enabledTab);
                 }
             });
@@ -136,7 +136,7 @@ export default {
                     model.code = this.selected.code;
                     model.type = this.selected.type;
                     model.name = this.selected.name;
-                    this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.UPDATE}}]);
+                    this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.Update}}]);
                     this.clear(this.enabledTab);
                 }
             });
@@ -148,7 +148,7 @@ export default {
                     model.code = this.selected.code;
                     model.type = this.selected.type;
                     model.name = this.selected.name;
-                    this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.DELETE}}]);
+                    this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.Delete}}]);
                     this.clear(this.enabledTab);
                 }
             });

src/views/iscs_new/iscsDraw/iscsCanvas.vue

@@ -7,7 +7,9 @@
 <script>
 import Vue from 'vue';
 import Iscs from '@/iscs_new/map';
-import idb from '../utils/indexedDb.js';
+import Idb from '../utils/indexedDb.js';
+import ShapeBuilder from '@/iscs_new/plugins/shapeBuilder';
+import ShapeProperty from '@/iscs_new/plugins/shapeProperty';
 import { mapGetters } from 'vuex';
 
 export default {
@@ -77,7 +79,11 @@ export default {
                     scaleRate: 1,
                     offsetX: 0,
                     offsetY: 0
-                }
+                },
+				plugins: [
+					ShapeBuilder,
+					// ShapeProperty
+				]
             });
 
 			const option = {
@@ -91,7 +97,7 @@ export default {
 			}
 			if (this.$route.query.id) {
 				setTimeout(_ => {
-					idb.select('composeList', this.$route.query.id).then(resp => {
+					Idb.select('composeList', this.$route.query.id).then(resp => {
 						this.$iscs.setMap([], {
 							elementList: resp.shapeList||[],
 							composeList: []
@@ -113,7 +119,7 @@ export default {
             Vue.prototype.$iscs = this.$iscs;
             this.$iscs.on('viewLoaded', this.onViewLoaded, this);
             this.$iscs.on('contextmenu', this.onContextMenu, this);
-            this.$iscs.on('selected', this.onSelected, this);
+            this.$iscs.on('click', this.onClick, this);
 			this.$iscs.on('reflect', this.onReflect, this);
             this.$iscs.on('keyboard', this.onKeyboard, this);
             window.document.oncontextmenu = function () {
@@ -128,7 +134,7 @@ export default {
             console.log(hook);
         },
         // 点击选择事件
-        onSelected(em={}) {
+        onClick(em={}) {
 			this.$emit('selected', em);
         },
 		onReflect(em={}) {

src/views/test/index.vue

@@ -1,14 +1,13 @@
 <template>
   <div>
-	<div>
+    <div :id="iscsId" v-loading="loading" :style="{ width: width +'px', height: height +'px',background:'#425a74' }" class="iscs-canvas" />
-		<el-row>
+	<el-button-group>
-			<el-input type="textarea" :rows="4" v-model="json" />
 		<el-button @click="doRemove"> 删除 </el-button>
+		<el-button @click="doBinding">绑定</el-button>
 		<el-button @click="doUnbinding">解绑</el-button>
 		<el-button @click="doSource"> 源数据 </el-button>
-		</el-row>
+	</el-button-group>
-	</div>
+	<el-input type="textarea" :rows="6" v-model="json" />
-    <div :id="iscsId" v-loading="loading" :style="{ width: width +'px', height: height +'px',background:'#425a74' }" class="iscs-canvas" />
   </div>
 </template>
 
@@ -17,10 +16,11 @@ import Vue from 'vue';
 import Iscs from '@/iscs_new/map';
 import orders from '@/iscs_new/utils/orders';
 import shapeType from '@/iscs_new/constant/shapeType';
-import shapeBuilderPlugin from '@/iscs_new/plugins/shapeBuilder';
+import ShapeBuilder from '@/iscs_new/plugins/shapeBuilder';
+import ShapeProperty from '@/iscs_new/plugins/shapeProperty';
 import { mapGetters } from 'vuex';
 import { exitFullscreen } from '@/utils/screen';
-
+import * as utils from '@/iscs_new/utils/utils';
 
 export default {
     data() {
@@ -92,15 +92,18 @@ export default {
                     offsetY: 0
                 },
 				plugins: [
-					shapeBuilderPlugin
+					ShapeBuilder,
+					ShapeProperty
 				]
             });
 
 			Vue.prototype.$iscs = this.$iscs;
 			this.$iscs.on('viewLoaded', this.onUpdate, this);
             this.$iscs.on('contextmenu', this.onContextMenu, this);
-			this.$iscs.on('selected', this.onSelected, this);
+			this.$iscs.on('click', this.onClick, this);
 			this.$iscs.on('keyboard', this.onKeyboard, this);
+
+			const opts = { panEnable: true, zoomEnable: true, keyEnable: true, draggle: true, selecting: true, selectable: true, reflect: true }
 			this.$iscs.setMap([
 				{
 					type: 'Device',
@@ -334,15 +337,7 @@ export default {
 						composeCode: ''
 					}
 				]
-			}, {
+			}, opts);
-				panEnable: true,
-				zoomEnable: true,
-				keyEnable: true,
-				draggle: true,
-				selecting: true,
-				selectable: true,
-				reflect: true
-			});
 
             window.document.oncontextmenu = function () {
                 return false;
@@ -365,14 +360,61 @@ export default {
  			console.log(hook);
         },
         // 点击选择事件
-        onSelected(em) {
+        onClick(em) {
 			this.selected = em;
-			console.log(em, 'selected');
         },
         // 右键点击事件
         onContextMenu(em) {
 			this.selected = em;
-			console.log(em, 'contextMenu');
+        },
+		doRemove() {
+			if (this.selected) {
+				this.$iscs.render([
+					{
+						model: this.selected.model,
+						action: { order: orders.Delete, shapeType: shapeType.Compose }
+					}
+				]);
+			}
+		},
+		doBinding() {
+			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('请选择两个及其以上数目元素');
+			}
+		},
+		doUnbinding() {
+			if (this.selected) {
+				this.$iscs.render([
+					{
+						model: this.selected.model,
+						action: { order: orders.Unbinding, shapeType: shapeType.Compose }
+					}
+				]);
+			}
+		},
+		doSource() {
+			console.log(this.$iscs.getSource());
+			this.json = JSON.stringify(this.$iscs.getSource())
 		},
         resize() {
             this.$nextTick(() => {
@@ -398,30 +440,6 @@ export default {
         },
         stateMessage(val) {
             this.$iscs && this.$iscs.setDeviceStatus(val);
-        },
-		doRemove() {
-			if (this.selected) {
-				this.$iscs.render([
-					{
-						model: this.selected.model,
-						action: { order: orders.DELETE, shapeType: shapeType.Compose }
-					}
-				]);
-			}
-		},
-		doUnbinding() {
-			if (this.selected) {
-				this.$iscs.render([
-					{
-						model: this.selected.model,
-						action: { order: orders.UNBINDING, shapeType: shapeType.Compose }
-					}
-				]);
-			}
-		},
-		doSource() {
-			console.log(this.$iscs.getSource());
-			this.json = JSON.stringify(this.$iscs.getSource())
         }
     }
 };