Skip to content

Commit

Permalink
Changed dev tools buttons to menu. Cleaned up some timing issues and …
Browse files Browse the repository at this point in the history 
…hackery with the frame loading
  • Loading branch information
@nkolba
nkolba committed Apr 13, 2022
1 parent 01b5597 commit e6acd37
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 104 deletions.
137 changes: 68 additions & 69 deletions packages/main/src/IntentResolver.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export class IntentResolver {
height: 400,
width: 400,
frame: false,
show:false,
show: false,
hasShadow: true,
resizable: false,
webPreferences: {
Expand All @@ -55,78 +55,77 @@ export class IntentResolver {

//TO DO: refactor bounds and positioning for multi-screen
//get the parent workspace (for positioning)
const resolverHeight : number = 400;
const resolverWidth : number = 400;


//add resolution listener
getRuntime().setResolver(this);

//to do: position resolver in relation to view
const RESOLVER_CONTENT =
import.meta.env.DEV &&
import.meta.env.VITE_DEV_SERVER_INTENTS_URL !== undefined
? import.meta.env.VITE_DEV_SERVER_INTENTS_URL
: new URL(
'../renderer/dist/intentResolver.html',
'file://' + __dirname,
).toString();


if (RESOLVER_CONTENT) {
this.window.loadURL(RESOLVER_CONTENT as string).then(() => {

const workspace : Workspace | undefined = view.parent;

if (workspace && workspace.window) {
const wsPosition = workspace.window?.getPosition();
const wsSize = workspace.window?.getSize();
this.window.setSize(resolverWidth,resolverHeight);
this.window.setPosition((wsPosition[0] + (wsSize[0]/2) - (resolverWidth/2)),(wsPosition[1] + (wsSize[1]/2) - (resolverHeight/2)));
}

this.window.show();

if (devTools) {
this.window.webContents.openDevTools();
}
console.log('resolver Window loaded');

const startObject = {
id: this.id,
intent: this.intent || '',
context: this.context,
options: options,
};

console.log(
'startObject',
this.id,
this.intent,
JSON.stringify(this.context),
const resolverHeight = 400;
const resolverWidth = 400;

//add resolution listener
getRuntime().setResolver(this);

//to do: position resolver in relation to view
const RESOLVER_CONTENT =
import.meta.env.DEV &&
import.meta.env.VITE_DEV_SERVER_INTENTS_URL !== undefined
? import.meta.env.VITE_DEV_SERVER_INTENTS_URL
: new URL(
'../renderer/dist/intentResolver.html',
'file://' + __dirname,
).toString();

if (RESOLVER_CONTENT) {
this.window.loadURL(RESOLVER_CONTENT as string).then(() => {
const workspace: Workspace | undefined = view.parent;

if (workspace && workspace.window) {
const wsPosition = workspace.window?.getPosition();
const wsSize = workspace.window?.getSize();
this.window.setSize(resolverWidth, resolverHeight);
this.window.setPosition(
wsPosition[0] + wsSize[0] / 2 - resolverWidth / 2,
wsPosition[1] + wsSize[1] / 2 - resolverHeight / 2,
);
}

console.log('startObject options', JSON.stringify(options));

this.window.webContents.send(TOPICS.WINDOW_START, startObject);

console.log(
'intent resolver create',
RESOLVER_CONTENT as string,
options,
);
this.view = view;
});

this.window.focus();
this.window.show();

//dev tools will automatically blur and close the resolver
if (!devTools) {
this.window.on('blur', () => {
this.window.destroy();
});
if (devTools) {
this.window.webContents.openDevTools();
}

console.log('resolver Window loaded');

const startObject = {
id: this.id,
intent: this.intent || '',
context: this.context,
options: options,
};

console.log(
'startObject',
this.id,
this.intent,
JSON.stringify(this.context),
);

console.log('startObject options', JSON.stringify(options));

this.window.webContents.send(TOPICS.WINDOW_START, startObject);

console.log(
'intent resolver create',
RESOLVER_CONTENT as string,
options,
);
this.view = view;
});

this.window.focus();

//dev tools will automatically blur and close the resolver
if (!devTools) {
this.window.on('blur', () => {
this.window.destroy();
});
}
}
}

Expand Down
1 change: 1 addition & 0 deletions packages/main/src/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export enum TARGETS {
}

export enum TOPICS {
FRAME_READY = 'FRAME:ready',
SEARCH = 'WORK:search',
WORKSPACE_INIT = 'WORK:Init',
WORKSPACE_START = 'WORK:Start',
Expand Down
18 changes: 11 additions & 7 deletions packages/preload/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { TOPICS, TARGETS } from '../../main/src/constants';
//flag to indicate the background script is ready for fdc3!
let connected = true;
let id: string | null = null;
let frameReady = false;

/**
* listen for start event - assigning id for the instance
Expand All @@ -19,23 +20,22 @@ ipcRenderer.on(TOPICS.WORKSPACE_START, async (event, args) => {
});

ipcRenderer.on(TOPICS.ADD_TAB, (event, args) => {
//don't push the event until after the document is loaded
console.log('ipcRenderer event', event.type);
const tabEvent = new CustomEvent(TOPICS.ADD_TAB, {
detail: {
viewId: args.viewId,
title: args.title,
},
});

if (document.getElementById('controlsContainer')) {
if (frameReady){
document.dispatchEvent(tabEvent);
} else {
document.addEventListener('DOMContentLoaded', () => {
console.log('loaded');
}
else {
document.addEventListener(TOPICS.FRAME_READY, () => {
document.dispatchEvent(tabEvent);
});
}

});

ipcRenderer.on(TOPICS.SELECT_TAB, (event, args) => {
Expand Down Expand Up @@ -137,6 +137,10 @@ document.addEventListener(TOPICS.OPEN_TAB_TOOLS_CLICK, () => {
ipcRenderer.send(TOPICS.TAB_DEV_TOOLS, { source: id });
});

document.addEventListener(TOPICS.FRAME_READY, () => {
frameReady = true;
});

//viewId of currently selected tab
let currentTab: string | null = null;

Expand Down
10 changes: 3 additions & 7 deletions packages/renderer/src/Frame.css
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
#controlsContainer {
padding-left:.6rem;
padding-right:.6rem;
#buttonsContainer {
margin-left:.6rem;
margin-right:.6rem;
padding-top:.6rem;
}

#channelButton {
margin-right:.3rem;
margin-left:.3rem;
}
84 changes: 63 additions & 21 deletions packages/renderer/src/Frame.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import './Frame.css';
import React from 'react';
import {TextField, IconButton, Button, ButtonGroup, Tabs, Tab, AppBar, Paper, Stack} from '@mui/material';
import {TextField, IconButton, Menu, MenuItem, ButtonGroup, Tabs, Tab, AppBar, Paper, Stack} from '@mui/material';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import {TOPICS} from '../../main/src/constants';
import { PostAdd, HiveOutlined, ConstructionOutlined, CloseOutlined } from "@mui/icons-material";
import { PostAdd, HiveOutlined, CloseOutlined, MoreVert} from "@mui/icons-material";

(window as any).frameReady = false;

const darkTheme = createTheme({
palette: {
Expand All @@ -24,13 +25,7 @@ const openChannelPicker = (event : MouseEvent) => {
document.dispatchEvent(new CustomEvent(TOPICS.OPEN_CHANNEL_PICKER_CLICK, {detail:{mouseX:event.clientX, mouseY:(event.clientY + pickerButtonHeight)}}));
};

const openTabTools = () => {
document.dispatchEvent(new CustomEvent(TOPICS.OPEN_TAB_TOOLS_CLICK));
};

const openFrameTools = () => {
document.dispatchEvent(new CustomEvent(TOPICS.OPEN_FRAME_TOOLS_CLICK));
};

const hideResults = () => {
document.dispatchEvent(new CustomEvent(TOPICS.HIDE_RESULTS_WINDOW));
Expand All @@ -43,11 +38,11 @@ interface FrameTab {
tabName: string;
};

export class Frame extends React.Component <{}, {tabs:Array<FrameTab>, selectedTab:string}> {
export class Frame extends React.Component <{}, {anchorEl : HTMLElement | null, tabs:Array<FrameTab>, selectedTab:string}> {

constructor(props : any) {
super(props);
this.state = {tabs: [], selectedTab : "newTab"};
this.state = {tabs: [], selectedTab : "newTab", anchorEl : null};
}


Expand Down Expand Up @@ -77,11 +72,7 @@ export class Frame extends React.Component <{}, {tabs:Array<FrameTab>, selectedT
handleNewTab(tabName : string, tabId : string) {

this.setState({tabs:[...this.state.tabs,{tabId:tabId, tabName:tabName}], selectedTab:tabId});
// ...tabs,
// <Tab label={tabName} value={tabValue} iconPosition="end" icon={<CloseOutlined onClick={() => {closeTab(tabValue);}}/>} />
// ]);

// handleTabsContent();

}

componentDidMount() {
Expand All @@ -107,9 +98,34 @@ export class Frame extends React.Component <{}, {tabs:Array<FrameTab>, selectedT
this.setState({selectedTab:event.detail.selected});
}
}) as EventListener);
console.log("setting frameReady");
(window as any).frameReady = true;
const readyEvent = new CustomEvent(TOPICS.FRAME_READY, {
detail: {},
});
document.dispatchEvent(readyEvent);
}

render() {

const open = Boolean(this.state.anchorEl);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
this.setState({anchorEl:event.currentTarget});
};
const handleClose = () => {
this.setState({anchorEl : null});
};

const openViewTools = () => {
document.dispatchEvent(new CustomEvent(TOPICS.OPEN_TAB_TOOLS_CLICK));
this.setState({anchorEl : null});
};

const openFrameTools = () => {
document.dispatchEvent(new CustomEvent(TOPICS.OPEN_FRAME_TOOLS_CLICK));
this.setState({anchorEl : null});
};

const debounce = (callback : any, wait : number) => {

let timeoutId : number | undefined = undefined;
Expand All @@ -136,21 +152,45 @@ export class Frame extends React.Component <{}, {tabs:Array<FrameTab>, selectedT

}, 400);


return (
<ThemeProvider theme={darkTheme}>
<Paper>

<AppBar position="static" color="inherit">
<div id="controlsContainer">
<div id="buttonsContainer">
<Stack direction="row">
<TextField id="search" label="Search" variant="outlined" size="small" onFocus={hideResults} onChange={searchChange} fullWidth/>
<ButtonGroup>
<div id="channelButton">
<IconButton size="small" variant="contained" id="channelPicker" onClick={openChannelPicker} title="select channel"><HiveOutlined/></IconButton>
</div>

<Button size="small" variant="contained" id="frameDevTools" onClick={openFrameTools} endIcon={<ConstructionOutlined/>} title="Open Dev Tools for the Workspace Frame">Frame</Button>
<Button size="small" variant="contained" id="tabDevTools" onClick={openTabTools} endIcon={<ConstructionOutlined/>} title="Open Dev Tools for the View">View</Button>
<IconButton size="small" variant="contained" id="channelPicker" onClick={openChannelPicker} title="select channel"><HiveOutlined/></IconButton>

<IconButton
id="menuButton"
aria-controls={open ? 'more' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={handleClick}>
<MoreVert/>
</IconButton>
<Menu
id="moreMenu"
aria-labelledby="menuButton"
anchorEl={this.state.anchorEl}
open={open}
onClose={handleClose}
anchorOrigin={{
vertical: 'top',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
>
<MenuItem key="frameTools" onClick={openFrameTools}>DevTools - Frame</MenuItem>
<MenuItem key="viewTools" onClick={openViewTools}>DevTools - View</MenuItem>
</Menu>
</ButtonGroup>
</Stack>
</div>
Expand All @@ -173,6 +213,8 @@ export class Frame extends React.Component <{}, {tabs:Array<FrameTab>, selectedT

);
}


}

/**
Expand Down

0 comments on commit e6acd37

Please sign in to comment.