From fea67c100b940dc7ca0440cfd6cac07850fee905 Mon Sep 17 00:00:00 2001 From: Zsolt Viczian Date: Mon, 19 Apr 2021 19:36:41 +0200 Subject: [PATCH] pre mvp alpha 0.0.2 --- .github/ISSUE_TEMPLATE/bug_report.md | 76 ++++++------- .github/ISSUE_TEMPLATE/feature_request.md | 40 +++---- data.json | 2 +- dist/manifest.json | 4 +- manifest.json | 4 +- src/ExcalidrawView.ts | 131 ++++++++++++++++++++++ src/constants.ts | 2 +- src/main.ts | 101 +++++------------ 8 files changed, 220 insertions(+), 140 deletions(-) create mode 100644 src/ExcalidrawView.ts diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index dd84ea7..6867cf8 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -1,38 +1,38 @@ ---- -name: Bug report -about: Create a report to help us improve -title: '' -labels: '' -assignees: '' - ---- - -**Describe the bug** -A clear and concise description of what the bug is. - -**To Reproduce** -Steps to reproduce the behavior: -1. Go to '...' -2. Click on '....' -3. Scroll down to '....' -4. See error - -**Expected behavior** -A clear and concise description of what you expected to happen. - -**Screenshots** -If applicable, add screenshots to help explain your problem. - -**Desktop (please complete the following information):** - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari] - - Version [e.g. 22] - -**Smartphone (please complete the following information):** - - Device: [e.g. iPhone6] - - OS: [e.g. iOS8.1] - - Browser [e.g. stock browser, safari] - - Version [e.g. 22] - -**Additional context** -Add any other context about the problem here. +--- +name: Bug report +about: Create a report to help us improve +title: '' +labels: '' +assignees: '' + +--- + +**Describe the bug** +A clear and concise description of what the bug is. + +**To Reproduce** +Steps to reproduce the behavior: +1. Go to '...' +2. Click on '....' +3. Scroll down to '....' +4. See error + +**Expected behavior** +A clear and concise description of what you expected to happen. + +**Screenshots** +If applicable, add screenshots to help explain your problem. + +**Desktop (please complete the following information):** + - OS: [e.g. iOS] + - Browser [e.g. chrome, safari] + - Version [e.g. 22] + +**Smartphone (please complete the following information):** + - Device: [e.g. iPhone6] + - OS: [e.g. iOS8.1] + - Browser [e.g. stock browser, safari] + - Version [e.g. 22] + +**Additional context** +Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index bbcbbe7..72718d5 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -1,20 +1,20 @@ ---- -name: Feature request -about: Suggest an idea for this project -title: '' -labels: '' -assignees: '' - ---- - -**Is your feature request related to a problem? Please describe.** -A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] - -**Describe the solution you'd like** -A clear and concise description of what you want to happen. - -**Describe alternatives you've considered** -A clear and concise description of any alternative solutions or features you've considered. - -**Additional context** -Add any other context or screenshots about the feature request here. +--- +name: Feature request +about: Suggest an idea for this project +title: '' +labels: '' +assignees: '' + +--- + +**Is your feature request related to a problem? Please describe.** +A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] + +**Describe the solution you'd like** +A clear and concise description of what you want to happen. + +**Describe alternatives you've considered** +A clear and concise description of any alternative solutions or features you've considered. + +**Additional context** +Add any other context or screenshots about the feature request here. diff --git a/data.json b/data.json index 1a813cd..0268b74 100644 --- a/data.json +++ b/data.json @@ -1 +1 @@ -{"openFile":"excalidraw/Drawing 2021-04-19 17.22.53.excalidraw","settings":{"folder":"excalidraw","templateFilePath":""}} \ No newline at end of file +{"folder":"excalidraw","templateFilePath":"","openFile":"excalidraw/new file.excalidraw","settings":{"folder":"excalidraw","templateFilePath":""}} \ No newline at end of file diff --git a/dist/manifest.json b/dist/manifest.json index 960bab1..27def8d 100644 --- a/dist/manifest.json +++ b/dist/manifest.json @@ -1,8 +1,8 @@ { "id": "obsidian-excalidraw-plugin", "name": "Excalidraw", - "version": "0.0.1", - "minAppVersion": "0.0.1", + "version": "0.1.0", + "minAppVersion": "0.0.2", "description": "An obsidian plugin to edit and view Excalidraw drawings", "author": "Zsolt Viczian", "authorUrl": "https://zsolt.blog", diff --git a/manifest.json b/manifest.json index 960bab1..27def8d 100644 --- a/manifest.json +++ b/manifest.json @@ -1,8 +1,8 @@ { "id": "obsidian-excalidraw-plugin", "name": "Excalidraw", - "version": "0.0.1", - "minAppVersion": "0.0.1", + "version": "0.1.0", + "minAppVersion": "0.0.2", "description": "An obsidian plugin to edit and view Excalidraw drawings", "author": "Zsolt Viczian", "authorUrl": "https://zsolt.blog", diff --git a/src/ExcalidrawView.ts b/src/ExcalidrawView.ts new file mode 100644 index 0000000..0501e51 --- /dev/null +++ b/src/ExcalidrawView.ts @@ -0,0 +1,131 @@ +import { TextFileView, WorkspaceLeaf } from "obsidian"; +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import Excalidraw from "@excalidraw/excalidraw"; +import { ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types"; +import { AppState } from "@excalidraw/excalidraw/types/types"; + + +export default class ExcalidrawView extends TextFileView { + private getScene: any; + + constructor(leaf: WorkspaceLeaf) { + super(leaf); + this.getScene = null; + } + + // clear the view content + clear() { + ReactDOM.unmountComponentAtNode(this.contentEl); + this.getScene = null; + } + + // get the new file content + getViewData () { + if(this.getScene) return this.getScene(); + else return ''; + } + + setViewData (data: string, clear: boolean) { + if(clear) this.clear(); + const excalidrawData = JSON.parse(data); + this.instantiateExcalidraw({ + elements: excalidrawData.elements, + appState: excalidrawData.appState, + scrollToContent: true, + }); + } + + // gets the title of the document + getDisplayText() { + if(this.file) return this.file.basename; + else return "excalidraw (no file)"; + + } + + // confirms this view can accept csv extension + canAcceptExtension(extension: string) { + return extension == 'excalidraw'; + } + + // the view type name + getViewType() { + return "excalidraw"; + } + + // icon for the view + getIcon() { + return "document-excalidraw"; + } + + private instantiateExcalidraw(initdata: any) { + ReactDOM.render(React.createElement(() => { + let previousSceneVersion = 0; + const excalidrawRef = React.useRef(null); + const excalidrawWrapperRef = React.useRef(null); + const [dimensions, setDimensions] = React.useState({ + width: undefined, + height: undefined + }); + + React.useEffect(() => { + setDimensions({ + width: this.contentEl.clientWidth, + height: this.contentEl.clientHeight, + }); + const onResize = () => { + try { + setDimensions({ + width: this.contentEl.clientWidth, + height: this.contentEl.clientHeight, + }); + } catch(err) {console.log ("onResize ",err)} + }; + window.addEventListener("resize", onResize); + return () => window.removeEventListener("resize", onResize); + }, [excalidrawWrapperRef]); + + this.getScene = function() { + const el: ExcalidrawElement[] = excalidrawRef.current.getSceneElements(); + const st: AppState = excalidrawRef.current.getAppState(); + return JSON.stringify({ + "type": "excalidraw", + "version": 2, + "source": "https://excalidraw.com", + "elements": el.filter(e => !e.isDeleted), + "appState": { + "theme": st.theme, + "viewBackgroundColor": st.viewBackgroundColor, + "gridSize": st.gridSize, + "zenModeEnabled": st.zenModeEnabled + } + }); + }; + + return React.createElement( + React.Fragment, + null, + React.createElement( + "div", + { + className: "excalidraw-wrapper", + ref: excalidrawWrapperRef + }, + React.createElement(Excalidraw.default, { + ref: excalidrawRef, + width: dimensions.width, + height: dimensions.height, + UIOptions: { + canvasActions: { + loadScene: false, + saveScene: false, + saveAsScene: false + }, + }, + initialData: initdata + }) + ) + ); + }),(this as any).contentEl); + } +} \ No newline at end of file diff --git a/src/constants.ts b/src/constants.ts index 617fdd5..a3895a7 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,4 +1,4 @@ -export const VIEW_TYPE_EXCALIDRAW = "excalidraw-editor"; +export const VIEW_TYPE_EXCALIDRAW = "excalidraw"; export const MAX_COLORS = 5; export const COLOR_FREQ = 6; export const BLANK_DRAWING = '{"type":"excalidraw","version":2,"source":"https://excalidraw.com","elements":[],"appState":{"gridSize":null,"viewBackgroundColor":"#ffffff"}}'; diff --git a/src/main.ts b/src/main.ts index bf7956f..9128408 100644 --- a/src/main.ts +++ b/src/main.ts @@ -11,7 +11,7 @@ import { TAbstractFile } from 'obsidian'; import { BLANK_DRAWING, VIEW_TYPE_EXCALIDRAW, PALETTE_ICON } from './constants'; -import ExcalidrawView from './view'; +import ExcalidrawView from './ExcalidrawView'; import { ExcalidrawSettings, DEFAULT_SETTINGS, @@ -34,111 +34,60 @@ export default class ExcalidrawPlugin extends Plugin { this.activeDrawing = null; this.activeDrawingFilename = ''; } - + async onload() { - addIcon("palette", PALETTE_ICON); + addIcon("excalidraw", PALETTE_ICON); - this.registerView( - VIEW_TYPE_EXCALIDRAW, - (leaf: WorkspaceLeaf) => (this.view = new ExcalidrawView(leaf)) - ); + this.registerView( + VIEW_TYPE_EXCALIDRAW, + (leaf: WorkspaceLeaf) => (this.view = new ExcalidrawView(leaf)) + ); + + this.registerExtensions(["excalidraw"],"excalidraw"); await this.loadSettings(); this.addSettingTab(new ExcalidrawSettingTab(this.app, this)); this.openDialog = new OpenFileDialog(this.app, this); - this.addRibbonIcon('palette', 'Excalidraw', async () => { + this.addRibbonIcon('excalidraw', 'Excalidraw', async () => { this.openDialog.start(); }); this.addCommand({ id: "excalidraw-open", - name: "Open Excalidraw", + name: "Open existing drawing or create new one", callback: () => { this.openDialog.start(); }, }); -/* this.addCommand({ - id: "excalidraw-new-drawing", - name: "Open Excalidraw View", - callback: () => { - if (this.app.workspace.layoutReady) { - this.initLeaf(); - } else { - this.registerEvent( - this.app.workspace.on("layout-ready", this.initLeaf.bind(this))); - } - }, - });*/ - - if (this.app.workspace.layoutReady) { - this.initLeaf(); - } else { - this.registerEvent( - this.app.workspace.on("layout-ready", this.initLeaf.bind(this))); - } - } - - onunload():void { - this.view.unload(); - } - - initLeaf(): void { - if (this.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW).length) { - this.app.workspace.revealLeaf(this.view.leaf); - this.loadLastDrawing(this.activeDrawingFilename); - return; - } - - this.app.workspace.getRightLeaf(false).setViewState({ - type: VIEW_TYPE_EXCALIDRAW, + this.addCommand({ + id: "excalidraw-autocreate", + name: "Create a new drawing", + callback: () => { + this.createDrawing(this.getNextDefaultFilename()); + }, }); - - this.app.workspace.revealLeaf(this.view.leaf); - - this.loadLastDrawing(this.activeDrawingFilename); } private async loadSettings() { - const savedData = await this.loadData(); - this.settings = Object.assign({}, DEFAULT_SETTINGS, savedData?.settings); - this.activeDrawingFilename = savedData?.openFile != null ? savedData.openFile : ''; + this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData()); } async saveSettings() { - if(this.view != null) { - await this.saveData({ - openFile: this.activeDrawing?.path || '', - settings: this.settings, - }); - } + await this.saveData(this.settings); } - public openDrawing(drawingFile: TFile) { + public async openDrawing(drawingFile: TFile) { this.activeDrawing = drawingFile; this.saveSettings(); - this.view.loadDrawing(drawingFile); + const leaf = this.view ? this.view.leaf : this.app.workspace.activeLeaf; + leaf.setViewState({ + type: VIEW_TYPE_EXCALIDRAW, + state: {file: drawingFile.path}} + ); } - private loadLastDrawing(fname: string) { - let file:TFile = null; - - if(fname != '') { - const fileToOpen = (this.app.vault.getAbstractFileByPath(fname) as TFile); - if (fileToOpen) { - file = fileToOpen; - } - } - - if(file) { - this.openDrawing(file); - } else { - this.createDrawing(this.getNextDefaultFilename()); - } - - } - private getNextDefaultFilename():string { return this.settings.folder+'/Drawing ' + getDateString('yyyy-MM-dd HH.mm.ss')+'.excalidraw'; }