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:
joylink_cuiweidong 2019-09-04 18:48:53 +08:00
parent 0f9b0f84a5
commit 38f7b1a6e2
2 changed files with 86 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/ibp/mouseController.js
View File

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

94
src/ibp/shape/clock.js
View File

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