Skip to content

Commit

Permalink
drag elements from panel
Browse files Browse the repository at this point in the history
  • Loading branch information
Lubin Pappalardo committed Oct 5, 2023
1 parent e32ba16 commit 20c1cdf
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 35 deletions.
85 changes: 60 additions & 25 deletions assets/scripts/components-control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ let DraggedComponent;
let SelectedComponent = '';
let SwitchHovered = '';
let componentRotations = {};
let IsDraggingNewComponent = false;
let DraggedNewComponentStartCoords = {};

/* ---- COMPONENT --- */

Expand Down Expand Up @@ -53,32 +55,23 @@ $('#board').on('click', function (e) {

/* Adding new components */

$(document).on('click', '.add-component', function (e) {
$(document).on('mousedown', '.add-component', function (e) {
const gate = $(this).text().trim();
const html = components[gate].replace('id=\'\'', `id='component${ComponentCount}'`);
$('.components').append(html);

let [x, y] = mousePositionToCoordinates($(window).width() / 2, $(window).height() / 2, $(`#component${ComponentCount}`));
let isOverlap = true;

// loop to prevent added component to overlap and stack on each others
while (isOverlap) {
isOverlap = false;
for (const component in diagram) {
// check if the position of the added component is close to an other one
if (Math.abs(x - diagram[component].x) < 20 && Math.abs(y - diagram[component].y) < 20) {
x += 75;
y += 75;
isOverlap = true;
}
}
}
$(`#component${ComponentCount}`).css('left', x + 'px');
$(`#component${ComponentCount}`).css('top', y + 'px');
DraggedComponent = $(`#component${ComponentCount}`);

ComponentCount += 1;
setDiagram();
autoSave();

const [x, y] = mousePositionToCoordinates(e.pageX, e.pageY, DraggedComponent);
IsDraggingNewComponent = true;
DraggedNewComponentStartCoords = {
x: x,
y: y
};
DraggedComponent.css('left', x + 'px');
DraggedComponent.css('top', y + 'px');
});

/* Deleting components */
Expand Down Expand Up @@ -226,25 +219,67 @@ $(document).on('touchstart', '.component', function (e) {

$(document).on('mouseup touchend', '.component', function (e) {
IsDraggingComponent = false;
if (IsDraggingNewComponent) {
setDiagram();
}
IsDraggingNewComponent = false;
DraggedComponent = false;
autoSave();
});


$(document).on('mouseup', function (e) {
if (IsDraggingNewComponent) {
// if element hasn't been dragged add it to middle;
const [posX, posY] = mousePositionToCoordinates(e.pageX, e.pageY, DraggedComponent);
// calculate if the elem has been dragged more than 20px
if (Math.abs(DraggedNewComponentStartCoords.x - posX) <= 20 && Math.abs(DraggedNewComponentStartCoords.y - posY) <= 20) {

let [x, y] = mousePositionToCoordinates($(window).width() / 2, $(window).height() / 2, DraggedComponent);
let isOverlap = true;

// loop to prevent added component to overlap and stack on each others
while (isOverlap) {
isOverlap = false;
for (const component in diagram) {
// check if the position of the added component is close to an other one
if (Math.abs(x - diagram[component].x) < 20 && Math.abs(y - diagram[component].y) < 20) {
x += 75;
y += 75;
isOverlap = true;
}
}
}
DraggedComponent.css('left', x + 'px');
DraggedComponent.css('top', y + 'px');
IsDraggingComponent = false;
IsDraggingNewComponent = false;
DraggedComponent = false;
setDiagram();
autoSave();
}
}
})


$(document).on('mousemove', function (e) {
if (IsDraggingComponent) {
if (IsDraggingComponent || IsDraggingNewComponent) {
const x = e.pageX;
const y = e.pageY;

const [posX, posY] = mousePositionToCoordinates(x, y, DraggedComponent);

if (posY > 0 && posY < BoardSize) {
DraggedComponent.css('top', posY + 'px');
diagram[DraggedComponent.attr('id')].y = posY;
DraggedComponent.css('top', posY + 'px');
if (!IsDraggingNewComponent) {
diagram[DraggedComponent.attr('id')].y = posY;
}
}
if (posX > 0 && posX < BoardSize) {
DraggedComponent.css('left', posX + 'px');
diagram[DraggedComponent.attr('id')].x = posX;
DraggedComponent.css('left', posX + 'px');
if (!IsDraggingNewComponent) {
diagram[DraggedComponent.attr('id')].x = posX;
}
}
}
});
Expand Down
1 change: 1 addition & 0 deletions assets/scripts/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ function clearBoard() {
diagram = {};
ComponentCount = 0;
$('#loadDiagram').val('');
resetWorkspace();
setDiagram();
deleteCookies();
closeClearingConfirmation();
Expand Down
20 changes: 10 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,29 +80,29 @@ <h1 id='title'>Digital Logic Sim

<section class='component-library'>

<span class='add-component'><img src='assets/elements/LIGHT.svg' alt='Light'>LIGHT</span>
<span class='add-component'><img src='assets/elements/SWITCH.svg' alt='Switch'>SWITCH</span>
<span class='add-component'><img src='assets/elements/LIGHT.svg' alt='Light' draggable="false">LIGHT</span>
<span class='add-component'><img src='assets/elements/SWITCH.svg' alt='Switch' draggable="false">SWITCH</span>

</section>

<section class='component-library'>

<span class='add-component'>
<img src='assets/elements/BUFFER.svg' alt='BUFFER gate'>BUFFER</span>
<img src='assets/elements/BUFFER.svg' alt='BUFFER gate' draggable="false">BUFFER</span>
<span class='add-component'>
<img src='assets/elements/NOT.svg' alt='NOT gate'>NOT</span>
<img src='assets/elements/NOT.svg' alt='NOT gate' draggable="false">NOT</span>
<span class='add-component'>
<img src='assets/elements/AND.svg' alt='AND gate'>AND</span>
<img src='assets/elements/AND.svg' alt='AND gate' draggable="false">AND</span>
<span class='add-component'>
<img src='assets/elements/NAND.svg' alt='NAND gate'>NAND</span>
<img src='assets/elements/NAND.svg' alt='NAND gate' draggable="false">NAND</span>
<span class='add-component'>
<img src='assets/elements/OR.svg' alt='OR gate'>OR</span>
<img src='assets/elements/OR.svg' alt='OR gate' draggable="false">OR</span>
<span class='add-component'>
<img src='assets/elements/NOR.svg' alt='NOR gate'>NOR</span>
<img src='assets/elements/NOR.svg' alt='NOR gate' draggable="false">NOR</span>
<span class='add-component'>
<img src='assets/elements/XOR.svg' alt='XOR gate'>XOR</span>
<img src='assets/elements/XOR.svg' alt='XOR gate' draggable="false">XOR</span>
<span class='add-component'>
<img src='assets/elements/XNOR.svg' alt='XNOR gate'>XNOR</span>
<img src='assets/elements/XNOR.svg' alt='XNOR gate' draggable="false">XNOR</span>

</section>

Expand Down

0 comments on commit 20c1cdf

Please sign in to comment.