Skip to content

Commit

Permalink
update tuto popup
Browse files Browse the repository at this point in the history
  • Loading branch information
@Viet281101
Viet281101 committed Jun 17, 2024
1 parent 164a4ac commit 813d223
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 31 deletions.
115 changes: 85 additions & 30 deletions 3D/js/popup/tutorial.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,60 @@ export function showTutorialPopup(toolbar) {

const rows = [
{ label: 'How to interact with this version', title: true },
{ label: '1) Create Any Polycube :', underline: true, icon: 'plus', description: 'Click this icon to open a menu. Enter the number of cubes for the Polycube you want to create.' },
{ label: '1) Create Any Polycube', underline: true, icon: 'plus', description: `Click this icon to open a menu.\n\nSteps to create a Polycube:\n
1. Enter the desired number of cubes in the 'N° cubes' input field.\n
2. Enter the position coordinates (x, y, z) for the Polycube.\n
3. Use the 'Previous' [ic_arrow_left] and 'Next' [ic_arrow_right] buttons to navigate through highlighted cubes.\n
4. Click 'Select' [ic_select] to add the highlighted cube to your Polycube.\n
5. Click 'Undo' [ic_reset] to remove the last added cube.\n
6. Click 'Create' to finalize and create the Polycube.\n
7. Click 'Clear' to reset the Polycube creation and start over.\n
8. Use the 'Info' button to display current Polycube information.\n`},
{ label: '2) Manipulate the Polycubes :', underline: true, description: `Click to any Polycube on the scene to select it.\n\n After selecting a Polycube, you can:\n
1. Use the [ic_left_click] 'Left Mouse Button' to rotate the Polycube.\n
2. Use the [ic_right_click] 'Right Mouse Button' to move the Polycube.\n\n\n\nCustom visible views of Polycubes with DAT.GUI :\n
1. Click 'polycubeVisible' to show or hide the selected Polycube on the scene.\n
2. Click 'allCubesVisible' to show or hide all Polycubes on the scene.\n`},
{ label: '3) Grid Board Settings', underline: true, icon: 'table', description: `This menu lets you delete and or create the new grid.\n
1. Click [ic_trash] 'Delete current grid' to delete the grid.\n
2. Enter (x, y, z) sizes for the grid. Click [ic_draw] to create a new grid.\n`},
{ label: '4) Manipulate the Grid Board :', underline: true, description: `You can only control the grid through camera perspective with Orbit Controls :\n
1. Use the [ic_left_click] 'Left Mouse Button' to rotate the grid.\n
2. Use the [ic_right_click] 'Right Mouse Button' to move the grid.\n
3. Use the 'Center Mouse Button' to zoom the grid.\n\n\n\nCustom visible views of grid with DAT.GUI :\n
1. Click 'showInnerGrid' to show the grid's inner grid.\n
2. Click 'showOuterGrid' to show the grid's outer grid. But this is already shown by default.\n`},
{ label: '5) Use Settings :', underline: true, icon: 'setting', description: `In this menu, you can:\n
1. Click [ic_trash] 'Delete Selected Polycube' to delete the Polycube that you are currently selected.\n`},
];

const startY = 60;
const rowHeight = 60;
const colX = 30;
const maxWidth = 300;
const lineHeight = 24;

const iconSize = 30;
const iconPadding = 5;
const icons = {
'[ic_arrow_left]': '../assets/ic_arrow_left.png',
'[ic_arrow_right]': '../assets/ic_arrow_right.png',
'[ic_select]': '../assets/ic_select.png',
'[ic_reset]': '../assets/ic_reset.png',
'[ic_left_click]': '../assets/ic_left_click.png',
'[ic_right_click]': '../assets/ic_right_click.png',
'[ic_trash]': '../assets/ic_trash.png',
'[ic_draw]': '../assets/ic_draw.png',
};

const dropdowns = {};
let clickAreas = [];

rows.forEach((row, index) => {
const y = startY + index * rowHeight;
ctx.font = '21px Pixellari';
ctx.fillStyle = '#000';
ctx.fillText(row.label, colX, y + 20);
ctx.font = '23px Pixellari';
ctx.fillStyle = '#000050';
ctx.fillText(row.label, colX, y + lineHeight);

if (row.icon) {
const icon = new Image();
Expand All @@ -32,7 +70,9 @@ export function showTutorialPopup(toolbar) {
ctx.drawImage(icon, popup.width - 94, y - 10, 40, 40);
};
}
if (row.description) { dropdowns[index] = { description: row.description, expanded: true, y: y + 40 }; }
if (row.description) {
dropdowns[index] = { description: row.description, expanded: false, y: y + 40 };
}
});

popup.addEventListener('mousemove', (e) => {
Expand Down Expand Up @@ -64,24 +104,35 @@ export function showTutorialPopup(toolbar) {
});
});

