1. 修改界面复制粘贴的问题
This commit is contained in:
parent
b3fbfbb3ad
commit
c3587b4411
@ -324,6 +324,8 @@ export default class Controller extends Eventful {
|
||||
}
|
||||
|
||||
clear() {
|
||||
const shapeFactory = this.$map.getShapeFactory();
|
||||
this._storage.values().forEach(shape => shapeFactory.hideHightLight(shape));
|
||||
this._storage.clear();
|
||||
this._storage.clearClipboard();
|
||||
this._target = null;
|
||||
|
@ -38,29 +38,6 @@ class AbstractShape extends Group {
|
||||
this.instanceHightLight = new graphic.Rect(shapeStyleBuilder({subType: '@align', model: this.model}));
|
||||
}
|
||||
|
||||
// 拖动
|
||||
drift({dx, dy}) {
|
||||
this.model.base.position[0] = this.model.base.position[0] + dx;
|
||||
this.model.base.position[1] = this.model.base.position[1] + dy;
|
||||
this.instance.scale = this.model.base.scale;
|
||||
this.instance.position = this.model.base.position;
|
||||
this.instance.rotation = this.model.base.rotation*Math.PI/180;
|
||||
this.instance.origin = utils.createOrigin(this.instance);
|
||||
this.instance.transform = utils.createTransform({scale: this.model.base.scale, position: this.model.base.position, rotation: this.model.base.rotation*Math.PI/180});
|
||||
this.setInvisible(this.model.base.hide)
|
||||
}
|
||||
|
||||
// 修改状态
|
||||
attr(attrs) {
|
||||
this.instance? this.instance.attr(attrs): super.attr(attrs);
|
||||
}
|
||||
|
||||
// 设置显隐
|
||||
setInvisible(hide) {
|
||||
hide ? super.hide() : super.show();
|
||||
super.dirty();
|
||||
}
|
||||
|
||||
// 设置高亮
|
||||
active() {}
|
||||
|
||||
@ -85,6 +62,29 @@ class AbstractShape extends Group {
|
||||
// 设置状态
|
||||
setState(state) {}
|
||||
|
||||
// 拖动
|
||||
drift({dx, dy}) {
|
||||
this.model.base.position[0] = this.model.base.position[0] + dx;
|
||||
this.model.base.position[1] = this.model.base.position[1] + dy;
|
||||
this.instance.scale = this.model.base.scale;
|
||||
this.instance.position = this.model.base.position;
|
||||
this.instance.rotation = this.model.base.rotation*Math.PI/180;
|
||||
this.instance.origin = utils.createOrigin(this.instance);
|
||||
this.instance.transform = utils.createTransform({scale: this.model.base.scale, position: this.model.base.position, rotation: this.model.base.rotation*Math.PI/180});
|
||||
this.setInvisible(this.model.base.hide)
|
||||
}
|
||||
|
||||
// 修改状态
|
||||
attr(attrs) {
|
||||
this.instance? this.instance.attr(attrs): super.attr(attrs);
|
||||
}
|
||||
|
||||
// 设置显隐
|
||||
setInvisible(hide) {
|
||||
hide ? super.hide() : super.show();
|
||||
super.dirty();
|
||||
}
|
||||
|
||||
// 遍历执行
|
||||
traverse(cb) {
|
||||
this.eachChild(el => {
|
||||
|
@ -32,8 +32,6 @@ class Compose extends AbstractShape {
|
||||
...this.model.base,
|
||||
code: this.model.code,
|
||||
type: this.model.type,
|
||||
shape: {...this.model.shape},
|
||||
style: {...this.model.style},
|
||||
onmouseover,
|
||||
onmousemove,
|
||||
onmouseout
|
||||
@ -42,7 +40,7 @@ class Compose extends AbstractShape {
|
||||
this.model.elementCodes.forEach(code => {
|
||||
const el = this.shapeFactory.getShapeByCode(code);
|
||||
if (el) {
|
||||
this.shapeFactory.removeFromLayer(el.type)(el);
|
||||
this.shapeFactory.removeFromLayer(el.type, el);
|
||||
this.instance.add(el);
|
||||
}
|
||||
})
|
||||
@ -80,7 +78,7 @@ class Compose extends AbstractShape {
|
||||
if (el) {
|
||||
this.shapeFactory.hideHightLight(el);
|
||||
if (el.model) {
|
||||
this.shapeFactory.removeFromLayer(el.type)(el);
|
||||
this.shapeFactory.removeFromLayer(el.type, el);
|
||||
this.instance.add(el);
|
||||
el.model.composeCode = this.code;
|
||||
el.attr(el.model);
|
||||
@ -100,7 +98,7 @@ class Compose extends AbstractShape {
|
||||
if (el.model &&
|
||||
el.model.composeCode) {
|
||||
this.instance.remove(el);
|
||||
this.shapeFactory.addToLayer(el.type)(el);
|
||||
this.shapeFactory.addToLayer(el.type, el);
|
||||
el.model.composeCode = '';
|
||||
el.attr(el.model);
|
||||
}
|
||||
|
@ -101,7 +101,7 @@ class Element extends AbstractShape {
|
||||
compose.model.elementCodes.splice(index, 1);
|
||||
compose.instance.remove(this);
|
||||
compose.attr(compose.model);
|
||||
this.shapeFactory.addToLayer(el.type)(this);
|
||||
this.shapeFactory.addToLayer(el.type, this);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -160,7 +160,7 @@ class ShapeFactory extends Eventful {
|
||||
const target = this.$controller.getTarget();
|
||||
if (shape.instanceHightLight) {
|
||||
shape.instanceHightLight.setShape(shape.getBoundingRect())
|
||||
this.$painter.addToLayer(shapeLayer.HightLight)(shape.instanceHightLight);
|
||||
this.$painter.addToLayer(shapeLayer.HightLight, shape.instanceHightLight);
|
||||
}
|
||||
|
||||
if (target == shape) {
|
||||
@ -177,7 +177,7 @@ class ShapeFactory extends Eventful {
|
||||
hideHightLight(shape) {
|
||||
const target = this.$controller.getTarget();
|
||||
if (shape.instanceHightLight) {
|
||||
this.$painter.removeFromLayer(shapeLayer.HightLight)(shape.instanceHightLight);
|
||||
this.$painter.removeFromLayer(shapeLayer.HightLight, shape.instanceHightLight);
|
||||
}
|
||||
|
||||
if (target != shape) {
|
||||
@ -193,19 +193,19 @@ class ShapeFactory extends Eventful {
|
||||
|
||||
showBorder(shape) {
|
||||
this.sensitize.setShape(shape.getBoundingRect());
|
||||
this.$painter.addToLayer(shapeLayer.HightLight)(this.sensitize);
|
||||
this.$painter.addToLayer(shapeLayer.HightLight, this.sensitize);
|
||||
}
|
||||
|
||||
hideBorder(shape) {
|
||||
this.$painter.removeFromLayer(shapeLayer.HightLight)(this.sensitize);
|
||||
this.$painter.removeFromLayer(shapeLayer.HightLight, this.sensitize);
|
||||
}
|
||||
|
||||
addToLayer(level) {
|
||||
return shape => this.$painter.addToLayer(level)(shape);
|
||||
addToLayer(level, shape) {
|
||||
return this.$painter.addToLayer(level, shape);
|
||||
}
|
||||
|
||||
removeFromLayer(level) {
|
||||
return shape => this.$painter.removeFromLayer(level)(shape);
|
||||
removeFromLayer(level, shape) {
|
||||
return this.$painter.removeFromLayer(level, shape);
|
||||
}
|
||||
|
||||
isDrawing() {
|
||||
|
@ -43,13 +43,13 @@ export default class TipsHandle {
|
||||
const x = (offsetX + option.offsetX) / option.scaleRate;
|
||||
const y = (offsetY + option.offsetY) / option.scaleRate;
|
||||
this.message.setStyle({ x, y, text });
|
||||
painter.addToLayer(shapeLayer.Tips)(this.message);
|
||||
painter.addToLayer(shapeLayer.Tips, this.message);
|
||||
}
|
||||
|
||||
onHide(e) {
|
||||
const painter = this.$map.getPainter();
|
||||
|
||||
painter.removeFromLayer(shapeLayer.Tips)(this.message);
|
||||
painter.removeFromLayer(shapeLayer.Tips, this.message);
|
||||
this.message.setStyle('text', '');
|
||||
}
|
||||
}
|
||||
|
@ -165,11 +165,11 @@ class JMap {
|
||||
let newShape = null;
|
||||
|
||||
if (updateModel) {
|
||||
this.$controller.clear()
|
||||
switch(action.order) {
|
||||
case orders.Binding:
|
||||
case orders.Add:
|
||||
newShape = this.$shapeFactory.createShape(updateModel, action.shapeType);
|
||||
console.log(newShape, 1111);
|
||||
this.$shapeFactory.addShape(newShape)
|
||||
this.$painter.add(newShape);
|
||||
break;
|
||||
|
@ -60,15 +60,12 @@ class Painter extends Group {
|
||||
}
|
||||
|
||||
add(shape) {
|
||||
if (shape) {
|
||||
this.addToLayer(shape.type)(shape);
|
||||
}
|
||||
shape && this.addToLayer(shape.type, shape);
|
||||
|
||||
}
|
||||
|
||||
remove(shape) {
|
||||
if (shape) {
|
||||
this.removeFromLayer(shape.type)(shape);
|
||||
}
|
||||
shape && this.removeFromLayer(shape.type, shape);
|
||||
}
|
||||
|
||||
update(stateList=[]) {
|
||||
@ -87,19 +84,16 @@ class Painter extends Group {
|
||||
this.$transformHandle.updateZrSize(opt);
|
||||
}
|
||||
|
||||
addToLayer(name) {
|
||||
addToLayer(name, shape) {
|
||||
name = Object.keys(graphic).includes(name)? name: `Group`;
|
||||
return (shape) => {
|
||||
this.mapShapeLayer[name].add(shape);
|
||||
this.$transformHandle.visibleView(shape);
|
||||
}
|
||||
this.mapShapeLayer[name].add(shape);
|
||||
return shape;
|
||||
}
|
||||
|
||||
removeFromLayer(name) {
|
||||
removeFromLayer(name, shape) {
|
||||
name = Object.keys(graphic).includes(name)? name: `Group`;
|
||||
return (shape) => {
|
||||
this.mapShapeLayer[name].remove(shape);
|
||||
}
|
||||
this.mapShapeLayer[name].remove(shape);
|
||||
return shape;
|
||||
}
|
||||
|
||||
getLevelByName(name) {
|
||||
|
@ -47,5 +47,7 @@ export default {
|
||||
width: 130px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
@ -20,6 +20,10 @@ export default {
|
||||
return {
|
||||
visible: true,
|
||||
selected: null,
|
||||
breforePosition: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
@ -63,7 +67,7 @@ export default {
|
||||
None: [
|
||||
{
|
||||
label: '粘贴',
|
||||
handler: this.doParse,
|
||||
handler: this.doPaste,
|
||||
disabledCb: e => {
|
||||
return !this.clipboardList.length;
|
||||
}
|
||||
@ -79,13 +83,12 @@ export default {
|
||||
this.menus = list.map(el => { el.disabled = el.disabledCb({}); return el} );
|
||||
if (this.menus &&
|
||||
this.menus.length) {
|
||||
this.position = {...point}
|
||||
this.position = {...point},
|
||||
this.visible = true;
|
||||
}
|
||||
},
|
||||
doClose() {
|
||||
this.selected = null;
|
||||
this.position = {x: 0, y: 0};
|
||||
this.visible = false;
|
||||
},
|
||||
doBinding(el) {
|
||||
@ -114,7 +117,6 @@ export default {
|
||||
}
|
||||
},
|
||||
doUnBinding(el) {
|
||||
console.log(this.selected);
|
||||
if (this.selected) {
|
||||
this.$iscs.render([
|
||||
{
|
||||
@ -125,21 +127,33 @@ export default {
|
||||
}
|
||||
},
|
||||
doCopy(el) {
|
||||
const option = this.$iscs.getOption();
|
||||
const storage = this.$iscs.getController().getStorage();
|
||||
this.clipboardList = [...storage.values()];
|
||||
this.breforePosition = {
|
||||
x: this.position.x + option.offsetX,
|
||||
y: this.position.y + option.offsetY
|
||||
}
|
||||
},
|
||||
doParse(el) {
|
||||
doPaste(el) {
|
||||
const option = this.$iscs.getOption();
|
||||
const renderList = [];
|
||||
this.clipboardList.forEach(el => {
|
||||
const clipboardList = [...this.clipboardList];
|
||||
const diffPosition = [
|
||||
(this.position.x + option.offsetX - this.breforePosition.x)/option.scaleRate,
|
||||
(this.position.y + option.offsetY - this.breforePosition.y)/option.scaleRate
|
||||
]
|
||||
|
||||
clipboardList.forEach(el => {
|
||||
this.clone(el, utils.getUID(el.type), '', el => {
|
||||
renderList.push({
|
||||
model: utils.deepClone(el.model),
|
||||
action: { order: orders.Add, shapeType: el.shapeType}
|
||||
});
|
||||
const shapeType = el.shapeType;
|
||||
const model = el.model;
|
||||
const position = model.base.position||[0, 0];
|
||||
model.base.position = model.composeCode? position: position.map((el,i) => el+diffPosition[i]);
|
||||
renderList.push({ model, action: { order: orders.Add, shapeType } });
|
||||
});
|
||||
})
|
||||
|
||||
console.log(renderList);
|
||||
this.$iscs.render(renderList);
|
||||
},
|
||||
doDelete(el) {
|
||||
@ -153,23 +167,18 @@ export default {
|
||||
this.$iscs.render(renderList);
|
||||
},
|
||||
clone(el, code='', composeCode='', cb) {
|
||||
let model = utils.deepClone(el.model);
|
||||
const model = utils.deepClone(el.model);
|
||||
model.code = code;
|
||||
model.composeCode = composeCode;
|
||||
switch(el.shapeType) {
|
||||
case shapeType.Element:
|
||||
cb(el)
|
||||
break;
|
||||
case shapeType.Compose:
|
||||
model.elementCodes = model.elementCodes.map(code => {
|
||||
const shape = this.$iscs.getShapeByCode(code);
|
||||
const tmpCode = utils.getUID(shape.type)
|
||||
this.clone(shape, tmpCode, model.code, cb);
|
||||
return tmpCode;
|
||||
})
|
||||
cb(el)
|
||||
break;
|
||||
if (el.shapeType == shapeType.Compose) {
|
||||
model.elementCodes = model.elementCodes.map(code => {
|
||||
const shape = this.$iscs.getShapeByCode(code);
|
||||
const newCode = utils.getUID(shape.type)
|
||||
this.clone(shape, newCode, code, cb);
|
||||
return newCode;
|
||||
})
|
||||
}
|
||||
cb({...el, model});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -236,7 +236,7 @@ export default class SelectingHandle {
|
||||
|
||||
onSelectStart(e) {
|
||||
this.selecting.setShape({ x: e.x, y: e.y, width: 0, height: 0 });
|
||||
this.$painter.addToLayer(shapeLayer.Selecting)(this.selecting);
|
||||
this.$painter.addToLayer(shapeLayer.Selecting, this.selecting);
|
||||
this.begPoint = { x: e.x, y: e.y };
|
||||
this.endPoint = null;
|
||||
}
|
||||
@ -244,13 +244,13 @@ export default class SelectingHandle {
|
||||
onSelecting(e) {
|
||||
this.endPoint = { x: e.x, y: e.y };
|
||||
this.selecting.setShape(this.normalizedArea(this.begPoint, this.endPoint));
|
||||
this.$painter.addToLayer(shapeLayer.Selecting)(this.selecting);
|
||||
this.$painter.addToLayer(shapeLayer.Selecting, this.selecting);
|
||||
}
|
||||
|
||||
onSelectEnd(e) {
|
||||
this.endPoint = { x: e.x, y: e.y };
|
||||
this.selecting.setShape(this.normalizedArea(this.begPoint, this.endPoint));
|
||||
this.$painter.addToLayer(shapeLayer.Selecting)(this.selecting);
|
||||
this.$painter.addToLayer(shapeLayer.Selecting, this.selecting);
|
||||
|
||||
const selectingRect = this.selecting.getBoundingRect();
|
||||
Object.values(this.$map.getMapShape()).forEach(el => {
|
||||
@ -269,7 +269,7 @@ export default class SelectingHandle {
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.$painter.removeFromLayer(shapeLayer.Selecting)(this.selecting);
|
||||
this.$painter.removeFromLayer(shapeLayer.Selecting, this.selecting);
|
||||
this.selecting.setShape({ x: 0, y: 0, width: 0, height: 0 });
|
||||
this.begPoint = this.endPoint = null;
|
||||
}
|
||||
|
@ -15,11 +15,12 @@ export default class TransformHandle {
|
||||
|
||||
// 检查显隐
|
||||
checkVisible(shape) {
|
||||
return (!shape.model || !shape.model.base.hide) && utils.createBoundingRectCheckVisible(shape, this.transform).intersect(this.rect);
|
||||
return (!shape.model || !shape.model.base.hide || !shape.model.composeCode) && utils.createBoundingRectCheckVisible(shape, this.transform).intersect(this.rect);
|
||||
}
|
||||
|
||||
// 重新计算显隐
|
||||
visibleView(shape) {
|
||||
console.log(this.checkVisible(shape));
|
||||
this.checkVisible(shape)
|
||||
? shape.show()
|
||||
: shape.hide();
|
||||
@ -56,7 +57,6 @@ export default class TransformHandle {
|
||||
traverseLayer(cb, context) {
|
||||
this.$painter.eachChild(layer => {
|
||||
layer.transform = this.transform;
|
||||
// layer.decomposeTransform();
|
||||
cb.call(context, layer);
|
||||
});
|
||||
}
|
||||
|
@ -11,25 +11,12 @@ export const getUID =(function(base=0) {
|
||||
|
||||
// 克隆一个对象
|
||||
export function deepClone(obj) {
|
||||
var tag = Array.isArray(obj) ? [] : {};
|
||||
for (var key in obj) {
|
||||
if (obj.hasOwnProperty(key)) {
|
||||
if (Array.isArray(obj[key])) {
|
||||
tag[key] = JSON.parse(JSON.stringify({data: obj[key]})).data;
|
||||
} else if (typeof obj[key] === 'object' && obj[key] !== null) {
|
||||
tag[key] = deepClone(obj[key]);
|
||||
} else {
|
||||
tag[key] = obj[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return tag;
|
||||
return JSON.parse(JSON.stringify(obj))
|
||||
}
|
||||
|
||||
// 克隆一个对象到另一个对象
|
||||
export function deepAssign(tag, obj) {
|
||||
return Object.assign(tag, deepClone(obj));
|
||||
return JSON.parse(JSON.stringify({...tag, ...obj}));
|
||||
}
|
||||
|
||||
// 拷贝对象指定层次的引用
|
||||
|
Loading…
Reference in New Issue
Block a user