优化iscs_new 代码
This commit is contained in:
ival
parent
1be38bdb76
commit
b5582126ba
@ -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.clearClipboard();
|
||||
this._storage.clear();
|
||||
this._storage.clearClipboard();
|
||||
this._target = null;
|
||||
this._pan = false;
|
||||
}
|
||||
|
||||
getStorage() {
|
||||
return this._storage;
|
||||
}
|
||||
|
||||
getKeyStr() {
|
||||
return this._shortcuts;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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 &&
|
||||
el.model) {
|
||||
if (el) {
|
||||
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 &&
|
||||
el.model &&
|
||||
if (el) {
|
||||
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 = [];
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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.ADD:
|
||||
case orders.Binding:
|
||||
case orders.Add:
|
||||
list.push(model);
|
||||
break;
|
||||
case orders.UNBINDING:
|
||||
case orders.DELETE:
|
||||
case orders.Unbinding:
|
||||
case orders.Delete:
|
||||
i >= 0 && list.splice(i, 1);
|
||||
break;
|
||||
case orders.UPDATE:
|
||||
case orders.Update:
|
||||
updateModel = Object.assign(list[i]||{}, model)
|
||||
break;
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
opts.plugins.forEach(el => { this.use(el); });
|
||||
}
|
||||
this.plugins = opts.plugins||[];
|
||||
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.ADD:
|
||||
case orders.Binding:
|
||||
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:
|
||||
updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action): model;
|
||||
case orders.Update:
|
||||
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) {
|
||||
install(this);
|
||||
use(el) {
|
||||
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:
|
||||
this.$controller.on(events.Selected, cb, context);
|
||||
case events.Click:
|
||||
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:
|
||||
this.$controller.off(events.Selected, cb);
|
||||
case events.Click:
|
||||
this.$controller.off(events.Click, cb);
|
||||
break;
|
||||
case events.ContextMenu:
|
||||
this.$controller.off(events.ContextMenu, cb);
|
||||
|
||||
36
src/iscs_new/plugins/shapeBuilder/entry.vue
Normal file
36
src/iscs_new/plugins/shapeBuilder/entry.vue
Normal file
@ -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>
|
||||
@ -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 toggleVisible = (el, show) => {
|
||||
const VuePage = Vue.extend(entry);
|
||||
const toggling = (page, show) => {
|
||||
if (show) {
|
||||
Vue.nextTick(() => {
|
||||
el.instance.visible = true;
|
||||
page.visible = true;
|
||||
});
|
||||
} else {
|
||||
el.instance.visible = false;
|
||||
page.visible = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
class Handle {
|
||||
constructor() {
|
||||
this._shapeType = '';
|
||||
const handle = {
|
||||
onClick(e) {
|
||||
if (!e) {
|
||||
this.page.type = '';
|
||||
}
|
||||
|
||||
accept({shapeType}) {
|
||||
console.log(111111111111111, 'accept')
|
||||
this._shapeType = shapeType;
|
||||
}
|
||||
|
||||
onSelect(e) {
|
||||
// console.log('onSelect', e)
|
||||
}
|
||||
|
||||
console.log('onClick', this, 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.initUI(map.getZr());
|
||||
this.page = this.initUI();
|
||||
}
|
||||
|
||||
initUI(zr) {
|
||||
const el = zr.dom;
|
||||
const grSelect = new GrSelect({
|
||||
initUI() {
|
||||
const el = this.zr.dom;
|
||||
const page = new VuePage({
|
||||
el: document.createElement('div'),
|
||||
data () {}
|
||||
});
|
||||
|
||||
el.instance = grSelect;
|
||||
el.dom = grSelect.$el;
|
||||
el.page = page;
|
||||
el.dom = page.$el;
|
||||
el.grSelectStyle = {};
|
||||
el.appendChild(el.dom);
|
||||
el.instance.$on('change', e => this.handle.accept(e));
|
||||
this.grSelect = grSelect;
|
||||
return page;
|
||||
}
|
||||
|
||||
addEventListener() {
|
||||
if (this.map) {
|
||||
this.map.on(events.Select, this.handle.onSelect, this.handle);
|
||||
this.map.on(events.ContextMenu, this.handle.onContextMenu, this.handle);
|
||||
this.map.on(events.BuildShape, this.handle.onBuildShape, this.handle);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
removeEventListener() {
|
||||
if (this.zr) {
|
||||
this.map.off(events.Select, this.handle.onSelect, this.handle);
|
||||
this.map.off(events.ContextMenu, this.handle.onContextMenu, this.handle);
|
||||
this.map.off(events.BuildShape, this.handle.onBuildShape, this.handle);
|
||||
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 function install(map) {
|
||||
const shapeBuilder = new ShapeBuilder(map, new Handle());
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
31
src/iscs_new/plugins/shapeProperty/entry.vue
Normal file
31
src/iscs_new/plugins/shapeProperty/entry.vue
Normal file
@ -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>
|
||||
81
src/iscs_new/plugins/shapeProperty/index.js
Normal file
81
src/iscs_new/plugins/shapeProperty/index.js
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
export default {
|
||||
Reflect: 'reflect',
|
||||
Selected: 'selected',
|
||||
Click: 'click',
|
||||
ContextMenu: 'contextmenu',
|
||||
DataZoom: 'dataZoom',
|
||||
Keydown: 'keydown',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
export default {
|
||||
ADD: '&ADD',
|
||||
DELETE: '&DEL',
|
||||
UPDATE: '&UPT',
|
||||
BINDING: '&BINDING',
|
||||
UNBINDING: '&UNBINDING',
|
||||
Add: '&Add',
|
||||
Delete: '&DEL',
|
||||
Update: '&UPT',
|
||||
Binding: '&Binding',
|
||||
Unbinding: '&Unbinding',
|
||||
}
|
||||
|
||||
@ -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.write('composeList', model);
|
||||
idb.list('composeList').then(list => {
|
||||
Idb.delete('composeList', model.id);
|
||||
Idb.write('composeList', model);
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
@ -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={}) {
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-input type="textarea" :rows="4" v-model="json" />
|
||||
<div :id="iscsId" v-loading="loading" :style="{ width: width +'px', height: height +'px',background:'#425a74' }" class="iscs-canvas" />
|
||||
<el-button-group>
|
||||
<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>
|
||||
</div>
|
||||
<div :id="iscsId" v-loading="loading" :style="{ width: width +'px', height: height +'px',background:'#425a74' }" class="iscs-canvas" />
|
||||
</el-button-group>
|
||||
<el-input type="textarea" :rows="6" v-model="json" />
|
||||
</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: ''
|
||||
}
|
||||
]
|
||||
}, {
|
||||
panEnable: true,
|
||||
zoomEnable: true,
|
||||
keyEnable: true,
|
||||
draggle: true,
|
||||
selecting: true,
|
||||
selectable: true,
|
||||
reflect: true
|
||||
});
|
||||
}, opts);
|
||||
|
||||
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())
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user