Skip to content

Commit

Permalink
Working on deleting, etc.
Browse files Browse the repository at this point in the history
  • Loading branch information
@frasanz
frasanz committed Sep 19, 2024
1 parent 4b2999a commit a8a5fda
Showing 1 changed file with 148 additions and 18 deletions.
166 changes: 148 additions & 18 deletions frontend/templates/task2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,10 @@
<div class="container-fluid">
<div class="row h-100">
<div class="col-md-2 h-100 tools">
<div id="coordinates"></div>
<div id="coordinates">
<h3>Icon List</h3>
<ul id="icon-list-items"></ul>
</div>
</div>
<div class="col-md-5 column-left p-0 m-0 h-100">
<div id="map" class=""></div>
Expand Down Expand Up @@ -110,7 +113,33 @@
let isRightClickDragging = false; // Flag to track right-click drag state
let isDragging = false; // Flag to track left-click drag state
let startX; // Initial X position for rotation calculation
const originalIconScale = 0.05; // Original scale for icons
let iconCounter = 1; // Counter for numbering icons
let iconList = []; // List to store icon objects
let isPKeyActive = false;
let isDKeyActive = false;
const originalIconScale = 1.05; // Original scale for icons

document.addEventListener('keydown', function(event) {
if (event.key === 'p' || event.key === 'P') {
isPKeyActive = true;
}
});
// Track the "p" key release
document.addEventListener('keyup', function(e) {
if (e.key === 'p' || e.key === 'P') {
isPKeyActive = false;
}
});
document.addEventListener('keydown', function(event) {
if (event.key === 'd' || event.key === 'D') {
isDKeyActive = true;
}
});
document.addEventListener('keyup', function(e) {
if (e.key === 'd' || e.key === 'D') {
isDKeyActive = false;
}
});

function addIcon(iconURL, x, y) {
fabric.Image.fromURL(iconURL, function(icon) {
Expand All @@ -125,12 +154,103 @@
hasControls: false, // Disable controls for the icon
hasBorders: false // Disable borders for the icon
});
const label = new fabric.Text(iconCounter.toString(), {
left: icon.left,
top: icon.top - 15, // Position the label above the icon
fontSize: 16,
fill: 'red',
originX: 'center',
originY: 'center',
selectable: false, // Make the label non-selectable
hasControls: false, // Disable controls for the label
hasBorders: false // Disable borders for the label
});

// Create a unique ID for the icon
const iconID = `icon-${iconCounter}`;

iconCounter++; // Increment the icon counter


const iconGroup = new fabric.Group([icon, label], {
left: x,
top: y,
originX: 'center',
originY: 'center',
selectable: true, // Make the group selectable
hasControls: false, // Disable controls for the group
hasBorders: false // Disable borders for the group
});

// Store the icon object in the list
iconList.push({
id: iconID,
px: iconGroup.left,
py: iconGroup.top,
});

updateIconList(); // Update the icon list displayed in the div
console.log(iconList);
console.log(getActualCoordinates(iconGroup));

group.addWithUpdate(icon); // Add the icon to the group
group.addWithUpdate(iconGroup); // Add the icon to the group
canvas.requestRenderAll(); // Re-render the canvas
}, { crossOrigin: 'anonymous' }); // Handle CORS issues
}

function deleteNearestIconGroup(px, py) {
let closestIconGroup = null;
let closestDistance = Infinity;

// Iterate over all objects in the group to find the closest one
group.getObjects().forEach(function(obj) {
if (obj !== img) { // Exclude the main image
const dx = obj.left - px;
const dy = obj.top - py;
const distance = Math.sqrt(dx * dx + dy * dy);

if (distance < closestDistance) {
closestDistance = distance;
closestIconGroup = obj;
}
}
});

// Remove the closest icon group if found
if (closestIconGroup) {
group.remove(closestIconGroup);
iconList = iconList.filter(icon => icon.id !== closestIconGroup.id);
console.log(iconList);
updateIconList(); // Update the icon list displayed in the div
canvas.requestRenderAll(); // Re-render the canvas
}
}

// Function to update the icon list in the div
function updateIconList() {
const listContainer = document.getElementById('icon-list-items');
listContainer.innerHTML = ''; // Clear the current list

// Create list items for each icon in iconList
iconList.forEach(function(icon) {
const listItem = document.createElement('li');
listItem.textContent = `ID: ${icon.id}, X: ${icon.px.toFixed(2)}, Y: ${icon.py.toFixed(2)}`;
listContainer.appendChild(listItem);
});
}
function getActualCoordinates(iconGroup) {
// Get the point of the iconGroup based on its center origin
const originPoint = iconGroup.getPointByOrigin('center', 'center');

// Transform the point to account for the group's transformations
const transformedPoint = fabric.util.transformPoint(
originPoint,
group.calcTransformMatrix()
);

return { px: transformedPoint.x, py: transformedPoint.y };
}

// Mouse wheel
canvas.on('mouse:wheel', function(event) {
const delta = event.e.deltaY; // Get the scroll direction
Expand All @@ -147,26 +267,35 @@
});

canvas.requestRenderAll(); // Re-render the canvas
opt.e.preventDefault(); // Prevent default scroll behavior
opt.e.stopPropagation(); // Stop event propagation
event.e.preventDefault(); // Prevent default scroll behavior
event.e.stopPropagation(); // Stop event propagation
canvas.requestRenderAll(); // Re-render the canvas with the new zoom level
});

// Event for mouse down
canvas.on('mouse:down', function(event) {
if (event.e.button === 0) { // Left mouse button (button === 0)
isDragging = true;
lastPosX = event.e.clientX;
lastPosY = event.e.clientY;
event.e.preventDefault();

// Get the pointer position on the canvas
const pointer = canvas.getPointer(event.e);
const px = pointer.x;
const py = pointer.y;

// Add an icon at the click position
addIcon('https://cdn-icons-png.flaticon.com/512/1828/1828774.png', px, py); // Example icon URL
if (isPKeyActive) {
// Get the pointer position on the canvas
const pointer = canvas.getPointer(event.e);
const px = pointer.x;
const py = pointer.y;

// Add an icon at the click position
addIcon('https://cdn-icons-png.flaticon.com/512/1828/1828774.png', px, py); // Example icon URL

} else if (isDKeyActive){
const pointer = canvas.getPointer(event.e);
const px = pointer.x;
const py = pointer.y;
deleteNearestIconGroup(px, py);

} else {
isDragging = true;
lastPosX = event.e.clientX;
lastPosY = event.e.clientY;
event.e.preventDefault();
}
}


Expand Down Expand Up @@ -209,14 +338,15 @@

// Update the start position for continuous rotation
startX = currentX;
} else {

}
});

// Event for mouse up
canvas.on('mouse:up', function(event) {
// Check which mouse button was released
if (event.e.button === 0) { // Left mouse button

isDragging = false; // Stop the left-click drag movement
} else if (event.e.button === 2) { // Right mouse button

Expand Down

0 comments on commit a8a5fda

Please sign in to comment.