diff --git a/3D/js/popup/tutorial.js b/3D/js/popup/tutorial.js index a5136e6..ed3f966 100644 --- a/3D/js/popup/tutorial.js +++ b/3D/js/popup/tutorial.js @@ -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(); @@ -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) => { @@ -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; }; @@ -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; } }); }; diff --git a/3D/js/toolbar.js b/3D/js/toolbar.js index de36a06..e9fea8d 100644 --- a/3D/js/toolbar.js +++ b/3D/js/toolbar.js @@ -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'); diff --git a/assets/keyboard_117.png b/assets/keyboard_117.png deleted file mode 100644 index 84699f8..0000000 Binary files a/assets/keyboard_117.png and /dev/null differ