diff --git a/src/ExcalidrawView.ts b/src/ExcalidrawView.ts index fdc2941..b6700dc 100644 --- a/src/ExcalidrawView.ts +++ b/src/ExcalidrawView.ts @@ -446,12 +446,31 @@ export default class ExcalidrawView extends TextFileView { if (!this.excalidrawWrapperRef) { return; } - this.contentEl.requestFullscreen(); //{navigationUI: "hide"}); - this.excalidrawWrapperRef.current.firstElementChild?.focus(); - this.contentEl.setAttribute("style", "padding:0px;margin:0px;"); if (this.toolsPanelRef && this.toolsPanelRef.current) { this.toolsPanelRef.current.setFullscreen(true); } + if(this.app.isMobile) { + const newStylesheet = document.createElement("style"); + newStylesheet.id = "excalidraw-full-screen"; + newStylesheet.textContent = ` + .workspace-leaf-content .view-content { + padding: 0px !important; + } + .view-header { + height: 1px !important; + } + .status-bar { + display: none !important; + }`; + + const oldStylesheet = document.getElementById(newStylesheet.id); + if(oldStylesheet) document.head.removeChild(oldStylesheet); + document.head.appendChild(newStylesheet); + return; + } + this.contentEl.requestFullscreen(); //{navigationUI: "hide"}); + this.excalidrawWrapperRef.current.firstElementChild?.focus(); + this.contentEl.setAttribute("style", "padding:0px;margin:0px;"); this.fullscreenModalObserver = new MutationObserver((m) => { if (m.length !== 1) { @@ -493,10 +512,17 @@ export default class ExcalidrawView extends TextFileView { } exitFullscreen() { - document.exitFullscreen(); if (this.toolsPanelRef && this.toolsPanelRef.current) { - this.toolsPanelRef.current.setFullscreen(true); + this.toolsPanelRef.current.setFullscreen(false); } + if(this.app.isMobile) { + const oldStylesheet = document.getElementById("excalidraw-full-screen"); + if(oldStylesheet) { + document.head.removeChild(oldStylesheet); + } + return; + } + document.exitFullscreen(); } async handleLinkClick(view: ExcalidrawView, ev: MouseEvent) { @@ -2357,6 +2383,18 @@ export default class ExcalidrawView extends TextFileView { current.zoomToFit(elements, maxZoom, this.isFullscreen() ? 0 : 0.05); } } + + public async toggleTrayMode() { + const st = this.excalidrawAPI.getAppState(); + st.trayModeEnabled = !st.trayModeEnabled; + this.excalidrawAPI.updateScene({appState:st}); + this.excalidrawAPI.refresh(); + + //just in case settings were updated via Obsidian sync + await this.plugin.loadSettings(); + this.plugin.settings.defaultTrayMode = st.trayModeEnabled; + this.plugin.saveSettings(); + } } export function getTextMode(data: string): TextMode { diff --git a/src/ObsidianMenu.tsx b/src/ObsidianMenu.tsx index ab6836c..f543fa0 100644 --- a/src/ObsidianMenu.tsx +++ b/src/ObsidianMenu.tsx @@ -162,7 +162,6 @@ export class ToolsPanel extends React.Component { } render () { - const downloadedScriptsRoot=`${this.props.view.plugin.settings.scriptFolderPath}/${SCRIPT_INSTALL_FOLDER}/` return (
{ search(this.props.view); }} icon={ICONS.search} + view={this.props.view} /> { this.props.view.openAsMarkdown(); }} icon={ICONS.switchToMarkdown} - /> - { - if(this.state.isFullscreen) { - this.props.view.exitFullscreen(); - } else { - this.props.view.gotoFullscreen(); - } - }} - icon={this.state.isFullscreen ? ICONS.exitFullScreen : ICONS.gotoFullScreen} + view={this.props.view} /> { this.state.isPreviewMode === null ? ( { this.props.view.convertExcalidrawToMD(); }} icon={ICONS.convertFile} + view={this.props.view} />) : ( { } }} icon={this.state.isPreviewMode ? ICONS.rawMode : ICONS.parsedMode} + view={this.props.view} />) } + { + this.props.view.toggleTrayMode(); + }} + icon={ICONS.trayMode} + view={this.props.view} + /> + { + if(this.state.isFullscreen) { + this.props.view.exitFullscreen(); + } else { + this.props.view.gotoFullscreen(); + } + }} + icon={this.state.isFullscreen ? ICONS.exitFullScreen : ICONS.gotoFullScreen} + view={this.props.view} + />
@@ -310,6 +323,7 @@ export class ToolsPanel extends React.Component { this.props.view.plugin.exportLibrary(); }} icon={ICONS.exportLibrary} + view={this.props.view} /> { new Notice("File saved: " + getIMGFilename(this.props.view.file.path, "svg")); }} icon={ICONS.exportSVG} + view={this.props.view} /> { new Notice("File saved: "+getIMGFilename(this.props.view.file.path, "png")); }} icon={ICONS.exportPNG} + view={this.props.view} /> { this.props.view.exportExcalidraw(); }} icon={ICONS.exportExcalidraw} + view={this.props.view} />
@@ -351,6 +368,7 @@ export class ToolsPanel extends React.Component { this.props.view) }} icon={ICONS.insertImage} + view={this.props.view} /> { this.props.view) }} icon={ICONS.insertMD} + view={this.props.view} /> { insertLaTeXToView(this.props.view) }} icon={ICONS.insertLaTeX} + view={this.props.view} /> { ); }} icon={ICONS.insertLink} + view={this.props.view} /> - {this.state.scriptIconMap !== {} && - Object.keys(this.state.scriptIconMap).filter(k=>!k.startsWith(downloadedScriptsRoot)).length !== 0 - ? (
- User Scripts -
- {Object.keys(this.state.scriptIconMap) - .filter(k=>!k.startsWith(downloadedScriptsRoot)) - .sort() - .map((key:string) => - { - const f = this.props.view.app.vault.getAbstractFileByPath(key); - if(f && f instanceof TFile) { - this.props.view.plugin.scriptEngine.executeScript(this.props.view,f); - } - }} - icon={this.state.scriptIconMap[key].iconBase64 - ? - : ICONS.cog} - /> - )} -
-
) - : "" - } - {this.state.scriptIconMap !== {} && - Object.keys(this.state.scriptIconMap).filter(k=>k.startsWith(downloadedScriptsRoot)).length !== 0 - ? (
- Downloaded Scripts -
- {Object.keys(this.state.scriptIconMap) - .filter(k=>k.startsWith(downloadedScriptsRoot)) - .sort() - .map((key:string) => - { - const f = this.props.view.app.vault.getAbstractFileByPath(key); - if(f && f instanceof TFile) { - this.props.view.plugin.scriptEngine.executeScript(this.props.view,f); - } - }} - icon={this.state.scriptIconMap[key].iconBase64 - ? - : ICONS.cog} - /> - )} -
-
) - : "" - } + {this.renderScriptButtons(false)} + {this.renderScriptButtons(true)} ) } + + private renderScriptButtons (isDownloaded:boolean) { + if(this.state.scriptIconMap === {}) { + return (""); + } + + const downloadedScriptsRoot = + `${this.props.view.plugin.settings + .scriptFolderPath}/${SCRIPT_INSTALL_FOLDER}/`; + + const filterCondition = (key:string):boolean => isDownloaded + ? key.startsWith(downloadedScriptsRoot) + : !key.startsWith(downloadedScriptsRoot); + + if(Object.keys(this.state.scriptIconMap) + .filter(k=>filterCondition(k)).length === 0 + ){ + return (""); + } + + return ( +
+ {isDownloaded?"Downloaded":"User"} Scripts +
+ {Object.keys(this.state.scriptIconMap) + .filter(k=>filterCondition(k)) + .sort() + .map((key:string) => + { + const f = this.props.view.app.vault.getAbstractFileByPath(key); + if(f && f instanceof TFile) { + this.props.view.plugin.scriptEngine.executeScript(this.props.view,f); + } + }} + icon={this.state.scriptIconMap[key].svgString + ? + : ICONS.cog} + view={this.props.view} + /> + )} +
+
+ ) + } + } type ButtonProps = { title: string; action: Function; icon: JSX.Element; - key: string; + //key: string; + view: ExcalidrawView; } type ButtonState = { @@ -471,6 +486,8 @@ type ButtonState = { } class ActionButton extends React.Component { + toastMessageTimeout:number = 0; + constructor(props: ButtonProps) { super(props); this.state = { @@ -481,7 +498,7 @@ class ActionButton extends React.Component { render() { return (