Skip to content

Commit 3e81283

Browse files
saschamuellercerprosaschamuellercerpro
authored
Merge pull request #2 from saschamuellercerpro/dragging-with-middle-mouse-button
Dragging with middle mouse button
2 parents 5b89456 + 2a7286f commit 3e81283

File tree

1 file changed

+147
-136
lines changed

1 file changed

+147
-136
lines changed

‎src/components/Board/Board.tsx‎

Lines changed: 147 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const Board = React.forwardRef<BoardActions, BoardProps>(
8686
? {
8787
angle: obj.angle ?? 0,
8888
content: getObjectInfo(obj as fabricTypes.CustomObject).content,
89-
} ?? null
89+
}
9090
: null;
9191
}
9292
return null;
@@ -983,6 +983,8 @@ const Board = React.forwardRef<BoardActions, BoardProps>(
983983
// Disable uniform scaling
984984
editor.canvas.uniformScaling = false;
985985

986+
editor.canvas.fireMiddleClick = true;
987+
986988
fabric.Image.fromURL(
987989
image.src,
988990
(img) => {
@@ -1035,78 +1037,85 @@ const Board = React.forwardRef<BoardActions, BoardProps>(
10351037
"mouse:down",
10361038
function (this: fabricTypes.CanvasAnnotationState, opt) {
10371039
const evt = opt.e;
1038-
this.isDragging = opt.target === null; // Enable dragging when the cursor is on canvas (no object selected)
1039-
this.selection = false;
1040-
this.lastPosX = evt.clientX;
1041-
this.lastPosY = evt.clientY;
1042-
this.drawingObject = drawingObject;
1043-
1044-
// Extract coords for polygon drawing
1045-
const pointer = editor?.canvas.getPointer(opt.e);
1046-
const lastClickCoords = { x: pointer.x, y: pointer.y };
1047-
this.lastClickCoords = lastClickCoords;
1048-
1049-
if (drawingObject.isDrawing && drawingObject.type === "polygon") {
1050-
// Retrive the existing polygon
1051-
1052-
const polygon =
1053-
fabricUtils.findObjectByName<fabricTypes.CustomObject>(
1054-
editor.canvas,
1055-
drawingObject.id,
1056-
);
1057-
// Delete previously created polygon (if exists)
1058-
if (polygon) editor.canvas.remove(polygon);
1059-
1060-
const hasClickedOnInitialPoint = (p?: fabricTypes.CustomObject) => {
1061-
if (p === undefined) return false;
1062-
// const collisionPoint: string | undefined = undefined;
1063-
const initialPoint = p.oCoords["p0"];
1064-
1065-
if (initialPoint) {
1066-
const { tl, tr, bl, br } = initialPoint.corner;
1067-
// We need to ignore the zoom in order to obtain the accurate coordinates
1068-
const zoomedPointer = editor?.canvas.getPointer(opt.e, true);
1069-
return fabricUtils.isCoordInsideCoords(zoomedPointer, {
1070-
tl,
1071-
tr,
1072-
bl,
1073-
br,
1074-
});
1075-
}
1076-
return false;
1077-
};
1040+
if (evt.button === 1) {
1041+
// Right mouse button
1042+
this.isDragging = true;
1043+
this.selection = false;
1044+
this.lastPosX = evt.clientX;
1045+
this.lastPosY = evt.clientY;
1046+
evt.preventDefault();
1047+
} else {
1048+
this.drawingObject = drawingObject;
1049+
1050+
// Extract coords for polygon drawing
1051+
const pointer = editor?.canvas.getPointer(opt.e);
1052+
const lastClickCoords = { x: pointer.x, y: pointer.y };
1053+
this.lastClickCoords = lastClickCoords;
1054+
1055+
if (drawingObject.isDrawing && drawingObject.type === "polygon") {
1056+
// Retrive the existing polygon
1057+
1058+
const polygon =
1059+
fabricUtils.findObjectByName<fabricTypes.CustomObject>(
1060+
editor.canvas,
1061+
drawingObject.id,
1062+
);
1063+
// Delete previously created polygon (if exists)
1064+
if (polygon) editor.canvas.remove(polygon);
1065+
1066+
const hasClickedOnInitialPoint = (
1067+
p?: fabricTypes.CustomObject,
1068+
) => {
1069+
if (p === undefined) return false;
1070+
// const collisionPoint: string | undefined = undefined;
1071+
const initialPoint = p.oCoords["p0"];
1072+
1073+
if (initialPoint) {
1074+
const { tl, tr, bl, br } = initialPoint.corner;
1075+
// We need to ignore the zoom in order to obtain the accurate coordinates
1076+
const zoomedPointer = editor?.canvas.getPointer(opt.e, true);
1077+
return fabricUtils.isCoordInsideCoords(zoomedPointer, {
1078+
tl,
1079+
tr,
1080+
bl,
1081+
br,
1082+
});
1083+
}
1084+
return false;
1085+
};
10781086

1079-
const isInitialPoint = hasClickedOnInitialPoint(polygon);
1087+
const isInitialPoint = hasClickedOnInitialPoint(polygon);
10801088

1081-
// Update drawing points of polygon
1082-
const newPoints = isInitialPoint
1083-
? drawingObject.points
1084-
: drawingObject.points.concat(lastClickCoords);
1089+
// Update drawing points of polygon
1090+
const newPoints = isInitialPoint
1091+
? drawingObject.points
1092+
: drawingObject.points.concat(lastClickCoords);
10851093

1086-
// Draw a new polygon from scratch
1087-
const newPolygon = fabricUtils.createControllableCustomObject(
1088-
isInitialPoint ? fabric.Polygon : fabric.Polyline,
1089-
newPoints,
1090-
{ name: drawingObject.id },
1091-
);
1094+
// Draw a new polygon from scratch
1095+
const newPolygon = fabricUtils.createControllableCustomObject(
1096+
isInitialPoint ? fabric.Polygon : fabric.Polyline,
1097+
newPoints,
1098+
{ name: drawingObject.id },
1099+
);
10921100

1093-
if (isInitialPoint) {
1094-
resetDrawingObject();
1095-
} else {
1096-
setDrawingObject({
1097-
...drawingObject,
1098-
points: newPoints,
1099-
});
1100-
}
1101+
if (isInitialPoint) {
1102+
resetDrawingObject();
1103+
} else {
1104+
setDrawingObject({
1105+
...drawingObject,
1106+
points: newPoints,
1107+
});
1108+
}
11011109

1102-
// Add object to canvas and set it as ACTIVE
1103-
editor.canvas.add(newPolygon);
1104-
editor.canvas.setActiveObject(newPolygon);
1105-
} else if (
1106-
this.drawingObject?.isDrawing &&
1107-
this.drawingObject.type === "rectangle"
1108-
) {
1109-
console.log("Draw Rectangle - BEGIN");
1110+
// Add object to canvas and set it as ACTIVE
1111+
editor.canvas.add(newPolygon);
1112+
editor.canvas.setActiveObject(newPolygon);
1113+
} else if (
1114+
this.drawingObject?.isDrawing &&
1115+
this.drawingObject.type === "rectangle"
1116+
) {
1117+
console.log("Draw Rectangle - BEGIN");
1118+
}
11101119
}
11111120
},
11121121
);
@@ -1115,27 +1124,28 @@ const Board = React.forwardRef<BoardActions, BoardProps>(
11151124
editor.canvas.on(
11161125
"mouse:up",
11171126
function (this: fabricTypes.CanvasAnnotationState, opt) {
1118-
if (this.isDragging) {
1119-
// Reset the viewport
1127+
const evt = opt.e as MouseEvent;
1128+
if (evt.button === 1) {
1129+
// Right mouse button
1130+
this.isDragging = false;
1131+
this.selection = true;
11201132
editor.canvas.zoomToPoint(
11211133
{ x: opt.e.offsetX, y: opt.e.offsetY },
11221134
editor.canvas.getZoom(),
11231135
);
1124-
}
1125-
this.isDragging = false;
1126-
this.selection = true;
1127-
1128-
// Disable drawing when it's a rectangle on mouse up
1129-
if (
1130-
this.drawingObject?.isDrawing &&
1131-
this.drawingObject.type === "rectangle"
1132-
) {
1133-
console.log("Draw Rectangle - DOWN");
1134-
resetDrawingObject();
1135-
updateObjectHelper(opt.target);
1136-
opt.target?.on("deselected", function () {
1137-
editor.canvas.setActiveObject(opt.target!);
1138-
});
1136+
} else {
1137+
// Disable drawing when it's a rectangle on mouse up
1138+
if (
1139+
this.drawingObject?.isDrawing &&
1140+
this.drawingObject.type === "rectangle"
1141+
) {
1142+
console.log("Draw Rectangle - DOWN");
1143+
resetDrawingObject();
1144+
updateObjectHelper(opt.target);
1145+
opt.target?.on("deselected", function () {
1146+
editor.canvas.setActiveObject(opt.target!);
1147+
});
1148+
}
11391149
}
11401150
},
11411151
);
@@ -1144,11 +1154,8 @@ const Board = React.forwardRef<BoardActions, BoardProps>(
11441154
editor.canvas.on(
11451155
"mouse:move",
11461156
function (this: fabricTypes.CanvasAnnotationState, opt) {
1147-
const isDrawingObject = this.drawingObject?.isDrawing;
1148-
const drawingObjectType = this.drawingObject?.type;
1149-
const pointer = editor?.canvas.getPointer(opt.e);
1150-
1151-
if (this.isDragging && !isDrawingObject) {
1157+
if (this.isDragging) {
1158+
// Right mouse button is pressed
11521159
const e = opt.e;
11531160
const vpt = editor.canvas.viewportTransform;
11541161
if (vpt) {
@@ -1158,58 +1165,62 @@ const Board = React.forwardRef<BoardActions, BoardProps>(
11581165
this.lastPosY = e.clientY;
11591166
editor.canvas.requestRenderAll();
11601167
}
1161-
}
1162-
1163-
if (isDrawingObject && drawingObjectType === "polygon") {
1164-
const newPoints = drawingObject.points.concat({
1165-
x: pointer.x,
1166-
y: pointer.y,
1167-
});
1168-
1169-
const polygon = fabricUtils.findObjectByName(
1170-
editor.canvas,
1171-
drawingObject.id,
1172-
);
1173-
1174-
if (polygon) editor.canvas.remove(polygon);
1168+
} else {
1169+
const isDrawingObject = this.drawingObject?.isDrawing;
1170+
const drawingObjectType = this.drawingObject?.type;
1171+
const pointer = editor?.canvas.getPointer(opt.e);
1172+
1173+
if (isDrawingObject && drawingObjectType === "polygon") {
1174+
const newPoints = drawingObject.points.concat({
1175+
x: pointer.x,
1176+
y: pointer.y,
1177+
});
11751178

1176-
// Draw a new polygon from scratch
1177-
const newPolygon = fabricUtils.createControllableCustomObject(
1178-
fabric.Polyline,
1179-
newPoints,
1180-
{ name: drawingObject.id },
1181-
);
1179+
const polygon = fabricUtils.findObjectByName(
1180+
editor.canvas,
1181+
drawingObject.id,
1182+
);
11821183

1183-
// Add object to canvas and set it as ACTIVE
1184-
editor.canvas.add(newPolygon);
1185-
editor.canvas.setActiveObject(newPolygon);
1186-
} else if (isDrawingObject && drawingObjectType === "rectangle") {
1187-
const rectangle = fabricUtils.findObjectByName(
1188-
editor.canvas,
1189-
drawingObject.id,
1190-
);
1184+
if (polygon) editor.canvas.remove(polygon);
11911185

1192-
if (rectangle) editor.canvas.remove(rectangle);
1186+
// Draw a new polygon from scratch
1187+
const newPolygon = fabricUtils.createControllableCustomObject(
1188+
fabric.Polyline,
1189+
newPoints,
1190+
{ name: drawingObject.id },
1191+
);
11931192

1194-
if (!this.lastClickCoords) return;
1193+
// Add object to canvas and set it as ACTIVE
1194+
editor.canvas.add(newPolygon);
1195+
editor.canvas.setActiveObject(newPolygon);
1196+
} else if (isDrawingObject && drawingObjectType === "rectangle") {
1197+
const rectangle = fabricUtils.findObjectByName(
1198+
editor.canvas,
1199+
drawingObject.id,
1200+
);
11951201

1196-
const newPoints = [
1197-
{ x: this.lastClickCoords?.x, y: this.lastClickCoords?.y },
1198-
{ x: pointer.x, y: this.lastClickCoords?.y },
1199-
{ x: pointer.x, y: pointer.y },
1200-
{ x: this.lastClickCoords?.x, y: pointer.y },
1201-
];
1202-
// Draw a new rectangle from scratch
1203-
const newRectangle = fabricUtils.createControllableCustomObject(
1204-
fabric.Polygon,
1205-
newPoints,
1206-
{ name: drawingObject.id },
1207-
true,
1208-
);
1202+
if (rectangle) editor.canvas.remove(rectangle);
1203+
1204+
if (!this.lastClickCoords) return;
1205+
1206+
const newPoints = [
1207+
{ x: this.lastClickCoords?.x, y: this.lastClickCoords?.y },
1208+
{ x: pointer.x, y: this.lastClickCoords?.y },
1209+
{ x: pointer.x, y: pointer.y },
1210+
{ x: this.lastClickCoords?.x, y: pointer.y },
1211+
];
1212+
// Draw a new rectangle from scratch
1213+
const newRectangle = fabricUtils.createControllableCustomObject(
1214+
fabric.Polygon,
1215+
newPoints,
1216+
{ name: drawingObject.id },
1217+
true,
1218+
);
12091219

1210-
// // Add object to canvas and set it as ACTIVE
1211-
editor.canvas.add(newRectangle);
1212-
editor.canvas.setActiveObject(newRectangle);
1220+
// // Add object to canvas and set it as ACTIVE
1221+
editor.canvas.add(newRectangle);
1222+
editor.canvas.setActiveObject(newRectangle);
1223+
}
12131224
}
12141225
},
12151226
);

0 commit comments

Comments
 (0)