Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Crearting 'View Trash' and more restore option in Musicblocks #4191

Merged
merged 12 commits into from
Jan 18, 2025
Merged

Crearting 'View Trash' and more restore option in Musicblocks #4191

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c392fae
Creating View Trash option
subhas-pramanik-09 Dec 27, 2024
47d7edb
creating view trash option
subhas-pramanik-09 Dec 30, 2024
8ffce6c
creating view trash option
subhas-pramanik-09 Dec 31, 2024
9d125e7
Creating view trash list and more restore options
subhas-pramanik-09 Dec 31, 2024
b1f1453
Creating view trash list and more restore options
subhas-pramanik-09 Dec 31, 2024
8c0b5a3
Creating view trash and more restore options
subhas-pramanik-09 Jan 1, 2025
40ecf20
create view trash option
subhas-pramanik-09 Jan 15, 2025
447916d
Creating view trash and more restore options
subhas-pramanik-09 Jan 15, 2025
a6f5608
Creating view trash and more restore options
subhas-pramanik-09 Jan 16, 2025
3f0ad58
Creating view trash and more restore options
subhas-pramanik-09 Jan 17, 2025
43a63d0
Creating view Trash and more restore options
subhas-pramanik-09 Jan 18, 2025
dc96702
Creating view trash and more restore options
subhas-pramanik-09 Jan 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -780,6 +780,7 @@
>
<a style="color: transparent;">space&nbsp;&nbsp;&nbsp;</a>
</li>

<li>
<a
id="restoreIcon"
Expand All @@ -789,6 +790,7 @@
>restore_from_trash</i
></a
>
<div id="trashList"></div>
</li>
<li>
<a
Expand Down
211 changes: 150 additions & 61 deletions js/activity.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3325,86 +3325,85 @@ class Activity {
);
return;
}
activity._restoreTrash();

if (docById("helpfulWheelDiv").style.display !== "none") {
docById("helpfulWheelDiv").style.display = "none";
activity.__tick();
}
};

const restoreTrashShortcut = (activity) => {
subhas-pramanik-09 marked this conversation as resolved.
Show resolved Hide resolved
if (!activity.blocks || !activity.blocks.trashStacks || activity.blocks.trashStacks.length === 0) {
activity.textMsg(
_("Nothing in the trash to restore."),
subhas-pramanik-09 marked this conversation as resolved.
Show resolved Hide resolved
3000
);
return;
}
const lastId = this.blocks.trashStacks[this.blocks.trashStacks.length - 1];
if (lastId) this._restoreTrashById(lastId);
activity.textMsg(
_("Item restored from the trash."),
3000
);

if (docById("helpfulWheelDiv").style.display !== "none") {
docById("helpfulWheelDiv").style.display = "none";
activity.__tick();
}
};

}

