Merge pull request #277 from quadratichq/improve-cell-type-outlines

Improve Cell Type Outlines
quadratichq · Feb 16, 2023 · 3b4ee15 · 3b4ee15
2 parents 0e4cf91 + 87dfe28
commit 3b4ee15
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 19 deletions.
diff --git a/src/grid/actions/gridFile/GridFileSchema.ts b/src/grid/actions/gridFile/GridFileSchema.ts
@@ -14,4 +14,5 @@ export interface GridFileSchemaV1 {
   borders: Border[];
   render_dependency: Dependency[];
   cell_dependency: string;
+  version: '1.0';
 }
diff --git a/src/grid/sheet/Sheet.ts b/src/grid/sheet/Sheet.ts
@@ -53,6 +53,7 @@ export class Sheet {
       borders: this.borders.getArray(),
       render_dependency: this.render_dependency.save(),
       cell_dependency: this.cell_dependency.exportToString(),
+      version: '1.0',
     };
   }
 

diff --git a/src/gridGL/UI/cells/Cells.ts b/src/gridGL/UI/cells/Cells.ts
@@ -156,7 +156,7 @@ export class Cells extends Container {
         this.cellsBorder.draw({ ...entry, x, y, width, height });
       }
       if (this.app.settings.showCellTypeOutlines && entry.cell?.array_cells) {
-        this.cellsArray.draw(entry.cell.array_cells, x, y, width, height);
+        this.cellsArray.draw(entry.cell.array_cells, x, y, width, height, entry.cell.type);
       }
 
       if (hasContent) {

diff --git a/src/gridGL/UI/cells/CellsArray.ts b/src/gridGL/UI/cells/CellsArray.ts
@@ -1,4 +1,5 @@
 import { Container, Sprite, Texture } from 'pixi.js';
+import { CellTypes } from '../../../grid/sheet/gridTypes';
 import { colors } from '../../../theme/colors';
 import { PixiApp } from '../../pixiApp/PixiApp';
 import { drawBorder } from './drawBorder';
@@ -28,7 +29,7 @@ export class CellsArray extends Container {
     return this.addChild(new Sprite(Texture.WHITE));
   };
 
-  draw(cellArray: number[][], x: number, y: number, width: number, height: number): void {
+  draw(cellArray: number[][], x: number, y: number, width: number, height: number, type: CellTypes): void {
     const { gridOffsets } = this.app.sheet;
 
     // calculate array cells outline size
@@ -43,8 +44,13 @@ export class CellsArray extends Container {
     }
 
     drawBorder({
-      tint: colors.cellColorUserPython,
-      alpha: 0.25,
+      tint:
+        type === 'PYTHON'
+          ? colors.cellColorUserPython
+          : type === 'FORMULA'
+          ? colors.cellColorUserFormula
+          : colors.independence,
+      alpha: 0.5,
       x,
       y,
       width: xEnd - x,
@@ -56,19 +62,19 @@ export class CellsArray extends Container {
       right: true,
     });
 
-    drawBorder({
-      tint: colors.cellColorUserPython,
-      alpha: 0.25,
-      x,
-      y,
-      width,
-      height,
-      getSprite: this.getSprite,
-      top: true,
-      left: true,
-      bottom: true,
-      right: true,
-    });
+    // drawBorder({
+    //   tint: colors.cellColorUserPython,
+    //   alpha: 0.25,
+    //   x,
+    //   y,
+    //   width,
+    //   height,
+    //   getSprite: this.getSprite,
+    //   top: true,
+    //   left: true,
+    //   bottom: true,
+    //   right: true,
+    // });
   }
 
   debugShowCachedCounts(): void {

diff --git a/src/gridGL/UI/cells/CellsBorder.ts b/src/gridGL/UI/cells/CellsBorder.ts
@@ -71,13 +71,13 @@ export class CellsBorder extends Container {
     if (input.cell && this.app.settings.showCellTypeOutlines) {
       // Change outline color based on cell type
       if (input.cell.type === 'TEXT') {
-        drawInputBorder(input, colors.cellColorUserText, 0.75);
+        // drawInputBorder(input, colors.cellColorUserText, 0.75);
       } else if (input.cell.type === 'PYTHON') {
         drawInputBorder(input, colors.cellColorUserPython, 0.75);
       } else if (input.cell.type === 'FORMULA') {
         drawInputBorder(input, colors.cellColorUserFormula, 0.75);
       } else if (input.cell.type === 'COMPUTED') {
-        drawInputBorder(input, colors.independence, 0.75);
+        // drawInputBorder(input, colors.independence, 0.75);
       }
     }
   }

diff --git a/src/quadratic/example_grid.ts b/src/quadratic/example_grid.ts
@@ -1,6 +1,7 @@
 import { GridFileSchemaV1 } from '../grid/actions/gridFile/GridFileSchema';
 
 export const example_grid: GridFileSchemaV1 = {
+  version: '1.0',
   columns: [{ id: 0, size: 275.9100338070991 }],
   rows: [],
   cells: [