From a35bf1e5cf91dc4932e0ede4bad4af3b46b81ca1 Mon Sep 17 00:00:00 2001
From: set <set>
Date: Mon, 16 Sep 2024 15:40:27 +0200
Subject: [PATCH] Next job on the list is selection and general UI improvements

---
 src/main.ts         |  2 +-
 src/spreadsheet.tsx | 38 +++++++++++++++++++-------------------
 src/table.tsx       |  2 +-
 styles.css          |  2 --
 4 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index d521bb7..a63c0e8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -31,7 +31,7 @@ export default class SpreadsheetPlugin extends obs.Plugin {
                     // TODO: Handle existing files
                     const newFile = path.join(obs.normalizePath(file.path ?? this.app.vault.getRoot()), 'sheet.csv');
                     
-                    const tfile = await this.app.vault.create(newFile, ';\n;');
+                    const tfile = await this.app.vault.create(newFile, 'Column 1;\n;');
                     await this.app.workspace.getLeaf(false).openFile(tfile);
                 }))));
     }
diff --git a/src/spreadsheet.tsx b/src/spreadsheet.tsx
index 75434a4..3a84bd5 100644
--- a/src/spreadsheet.tsx
+++ b/src/spreadsheet.tsx
@@ -2,8 +2,8 @@ import * as obs from "obsidian";
 import * as React from "react";
 import * as rdom from "react-dom/client";
 
-import Table, {DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_HEIGHT, MIN_COLUMN_WIDTH, MIN_ROW_HEIGHT} from "./table.js";
-import FormulaBar, {CellRenderer, renderers} from "./formula.js";
+import Table, { DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_HEIGHT, MIN_COLUMN_WIDTH, MIN_ROW_HEIGHT } from "./table.js";
+import FormulaBar, { CellRenderer, renderers } from "./formula.js";
 
 export const SPREADSHEET_VIEW = "spreadsheet-view";
 
@@ -195,7 +195,7 @@ export default class Spreadsheet extends obs.TextFileView {
             }));
 
         const prevRaw = [...this.raw];
-        const prevProps = {...this.documentProperties};
+        const prevProps = { ...this.documentProperties };
         this.raw = [];
 
         for (const [cells, row] of rows.map((i, row) => [i.split(separator), row] as const)) {
@@ -304,7 +304,7 @@ export default class Spreadsheet extends obs.TextFileView {
 
     protected async onOpen(): Promise<void> {
         (this.root = rdom.createRoot(this.contentEl))
-            .render(<Ui sheet={this}/>);
+            .render(<Ui sheet={this} />);
     }
 
     protected async onClose(): Promise<void> {
@@ -344,27 +344,27 @@ export function Ui(props: { sheet: Spreadsheet }) {
                 onResize: prev.onResize
             };
         })}
-        onMouseUp={() => setResize({isResizing: false})}>
+        onMouseUp={() => setResize({ isResizing: false })}>
 
         {/*<SelectionBar/>*/}
 
-        <FormulaBar activeCell={active}/>
+        <FormulaBar activeCell={active} />
 
         <Table raw={props.sheet.raw}
-               columnWidths={documentProperties.columnWidths}
-               rowHeights={documentProperties.rowHeights}
-               mouseUp={(row, col) => setActive(props.sheet.raw[row][col])}
-               mouseDown={(row, col) => setActive(props.sheet.raw[row][col])}>
+            columnWidths={documentProperties.columnWidths}
+            rowHeights={documentProperties.rowHeights}
+            mouseUp={(row, col) => setActive(props.sheet.raw[row][col])}
+            mouseDown={(row, col) => setActive(props.sheet.raw[row][col])}>
 
             <>
                 {documentProperties.columnTitles.map((column, col) =>
                     <div className={"table-header-cell"}
-                         key={`table-header-${col}`}
-                         style={{
-                             gridColumn: col + 2,
-                             gridRow: 1
-                         }}
-                         onContextMenu={e => columnContextMenu(e, col, props.sheet, setIsRenamingColumn)}
+                        key={`table-header-${col}`}
+                        style={{
+                            gridColumn: col + 2,
+                            gridRow: 1
+                        }}
+                        onContextMenu={e => columnContextMenu(e, col, props.sheet, setIsRenamingColumn)}
                         onDoubleClick={e => setIsRenamingColumn(col)}>
                         <div className={"column-title"}>
                             {isRenamingColumn == col ? <input
@@ -377,7 +377,7 @@ export function Ui(props: { sheet: Spreadsheet }) {
                                 onKeyUp={e => ["Tab", "Enter"].includes(e.key) && setIsRenamingColumn(null)}
                                 onChange={e => props.sheet.updateDocumentProperties(prev => ({
                                     columnTitles: prev.columnTitles.with(col, e.currentTarget.value)
-                                }))}/> : column}
+                                }))} /> : column}
                             {props.sheet.columnType(col) != 'raw' ?
                                 <div className={"nav-file-tag"}>
                                     {props.sheet.columnType(col)}
@@ -396,7 +396,7 @@ export function Ui(props: { sheet: Spreadsheet }) {
                             onResize: size => props.sheet.updateDocumentProperties(prev => ({
                                 columnWidths: prev.columnWidths.with(col, Math.max(size.width, MIN_COLUMN_WIDTH))
                             }))
-                        })}/>
+                        })} />
                     </div>)}
             </>
             <>
@@ -424,7 +424,7 @@ export function Ui(props: { sheet: Spreadsheet }) {
                             onResize: size => props.sheet.updateDocumentProperties(prev => ({
                                 rowHeights: prev.rowHeights.with(row, Math.max(size.height, MIN_ROW_HEIGHT))
                             }))
-                        })}/>
+                        })} />
                 </div>)}
             </>
 
diff --git a/src/table.tsx b/src/table.tsx
index 00a7ddd..f242c5a 100644
--- a/src/table.tsx
+++ b/src/table.tsx
@@ -13,7 +13,7 @@ interface TableProps {
     columnWidths: number[],
     rowHeights: number[],
     mouseUp: (row: number, col: number) => void
-    mouseDown: (row: number, col: number) => void
+    mouseDown: (row: number, col: number) => void,
 }
 
 export default function Table(props: TableProps) {
diff --git a/styles.css b/styles.css
index 6ac667a..13785b5 100644
--- a/styles.css
+++ b/styles.css
@@ -83,7 +83,6 @@ textarea {
 .table-container {
     grid-area: table;
 
-    background: var(--table-background);
     border-collapse: collapse;
     box-sizing: border-box;
 
@@ -147,7 +146,6 @@ textarea {
     overflow: hidden;
     white-space: nowrap;
 
-    background: var(--table-background);
     cursor: crosshair;
 
     display: flex;