selectable action

TODO.todo

@@ -47,7 +47,6 @@ BASIC:
 	Actions:
 		[x] actions handler
 		[x] undo
-		[ ] toggle grid
 		[ ] toggle gizmos
 		[ ] toggle enabled
 		[ ] show reference

src/data/actions.ts

@@ -2,8 +2,10 @@ export interface Action {
 	id: string;
 	label?: string;
 	icon?: string;
-	command: () => void;
 	shortcut?: string;
+	toggle?: boolean;
+	command: () => void;
+	state?: () => any;
 }
 
 class ActionsClass {
@@ -17,9 +19,11 @@ class ActionsClass {
 
 	public add(...actions: Action[]) {
 		actions.forEach(action => {
-			if (action.shortcut in this.actions)
-				throw new Error(`There is already an action with shortcut ${action.shortcut}: ${this.actions[action.shortcut].label}`);
-			this.actions[action.shortcut] = action;
+			if (action.shortcut) {
+				if (action.shortcut in this.actions)
+					throw new Error(`There is already an action with shortcut ${action.shortcut}: ${this.actions[action.shortcut].label}`);
+				this.actions[action.shortcut] = action;
+			}
 			this.actionMap[action.id] = action;
 		});
 	}

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

@@ -4,20 +4,27 @@ phed-action-button {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	min-width: 30px;
+	min-width: 35px;
 	border-radius: 4px;
 	color: $button-text-color;
 	cursor: pointer;
+	margin: 0 4px;
 
 	&:hover {
 		background-color: $primary-color;
 		color: $on-primary;
 		box-shadow: 0 1px 2px 2px $shadow-color;
+		padding-bottom: 1px;
 	}
-
+	
 	&:active {
 		padding-top: 2px;
 	}
+
+	&.selected {
+		background-color: lighten($primary-color, 10%);
+		color: $on-primary;
+	}
 
 	.label {
 		font-size: 12px;

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

@@ -3,10 +3,10 @@ import './action-button.scss';
 
 export class ActionButton extends HTMLElement {
 	public static readonly tagName: string = 'phed-action-button';
-
-	public connectedCallback() { }
+	private action: Action;
 
 	public setAction(action: Action) {
+		this.action = action;
 		if (action.icon) {
 			const icon = this.appendChild(document.createElement('i'));
 			icon.classList.add('fas', action.icon);
@@ -16,7 +16,22 @@ export class ActionButton extends HTMLElement {
 			text.classList.add('label');
 			text.textContent = action.label;
 		}
-		this.onclick = () => action.command();
+		if (!action.toggle) {
+			this.onclick = () => action.command();
+			return;
+		}
+		this.onclick = this.toggleSelected.bind(this);
+		this.updateState();
+	}
+
+	private toggleSelected() {
+		this.action.command();
+		this.updateState();
+	}
+
+	private updateState() {
+		if (this.action.state()) this.classList.add('selected');
+		else this.classList.remove('selected');
 	}
 }