mirror of
https://github.com/canna71/obsidian-sheets.git
synced 2026-07-22 08:30:27 +00:00
usinx x-data-spreadsheet
This commit is contained in:
Gabriele Cannata
parent
74f227ab82
commit
f94a6a045d
8 changed files with 2414 additions and 177 deletions
|
|
@ -1,92 +0,0 @@
|
|||
/* eslint-disable @typescript-eslint/ban-types */
|
||||
import { debounce, finishRenderMath, ItemView, WorkspaceLeaf } from "obsidian";
|
||||
import * as React from "react";
|
||||
import { createRoot, Root } from "react-dom/client";
|
||||
|
||||
|
||||
|
||||
import { loadMathJax } from "obsidian";
|
||||
import { SheetjsSettings } from "src/Settings";
|
||||
import { getSheetjsSettings } from "src/main";
|
||||
export const SHEETJS_VIEW = "Sheetjs-view";
|
||||
|
||||
export const SheetjsContext = React.createContext<any>({});
|
||||
|
||||
|
||||
|
||||
export class SheetjsView extends ItemView {
|
||||
settings: SheetjsSettings;
|
||||
root: Root;
|
||||
state = {
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
constructor(leaf: WorkspaceLeaf) {
|
||||
super(leaf);
|
||||
// this.settings = (this.app as any).plugins.plugins["obsidian-Sheetjs"].settings as SheetjsSettings;
|
||||
this.settings = getSheetjsSettings();
|
||||
this.state = {
|
||||
|
||||
};
|
||||
this.icon = "sigma";
|
||||
}
|
||||
|
||||
getViewType() {
|
||||
return SHEETJS_VIEW;
|
||||
}
|
||||
|
||||
getDisplayText() {
|
||||
return "Sheetjs";
|
||||
}
|
||||
|
||||
override onResize(): void {
|
||||
super.onResize();
|
||||
this.handleResize();
|
||||
}
|
||||
|
||||
handleResize = debounce(() => {
|
||||
this.render();
|
||||
}, 300);
|
||||
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
|
||||
this.root.render(
|
||||
<React.StrictMode>
|
||||
<SheetjsContext.Provider value={{
|
||||
width: this.contentEl.innerWidth,
|
||||
settings: this.settings
|
||||
}}>
|
||||
<div>TODO:</div>
|
||||
</SheetjsContext.Provider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
async onOpen() {
|
||||
const { contentEl } = this;
|
||||
// contentEl.setText('Woah!');
|
||||
// this.titleEl.setText("Obsidian Janitor")
|
||||
|
||||
this.root = createRoot(contentEl/*.children[1]*/);
|
||||
await loadMathJax();
|
||||
await finishRenderMath();
|
||||
this.render();
|
||||
// const e = nerdamer('x^2+2*(cos(x)+x*x)');
|
||||
// const latex = e.toTeX();
|
||||
// console.log(latex);
|
||||
// const mathEl = renderMath(latex, true);
|
||||
// contentEl.appendChild(mathEl);
|
||||
}
|
||||
|
||||
async onClose() {
|
||||
|
||||
this.root.unmount();
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,10 @@ import esbuild from "esbuild";
|
|||
import process from "process";
|
||||
import builtins from 'builtin-modules'
|
||||
import {sassPlugin} from 'esbuild-sass-plugin'
|
||||
import svgrPlugin from 'esbuild-plugin-svgr';
|
||||
// import svgrPlugin from 'esbuild-plugin-svgr';
|
||||
import { lessLoader } from 'esbuild-plugin-less';
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
// import * as path from 'path'
|
||||
|
||||
const banner =
|
||||
`/*
|
||||
|
|
@ -42,7 +45,12 @@ esbuild.build({
|
|||
sourcemap: prod ? false : 'inline',
|
||||
treeShaking: true,
|
||||
outfile: 'main.js',
|
||||
plugins: [svgrPlugin()]
|
||||
// https://github.com/glromeo/esbuild-sass-plugin#--rewriting-relative-urls
|
||||
plugins: [ lessLoader({})],
|
||||
loader: {
|
||||
'.ts': 'ts',
|
||||
'.svg': 'dataurl',
|
||||
}
|
||||
}).catch(() => process.exit(1));
|
||||
|
||||
esbuild.build({
|
||||
|
|
@ -51,3 +59,14 @@ esbuild.build({
|
|||
watch: !prod,
|
||||
plugins: [sassPlugin()]
|
||||
}).catch(() => process.exit(1));
|
||||
// node_modules/x-data-spreadsheet/src/index.less
|
||||
|
||||
/*
|
||||
|
||||
{
|
||||
precompile(source, pathname) {
|
||||
const basedir = path.dirname(pathname)
|
||||
return source.replace(/(url\(['"]?)(\.\.?\/)([^'")]+['"]?\))/g, `$1${basedir}/$2$3`)
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
1066
main.css
Normal file
1066
main.css
Normal file
File diff suppressed because one or more lines are too long
1326
package-lock.json
generated
1326
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -28,7 +28,10 @@
|
|||
"typescript": "4.7.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"esbuild-plugin-less": "^1.2.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
"react-dom": "^18.2.0",
|
||||
"x-data-spreadsheet": "^1.1.9",
|
||||
"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
|
||||
export interface SheetjsSettings {
|
||||
addRibbonIcon: boolean;
|
||||
showAtStartup: boolean;
|
||||
|
||||
}
|
||||
|
||||
export const DEFAULT_SETTINGS: SheetjsSettings = {
|
||||
addRibbonIcon: true,
|
||||
showAtStartup: true,
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
25
src/Views/SheetView.tsx
Normal file
25
src/Views/SheetView.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
// import * as React from "react";
|
||||
// import { createRoot } from "react-dom/client";
|
||||
import { MarkdownPostProcessorContext } from "obsidian";
|
||||
import { SheetjsSettings } from "src/Settings";
|
||||
import Spreadsheet from "x-data-spreadsheet";
|
||||
|
||||
export function processCodeBlock(source: string, el: HTMLElement, settings: SheetjsSettings, ctx: MarkdownPostProcessorContext) {
|
||||
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const containerWidth = Math.clamp((ctx as any).containerEl.offsetWidth, 200,700) ;
|
||||
|
||||
// const s = new Spreadsheet("#x-spreadsheet-demo")
|
||||
// .loadData({}) // load data
|
||||
// .change(data => {
|
||||
// // save data to db
|
||||
// });
|
||||
|
||||
// data validation
|
||||
|
||||
|
||||
// const root = createRoot(el);
|
||||
const s = new Spreadsheet(el);
|
||||
console.log(`spreadsheet`, s)
|
||||
}
|
||||
52
src/main.ts
52
src/main.ts
|
|
@ -1,9 +1,9 @@
|
|||
import { DEFAULT_SETTINGS, SheetjsSettings } from "src/Settings";
|
||||
import { addIcon, MarkdownView } from "obsidian";
|
||||
|
||||
|
||||
// import { MathResult } from './Extensions/ResultMarkdownChild';
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
import { SheetjsView, SHEETJS_VIEW } from "../Views/SheetjsView";
|
||||
import {
|
||||
App,
|
||||
finishRenderMath,
|
||||
|
|
@ -13,9 +13,10 @@ import {
|
|||
WorkspaceLeaf,
|
||||
} from "obsidian";
|
||||
import { SheetjsSettingsTab } from "src/SettingTab";
|
||||
import { processCodeBlock } from "./Views/SheetView";
|
||||
|
||||
|
||||
const sigma = `<path stroke="currentColor" fill="none" d="M78.6067 22.8905L78.6067 7.71171L17.8914 7.71171L48.2491 48.1886L17.8914 88.6654L78.6067 88.6654L78.6067 73.4866" opacity="1" stroke-linecap="round" stroke-linejoin="round" stroke-width="6" />
|
||||
const sheetSVG = `<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 482.81 482.81" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M464.764,25.771H18.037C8.086,25.771,0,33.869,0,43.808v395.196c0,6.106,3.068,11.491,7.729,14.76v2.843h6.469 c1.241,0.272,2.518,0.432,3.839,0.432h446.738c1.318,0,2.595-0.159,3.83-0.432h0.887v-0.271 c7.654-2.093,13.317-9.032,13.317-17.331V43.813C482.81,33.869,474.717,25.771,464.764,25.771z M467.347,43.813v51.979H348.363 v-54.56h116.4C466.194,41.233,467.347,42.392,467.347,43.813z M466.105,441.145H348.363V392.18h118.983v46.824 C467.347,439.92,466.832,440.695,466.105,441.145z M15.457,439.004V392.18h55.842v48.965H16.698 C15.971,440.695,15.457,439.92,15.457,439.004z M201.448,256.87v53.61H86.758v-53.61H201.448z M86.758,241.407v-57.99h114.689 v57.99H86.758z M201.448,325.943v50.773H86.758v-50.773H201.448z M201.448,392.18v48.965H86.758V392.18H201.448z M216.913,392.18 H332.9v48.965H216.913V392.18z M216.913,376.717v-50.779H332.9v50.779H216.913z M216.913,310.48v-53.61H332.9v53.61H216.913z M216.913,241.407v-57.99H332.9v57.99H216.913z M216.913,167.954v-56.702H332.9v56.702H216.913z M216.913,95.787v-54.56H332.9 v54.56H216.913z M201.448,95.787H86.758v-54.56h114.689V95.787z M201.448,111.252v56.702H86.758v-56.702H201.448z M71.299,167.954 H15.457v-56.702h55.842V167.954z M71.299,183.417v57.99H15.457v-57.99H71.299z M71.299,256.87v53.61H15.457v-53.61H71.299z M71.299,325.943v50.773H15.457v-50.773H71.299z M348.363,376.717v-50.779h118.983v50.779H348.363z M348.363,310.48v-53.61h118.983 v53.61H348.363z M348.363,241.407v-57.99h118.983v57.99H348.363z M348.363,167.954v-56.702h118.983v56.702H348.363z"></path> </g> </g></svg>
|
||||
`;
|
||||
|
||||
// Remember to rename these classes and interfaces!
|
||||
|
|
@ -29,18 +30,17 @@ export default class SheetjsPlugin extends Plugin {
|
|||
async onload() {
|
||||
await this.loadSettings();
|
||||
|
||||
this.registerView(SHEETJS_VIEW, (leaf) => new SheetjsView(leaf));
|
||||
|
||||
addIcon("sigma",sigma);
|
||||
addIcon("sheet",sheetSVG);
|
||||
|
||||
|
||||
if (this.settings.addRibbonIcon) {
|
||||
// This creates an icon in the left ribbon.
|
||||
const ribbonIconEl = this.addRibbonIcon(
|
||||
"sigma",
|
||||
"Open Sheetjs",
|
||||
"sheet",
|
||||
"Add Sheet",
|
||||
(evt: MouseEvent) => {
|
||||
this.activateView();
|
||||
this.addTable();
|
||||
}
|
||||
);
|
||||
// Perform additional things with the ribbon
|
||||
|
|
@ -48,16 +48,14 @@ export default class SheetjsPlugin extends Plugin {
|
|||
}
|
||||
|
||||
this.addCommand({
|
||||
id: "show-Sheetjs-view",
|
||||
name: "Show Sheetjs Sidebar",
|
||||
callback: () => this.activateView(),
|
||||
id: "add-sheet-table",
|
||||
name: "Add Sheet Table",
|
||||
callback: () => this.addTable(),
|
||||
});
|
||||
|
||||
|
||||
this.app.workspace.onLayoutReady(() => {
|
||||
if(this.settings.showAtStartup){
|
||||
this.activateView();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
this.registerCodeBlock();
|
||||
|
|
@ -88,8 +86,12 @@ export default class SheetjsPlugin extends Plugin {
|
|||
this.addSettingTab(new SheetjsSettingsTab(this.app, this));
|
||||
}
|
||||
|
||||
|
||||
addTable() {
|
||||
throw new Error("Method not implemented.");
|
||||
}
|
||||
|
||||
onunload() {
|
||||
this.app.workspace.detachLeavesOfType(SHEETJS_VIEW);
|
||||
}
|
||||
|
||||
async loadSettings() {
|
||||
|
|
@ -105,29 +107,15 @@ export default class SheetjsPlugin extends Plugin {
|
|||
await this.saveData(this.settings);
|
||||
}
|
||||
|
||||
async activateView() {
|
||||
this.app.workspace.detachLeavesOfType(SHEETJS_VIEW);
|
||||
|
||||
await this.app.workspace.getRightLeaf(false).setViewState(
|
||||
{
|
||||
type: SHEETJS_VIEW,
|
||||
active: true,
|
||||
},
|
||||
{ settings: this.settings }
|
||||
);
|
||||
|
||||
this.app.workspace.revealLeaf(
|
||||
this.app.workspace.getLeavesOfType(SHEETJS_VIEW)[0]
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
async registerCodeBlock() {
|
||||
await loadMathJax();
|
||||
await finishRenderMath();
|
||||
this.registerMarkdownCodeBlockProcessor(
|
||||
"Sheetjs",
|
||||
"sheet",
|
||||
(source, el, ctx) => {
|
||||
// processCodeBlock(source, el, this.settings, ctx);
|
||||
processCodeBlock(source, el, this.settings, ctx);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
@ -143,3 +131,5 @@ export default class SheetjsPlugin extends Plugin {
|
|||
// this.registerEditorExtension([resultField, SheetjsConfigField]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue