修复 时间组件拖拽 位置数据不更新的问题

This commit is contained in:
joylink_cuiweidong 2019-09-04 18:48:53 +08:00
parent 0f9b0f84a5
commit 38f7b1a6e2
2 changed files with 86 additions and 54 deletions

View File

@ -104,18 +104,16 @@ class MouseController extends Eventful {
const draggingTarget = e.target;
// draggingTarget.draggable
if (draggingTarget) {
if (e.target.parent.getName()=='background') {
if (e.target.parent.name=='background') {
this._draggingName='background';
} else if (this.isAllowDragging&&e.target.parent.getName()=='simple') {
} else if (this.isAllowDragging&&e.target.parent.name=='simple') {
this._draggingName='simple';
} else if (this.isAllowDragging&&e.target.parent.getName()=='group') {
} else if (this.isAllowDragging&&e.target.parent.name=='group') {
this._draggingName='group';
this._offsetX=e.offsetX;
this._offsetY=e.offsetY;
// debugger;
// this._draggingTarget.parent.model.point
} else if (this.isAllowDragging&&e.target.parent.getName()=='group_child') {
} else if (this.isAllowDragging&&(e.target.parent.name=='group_child'||e.target.name=='group_child')) {
this._draggingName='group_child';
this._offsetX=e.offsetX;
this._offsetY=e.offsetY;
@ -127,13 +125,6 @@ class MouseController extends Eventful {
this._dragging = true;
// this.dispatchToElement(param(draggingTarget, e), 'dragstart', e.event);
}
// var x = e.offsetX;
// var y = e.offsetY;
// this._x = x;
// this._y = y;
// this._dragging = true;
}
mousemove(e) {
@ -161,39 +152,44 @@ class MouseController extends Eventful {
} else if (this.isAllowDragging&&this._draggingTarget&&this._draggingName=='simple') {
this._draggingTarget.drift(dx, dy, e);
return true;
} else if (this.isAllowDragging&&this._draggingTarget&&(this._draggingName=='group'||this._draggingName=='group_child')) {
// debugger;
if (this._draggingName=='group') {
// this._draggingTarget.parent.model.point.x+=dx;
// this._draggingTarget.parent.model.point.y+=dy;
// this._draggingTarget.parent.dirty();
} else if (this.isAllowDragging&&this._draggingTarget&&(this._draggingName=='group_child')) {
// this._draggingName=='group'||
if (this._draggingTarget.parent.parent.name=='group') {
this._draggingTarget.parent.drift(dx, dy, e);
return true;
} else {
this._draggingTarget.parent.parent.drift(dx, dy, e);
return true;
}
// if (this._draggingName=='group') {
// // this._draggingTarget.parent.model.point.x+=dx;
// // this._draggingTarget.parent.model.point.y+=dy;
// // this._draggingTarget.parent.dirty();
// this._draggingTarget.parent.drift(dx, dy, e);
// return true;
// } else {
// this._draggingTarget.parent.parent.drift(dx, dy, e);
// return true;
// }
}
} else {
// debugger;
return true;
}
}
mouseup(e) {
// debugger;
const draggingTarget = this._draggingTarget;
if (!eventTool.notLeftMouse(e)&&draggingTarget) {
if (this._draggingName=='simple') {
console.log();
} else if (this._draggingName=='group'||this._draggingName=='group_child') {
if (this._draggingName=='group') {
this._draggingTarget.parent.setModal(e.offsetX - this._offsetX, e.offsetY - this._offsetY);
this._draggingTarget.parent.dirty();
if (this._draggingTarget.parent.parent.name=='group') {
this._draggingTarget.parent.parent.setModal(e.offsetX - this._offsetX, e.offsetY - this._offsetY);
this._draggingTarget.parent.parent.dirty();
} else {
this._draggingTarget.parent.parent.parent.setModal(e.offsetX - this._offsetX, e.offsetY - this._offsetY);
this._draggingTarget.parent.parent.dirty();
this._draggingTarget.parent.dirty();
}
}
this._dragging = false;

View File

@ -31,24 +31,34 @@ export default class clock extends Group {
}
create() {
this.grouper=new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
this.clockBg = new Image({
zlevel: this.zlevel,
z: this.z,
style: {
image: clockBg,
x: this.model.point.x,
y: this.model.point.y,
// x: this.model.point.x,
// y: this.model.point.y,
x: 0,
y: 0,
width: this.model.width,
height: this.model.width/493*156
}
});
this.clockBg.name ='group_child';
this.num1 = new Image({
zlevel: this.zlevel,
z: this.z,
name: 'group_child',
style: {
image: this.getImagePic('0'),
x: this.model.point.x+this.model.width*0.1,
y: this.model.point.y+this.model.width*0.052,
// x: this.model.point.x+this.model.width*0.1,
// y: this.model.point.y+this.model.width*0.052,
x: this.model.width*0.1,
y: this.model.width*0.052,
width: this.model.width*0.1,
height: this.model.width*0.1/37*74
}
@ -56,10 +66,13 @@ export default class clock extends Group {
this.num2 = new Image({
zlevel: this.zlevel,
z: this.z,
name: 'group_child',
style: {
image: this.getImagePic('0'),
x: this.model.point.x+this.model.width*0.22,
y: this.model.point.y+this.model.width*0.052,
// x: this.model.point.x+this.model.width*0.22,
// y: this.model.point.y+this.model.width*0.052,
x: this.model.width*0.22,
y: this.model.width*0.052,
width: this.model.width*0.1,
height: this.model.width*0.1/37*74
}
@ -67,10 +80,13 @@ export default class clock extends Group {
this.num3 = new Image({
zlevel: this.zlevel,
z: this.z,
name: 'group_child',
style: {
image: this.getImagePic('0'),
x: this.model.point.x+this.model.width*0.39,
y: this.model.point.y+this.model.width*0.052,
// x: this.model.point.x+this.model.width*0.39,
// y: this.model.point.y+this.model.width*0.052,
x: this.model.width*0.39,
y: this.model.width*0.052,
width: this.model.width*0.1,
height: this.model.width*0.1/37*74
}
@ -78,10 +94,13 @@ export default class clock extends Group {
this.num4 = new Image({
zlevel: this.zlevel,
z: this.z,
name: 'group_child',
style: {
image: this.getImagePic('0'),
x: this.model.point.x+this.model.width*0.52,
y: this.model.point.y+this.model.width*0.052,
// x: this.model.point.x+this.model.width*0.52,
// y: this.model.point.y+this.model.width*0.052,
x: this.model.width*0.52,
y: this.model.width*0.052,
width: this.model.width*0.1,
height: this.model.width*0.1/37*74
}
@ -89,10 +108,13 @@ export default class clock extends Group {
this.num5 = new Image({
zlevel: this.zlevel,
z: this.z,
name: 'group_child',
style: {
image: this.getImagePic('0'),
x: this.model.point.x+this.model.width*0.69,
y: this.model.point.y+this.model.width*0.052,
// x: this.model.point.x+this.model.width*0.69,
// y: this.model.point.y+this.model.width*0.052,
x: this.model.width*0.69,
y: this.model.width*0.052,
width: this.model.width*0.1,
height: this.model.width*0.1/37*74
}
@ -100,10 +122,13 @@ export default class clock extends Group {
this.num6 = new Image({
zlevel: this.zlevel,
z: this.z,
name: 'group_child',
style: {
image: this.getImagePic('0'),
x: this.model.point.x+this.model.width*0.82,
y: this.model.point.y+this.model.width*0.052,
// x: this.model.point.x+this.model.width*0.82,
// y: this.model.point.y+this.model.width*0.052,
x: this.model.width*0.82,
y: this.model.width*0.052,
width: this.model.width*0.1,
height: this.model.width*0.1/37*74
}
@ -111,10 +136,13 @@ export default class clock extends Group {
this.clockColon1 = new Image({
zlevel: this.zlevel,
z: this.z,
name: 'group_child',
style: {
image: clockColon,
x: this.model.point.x+this.model.width*0.16,
y: this.model.point.y-this.model.width*0.028,
// x: this.model.point.x+this.model.width*0.16,
// y: this.model.point.y-this.model.width*0.028,
x: +this.model.width*0.16,
y: -this.model.width*0.028,
width: this.model.width*0.37,
height: this.model.width/1*0.37
}
@ -122,23 +150,27 @@ export default class clock extends Group {
this.clockColon2 = new Image({
zlevel: this.zlevel,
z: this.z,
name: 'group_child',
style: {
image: clockColon,
x: this.model.point.x+this.model.width*0.46,
y: this.model.point.y-this.model.width*0.028,
// x: this.model.point.x+this.model.width*0.46,
// y: this.model.point.y-this.model.width*0.028,
x: +this.model.width*0.46,
y: -this.model.width*0.028,
width: this.model.width*0.37,
height: this.model.width/1*0.37
}
});
this.add(this.clockBg);
this.add(this.num1);
this.add(this.num2);
this.add(this.num3);
this.add(this.num4);
this.add(this.num5);
this.add(this.num6);
this.add(this.clockColon1);
this.add(this.clockColon2);
this.grouper.add(this.clockBg);
this.grouper.add(this.num1);
this.grouper.add(this.num2);
this.grouper.add(this.num3);
this.grouper.add(this.num4);
this.grouper.add(this.num5);
this.grouper.add(this.num6);
this.grouper.add(this.clockColon1);
this.grouper.add(this.clockColon2);
this.add(this.grouper);
}
getImagePic(context) {
let pic = clock0;
@ -268,8 +300,12 @@ export default class clock extends Group {
// debugger;
// this.parent.dirty();
//
// this.model.point.x+=dx;
// this.model.point.y+=dy;
this.model.point.x+=dx;
this.model.point.y+=dy;
// this.attr('transform', [1, 0, 0, 1, 0, 0]);
// this.transform = [1, 0, 0, 1, 0, 0];
// this.invTransform = [1, 0, 0, 1, 0, 0];
// console.log(this.model, this);
// this.eachChild(function(child) {
// // // debugger;
// child.style.x+=dx;