implement cmd+t

This commit is contained in:
sawka 2024-08-19 18:28:28 -07:00
parent a639fc3c8d
commit a0734a3bbe
3 changed files with 299 additions and 263 deletions

View File

@ -1,12 +1,11 @@
// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
import { appHandleKeyDown, appHandleKeyUp } from "@/app/appkey";
import { useWaveObjectValue } from "@/app/store/wos";
import { Workspace } from "@/app/workspace/workspace";
import { deleteLayoutModelForTab, getLayoutModelForTab } from "@/layout/index";
import { ContextMenuModel } from "@/store/contextmenu";
import { PLATFORM, WOS, atoms, getApi, globalStore, setBlockFocus } from "@/store/global";
import * as services from "@/store/services";
import { PLATFORM, WOS, atoms, getApi, globalStore } from "@/store/global";
import { getWebServerEndpoint } from "@/util/endpoints";
import * as keyutil from "@/util/keyutil";
import * as util from "@/util/util";
@ -80,148 +79,6 @@ function handleContextMenu(e: React.MouseEvent<HTMLDivElement>) {
ContextMenuModel.showContextMenu(menu, e);
}
function switchTabAbs(index: number) {
const ws = globalStore.get(atoms.workspace);
const newTabIdx = index - 1;
if (newTabIdx < 0 || newTabIdx >= ws.tabids.length) {
return;
}
const newActiveTabId = ws.tabids[newTabIdx];
services.ObjectService.SetActiveTab(newActiveTabId);
}
function switchTab(offset: number) {
const ws = globalStore.get(atoms.workspace);
const activeTabId = globalStore.get(atoms.tabAtom).oid;
let tabIdx = -1;
for (let i = 0; i < ws.tabids.length; i++) {
if (ws.tabids[i] == activeTabId) {
tabIdx = i;
break;
}
}
if (tabIdx == -1) {
return;
}
const newTabIdx = (tabIdx + offset + ws.tabids.length) % ws.tabids.length;
const newActiveTabId = ws.tabids[newTabIdx];
console.log("switching tabs", tabIdx, newTabIdx, activeTabId, newActiveTabId, ws.tabids);
services.ObjectService.SetActiveTab(newActiveTabId);
}
const transformRegexp = /translate3d\(\s*([0-9.]+)px\s*,\s*([0-9.]+)px,\s*0\)/;
function parseFloatFromCSS(s: string | number): number {
if (typeof s == "number") {
return s;
}
return parseFloat(s);
}
function readBoundsFromTransform(fullTransform: React.CSSProperties): Bounds {
const transformProp = fullTransform.transform;
if (transformProp == null || fullTransform.width == null || fullTransform.height == null) {
return null;
}
const m = transformRegexp.exec(transformProp);
if (m == null) {
return null;
}
return {
x: parseFloat(m[1]),
y: parseFloat(m[2]),
width: parseFloatFromCSS(fullTransform.width),
height: parseFloatFromCSS(fullTransform.height),
};
}
function boundsMapMaxX(m: Map<string, Bounds>): number {
let max = 0;
for (let p of m.values()) {
if (p.x + p.width > max) {
max = p.x + p.width;
}
}
return max;
}
function boundsMapMaxY(m: Map<string, Bounds>): number {
let max = 0;
for (let p of m.values()) {
if (p.y + p.height > max) {
max = p.y + p.height;
}
}
return max;
}
function findBlockAtPoint(m: Map<string, Bounds>, p: Point): string {
for (let [blockId, bounds] of m.entries()) {
if (p.x >= bounds.x && p.x <= bounds.x + bounds.width && p.y >= bounds.y && p.y <= bounds.y + bounds.height) {
return blockId;
}
}
return null;
}
function switchBlockIdx(index: number) {
const tabId = globalStore.get(atoms.activeTabId);
const tabAtom = WOS.getWaveObjectAtom<Tab>(WOS.makeORef("tab", tabId));
const layoutModel = getLayoutModelForTab(tabAtom);
if (layoutModel?.leafs == null) {
return;
}
const newLeafIdx = index - 1;
if (newLeafIdx < 0 || newLeafIdx >= layoutModel.leafs.length) {
return;
}
const leaf = layoutModel.leafs[newLeafIdx];
if (leaf?.data?.blockId == null) {
return;
}
setBlockFocus(leaf.data.blockId);
}
function switchBlock(tabId: string, offsetX: number, offsetY: number) {
console.log("switch block", offsetX, offsetY);
if (offsetY == 0 && offsetX == 0) {
return;
}
const tabAtom = WOS.getWaveObjectAtom<Tab>(WOS.makeORef("tab", tabId));
const layoutModel = getLayoutModelForTab(tabAtom);
const curBlockId = globalStore.get(atoms.waveWindow)?.activeblockid;
const addlProps = globalStore.get(layoutModel.additionalProps);
const blockPositions: Map<string, Bounds> = new Map();
for (const leaf of layoutModel.leafs) {
const pos = readBoundsFromTransform(addlProps[leaf.id]?.transform);
if (pos) {
blockPositions.set(leaf.data.blockId, pos);
}
}
const curBlockPos = blockPositions.get(curBlockId);
if (!curBlockPos) {
return;
}
blockPositions.delete(curBlockId);
const maxX = boundsMapMaxX(blockPositions);
const maxY = boundsMapMaxY(blockPositions);
const moveAmount = 10;
let curX = curBlockPos.x + 1;
let curY = curBlockPos.y + 1;
while (true) {
curX += offsetX * moveAmount;
curY += offsetY * moveAmount;
if (curX < 0 || curX > maxX || curY < 0 || curY > maxY) {
return;
}
const blockId = findBlockAtPoint(blockPositions, { x: curX, y: curY });
if (blockId != null) {
setBlockFocus(blockId);
return;
}
}
}
function AppSettingsUpdater() {
const settings = jotai.useAtomValue(atoms.settingsConfigAtom);
React.useEffect(() => {
@ -251,8 +108,6 @@ function encodeFileURL(file: string) {
return webEndpoint + `/wave/stream-file?path=${encodeURIComponent(file)}&no404=1`;
}
(window as any).csstree = csstree;
function processBackgroundUrls(cssText: string): string {
if (util.isBlank(cssText)) {
return null;
@ -342,124 +197,11 @@ function AppBackground() {
return <div ref={bgRef} className="app-background" style={style} />;
}
function genericClose(tabId: string) {
const tabORef = WOS.makeORef("tab", tabId);
const tabAtom = WOS.getWaveObjectAtom<Tab>(tabORef);
const tabData = globalStore.get(tabAtom);
if (tabData == null) {
return;
}
if (tabData.blockids == null || tabData.blockids.length == 0) {
// close tab
services.WindowService.CloseTab(tabId);
deleteLayoutModelForTab(tabId);
return;
}
// close block
const activeBlockId = globalStore.get(atoms.waveWindow)?.activeblockid;
if (activeBlockId == null) {
return;
}
const layoutModel = getLayoutModelForTab(tabAtom);
const curBlockLeafId = layoutModel.getNodeByBlockId(activeBlockId)?.id;
layoutModel.closeNodeById(curBlockLeafId);
}
const simpleControlShiftAtom = jotai.atom(false);
const AppKeyHandlers = () => {
const tabId = jotai.useAtomValue(atoms.activeTabId);
function setControlShift() {
globalStore.set(simpleControlShiftAtom, true);
setTimeout(() => {
const simpleState = globalStore.get(simpleControlShiftAtom);
if (simpleState) {
globalStore.set(atoms.controlShiftDelayAtom, true);
}
}, 400);
}
function unsetControlShift() {
globalStore.set(simpleControlShiftAtom, false);
globalStore.set(atoms.controlShiftDelayAtom, false);
}
function handleKeyUp(event: KeyboardEvent) {
const waveEvent = keyutil.adaptFromReactOrNativeKeyEvent(event);
if (waveEvent.key === "Control" || waveEvent.key === "Shift") {
unsetControlShift();
}
if (waveEvent.key == "Meta") {
if (waveEvent.control && waveEvent.shift) {
setControlShift();
}
}
}
function handleKeyDown(waveEvent: WaveKeyboardEvent): boolean {
if (waveEvent.key === "Control" || waveEvent.key === "Shift" || waveEvent.key === "Meta") {
if (waveEvent.control && waveEvent.shift && !waveEvent.meta) {
// Set the control and shift without the Meta key
setControlShift();
} else {
// Unset if Meta is pressed
unsetControlShift();
}
return false;
}
// global key handler for now (refactor later)
if (keyutil.checkKeyPressed(waveEvent, "Cmd:]") || keyutil.checkKeyPressed(waveEvent, "Shift:Cmd:]")) {
switchTab(1);
return true;
}
if (keyutil.checkKeyPressed(waveEvent, "Cmd:[") || keyutil.checkKeyPressed(waveEvent, "Shift:Cmd:[")) {
switchTab(-1);
return true;
}
for (let idx = 1; idx <= 9; idx++) {
if (keyutil.checkKeyPressed(waveEvent, `Cmd:${idx}`)) {
switchTabAbs(idx);
return true;
}
}
for (let idx = 1; idx <= 9; idx++) {
if (
keyutil.checkKeyPressed(waveEvent, `Ctrl:Shift:c{Digit${idx}}`) ||
keyutil.checkKeyPressed(waveEvent, `Ctrl:Shift:c{Numpad${idx}}`)
) {
switchBlockIdx(idx);
return true;
}
}
if (keyutil.checkKeyPressed(waveEvent, "Ctrl:Shift:ArrowUp")) {
switchBlock(tabId, 0, -1);
return true;
}
if (keyutil.checkKeyPressed(waveEvent, "Ctrl:Shift:ArrowDown")) {
switchBlock(tabId, 0, 1);
return true;
}
if (keyutil.checkKeyPressed(waveEvent, "Ctrl:Shift:ArrowLeft")) {
switchBlock(tabId, -1, 0);
return true;
}
if (keyutil.checkKeyPressed(waveEvent, "Ctrl:Shift:ArrowRight")) {
switchBlock(tabId, 1, 0);
return true;
}
if (keyutil.checkKeyPressed(waveEvent, "Cmd:w")) {
// close block, if no more blocks, close tab
genericClose(tabId);
return true;
}
return false;
}
React.useEffect(() => {
const staticKeyDownHandler = keyutil.keydownWrapper(handleKeyDown);
const staticKeyDownHandler = keyutil.keydownWrapper(appHandleKeyDown);
document.addEventListener("keydown", staticKeyDownHandler);
const savedKeyUpHandler = handleKeyUp;
const savedKeyUpHandler = appHandleKeyUp;
document.addEventListener("keyup", savedKeyUpHandler);
return () => {

293
frontend/app/appkey.ts Normal file
View File

@ -0,0 +1,293 @@
// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
import { atoms, createBlock, globalStore, setBlockFocus, WOS } from "@/app/store/global";
import { deleteLayoutModelForTab, getLayoutModelForTab } from "@/layout/index";
import * as services from "@/store/services";
import * as keyutil from "@/util/keyutil";
import * as jotai from "jotai";
const simpleControlShiftAtom = jotai.atom(false);
const transformRegexp = /translate3d\(\s*([0-9.]+)px\s*,\s*([0-9.]+)px,\s*0\)/;
function setControlShift() {
globalStore.set(simpleControlShiftAtom, true);
setTimeout(() => {
const simpleState = globalStore.get(simpleControlShiftAtom);
if (simpleState) {
globalStore.set(atoms.controlShiftDelayAtom, true);
}
}, 400);
}
function unsetControlShift() {
globalStore.set(simpleControlShiftAtom, false);
globalStore.set(atoms.controlShiftDelayAtom, false);
}
function genericClose(tabId: string) {
const tabORef = WOS.makeORef("tab", tabId);
const tabAtom = WOS.getWaveObjectAtom<Tab>(tabORef);
const tabData = globalStore.get(tabAtom);
if (tabData == null) {
return;
}
if (tabData.blockids == null || tabData.blockids.length == 0) {
// close tab
services.WindowService.CloseTab(tabId);
deleteLayoutModelForTab(tabId);
return;
}
// close block
const activeBlockId = globalStore.get(atoms.waveWindow)?.activeblockid;
if (activeBlockId == null) {
return;
}
const layoutModel = getLayoutModelForTab(tabAtom);
const curBlockLeafId = layoutModel.getNodeByBlockId(activeBlockId)?.id;
layoutModel.closeNodeById(curBlockLeafId);
}
function switchBlockIdx(index: number) {
const tabId = globalStore.get(atoms.activeTabId);
const tabAtom = WOS.getWaveObjectAtom<Tab>(WOS.makeORef("tab", tabId));
const layoutModel = getLayoutModelForTab(tabAtom);
if (layoutModel?.leafs == null) {
return;
}
const newLeafIdx = index - 1;
if (newLeafIdx < 0 || newLeafIdx >= layoutModel.leafs.length) {
return;
}
const leaf = layoutModel.leafs[newLeafIdx];
if (leaf?.data?.blockId == null) {
return;
}
setBlockFocus(leaf.data.blockId);
}
function boundsMapMaxX(m: Map<string, Bounds>): number {
let max = 0;
for (let p of m.values()) {
if (p.x + p.width > max) {
max = p.x + p.width;
}
}
return max;
}
function boundsMapMaxY(m: Map<string, Bounds>): number {
let max = 0;
for (let p of m.values()) {
if (p.y + p.height > max) {
max = p.y + p.height;
}
}
return max;
}
function readBoundsFromTransform(fullTransform: React.CSSProperties): Bounds {
const transformProp = fullTransform.transform;
if (transformProp == null || fullTransform.width == null || fullTransform.height == null) {
return null;
}
const m = transformRegexp.exec(transformProp);
if (m == null) {
return null;
}
return {
x: parseFloat(m[1]),
y: parseFloat(m[2]),
width: parseFloatFromCSS(fullTransform.width),
height: parseFloatFromCSS(fullTransform.height),
};
}
function parseFloatFromCSS(s: string | number): number {
if (typeof s == "number") {
return s;
}
return parseFloat(s);
}
function findBlockAtPoint(m: Map<string, Bounds>, p: Point): string {
for (let [blockId, bounds] of m.entries()) {
if (p.x >= bounds.x && p.x <= bounds.x + bounds.width && p.y >= bounds.y && p.y <= bounds.y + bounds.height) {
return blockId;
}
}
return null;
}
function switchBlock(tabId: string, offsetX: number, offsetY: number) {
console.log("switch block", offsetX, offsetY);
if (offsetY == 0 && offsetX == 0) {
return;
}
const tabAtom = WOS.getWaveObjectAtom<Tab>(WOS.makeORef("tab", tabId));
const layoutModel = getLayoutModelForTab(tabAtom);
const curBlockId = globalStore.get(atoms.waveWindow)?.activeblockid;
const addlProps = globalStore.get(layoutModel.additionalProps);
const blockPositions: Map<string, Bounds> = new Map();
for (const leaf of layoutModel.leafs) {
const pos = readBoundsFromTransform(addlProps[leaf.id]?.transform);
if (pos) {
blockPositions.set(leaf.data.blockId, pos);
}
}
const curBlockPos = blockPositions.get(curBlockId);
if (!curBlockPos) {
return;
}
blockPositions.delete(curBlockId);
const maxX = boundsMapMaxX(blockPositions);
const maxY = boundsMapMaxY(blockPositions);
const moveAmount = 10;
let curX = curBlockPos.x + 1;
let curY = curBlockPos.y + 1;
while (true) {
curX += offsetX * moveAmount;
curY += offsetY * moveAmount;
if (curX < 0 || curX > maxX || curY < 0 || curY > maxY) {
return;
}
const blockId = findBlockAtPoint(blockPositions, { x: curX, y: curY });
if (blockId != null) {
setBlockFocus(blockId);
return;
}
}
}
function switchTabAbs(index: number) {
const ws = globalStore.get(atoms.workspace);
const newTabIdx = index - 1;
if (newTabIdx < 0 || newTabIdx >= ws.tabids.length) {
return;
}
const newActiveTabId = ws.tabids[newTabIdx];
services.ObjectService.SetActiveTab(newActiveTabId);
}
function switchTab(offset: number) {
const ws = globalStore.get(atoms.workspace);
const activeTabId = globalStore.get(atoms.tabAtom).oid;
let tabIdx = -1;
for (let i = 0; i < ws.tabids.length; i++) {
if (ws.tabids[i] == activeTabId) {
tabIdx = i;
break;
}
}
if (tabIdx == -1) {
return;
}
const newTabIdx = (tabIdx + offset + ws.tabids.length) % ws.tabids.length;
const newActiveTabId = ws.tabids[newTabIdx];
console.log("switching tabs", tabIdx, newTabIdx, activeTabId, newActiveTabId, ws.tabids);
services.ObjectService.SetActiveTab(newActiveTabId);
}
function appHandleKeyUp(event: KeyboardEvent) {
const waveEvent = keyutil.adaptFromReactOrNativeKeyEvent(event);
if (waveEvent.key === "Control" || waveEvent.key === "Shift") {
unsetControlShift();
}
if (waveEvent.key == "Meta") {
if (waveEvent.control && waveEvent.shift) {
setControlShift();
}
}
}
async function handleCmdT() {
const termBlockDef: BlockDef = {
meta: {
view: "term",
controller: "shell",
},
};
const tabId = globalStore.get(atoms.activeTabId);
const win = globalStore.get(atoms.waveWindow);
if (win?.activeblockid != null) {
const blockAtom = WOS.getWaveObjectAtom<Block>(WOS.makeORef("block", win.activeblockid));
const blockData = globalStore.get(blockAtom);
if (blockData?.meta?.view == "term") {
if (blockData?.meta?.["cmd:cwd"] != null) {
termBlockDef.meta["cmd:cwd"] = blockData.meta["cmd:cwd"];
}
}
if (blockData?.meta?.connection != null) {
termBlockDef.meta.connection = blockData.meta.connection;
}
}
const newBlockId = await createBlock(termBlockDef);
setBlockFocus(newBlockId);
}
function appHandleKeyDown(waveEvent: WaveKeyboardEvent): boolean {
if (waveEvent.key === "Control" || waveEvent.key === "Shift" || waveEvent.key === "Meta") {
if (waveEvent.control && waveEvent.shift && !waveEvent.meta) {
// Set the control and shift without the Meta key
setControlShift();
} else {
// Unset if Meta is pressed
unsetControlShift();
}
return false;
}
const tabId = globalStore.get(atoms.activeTabId);
// global key handler for now (refactor later)
if (keyutil.checkKeyPressed(waveEvent, "Cmd:]") || keyutil.checkKeyPressed(waveEvent, "Shift:Cmd:]")) {
switchTab(1);
return true;
}
if (keyutil.checkKeyPressed(waveEvent, "Cmd:[") || keyutil.checkKeyPressed(waveEvent, "Shift:Cmd:[")) {
switchTab(-1);
return true;
}
if (keyutil.checkKeyPressed(waveEvent, "Cmd:t")) {
handleCmdT();
return true;
}
for (let idx = 1; idx <= 9; idx++) {
if (keyutil.checkKeyPressed(waveEvent, `Cmd:${idx}`)) {
switchTabAbs(idx);
return true;
}
}
for (let idx = 1; idx <= 9; idx++) {
if (
keyutil.checkKeyPressed(waveEvent, `Ctrl:Shift:c{Digit${idx}}`) ||
keyutil.checkKeyPressed(waveEvent, `Ctrl:Shift:c{Numpad${idx}}`)
) {
switchBlockIdx(idx);
return true;
}
}
if (keyutil.checkKeyPressed(waveEvent, "Ctrl:Shift:ArrowUp")) {
switchBlock(tabId, 0, -1);
return true;
}
if (keyutil.checkKeyPressed(waveEvent, "Ctrl:Shift:ArrowDown")) {
switchBlock(tabId, 0, 1);
return true;
}
if (keyutil.checkKeyPressed(waveEvent, "Ctrl:Shift:ArrowLeft")) {
switchBlock(tabId, -1, 0);
return true;
}
if (keyutil.checkKeyPressed(waveEvent, "Ctrl:Shift:ArrowRight")) {
switchBlock(tabId, 1, 0);
return true;
}
if (keyutil.checkKeyPressed(waveEvent, "Cmd:w")) {
// close block, if no more blocks, close tab
genericClose(tabId);
return true;
}
return false;
}
export { appHandleKeyDown, appHandleKeyUp };

View File

@ -362,7 +362,7 @@ function getApi(): ElectronApi {
return (window as any).api;
}
async function createBlock(blockDef: BlockDef) {
async function createBlock(blockDef: BlockDef): Promise<string> {
const rtOpts: RuntimeOpts = { termsize: { rows: 25, cols: 80 } };
const blockId = await services.ObjectService.CreateBlock(blockDef, rtOpts);
const insertNodeAction: LayoutTreeInsertNodeAction = {
@ -372,6 +372,7 @@ async function createBlock(blockDef: BlockDef) {
const activeTabId = globalStore.get(atoms.uiContext).activetabid;
const layoutModel = getLayoutModelForTabById(activeTabId);
layoutModel.treeReducer(insertNodeAction);
return blockId;
}
// when file is not found, returns {data: null, fileInfo: null}