function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
const words = text.split(' ');
function wrapText(ctx, text, x, y, maxWidth, lineHeight, callback) {
const paragraphs = text.split('\n');
let line = '';
const lines = [];
const iconPositions = [];

for (let n = 0; n < words.length; n++) {
let testLine = line + words[n] + ' ';
let metrics = ctx.measureText(testLine);
let testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
lines.push(line);
line = words[n] + ' ';
} else { line = testLine; }
}
lines.push(line);
lines.forEach((line, index) => {
ctx.fillText(line, x, y + index * lineHeight);
paragraphs.forEach(paragraph => {
const words = paragraph.split(' ');
for (let n = 0; n < words.length; n++) {
const word = words[n];
if (icons[word]) {
lines.push(line);
iconPositions.push({ icon: icons[word], x: x + ctx.measureText(line).width + iconPadding, y: y + (lines.length * lineHeight) - (iconSize/2) - iconSize });
line = '';
continue;
}
let testLine = line + word + ' ';
let metrics = ctx.measureText(testLine);
let testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
lines.push(line);
line = word + ' ';
} else { line = testLine; }
}
lines.push(line);
line = '';
});
lines.forEach((line, index) => { ctx.fillText(line, x, y + index * lineHeight); });
callback(iconPositions);
return lines.length;
};

Expand All @@ -94,29 +145,33 @@ export function showTutorialPopup(toolbar) {
clickAreas = [];
rows.forEach((row, index) => {
const y = startY + index * rowHeight + yOffset;
ctx.font = '21px Pixellari';
ctx.fillStyle = '#000';
ctx.fillText(row.label, colX, y + 20);
ctx.font = '23px Pixellari';
ctx.fillStyle = '#000050';
ctx.fillText(row.label, colX, y + lineHeight);
if (row.underline) {
ctx.beginPath();
ctx.moveTo(colX, y + 25);
ctx.lineTo(colX + ctx.measureText(row.label).width, y + 25);
ctx.moveTo(colX, y + lineHeight + 3);
ctx.lineTo(colX + ctx.measureText(row.label).width, y + lineHeight + 3);
ctx.stroke();
}
if (row.icon) {
const icon = new Image();
icon.src = `../assets/ic_${row.icon}.png`;
icon.onload = () => {
ctx.drawImage(icon, popup.width - 94, y - 10, 40, 40);
};
icon.onload = () => { ctx.drawImage(icon, popup.width - 94, y - 10, 40, 40); };
clickAreas.push({ index, rect: { x: popup.width - 94, y: y - 14, width: 50, height: 50 }, type: 'icon' });
}
clickAreas.push({ index, rect: { x: colX, y, width: popup.width - colX - 100, height: rowHeight }, type: 'label' });
if (dropdowns[index] && dropdowns[index].expanded) {
ctx.font = '18px Pixellari';
ctx.font = '20px Pixellari';
ctx.fillStyle = '#000';
const linesCount = wrapText(ctx, dropdowns[index].description, colX + 20, y + 55, maxWidth, 20);
yOffset += linesCount * 20;
const linesCount = wrapText(ctx, dropdowns[index].description, colX + 20, y + 55, maxWidth, lineHeight, (iconPositions) => {
iconPositions.forEach(pos => {
const icon = new Image();
icon.src = pos.icon;
icon.onload = () => { ctx.drawImage(icon, pos.x, pos.y, iconSize, iconSize); };
});
});
yOffset += linesCount * lineHeight;
}
});
};
Expand Down
2 changes: 1 addition & 1 deletion 3D/js/toolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ export class Toolbar {

const popup = document.createElement('canvas');
popup.width = 370;
popup.height = 2000;
popup.height = 4000;
popupContainer.appendChild(popup);

const titleElement = document.createElement('h3');
Expand Down
Binary file removed assets/keyboard_117.png
View file
Binary file not shown.

0 comments on commit 813d223

Please sign in to comment.