Add fullscreen triggers and step by step execution to macros

src/main.ts

@@ -15,7 +15,7 @@ import {
 	PageHeaderManager,
 	StatusBarManager,
 } from "./manager/commands";
-import { Action, CommanderSettings } from "./types";
+import { Action, CommanderSettings, Macro, MacroItem } from "./types";
 import CommanderSettingTab from "./ui/settingTab";
 import SettingTabModal from "./ui/settingTabModal";
 
@@ -39,40 +39,52 @@ export default class CommanderPlugin extends Plugin {
 	};
 
 	public async executeStartupMacros(): Promise<void> {
-		this.settings.macros.forEach((macro, idx) => {
-			if (macro.startup) {
-				this.executeMacro(idx);
-			}
-		});
+		this.executeMacrosWithCondition((macro) => Boolean(macro.startup));
+	}
+
+	public async executeEnterFullscreenMacros(): Promise<void> {
+		this.executeMacrosWithCondition((macro) => Boolean(macro.enterFullscreen));
+	}
+
+	public async executeExitFullscreenMacros(): Promise<void> {
+		this.executeMacrosWithCondition((macro) => Boolean(macro.exitFullscreen));
 	}
 
 	public async executeMacro(id: number): Promise<void> {
 		const macro = this.settings.macros[id];
 		if (!macro) throw new Error("Macro not found");
 
-		for (const command of macro.macro) {
-			switch (command.action) {
-				case Action.COMMAND: {
-					await app.commands.executeCommandById(command.commandId);
-					continue;
-				}
-				case Action.DELAY: {
-					await new Promise((resolve) =>
-						setTimeout(resolve, command.delay)
-					);
-					continue;
-				}
-				case Action.EDITOR: {
-					continue;
-				}
-				case Action.LOOP: {
-					for (let i = 0; i < command.times; i++) {
-						await app.commands.executeCommandById(
-							command.commandId
-						);
-					}
-					continue;
+		if (macro.stepByStep){
+			const nextCommandIndex = macro.nextCommandIndex || 0;
+			const command = macro.macro[nextCommandIndex];
+			macro.nextCommandIndex = (nextCommandIndex + 1) % macro.macro.length;
+			await this.executeMacroCommand(command);
+		}
+		else {
+			for (const command of macro.macro) {
+				await this.executeMacroCommand(command);
+			}
+		}
+	}
+
+	private async executeMacroCommand(command: MacroItem): Promise<void> {
+		switch (command.action) {
+			case Action.COMMAND: {
+				app.commands.executeCommandById(command.commandId);
+				break;
+			}
+			case Action.DELAY: {
+				await new Promise((resolve) => setTimeout(resolve, command.delay));
+				break;
+			}
+			case Action.EDITOR: {
+				break;
+			}
+			case Action.LOOP: {
+				for (let i = 0; i < command.times; i++) {
+					app.commands.executeCommandById(command.commandId);
 				}
+				break;
 			}
 		}
 	}
@@ -119,6 +131,15 @@ export default class CommanderPlugin extends Plugin {
 			)
 		);
 
+		this.registerDomEvent(document, "fullscreenchange", () => {
+			if (document.fullscreenElement) {
+				this.executeEnterFullscreenMacros();
+			}
+			else {
+				this.executeExitFullscreenMacros();
+			}
+		});
+
 		app.workspace.onLayoutReady(() => {
 			updateHiderStylesheet(this.settings);
 			updateMacroCommands(this);
@@ -182,4 +203,12 @@ export default class CommanderPlugin extends Plugin {
 		}
 		return commands;
 	}
+
+	private async executeMacrosWithCondition(condition: (macro: Macro) => boolean): Promise<void> {
+		this.settings.macros.forEach((macro, idx) => {
+			if (condition(macro)) {
+				this.executeMacro(idx);
+			}
+		});
+	}
 }

src/styles/styles.scss

@@ -488,6 +488,24 @@
 	}
 }
 
