joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

修改代码逻辑

Browse Source
This commit is contained in:
ival 2021-04-02 18:02:06 +08:00
parent cb9aa77312
commit 0c87981d43
12 changed files with 72 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/iscs_new/core/abstractShape.js
View File

@ -1,11 +1,12 @@
import * as graphic from '../core/graphic';
import Group from 'zrender/src/container/Group';
import shapeRender from '../constant/shapeRender';
function shapeStyleBuilder(model) {
return {
subType: '__hover__',
...shapeRender,
...model,
code: model.code,
z: 9998,
cursor: 'pointer',
shape: {
@ -23,12 +24,13 @@ function shapeStyleBuilder(model) {
}
// 图形抽象层
class AbstractShape {
class AbstractShape extends Group {
constructor({model, shapeType, shapeFactory}) {
super({...shapeRender, code: model.code, type: model.type});
this.model = model;
this.shapeType = shapeType;
this.shapeFactory = shapeFactory;
this.hightLightInstance = new graphic.Rect(shapeStyleBuilder(this.model));
this.instanceHightLight = new graphic.Rect(shapeStyleBuilder(this.model));
}
// 拖动
@ -53,15 +55,9 @@ class AbstractShape {
// 解除绑定
uncouple() {}
// 获取包围框
getBoundingRect() {}
// 获取依赖图形
getDepShapes() {}
// 修改属性
attr() {}
// 设置状态
setState(state) {}
}

4
src/iscs_new/draggable/Image.js
View File

@ -97,7 +97,7 @@ export default class ImageDraggable extends Group {
this.handle.e.target &&
this.offset) {
if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) {
const type = this.handle.e.target.model.type;
const type = this.handle.e.target.type;
const dx = Math.round(e.offsetX-this.offset.x);
const dy = Math.round(e.offsetY-this.offset.y);
@ -113,7 +113,7 @@ export default class ImageDraggable extends Group {
if (this.target &&
this.handle.e.target &&
this.offset) {
const type = this.handle.e.target.model.type;
const type = this.handle.e.target.type;
const dx = Math.round(e.offsetX-this.offset.x);
const dy = Math.round(e.offsetY-this.offset.y);
this.setShape(...this.handle.normalizedDiff(dx, dy));

21
src/iscs_new/factory/compose.js
View File

@ -14,15 +14,14 @@ class Compose extends AbstractShape {
create() {
this.instance = new Group({
...shapeRender,
...this.option,
...this.model
});
this.model.elementCodes.forEach(code => {
const el = this.shapeFactory.getShapeByCode(code);
if (el.instance) {
this.shapeFactory.removeFromLayer(el.model.type, el.instance);
this.instance.add(el.instance);
if (el) {
this.shapeFactory.removeFromLayer(el.type, el);
this.instance.add(el);
}
})
this.instance.scale = this.model.scale;
@ -30,6 +29,7 @@ class Compose extends AbstractShape {
this.instance.position = this.model.position;
this.instance.origin = utils.createOrigin(this.instance);
this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
this.add(this.instance);
}
// 拖动
@ -67,8 +67,8 @@ class Compose extends AbstractShape {
const el = this.shapeFactory.getShapeByCode(code);
if (el &&
el.model) {
this.shapeFactory.removeFromLayer(el.model.type, el.instance);
this.instance.add(el.instance);
this.shapeFactory.removeFromLayer(el.type, el);
this.instance.add(el);
el.model.composeCode = this.model.code;
el.attr(el.model);
}
@ -84,8 +84,8 @@ class Compose extends AbstractShape {
if (el &&
el.model &&
el.model.composeCode) {
this.instance.remove(el.instance);
this.shapeFactory.addToLayer(el.model.type, el.instance);
this.instance.remove(el);
this.shapeFactory.addToLayer(el.type, el);
el.model.composeCode = '';
el.attr(el.model);
}
@ -102,11 +102,6 @@ class Compose extends AbstractShape {
getDepShapes() {
return this.model.elementCodes.reduce((shapes, code) => shapes.concat(this.shapeFactory.getShapeByCode(code).getDepShapes()), [this]);
}
// 获取包围框
getBoundingRect() {
return utils.createBoundingRect(this.instance);
}
}
export default Compose;

12
src/iscs_new/factory/element.js
View File

@ -32,7 +32,6 @@ class Element extends AbstractShape {
this.instance = new elementBuilder({
...shapeRender,
...this.option,
...this.model,
onmouseover,
onmousemove,
@ -44,6 +43,7 @@ class Element extends AbstractShape {
this.instance.position = this.model.position;
this.instance.origin = utils.createOrigin(this.instance);
this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
this.add(this.instance);
}
}
@ -85,6 +85,8 @@ class Element extends AbstractShape {
const index = compose.model.elementCodes.findIndex(this.model.code);
if (index < 0) {
compose.model.elementCodes.push(this.model.code);
this.shapeFactory.removeFormLayer(el.type, this);
compose.add(this);
}
}
}
@ -100,6 +102,8 @@ class Element extends AbstractShape {
const index = compose.model.elementCodes.findIndex(this.model.code);
if (index >= 0) {
compose.model.elementCodes.splice(index, 1);
compose.remove(this);
this.shapeFactory.addToLayer(el.type, this);
}
}
}
@ -113,12 +117,6 @@ class Element extends AbstractShape {
getDepShapes() {
return [this];
}
// 获取包围框
getBoundingRect() {
return utils.createBoundingRect(this.instance);
}
}
export default Element;

19
src/iscs_new/factory/index.js
View File

@ -130,17 +130,18 @@ class ShapeFactory extends Eventful {
}
storageShape(shape) {
if (shape && shape.model) {
this.mapShape[shape.model.code] = shape;
console.log(shape);
if (shape && shape.code) {
this.mapShape[shape.code] = shape;
}
return shape;
}
removeShape(shape) {
if (shape && shape.model) {
if (shape && shape.code) {
this.hideHightLight(shape);
shape.uncouple(shape);
delete this.mapShape[shape.model.code];
delete this.mapShape[shape.code];
}
return shape;
}
@ -155,9 +156,9 @@ class ShapeFactory extends Eventful {
showHightLight(shape) {
const target = this.$controller.getTarget();
if (shape.hightLightInstance) {
shape.hightLightInstance.setShape(shape.instance.getBoundingRect());
this.$painter.addToLayer(shapeLayer.HightLight)(shape.hightLightInstance);
if (shape.instanceHightLight) {
shape.instanceHightLight.setShape(shape.getBoundingRect())
this.$painter.addToLayer(shapeLayer.HightLight)(shape.instanceHightLight);
}
if (target == shape) {
@ -171,8 +172,8 @@ class ShapeFactory extends Eventful {
hideHightLight(shape) {
const target = this.$controller.getTarget();
if (shape.hightLightInstance) {
this.$painter.removeFromLayer(shapeLayer.HightLight)(shape.hightLightInstance);
if (shape.instanceHightLight) {
this.$painter.removeFromLayer(shapeLayer.HightLight)(shape.instanceHightLight);
}
if (target != shape) {

24
src/iscs_new/map.js
View File

@ -147,10 +147,9 @@ class JMap {
render(list=[]) {
list.forEach(({model, action}) => {
const updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action): model;
const shape = this.$shapeFactory.getShapeByCode(updateModel.code);
const deps = shape.getDepShapes();
let updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action): model;
let curShape = this.$shapeFactory.getShapeByCode(updateModel.code);
let deps = null;
let oldShape = null
let newShape = null;
@ -163,21 +162,26 @@ class JMap {
this.$painter.add(newShape);
break;
case orders.DELETE:
oldShape = this.$shapeFactory.removeShape(shape);
deps.forEach(shape => {
this.$shapeFactory.updateSource(shape.model, {...action, shapeType: shape.option.shapeType});
this.$painter.remove(shape);
deps = curShape.getDepShapes();
deps.forEach(el => {
updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(el, {...action, shapeType: el.shapeType}): el;
if (updateModel) {
curShape = this.$shapeFactory.getShapeByCode(updateModel.code);
oldShape = this.$shapeFactory.removeShape(curShape);
this.$painter.remove(oldShape);
}
});
break;
case orders.UPDATE:
oldShape = this.$shapeFactory.removeShape(shape);
updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action): model;
oldShape = this.$shapeFactory.removeShape(curShape);
newShape = this.$shapeFactory.createShape(updateModel, action.shapeType);
this.$painter.remove(oldShape);
this.$shapeFactory.storageShape(newShape)
this.$painter.add(newShape);
break;
case orders.UNBINDING:
oldShape = this.$shapeFactory.removeShape(shape);
oldShape = this.$shapeFactory.removeShape(curShape);
this.$painter.remove(oldShape);
break;
}

11
src/iscs_new/painter.js
View File

@ -37,7 +37,6 @@ class Painter extends Group {
Object.keys(graphic).forEach(key => {
this.mapShapeLayer[key] = new Group({
name: `__${key}__`
// matrix.identity(matrix.create())
});
})
@ -48,19 +47,19 @@ class Painter extends Group {
}
add(shape) {
if (shape && shape.instance) {
this.addToLayer(shape.model.type)(shape.instance);
if (shape) {
this.addToLayer(shape.type)(shape);
}
}
remove(shape) {
if (shape && shape.instance) {
this.removeFromLayer(shape.model.type)(shape.instance);
if (shape) {
this.removeFromLayer(shape.type)(shape);
}
}
update(shape) {
if (shape && shape.instance) {
if (shape) {
//
}
}

8
src/iscs_new/selectHandle.js
View File

@ -17,7 +17,7 @@ export default class SelectHandle {
if (e.target) {
this.e = {...e};
if (['Control'].includes(this.$controller.getKeyStr())) {
if (this.$controller.isSelected(e.target.model.code)) {
if (this.$controller.isSelected(e.target.code)) {
this.$controller.setTarget(null);
this.delSelected(e.target);
} else {
@ -31,13 +31,13 @@ export default class SelectHandle {
}
addSelected(target) {
this.$controller.storage.set(target.model.code, target);
this.$controller.storage.set(target.code, target);
target.shapeFactory.showHightLight(target);
}
delSelected(target) {
target.shapeFactory.hideHightLight(target);;
this.$controller.storage.delete(target.model.code);
this.$controller.storage.delete(target.code);
}
clear() {
@ -48,7 +48,7 @@ export default class SelectHandle {
createSelected(target) {
if (this.$map.draggle) {
switch (target.model.type) {
switch (target.type) {
case graphic.Line:
return new LineDraggable(this);
case graphic.Image:

2
src/iscs_new/selectingHandle.js
View File

@ -68,7 +68,7 @@ export default class SelectingHandle {
}
setSelected(target) {
this.$controller.storage.set(target.model.code, target);
this.$controller.storage.set(target.code, target);
target.shapeFactory.showHightLight(target);
}

3
src/iscs_new/transformHandle.js
View File

@ -15,7 +15,6 @@ export default class TransformHandle {
// 检查显隐
checkVisible(view) {
console.log(utils.createBoundingRectCheckVisible(view, this.transform).intersect(this.rect));
return utils.createBoundingRectCheckVisible(view, this.transform).intersect(this.rect);
}
@ -40,7 +39,7 @@ export default class TransformHandle {
// 更新偏移量
updateTransform(opt) {
this.transform = utils.createTransform({scale: [opt.scaleRate, opt.scaleRate], position: [-opt.offsetX, -opt.offsetY], rotation: 0});
this.transform = utils.createTransform({scale: [opt.scaleRate, opt.scaleRate], position: [-opt.offsetX/opt.scaleRate, -opt.offsetY/opt.scaleRate], rotation: 0});
this.transformAll();
}

13
src/iscs_new/utils/utils.js
View File

@ -66,28 +66,19 @@ export function createBoundingRect(view) {
rect.y = rect.y * scaleY + offsetY;
rect.width = rect.width * scaleX;
rect.height = rect.height * scaleY;
// let x1, y1, x2, y2;
// [x1, y1] = view.transformCoordToLocal(rect.x, rect.y);
// [x2, y2] = view.transformCoordToLocal(rect.x + rect.width, rect.y + rect.height);
// return new BoundingRect(x1, y1, x2-x1, y2-y1);
return rect;
}
// 计算变化计算包围框
export function createBoundingRectCheckVisible(view, transform) {
const rect = view.getBoundingRect();
const position = view.position;
const dx = position[0];
const dy = position[1];
const scaleX = transform[0];
const scaleY = transform[3];
const offsetX = transform[4];
const offsetY = transform[5];
rect.x = (rect.x + dx) * scaleX + offsetX;
rect.y = (rect.y + dy) * scaleY + offsetY;
rect.x = rect.x * scaleX + offsetX;
rect.y = rect.y * scaleY + offsetY;
rect.width = rect.width * scaleX;
rect.height = rect.height * scaleY;
return rect;

27
src/views/test/index.vue
View File

@ -151,7 +151,7 @@ export default {
name: 'b',
type: 'Circle',
scale: [1, 1],
position: [100, 0],
position: [0, 0],
rotation: 0,
shape: {
cx: 100,
@ -245,8 +245,8 @@ export default {
name: 'a',
type: 'Rect',
scale: [1, 1],
position: [0, 0],
rotation: Math.PI/4,
position: [100, 0],
rotation: Math.PI/2,
shape: {
x: 100,
y: 100,
@ -268,23 +268,26 @@ export default {
scale: [0.5, 0.5],
position: [100, 100],
rotation: Math.PI/2,
// composeCode: '1000',
composeCode: '1000',
},
{
code: '101',
type: 'Device',
elementCodes: ['3', '4'],
scale: [0.5, 0.5],
scale: [1, 1],
position: [200, 0],
rotation: 0,
// composeCode: '1000'
composeCode: '1000'
},
// {
// code: '1000',
// type: 'Combine',
// elementCodes: ['100', '101'],
// composeCode: ''
// }
{
code: '1000',
type: 'Device',
scale: [1, 1],
position: [0, 0],
rotation: 0,
elementCodes: ['100', '101'],
composeCode: ''
}
]
}, {
panEnable: true,