This commit is contained in:
joylink_cuiweidong 2021-04-12 15:45:01 +08:00
commit 1a017ceed0
14 changed files with 119 additions and 123 deletions

View File

@ -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;

View File

@ -38,38 +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);
console.log(this.model.base.position, this.model.base.rotation);
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) {
if (this.instance) {
this.instance.attr(attrs);
} else {
super.attr(attrs);
}
}
// 设置显隐
setInvisible(hide) {
if (hide) {
super.hide()
} else {
super.show();
}
super.dirty();
}
// 设置高亮
active() {}
@ -94,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 => {

View File

@ -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);
}

View File

@ -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);
}
}
}

View File

@ -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() {

View File

@ -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', '');
}
}

View File

@ -165,7 +165,6 @@ class JMap {
let newShape = null;
if (updateModel) {
this.$controller.clear()
switch(action.order) {
case orders.Binding:
case orders.Add:

View File

@ -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) {

View File

@ -49,5 +49,35 @@ export default {
width: 130px;
position: absolute;
top: 0;
overflow-x: hidden;
overflow-y: auto;
&::-webkit-scrollbar {
/*滚动条整体样式*/
width : 5px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
&::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius : 10px;
background-color: lightskyblue;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
&::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
background : #ededed;
border-radius: 7px;
}
}
</style>

View File

@ -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});
}
}
};

View File

@ -1,6 +1,4 @@
import shapeLayer from './constant/shapeLayer';
import * as graphic from './core/graphic';
export default class SelectHandle {
constructor(map, controller) {
this.$map = map;
@ -50,17 +48,6 @@ export default class SelectHandle {
});
}
// createSelected(target) {
// if (this.$map.draggle) {
// switch (target.type) {
// case graphic.Line:
// return new LineDraggable(this);
// case graphic.Image:
// return new ImageDraggable(this);
// }
// }
// }
setDraggable(draggable) {
const target = this.e.target;
if (target &&

View File

@ -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;
}

View File

@ -15,7 +15,7 @@ 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);
}
// 重新计算显隐
@ -56,7 +56,6 @@ export default class TransformHandle {
traverseLayer(cb, context) {
this.$painter.eachChild(layer => {
layer.transform = this.transform;
// layer.decomposeTransform();
cb.call(context, layer);
});
}

View File

@ -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}));
}
// 拷贝对象指定层次的引用