+.cmrd-mm-checkboxes {
+	display: unset;
+	margin-bottom: 16px;
+
+	div {
+		margin-bottom: 8px;
+	}
+}
+
+.cmdr-macro-label {
+	display: inline-block;
+	margin-left: 1em;
+	padding: 1px 5px;
+	border:1px solid #00000030;
+	border-radius: 4px;
+	font-size: 90%;
+}
+
 .cmdr-mm-item {
 	display: flex;
 	flex-direction: row !important;

src/types.ts

@@ -17,6 +17,10 @@ export interface Macro {
 	name: string;
 	icon: string;
 	startup?: boolean;
+	enterFullscreen?: boolean;
+	exitFullscreen?: boolean;
+	stepByStep?: boolean;
+	nextCommandIndex?: number;
 	macro: MacroItem[];
 }
 

src/ui/components/MacroBuilder.tsx

@@ -22,6 +22,9 @@ export default function ({
 	const [name, setName] = useState(macro.name || "Macro Name");
 	const [icon, setIcon] = useState(macro.icon || "star");
 	const [startup, setStartup] = useState(macro.startup || false);
+	const [enterFullscreen, setEnterFullscreen] = useState(macro.enterFullscreen || false);
+	const [exitFullscreen, setExitFullscreen] = useState(macro.exitFullscreen || false);
+	const [stepByStep, setStepByStep] = useState(macro.stepByStep || false);
 	const [macroCommands, setMacroCommands] = useState<MacroItem[]>(
 		JSON.parse(JSON.stringify(macro.macro)) || []
 	);
@@ -74,6 +77,57 @@ export default function ({
 				</div>
 			</div>
 
+			<div className="setting-item cmrd-mm-checkboxes">
+				<div>
+					<input
+						type="checkbox"
+						id="checkbox-step-by-step"
+						checked={stepByStep}
+						onChange={({ target }) => {
+							//@ts-expect-error
+							setStepByStep(target?.checked ?? false);
+						}}
+					/>
+					<label htmlFor="checkbox-step-by-step">Execute just one step sequentially for each run</label>
+				</div>
+				<div>
+					<input
+						type="checkbox"
+						id="checkbox-startup"
+						checked={startup}
+						onChange={({ target }) => {
+							//@ts-expect-error
+							setStartup(target?.checked ?? false);
+						}}
+					/>
+					<label htmlFor="checkbox-startup">Auto-run on startup</label>
+				</div>
+				<div>
+					<input
+						type="checkbox"
+						id="checkbox-enter-fullscreen"
+						checked={enterFullscreen}
+						onChange={({ target }) => {
+							//@ts-expect-error
+							setEnterFullscreen(target?.checked ?? false);
+						}}
+					/>
+					<label htmlFor="checkbox-enter-fullscreen">Auto-run on entering fullscreen</label>
+				</div>
+				<div>
+					<input
+						type="checkbox"
+						id="checkbox-exit-fullscreen"
+						checked={exitFullscreen}
+						onChange={({ target }) => {
+							//@ts-expect-error
+							setExitFullscreen(target?.checked ?? false);
+						}}
+					/>
+					<label htmlFor="checkbox-exit-fullscreen">Auto-run on exiting fullscreen</label>
+				</div>
+			</div>
+
 			{macroCommands.map((item, idx) => {
 				switch (item.action) {
 					case Action.COMMAND:
@@ -229,18 +283,6 @@ export default function ({
 			})}
 
 			<div className="setting-item cmdr-mm-actions cmdr-justify-between">
-				<div className="cmdr-flex cmdr-items-center cmdr-justify-self-start">
-					<input
-						type="checkbox"
-						id="checkbox"
-						checked={startup}
-						onChange={({ target }) => {
-							//@ts-expect-error
-							setStartup(target?.checked ?? false);
-						}}
-					/>
-					<label htmlFor="checkbox">Auto-Run on Startup</label>
-				</div>
 				<div>
 					<button onClick={handleAddCommand}>Add Command</button>
 					<button onClick={handleAddDelay}>Add Delay</button>
@@ -255,7 +297,7 @@ export default function ({
 					disabled={macroCommands.length === 0}
 					onClick={() =>
 						macroCommands.length &&
-						onSave({ macro: macroCommands, name, icon, startup })
+						onSave({ macro: macroCommands, name, icon, startup, enterFullscreen, exitFullscreen, stepByStep })
 					}
 				>
 					Save

src/ui/components/MacroViewer.tsx

@@ -52,6 +52,10 @@ export default function MacroViewer({
 							<div className="setting-item-name">{item.name}</div>
 							<div className="setting-item-description">
 								{item.macro.length} Actions
+								{item.startup && (<span class="cmdr-macro-label">Startup</span>)}
+								{item.enterFullscreen && (<span class="cmdr-macro-label">Enter fullscreen</span>)}
+								{item.exitFullscreen && (<span class="cmdr-macro-label">Exit fullscreen</span>)}
+								{item.stepByStep && (<span class="cmdr-macro-label">Step by step</span>)}
 							</div>
 						</div>
 						<div className="setting-item-control">