help screen

src/core/action-handler.ts

@@ -1,11 +1,13 @@
 export interface Action {
 	id: string;
-	label?: string;
+	tooltip?: string;
+	description?: string;
 	icon?: string;
 	shortcuts?: string[];
 	toggle?: boolean;
 	hold?: boolean;
 	on?: string;
+	category: string;
 	command?: (e?: Event) => void;
 	state?: () => any;
 }
@@ -31,7 +33,7 @@ export class ActionHandler {
 			if (action.shortcuts) {
 				action.shortcuts.forEach(s => {
 					if (s in container) {
-						throw new Error(`There is already an action with shortcut ${s}: ${container[s].label}`);
+						throw new Error(`There is already an action with shortcut ${s}: ${container[s].tooltip}`);
 					}
 					container[s] = action;
 				});
@@ -43,7 +45,7 @@ export class ActionHandler {
 
 	public addContainer(id: string, container: HTMLElement) { this.containers[id] = container; }
 
-	public getActions() { return Object.values(this.actions); }
+	public getActions() { return this.actionById; }
 	public getAction(id: string) { return id in this.actionById ? this.actionById[id] : null; }
 
 	public setActionCommand(id: string, command: (e?: Event) => void, state?: () => boolean) {

src/core/actions.ts

@@ -25,4 +25,5 @@ export class Actions {
 	public static readonly ZOOM_RESET = 'ZOOM_RESET';
 	public static readonly TOGGLE_LEFT_PANEL = 'TOGGLE_LEFT_PANEL';
 	public static readonly TOGGLE_RIGHT_PANEL = 'TOGGLE_RIGHT_PANEL';
+	public static readonly HELP = 'HELP';
 }

src/core/editor.ts

@@ -159,90 +159,195 @@ class EditorClass {
 		actions.add(
 			{
 				id: Actions.TOGGLE_ENABLED,
-				label: 'edit',
+				tooltip: 'Toggle editor',
 				icon: 'fa-edit',
+				category: 'general',
 			},
 
 			{
 				id: Actions.TOGGLE_SNAP,
-				label: 'snap',
+				tooltip: 'Toggle snap',
 				icon: 'fa-border-all',
 				toggle: true,
+				category: 'scene',
 			},
 			{
 				id: Actions.TOGGLE_GIZMOS,
-				label: 'gizmos',
+				tooltip: 'Toggle gizmos',
 				icon: 'fa-vector-square',
 				toggle: true,
 				hold: true,
 				shortcuts: ['ctrl+shift+Shift', 'ctrl+shift+Control'],
+				category: 'scene',
 			},
 			{
 				id: Actions.TOGGLE_GUIDES,
 				toggle: true,
-				label: 'guides',
+				tooltip: 'Toggle guides',
 				icon: 'fa-compress',
+				category: 'scene',
 			},
 			{
 				id: Actions.TOGGLE_HIT_AREA,
 				toggle: true,
-				label: 'hit area',
+				tooltip: 'Toggle hit area',
+				description: 'Toggle hit area for selected object',
 				icon: 'fa-hand-point-up',
+				category: 'scene',
 			},
 			{
 				id: Actions.TOGGLE_ALL_HIT_AREAS_SNAPSHOT,
 				toggle: true,
-				label: 'all hit areas snapshot',
+				tooltip: 'Toggle all hit areas snapshot',
+				description: 'Shows a snapshot of all hit areas in the scene',
 				icon: 'fa-layer-group',
+				category: 'scene',
 			},
 			{
 				id: Actions.TOGGLE_RESPONSIVE,
 				toggle: true,
-				label: 'responsive',
+				tooltip: 'Toggle responsive',
+				description: 'Toggle responsive mode',
 				icon: 'fa-tablet-alt',
+				category: 'view',
 			},
 			{
 				id: Actions.TOGGLE_ORIENTATION,
-				label: 'orientation',
+				tooltip: 'Change orientation',
+				description: 'Change orientation on responsive mode',
 				icon: 'fa-retweet',
+				category: 'view',
 			},
 			{
 				id: Actions.TOGGLE_REF_IMAGE,
 				toggle: true,
-				label: 'reference image',
+				tooltip: 'Toggle reference image',
+				description: 'Toggle reference image (if any)',
 				icon: 'fa-image',
+				category: 'scene',
 			},
 			{
 				id: Actions.UNDO,
-				label: 'undo',
+				tooltip: 'Undo',
 				icon: 'fa-undo-alt',
 				shortcuts: ['ctrl+z'],
+				category: 'general',
 			},
 
 			{
 				id: Actions.PRINT_OBJECT,
-				label: 'print',
+				tooltip: 'Print to console',
+				description: 'Print the selected element into the console',
 				icon: 'fa-terminal',
 				shortcuts: ['ctrl+alt+p'],
+				category: 'general',
 			},
 
-			{ id: Actions.DESELECT, shortcuts: ['Escape'] },
-			{ id: Actions.MOVE_UP_1, shortcuts: ['ArrowUp'] },
-			{ id: Actions.MOVE_DOWN_1, shortcuts: ['ArrowDown'] },
-			{ id: Actions.MOVE_LEFT_1, shortcuts: ['ArrowLeft'] },
-			{ id: Actions.MOVE_RIGHT_1, shortcuts: ['ArrowRight'] },
-			{ id: Actions.MOVE_UP_10, shortcuts: ['shift+ArrowUp'] },
-			{ id: Actions.MOVE_DOWN_10, shortcuts: ['shift+ArrowDown'] },
-			{ id: Actions.MOVE_LEFT_10, shortcuts: ['shift+ArrowLeft'] },
-			{ id: Actions.MOVE_RIGHT_10, shortcuts: ['shift+ArrowRight'] },
+			{
+				id: Actions.DESELECT,
+				shortcuts: ['Escape'],
+				category: 'general',
+				description: 'Deselect all objects',
+			},
+			{
+				id: Actions.MOVE_UP_1,
+				shortcuts: ['ArrowUp'],
+				category: 'scene',
+				description: 'Move selected object up by 1px',
+			},
+			{
+				id: Actions.MOVE_DOWN_1,
+				shortcuts: ['ArrowDown'],
+				category: 'scene',
+				description: 'Move selected object down by 1px',
+			},
+			{
+				id: Actions.MOVE_LEFT_1,
+				shortcuts: ['ArrowLeft'],
+				category: 'scene',
+				description: 'Move selected object left 1px',
+			},
+			{
+				id: Actions.MOVE_RIGHT_1,
+				shortcuts: ['ArrowRight'],
+				category: 'scene',
+				description: 'Move selected object right by 1px',
+			},
+			{
+				id: Actions.MOVE_UP_10,
+				shortcuts: ['shift+ArrowUp'],
+				category: 'scene',
+				description: 'Move selected object up by 10px',
+			},
+			{
+				id: Actions.MOVE_DOWN_10,
+				shortcuts: ['shift+ArrowDown'],
+				category: 'scene',
+				description: 'Move selected object down by 10px',
+			},
+			{
+				id: Actions.MOVE_LEFT_10,
+				shortcuts: ['shift+ArrowLeft'],
+				category: 'scene',
+				description: 'Move selected object left by 10px',
+			},
+			{
+				id: Actions.MOVE_RIGHT_10,
+				shortcuts: ['shift+ArrowRight'],
+				category: 'scene',
+				description: 'Move selected object right by 10px',
+			},
+
+			{
+				id: Actions.ZOOM,
+				shortcuts: ['ctrl+wheel'],
+				category: 'view',
+				description: 'Zoom',
+			},
+			{
+				id: Actions.ZOOM_IN,
+				tooltip: 'Zoom in',
+				icon: 'fa-search-plus',
+				shortcuts: ['ctrl+=', 'ctrl++'],
+				category: 'view',
+			},
+			{
+				id: Actions.ZOOM_OUT,
+				tooltip: 'Zoom out',
+				icon: 'fa-search-minus',
+				shortcuts: ['ctrl+-'],
+				category: 'view',
+			},
+			{
+				id: Actions.ZOOM_RESET,
+				tooltip: 'Reset zoom',
+				description: 'Reset zoom to default',
+				icon: 'fa-expand',
+				shortcuts: ['ctrl+0'],
+				category: 'view',
+			},
 
-			{ id: Actions.ZOOM, shortcuts: ['ctrl+wheel'] },
-			{ id: Actions.ZOOM_IN, label: 'zoom in', icon: 'fa-search-plus', shortcuts: ['ctrl+=', 'ctrl++'] },
-			{ id: Actions.ZOOM_OUT, label: 'zoom out', icon: 'fa-search-minus', shortcuts: ['ctrl+-'] },
-			{ id: Actions.ZOOM_RESET, label: 'reset zoom', icon: 'fa-expand', shortcuts: ['ctrl+0'] },
+			{
+				id: Actions.TOGGLE_LEFT_PANEL,
+				tooltip: 'Toogle left panel',
+				icon: 'fa-angle-double-left',
+				shortcuts: ['ctrl+['],
+				category: 'view',
+			},
+			{
+				id: Actions.TOGGLE_RIGHT_PANEL,
+				tooltip: 'Toogle right panel',
+				icon: 'fa-angle-double-right',
+				shortcuts: ['ctrl+]'],
+				category: 'view',
+			},
 
-			{ id: Actions.TOGGLE_LEFT_PANEL, label: 'toogle left panel', shortcuts: ['ctrl+['] },
-			{ id: Actions.TOGGLE_RIGHT_PANEL, label: 'toogle right panel', shortcuts: ['ctrl+]'] }
+			{
+				id: Actions.HELP,
+				tooltip: 'Help',
+				icon: 'fa-question',
+				category: 'general',
+			}
 		);
 
 		return actions;

src/editor-view/actions/actions-toolbar.ts

@@ -44,6 +44,8 @@ export class ActionsToolbar extends Widget {
 		this.createSeparator();
 		this.createButton(actions.getAction(Actions.UNDO));
 		this.createSeparator();
+		this.createButton(actions.getAction(Actions.HELP));
+		this.createSeparator();
 		this.createSpacer();
 
 		this.orientationTemplates.init();

src/editor-view/actions/button/action-button.scss

@@ -4,9 +4,9 @@ phred-actions-toolbar .button {
 	box-shadow: none;
 	position: relative;
 	padding: 0;
-	width: 34px;
-	min-width: 34px;
-	max-width: 34px;
+	width: 36px;
+	min-width: 36px;
+	max-width: 36px;
 	margin: 0 2px;
 
 	&:hover {

src/editor-view/actions/button/action-button.ts

@@ -28,7 +28,7 @@ export class ActionButton extends HTMLElement {
 		} else {
 			const text = this.appendChild(document.createElement('span'));
 			text.classList.add('label');
-			text.textContent = action.label;
+			text.textContent = action.tooltip;
 		}
 		if (!action.toggle) {
 			this.onclick = () => action.command();
@@ -40,9 +40,10 @@ export class ActionButton extends HTMLElement {
 	}
 
 	private createTooltip(action: Action) {
+		if (!action.tooltip) return;
 		const tooltip = this.appendChild(document.createElement('div'));
 		tooltip.classList.add('tooltip');
-		let text = action.label;
+		let text = action.tooltip;
 		if (action.shortcuts?.length) {
 			text += ` (${action.shortcuts[0].replace('+Shift', '')})`;
 		}

src/editor-view/actions/help/help-screen.scss

@@ -0,0 +1,81 @@
+@import 'colors';
+
+phred-help-screen {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(black, 0.4);
+	z-index: 1000;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	.popup {
+		width: 500px;
+		max-height: 90%;
+		padding: 20px;
+		border-radius: 10px;
+		display: flex;
+		justify-content: stretch;
+		align-items: stretch;
+		flex-direction: column;
+		background-color: rgba(black, 0.8);
+		box-shadow: 0 0 4px 4px $shadow-color;
+
+		h1 {
+			text-transform: uppercase;
+			font-size: 18px;
+			text-align: center;
+			padding: 0;
+			margin: 0 0 5px 0;
+		}
+
+		.content {
+			overflow: auto;
+			margin: 0;
+			padding: 0;
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			justify-content: stretch;
+
+			.category-group {
+				margin: 4px 0;
+
+				h2 {
+					text-transform: uppercase;
+					font-size: 16px;
+					margin: 5px 0 5px 0;
+				}
+
+				.action {
+					margin: 1px 0;
+					padding: 3px 10px;
+					display: flex;
+					align-items: center;
+					background-color: rgba(white, 0.1);
+					font-size: 14px;
+
+					& > * {
+						margin: 0 2px;
+						display: inline-block;
+					}
+
+					.icon {
+						width: 30px;
+					}
+
+					.shortcut {
+						width: 90px;
+					}
+
+					.description {
+						flex: 1;
+					}
+				}
+			}
+		}
+	}
+}