Lama Wehbe
Reputation: 1
Drag & Drop Constraints Konvajs
const handleDragMove = (e, shapeIndex) => {
if (editing) {
const updatedShapes = [...shapes]; //store all the shapes in an array to update the shapes
const shape = updatedShapes[shapeIndex]; //update specific shape by it's index
const newX = e.target.x(); //new x position for the shape (the target or destination)
const newY = e.target.y();//new y position for the shape (the target or destination)
// Ensure original points are stored
if (!shape.originalPoints) {
shape.originalPoints = [...shape.points || []]; //store the original points of the shape
}
// Calculate delta values
const deltaX = newX - (shape.originalX || 0); //the difference between the old position and new position
const deltaY = newY - (shape.originalY || 0);
// Ensure shape.points is valid
if (Array.isArray(shape.points) && shape.points.length % 2 === 0) {
const updatedPoints = shape.points.map((point, i) => {
const newPoint = i % 2 === 0 ? point + deltaX : point + deltaY;
if (isNaN(newPoint)) {
console.error(`Invalid point calculation at index ${i}:`, { point, deltaX, deltaY, newPoint });
}
return newPoint;
});
// Check for NaN in updatedPoints
if (updatedPoints.some(isNaN)) {
console.error('NaN detected in updatedPoints:', updatedPoints);
}
if (shape.type === 'polyline') {
// Handle polyline dragging
handlePolylineDrag(shapeIndex, shape, updatedShapes, newX, newY, updatedPoints);
const associatedDimension = findAssociatedDimension(shape, updatedShapes);
const associatedCircle = findAssociatedCircle(shape, updatedShapes);
if (!shape.originalX || !shape.originalY || !shape.originalPoints) {
shape.originalX = shape.x;
shape.originalY = shape.y;
shape.originalPoints = [...shape.points || []];
console.log(shape.originalPoints);
}
// Calculate and store the original dimension length and polyline length
if (!shape.originalDimensionLength && associatedDimension) {
const [dimX1, dimY1, dimX2, dimY2] = associatedDimension.points;
shape.originalDimensionLength = Math.sqrt((dimX2 - dimX1) ** 2 + (dimY2 - dimY1) ** 2);
}
if (!shape.originalPolylineLength) {
shape.originalPolylineLength = calculatePolylineLength(shape.originalPoints);
}
// Calculate the direction of the polyline
const isHorizontal = Math.abs(shape.points[2] - shape.points[0]) > Math.abs(shape.points[3] - shape.points[1]);
if (associatedDimension && associatedCircle) {
console.log("associatedDimension && associatedCircle")
const [dimX1, dimY1, dimX2, dimY2] = associatedDimension.points;
const dimensionLength = Math.sqrt((dimX2 - dimX1) ** 2 + (dimY2 - dimY1) ** 2);
const polylineLength = calculatePolylineLength(updatedPoints);
const constrainedPoints = shape.points.map((point, i) => {
const constrainedPoint = isHorizontal
? (i % 2 === 0
? point + (newX - (shape.originalX || 0)) * (dimensionLength / polylineLength)
: point + deltaY)
: (i % 2 !== 0
? point + (newY - (shape.originalY || 0)) * (dimensionLength / polylineLength)
: point + deltaX);
return constrainedPoint;
});
if (associatedCircle.originalX === undefined || associatedCircle.originalY === undefined) {
associatedCircle.originalX = associatedCircle.x;
associatedCircle.originalY = associatedCircle.y;
console.log('Circle original position:', associatedCircle.originalX, associatedCircle.originalY);
}
updatedShapes[shapeIndex] = { ...shape, points: constrainedPoints };
setShapes(updatedShapes);
const intersections = findCirclePolylineIntersections(associatedCircle, {
type: 'polyline',
points: updatedPoints,
});
if (intersections.length > 0 ) {
console.log("intersections")
const [newCircleX, newCircleY] = intersections[0];
const constrainedCircleX = Math.max(dimX1, Math.min(newCircleX, dimX2));
const constrainedCircleY = Math.max(dimY1, Math.min(newCircleY, dimY2));
updatedShapes.forEach((otherShape, index) => {
if (otherShape.type === 'circle' && isSameCircle(otherShape, associatedCircle)) {
updatedShapes[index] = { ...otherShape, x: constrainedCircleX, y: constrainedCircleY };
setShapes(updatedShapes);
}
});
}
else {
// Continue updating the circle even if there's no intersection
console.log("no intersections")
updatedShapes.forEach((otherShape, index) => {
if (otherShape.type === 'circle'&& isSameCircle(otherShape, associatedCircle)){
updatedShapes[index] = { ...otherShape, x: associatedCircle.originalX, y: associatedCircle.originalY };
setShapes(updatedShapes);
}
});
const dimensionLength = shape.originalDimensionLength || 0;
const polylineLength = shape.originalPolylineLength || 0;
const constrainedPoints = shape.points.map((point, i) => {
const constrainedPoint = i % 2 === 0
? point + (newX - (shape.originalX || 0)) * (dimensionLength / polylineLength)
: point + (newY - (shape.originalY || 0)) * (dimensionLength / polylineLength);
if (isNaN(constrainedPoint)) {
console.error(`Invalid constrained point calculation at index ${i}:`, { point, constrainedPoint });
}
return constrainedPoint;
});
updatedShapes[shapeIndex] = { ...shape, points: constrainedPoints };
setShapes(updatedShapes);
}
} else if (!associatedDimension && !associatedCircle) {
console.log("!associatedDimension && !associatedCircle");
// Revert shape and circle if no dimension or circle found
const dimensionLength = shape.originalDimensionLength || 0;
const polylineLength = shape.originalPolylineLength || 0;
console.log("dimensionLength",dimensionLength)
console.log("polylineLength",polylineLength)
const constrainedPoints = shape.points.map((point, i) => {
const constrainedPoint = i % 2 === 0
? dimensionLength
: point + (newY - (shape.originalY || 0)) * (dimensionLength / polylineLength);
if (isNaN(constrainedPoint)) {
console.error(`Invalid constrained point calculation at index ${i}:`, { point, constrainedPoint });
}
return constrainedPoint;
});
console.log("constrainedPoints",constrainedPoints)
updatedShapes[shapeIndex] = { ...shape, points: constrainedPoints };
setShapes(updatedShapes);
updatedShapes.forEach((otherShape, index) => {
if (otherShape.type === 'circle' && isSameCircle(otherShape, associatedCircle)) {
updatedShapes[index] = { ...otherShape, x: otherShape.originalX, y: otherShape.originalY };
}
});
setShapes(updatedShapes);
}else if (associatedDimension && !associatedCircle) {
const dimensionLength = shape.originalDimensionLength || 0;
const polylineLength = shape.originalPolylineLength || 0;
const isHorizontal = shape.points[1] === shape.points[3]; // Assuming the polyline has at least two points and is horizontal if the y-coordinates are the same
const constrainedPoints = shape.points.map((point, i) => {
if (isHorizontal) {
// Handle horizontal polyline
return i % 2 === 0
? point// x-coordinates stay the same
: Math.min(
Math.max(point , polylineLength),
dimensionLength
); // y-coordinates constrained within the range
} else {
// Handle vertical polyline
return i % 2 === 0
? Math.min(
Math.max(point , polylineLength),
dimensionLength
)
: point; // y-coordinates stay the same
}
});
if (isNaN(constrainedPoints[0])) {
console.error('Invalid constrained point calculation:', constrainedPoints);
}
updatedShapes[shapeIndex] = { ...shape, points: constrainedPoints };
updatedShapes.forEach((otherShape, index) => {
if (otherShape.type === 'circle' && isSameCircle(otherShape, associatedCircle)) {
updatedShapes[index] = { ...otherShape, x: otherShape.originalX, y: otherShape.originalY };
}
});
setShapes(updatedShapes);
}
} else if(shape.type=== 'circle'){
// Handle dragging circle
handleCircleDrag(shapeIndex, shape, updatedShapes, newX, newY);
}
else if(shape.type=== 'dimension'){
// Handle dragging dimension
handleDimensionDrag(shapeIndex, shape, updatedShapes, newX, newY);
}
setShapes(prevShapes => {
if (areShapesEqual(prevShapes, updatedShapes)) {
return prevShapes;
}
return updatedShapes;
});
} else {
console.error("Invalid shape.points detected");
}
}
};
// Helper function to compare two arrays of shapes
function areShapesEqual(shapes1, shapes2) {
for (let i = 0; i < shapes1.length; i++) {
const shape1 = shapes1[i];
const shape2 = shapes2[i];
if (shape1.x !== shape2.x || shape1.y !== shape2.y || shape1.points !== shape2.points) {
return false;
}
}
return true;
}
const handleCircleDrag = (shapeIndex, shape, updatedShapes, newX, newY) => {
// Initialize original points only if shape has points
if (Array.isArray(shape.points)) {
shape.originalPoints = [...shape.points];
} else {
shape.originalPoints = []; // Default to empty array if points do not exist
}
// Update the circle's position
updatedShapes[shapeIndex] = { ...shape, x: newX, y: newY };
// Find and update the associated connector
const associatedConnector = findAssociatedConnector(shape, updatedShapes);
if (associatedConnector) {
const updatedConnector = {
...associatedConnector,
points: updateConnectorPoints(associatedConnector, newX, newY)
};
const connectorIndex = updatedShapes.findIndex(s => s.id === associatedConnector.id);
updatedShapes[connectorIndex] = updatedConnector;
}
setShapes(updatedShapes);
};
const handleDimensionDrag = (shapeIndex, shape, updatedShapes, newX, newY) => {
// Update the dimension's position
updatedShapes[shapeIndex] = { ...shape, x: newX, y: newY };
// Update associated connectors if needed (assuming dimensions might have connectors)
const associatedConnectors = findAssociatedConnectors(shape, updatedShapes);
associatedConnectors.forEach(connector => {
const updatedConnector = {
...connector,
points: updateConnectorPoints(connector, newX, newY)
};
const connectorIndex = updatedShapes.findIndex(s => s.id === connector.id);
updatedShapes[connectorIndex] = updatedConnector;
});
setShapes(updatedShapes);
};
const findAssociatedConnector = (circle, shapes) => {
// Logic to find the connector associated with the circle
// Example:
return shapes.find(shape => shape.type === 'connector' && shape.connectedCircleId === circle.id);
};
const findAssociatedConnectors = (dimension, shapes) => {
// Logic to find all connectors associated with the dimension
// Example:
return shapes.filter(shape => shape.type === 'connector' && shape.connectedDimensionId === dimension.id);
};
const updateConnectorPoints = (connector, newX, newY) => {
// Update the connector points based on the new position of the circle or dimension
return connector.points.map(point => point === connector.start ? [newX, newY] : point);
};
const handlePolylineDrag = (shapeIndex, shape, updatedShapes, newX, newY, updatedPoints) => {
const startX = shape.points[0];
const startY = shape.points[1];
const endX = updatedPoints[updatedPoints.length - 2];
const endY = updatedPoints[updatedPoints.length - 1];
// Constraints: Ensure polyline is within bounds
if (Math.abs(endX - startX) > 100 || Math.abs(endY - startY) > 100) {
// Revert to initial position if exceeds constraints
updatedPoints = shape.points;
}
updatedShapes[shapeIndex] = { ...shape, points: updatedPoints };
setShapes(updatedShapes);
return;
};
// Helper function to find the associated dimension based on intersection coordinates
const findAssociatedDimension = (polyline, shapes) => {
return shapes.find(shape => shape.type === 'dimension' && isIntersectingWithPolyline(shape, polyline));
};
// Helper function to find the associated circle based on intersection coordinates
const findAssociatedCircle = (polyline, shapes) => {
return shapes.find(shape => shape.type === 'circle' && isIntersectingWithPolyline(shape, polyline));
};
// Helper function to check if a shape intersects with a polyline
const isIntersectingWithPolyline = (shape, polyline) => {
if (shape.type === 'dimension') {
const [x1, y1, x2, y2] = shape.points;
return polyline.points.some((point, index) => {
if (index % 2 === 0) {
return isPointOnSegment(point, polyline.points[index + 1], x1, y1, x2, y2);
}
return false;
});
} else if (shape.type === 'circle') {
return findCirclePolylineIntersections(shape, polyline).length > 0;
}
return false;
};
// Helper function to determine if a point is on a line segment
const isPointOnSegment = (px, py, x1, y1, x2, y2) => {
const dx = x2 - x1;
const dy = y2 - y1;
const dotProduct = ((px - x1) * dx + (py - y1) * dy) / (dx * dx + dy * dy);
return dotProduct >= 0 && dotProduct <= 1;
};
// Helper function to check if two circles are the same based on their coordinates
const isSameCircle = (circle1, circle2) => {
if(circle1 && circle2)
return circle1.x === circle2.x && circle1.y === circle2.y;
else{
console.log("not the same");
return;}
};
// Helper function to calculate the length of a polyline
const calculatePolylineLength = (points) => {
let length = 0;
for (let i = 0; i < points.length - 2; i += 2) {
const x1 = points[i];
const y1 = points[i + 1];
const x2 = points[i + 2];
const y2 = points[i + 3];
length += Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
}
return length;
};
const findCirclePolylineIntersections = (circle, polyline) => {
const intersections = [];
const { x: cx, y: cy, radius: r } = circle;
for (let i = 0; i < polyline.points.length - 2; i += 2) {
const x1 = polyline.points[i];
const y1 = polyline.points[i + 1];
const x2 = polyline.points[i + 2];
const y2 = polyline.points[i + 3];
// Calculate the distance between the line segment and the circle's center
const dx = x2 - x1;
const dy = y2 - y1;
const a = dx * dx + dy * dy;
const b = 2 * ((x1 - cx) * dx + (y1 - cy) * dy);
const c = (x1 - cx) * (x1 - cx) + (y1 - cy) * (y1 - cy) - r * r;
const det = b * b - 4 * a * c;
if (det >= 0) {
const t1 = (-b + Math.sqrt(det)) / (2 * a);
const t2 = (-b - Math.sqrt(det)) / (2 * a);
if (t1 >= 0 && t1 <= 1) {
intersections.push([x1 + t1 * dx, y1 + t1 * dy]);
}
if (t2 >= 0 && t2 <= 1) {
intersections.push([x1 + t2 * dx, y1 + t2 * dy]);
}
}
}
return intersections;
};
>! > });
>! > if (associatedCircle.originalX === undefined || associatedCircle.originalY === undefined) {
>! > associatedCircle.originalX = associatedCircle.x;
>! > associatedCircle.originalY = associatedCircle.y;
>! > console.log('Circle original position:', associatedCircle.originalX, associatedCircle.originalY);
>! > }
>! > updatedShapes[shapeIndex] = { ...shape, points: constrainedPoints };
>! > setShapes(updatedShapes);
>! > const intersections = findCirclePolylineIntersections(associatedCircle, {
>! > type: 'polyline',
>! > points: updatedPoints,
>! > });
>! >
>! > if (intersections.length > 0 ) {
>! > const [newCircleX, newCircleY] = intersections[0];
>! > const constrainedCircleX = Math.max(dimX1, Math.min(newCircleX, dimX2));
>! > const constrainedCircleY = Math.max(dimY1, Math.min(newCircleY, dimY2));
>! >
>! > updatedShapes.forEach((otherShape, index) => {
>! > if (otherShape.type === 'circle' && isSameCircle(otherShape, associatedCircle)) {
>! > updatedShapes[index] = { ...otherShape, x: constrainedCircleX, y: constrainedCircleY };
>! > setShapes(updatedShapes);
>! > }
>! > });
>! > }
>! > else {
>! > updatedShapes.forEach((otherShape, index) => {
>! > if (otherShape.type === 'circle'&& isSameCircle(otherShape, associatedCircle)){
>! > updatedShapes[index] = { ...otherShape, x: associatedCircle.originalX, y: associatedCircle.originalY };
>! > setShapes(updatedShapes);
>! > }
>! > });
>! > const dimensionLength = shape.originalDimensionLength || 0;
>! > const polylineLength = shape.originalPolylineLength || 0;
>! > const constrainedPoints = shape.points.map((point, i) => {
>! > const constrainedPoint = i % 2 === 0
>! > ? point + (newX - (shape.originalX || 0)) * (dimensionLength / polylineLength)
>! > : point + (newY - (shape.originalY || 0)) * (dimensionLength / polylineLength);
>! > if (isNaN(constrainedPoint)) {
>! > console.error(`Invalid constrained point calculation at index ${i}:`, { point, constrainedPoint });
>! > }
>! > return constrainedPoint;
>! > });
>! > updatedShapes[shapeIndex] = { ...shape, points: constrainedPoints };
>! > setShapes(updatedShapes);
>! > }
>! > } else if (!associatedDimension && !associatedCircle) {
>! > const dimensionLength = shape.originalDimensionLength || 0;
>! > const polylineLength = shape.originalPolylineLength || 0;
>! > const constrainedPoints = shape.points.map((point, i) => {
>! > const constrainedPoint = i % 2 === 0
>! > ? dimensionLength
>! > : point + (newY - (shape.originalY || 0)) * (dimensionLength / polylineLength);
>! > if (isNaN(constrainedPoint)) {
>! > console.error(`Invalid constrained point calculation at index ${i}:`, { point, constrainedPoint });
>! > }
>! > return constrainedPoint;
>! > });
>! > console.log("constrainedPoints",constrainedPoints)
>! > updatedShapes[shapeIndex] = { ...shape, points: constrainedPoints };
>! > setShapes(updatedShapes);
>! > updatedShapes.forEach((otherShape, index) => {
>! > if (otherShape.type === 'circle' && isSameCircle(otherShape, associatedCircle)) {
>! > updatedShapes[index] = { ...otherShape, x: otherShape.originalX, y: otherShape.originalY };
>! > }
>! > });
>! > setShapes(updatedShapes);
>! > }else if (associatedDimension && !associatedCircle) {
>! > const dimensionLength = shape.originalDimensionLength || 0;
>! > const polylineLength = shape.originalPolylineLength || 0;
>! > const isHorizontal = shape.points[1] === shape.points[3];
>! > const constrainedPoints = shape.points.map((point, i) => {
>! > if (isHorizontal) {
>! > return i % 2 === 0
>! > ? point
>! > : Math.min(
>! > Math.max(point , polylineLength),
>! > dimensionLength
>! > );
>! > } else {
>! > return i % 2 === 0
>! > ? Math.min(
>! > Math.max(point , polylineLength),
>! > dimensionLength
>! > )
>! > : point;
>! > }
>! > });
>! > if (isNaN(constrainedPoints[0])) {
>! > console.error('Invalid constrained point calculation:', constrainedPoints);
>! > }
>! > updatedShapes[shapeIndex] = { ...shape, points: constrainedPoints };
>! > updatedShapes.forEach((otherShape, index) => {
>! > if (otherShape.type === 'circle' && isSameCircle(otherShape, associatedCircle)) {
>! > updatedShapes[index] = { ...otherShape, x: otherShape.originalX, y: otherShape.originalY };
>! > }
>! > });
>! > setShapes(updatedShapes);
>! > }
>! > } else if(shape.type=== 'circle'){
>! > handleCircleDrag(shapeIndex, shape, updatedShapes, newX, newY);
>! > }
>! > else if(shape.type=== 'dimension'){
>! > handleDimensionDrag(shapeIndex, shape, updatedShapes, newX, newY);
>! > }
>! > setShapes(prevShapes => {
>! > if (areShapesEqual(prevShapes, updatedShapes)) {
>! > return prevShapes;
>! > }
>! > return updatedShapes;
>! > });
>! > } else {
>! > console.error("Invalid shape.points detected");
>! > }
>! > }
>! > };
>! > function areShapesEqual(shapes1, shapes2) {
>! > for (let i = 0; i < shapes1.length; i++) {
>! > const shape1 = shapes1[i];
>! > const shape2 = shapes2[i];
>! > if (shape1.x !== shape2.x || shape1.y !== shape2.y || shape1.points !== shape2.points) {
>! > return false;
>! > }
>! > }
>! > return true;
>! > }
>! > const handleCircleDrag = (shapeIndex, shape, updatedShapes, newX, newY) => {
>! > if (Array.isArray(shape.points)) {
>! > shape.originalPoints = [...shape.points];
>! > } else {
>! > shape.originalPoints = [];
>! > }
>! > updatedShapes[shapeIndex] = { ...shape, x: newX, y: newY };
>! > const associatedConnector = findAssociatedConnector(shape, updatedShapes);
>! > if (associatedConnector) {
>! > const updatedConnector = {
>! > ...associatedConnector,
>! > points: updateConnectorPoints(associatedConnector, newX, newY)
>! > };
>! > const connectorIndex = updatedShapes.findIndex(s => s.id === associatedConnector.id);
>! > updatedShapes[connectorIndex] = updatedConnector;
>! > }
>! > setShapes(updatedShapes);
>! > };
>! > const handleDimensionDrag = (shapeIndex, shape, updatedShapes, newX, newY) => {
>! > updatedShapes[shapeIndex] = { ...shape, x: newX, y: newY };
>! > const associatedConnectors = findAssociatedConnectors(shape, updatedShapes);
>! > associatedConnectors.forEach(connector => {
>! > const updatedConnector = {
>! > ...connector,
>! > points: updateConnectorPoints(connector, newX, newY)
>! > };
>! > const connectorIndex = updatedShapes.findIndex(s => s.id === connector.id);
>! > updatedShapes[connectorIndex] = updatedConnector;
>! > });
>! > setShapes(updatedShapes);
>! > };
>! > const findAssociatedConnector = (circle, shapes) => {
>! > return shapes.find(shape => shape.type === 'connector' && shape.connectedCircleId === circle.id);
>! > };
>! > const findAssociatedConnectors = (dimension, shapes) => {
>! > return shapes.filter(shape => shape.type === 'connector' && shape.connectedDimensionId === dimension.id);
>! > };
>! > const updateConnectorPoints = (connector, newX, newY) => {
>! > return connector.points.map(point => point === connector.start ? [newX, newY] : point);
>! > };
>! > const handlePolylineDrag = (shapeIndex, shape, updatedShapes, newX, newY, updatedPoints) => {
>! > const startX = shape.points[0];
>! > const startY = shape.points[1];
>! > const endX = updatedPoints[updatedPoints.length - 2];
>! > const endY = updatedPoints[updatedPoints.length - 1];ds
>! > if (Math.abs(endX - startX) > 100 || Math.abs(endY - startY) > 100) {
>! > updatedPoints = shape.points;
>! > }
>! > updatedShapes[shapeIndex] = { ...shape, points: updatedPoints };
>! > setShapes(updatedShapes);
>! > return;
>! > };
>! > const findAssociatedDimension = (polyline, shapes) => {
>! > return shapes.find(shape => shape.type === 'dimension' && isIntersectingWithPolyline(shape, polyline));
>! > };
>! > const findAssociatedCircle = (polyline, shapes) => {
>! > return shapes.find(shape => shape.type === 'circle' && isIntersectingWithPolyline(shape, polyline));
>! > };
>! > const isIntersectingWithPolyline = (shape, polyline) => {
>! > if (shape.type === 'dimension') {
>! > const [x1, y1, x2, y2] = shape.points;
>! > return polyline.points.some((point, index) => {
>! > if (index % 2 === 0) {
>! > return isPointOnSegment(point, polyline.points[index + 1], x1, y1, x2, y2);
>! > }
>! > return false;
>! > });
>! > } else if (shape.type === 'circle') {
>! > return findCirclePolylineIntersections(shape, polyline).length > 0;
>! > }
>! > return false;
>! > };
>! > const isPointOnSegment = (px, py, x1, y1, x2, y2) => {
>! > const dx = x2 - x1;
>! > const dy = y2 - y1;
>! > const dotProduct = ((px - x1) * dx + (py - y1) * dy) / (dx * dx + dy * dy);
>! > return dotProduct >= 0 && dotProduct <= 1;
>! > };
>! > const isSameCircle = (circle1, circle2) => {
>! > if(circle1 && circle2)
>! > return circle1.x === circle2.x && circle1.y === circle2.y;
>! > else{
>! > console.log("not the same");
>! > return;}
>! > };
>! > const calculatePolylineLength = (points) => {
>! > let length = 0;
>! > for (let i = 0; i < points.length - 2; i += 2) {
>! > const x1 = points[i];
>! > const y1 = points[i + 1];
>! > const x2 = points[i + 2];
>! > const y2 = points[i + 3];
>! > length += Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
>! > }
>! > return length;
>! > };
>! > const findCirclePolylineIntersections = (circle, polyline) => {
>! > const intersections = [];
>! > const { x: cx, y: cy, radius: r } = circle;
>! > for (let i = 0; i < polyline.points.length - 2; i += 2) {
>! > const x1 = polyline.points[i];
>! > const y1 = polyline.points[i + 1];
>! > const x2 = polyline.points[i + 2];
>! > const y2 = polyline.points[i + 3];
>! >
>! > // Calculate the distance between the line segment and the circle's center
>! > const dx = x2 - x1;
>! > const dy = y2 - y1;
>! > const a = dx * dx + dy * dy;
>! > const b = 2 * ((x1 - cx) * dx + (y1 - cy) * dy);
>! > const c = (x1 - cx) * (x1 - cx) + (y1 - cy) * (y1 - cy) - r * r;
>! > const det = b * b - 4 * a * c;
>! >
>! > if (det >= 0) {
>! > const t1 = (-b + Math.sqrt(det)) / (2 * a);
>! > const t2 = (-b - Math.sqrt(det)) / (2 * a);
>! > if (t1 >= 0 && t1 <= 1) {
>! > intersections.push([x1 + t1 * dx, y1 + t1 * dy]);
>! > }
>! > if (t2 >= 0 && t2 <= 1) {
>! > intersections.push([x1 + t2 * dx, y1 + t2 * dy]);
>! > }
>! > }
>! > }
>! > return intersections;
>! > };
>! >
>! > ```
i have 3 shapes polyline, dimesnion(range)& the circle(connector). each polyline is associated with a dimension & a circle when i want to drag the polyline i want it to be dragged and dropped with its circle synchronously into its dimension range,both the polyline and circle should not be out of this range,the issue is the circle do not move syncronously with the polyline
Upvotes: 0
Views: 19
Answers (0)
Related Questions
- drag drop files into standard html file input
- Drag and drop files into WPF
- Unique Key constraints for multiple columns in Entity Framework
- How to add "on delete cascade" constraints?
- How do I drag and drop files into an application?
- How to remove constraints from my MySQL table?
- How can foreign key constraints be temporarily disabled using T-SQL?
- Turn off constraints temporarily (MS SQL)
- Techniques for Tracing Constraints
- Drag Event vs Mouse events for Drag and Drop