this._restoreTrash = () => {
this._restoreTrashById = (blockId) => {
const blockIndex = this.blocks.trashStacks.indexOf(blockId);
if (blockIndex === -1) return; // Block not found in trash

this.blocks.trashStacks.splice(blockIndex, 1); // Remove from trash

for (const name in this.palettes.dict) {
this.palettes.dict[name].hideMenu(true);
}

this.blocks.activeBlock = null;
this.refreshCanvas();

subhas-pramanik-09 marked this conversation as resolved.
Show resolved Hide resolved
const dx = 0;
const dy = -this.cellSize * 3; // Reposition

if (this.blocks.trashStacks.length === 0) {
return;
}

const thisBlock = this.blocks.trashStacks.pop();

// Restore drag group in trash
this.blocks.findDragGroup(thisBlock);

// Restore drag group
this.blocks.findDragGroup(blockId);
for (let b = 0; b < this.blocks.dragGroup.length; b++) {
const blk = this.blocks.dragGroup[b];
this.blocks.blockList[blk].trash = false;
this.blocks.moveBlockRelative(blk, dx, dy);
this.blocks.blockList[blk].show();
}

this.blocks.raiseStackToTop(thisBlock);

if (
this.blocks.blockList[thisBlock].name === "start" ||
this.blocks.blockList[thisBlock].name === "drum"
) {
const turtle = this.blocks.blockList[thisBlock].value;

this.blocks.raiseStackToTop(blockId);
const restoredBlock = this.blocks.blockList[blockId];

if (restoredBlock.name === 'start' || restoredBlock.name === 'drum') {
const turtle = restoredBlock.value;
this.turtles.turtleList[turtle].inTrash = false;
this.turtles.turtleList[turtle].container.visible = true;
} else if (this.blocks.blockList[thisBlock].name === "action") {
// We need to add a palette entry for this action.
// But first we need to ensure we have a unqiue name,
// as the name could have been taken in the interim.
const actionArg = this.blocks.blockList[
this.blocks.blockList[thisBlock].connections[1]
];
} else if (restoredBlock.name === 'action') {
const actionArg = this.blocks.blockList[restoredBlock.connections[1]];
if (actionArg !== null) {
let label;
const oldName = actionArg.value;
// Mark the action block as still being in the
// trash so that its name won't be considered when
// looking for a unique name.
this.blocks.blockList[thisBlock].trash = true;
restoredBlock.trash = true;
const uniqueName = this.blocks.findUniqueActionName(oldName);
this.blocks.blockList[thisBlock].trash = false;

restoredBlock.trash = false;
if (uniqueName !== actionArg) {
actionArg.value = uniqueName;

label = actionArg.value.toString();
if (label.length > 8) {
label = label.substr(0, 7) + "...";
}
label = uniqueName.length > 8 ? uniqueName.substr(0, 7) + '...' : uniqueName;
actionArg.text.text = label;

if (actionArg.label !== null) {
actionArg.label.value = uniqueName;
}

actionArg.container.updateCache();

// Check the drag group to ensure any do blocks are updated (in case of recursion).
for (let b = 0; b < this.blocks.dragGroup.length; b++) {
const me = this.blocks.blockList[this.blocks.dragGroup[b]];
if (
Expand All @@ -3415,11 +3414,7 @@ class Activity {
) {
me.privateData = uniqueName;
me.value = uniqueName;

label = me.value.toString();
if (label.length > 8) {
label = label.substr(0, 7) + "...";
}
label = uniqueName.length > 8 ? uniqueName.substr(0, 7) + '...' : uniqueName;
me.text.text = label;
me.overrideName = label;
me.regenerateArtwork();
Expand All @@ -3429,21 +3424,115 @@ class Activity {
}
}
}

activity.textMsg(
_("Item restored from the trash."),
3000
);

this.refreshCanvas();
};
};

// Add event listener for trash icon click
document.getElementById('restoreIcon').addEventListener('click', () => {
this._renderTrashView();
});

// function to hide trashView from canvas
function handleClickOutsideTrashView(trashView) {
let firstClick = true;
document.addEventListener('click', (event) => {
if (firstClick) {
firstClick = false;
return;
}
if (!trashView.contains(event.target) && event.target !== trashView) {
trashView.style.display = 'none';
}
});
}

this.handleKeyDown = (event) => {

if (event.ctrlKey && event.key === "z") {
this._restoreTrash(activity);
activity.__tick();
event.preventDefault();
this._renderTrashView = () => {
if (!activity.blocks || !activity.blocks.trashStacks || activity.blocks.trashStacks.length === 0) {
return;
}
const trashList = document.getElementById('trashList');
const trashView = document.createElement('div');
trashView.id = 'trashView';
trashView.classList.add('trash-view');

trashView.style = `position: relative; background-color: white; max-width: 396px; max-height: 200px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should move this to the CSS file?

overflow-y: auto; font-size: 16px; color: black; border: 2px solid #87cefa;
list-style-type: none; margin: 0; padding: 0; text-align: left;`;
trashView.innerHTML = '';

// Sticky buttons
const buttonContainer = document.createElement('div');
buttonContainer.style = `position: sticky; top: 0; z-index: 10; display: flex; gap: 10px; background: white;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And these other style definitions?

margin: 0; padding: 5px; border-bottom: 1px solid #d9d9d9;`;

const restoreLastBtn = document.createElement('button');
restoreLastBtn.textContent = 'Restore Last';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This string needs i18n. _("Restore Last")

Same for Restore All on Line 3477.

Also, we should use "Restore last" and "Restore all" to be consistent with the other menu labels.

restoreLastBtn.style = 'display: flex; align-items: center; justify-content: center; width: 100px; height: 40px;';
restoreLastBtn.addEventListener('click', () => {
const lastId = this.blocks.trashStacks[this.blocks.trashStacks.length - 1];
if (lastId) this._restoreTrashById(lastId);
trashView.style.display = 'none';
});

const restoreAllBtn = document.createElement('button');
restoreAllBtn.textContent = 'Restore All';
restoreAllBtn.style = 'display: flex; align-items: center; justify-content: center; width: 100px; height: 40px;';
restoreAllBtn.addEventListener('click', () => {
while (this.blocks.trashStacks.length > 0) {
this._restoreTrashById(this.blocks.trashStacks[0]);
}
trashView.style.display = 'none';
});

buttonContainer.appendChild(restoreLastBtn);
buttonContainer.appendChild(restoreAllBtn);
trashView.appendChild(buttonContainer);

// Render trash items
this.blocks.trashStacks.forEach((blockId) => {
const block = this.blocks.blockList[blockId];
const listItem = document.createElement('div');
listItem.classList.add('trash-item');
listItem.style = 'padding: 2px 12px; margin: 1px 0; border-radius: 4px; transition: background-color 0.3s;';

const svgData = block.artwork;
const encodedData = 'data:image/svg+xml;utf8,' + encodeURIComponent(svgData);

const img = document.createElement('img');
img.src = encodedData;
img.alt = 'Block Icon';
img.style = 'width: 30px; height: 30px; margin-right: 10px; vertical-align: middle;';

const textNode = document.createTextNode(block.name);

listItem.appendChild(img);
listItem.appendChild(textNode);
listItem.dataset.blockId = blockId;

listItem.addEventListener('mouseover', () => listItem.style.backgroundColor = '#d9d9d9');
listItem.addEventListener('mouseout', () => listItem.style.backgroundColor = '');
listItem.addEventListener('click', () => {
this._restoreTrashById(blockId);
trashView.style.display = 'none';
});
handleClickOutsideTrashView(trashView);

trashView.appendChild(listItem);
});

const existingView = document.getElementById('trashView');
if (existingView) {
trashList.replaceChild(trashView, existingView);
} else {
trashList.appendChild(trashView);
}
};

// Attach keydown event listener to document
document.addEventListener("keydown", this.handleKeyDown);

/*
* Open aux menu
Expand Down Expand Up @@ -5814,7 +5903,7 @@ class Activity {
this.helpfulWheelItems.push({label: "Increase block size", icon: "imgsrc:data:image/svg+xml;base64," + window.btoa(base64Encode(BIGGERBUTTON)), display: true, fn: doLargerBlocks});

if (!this.helpfulWheelItems.find(ele => ele.label === "Restore"))
this.helpfulWheelItems.push({label: "Restore", icon: "imgsrc:header-icons/restore-from-trash.svg", display: true, fn: restoreTrash});
this.helpfulWheelItems.push({label: "Restore", icon: "imgsrc:header-icons/restore-from-trash.svg", display: true, fn: restoreTrashShortcut});

if (!this.helpfulWheelItems.find(ele => ele.label === "Turtle Wrap Off"))
this.helpfulWheelItems.push({label: "Turtle Wrap Off", icon: "imgsrc:header-icons/wrap-text.svg", display: true, fn: this.toolbar.changeWrap});
Expand Down
Loading