feat: Add position argument to renderer methods.

Author: righ

e2e/basic.spec.ts

@@ -160,3 +160,18 @@ test('escape key', async ({ page }) => {
   expect(await a1.locator('.gs-cell-rendered').textContent()).toBe('Change1');
   expect(await largeEditor.inputValue()).toBe('Change1');
 });
+
+test('rendered cell', async ({ page }) => {
+  const largeEditor = page.locator('.gs-formula-bar textarea');
+  await page.goto('http://localhost:5233/iframe.html?id=basic--render-to-kanji&viewMode=story');
+  const c5 = page.locator("[data-address='C5']");
+  await c5.click();
+  expect(await c5.locator('.gs-cell-rendered').textContent()).toBe('五〇〇');
+  expect(await largeEditor.inputValue()).toBe('500');
+
+  // undefined renderer
+  const a9 = page.locator("[data-address='A9']");
+  await a9.click();
+  expect(await a9.locator('.gs-cell-rendered').textContent()).toBe('A9');
+  expect(await largeEditor.inputValue()).toBe('');
+});

packages/react-core/index.ts

@@ -30,6 +30,9 @@ export type {
   HeadersType,
   HistoryType,
   StoreType,
+  PointType,
+  AreaType,
+  ZoneType,
 } from './types';
 
 export type { Dispatcher } from './store';

packages/react-core/renderers/core.ts

@@ -18,17 +18,17 @@ type Props = {
 };
 
 export interface RendererMixinType {
-  render?(value: any, table: UserTable, writer?: WriterType): any;
+  render?(value: any, table: UserTable, writer?: WriterType, position?: PointType): any;
   stringify?(cell: CellType): string;
-  string?(value: string, table: UserTable, writer?: WriterType): any;
-  bool?(value: boolean, writer?: WriterType): any;
-  number?(value: number, writer?: WriterType): any;
-  date?(value: Date, writer?: WriterType): any;
-  timedelta?(value: TimeDelta, writer?: WriterType): any;
-  array?(value: any[], writer?: WriterType): any;
-  object?(value: any, writer?: WriterType): any;
-  null?(value: null, writer?: WriterType): any;
-  undefined?(value: undefined, writer?: WriterType): any;
+  string?(value: string, table: UserTable, writer?: WriterType, position?: PointType): any;
+  bool?(value: boolean, writer?: WriterType, position?: PointType): any;
+  number?(value: number, writer?: WriterType, position?: PointType): any;
+  date?(value: Date, writer?: WriterType, position?: PointType): any;
+  timedelta?(value: TimeDelta, writer?: WriterType, position?: PointType): any;
+  array?(value: any[], writer?: WriterType, position?: PointType): any;
+  object?(value: any, writer?: WriterType, position?: PointType): any;
+  null?(value: null, writer?: WriterType, position?: PointType): any;
+  undefined?(value: undefined, writer?: WriterType, position?: PointType): any;
 }
 
 export class Renderer implements RendererMixinType {
@@ -64,50 +64,50 @@ export class Renderer implements RendererMixinType {
     const address = p2a(point);
     const cache = table.getSolvedCache(address);
     const value = cache || table.getByPoint(point)?.value;
-    return this.render(value, table, writer);
+    return this.render(value, table, writer, point);
   }
 
-  public render(value: any, table: Table, writer?: WriterType): any {
+  public render(value: any, table: Table, writer?: WriterType, position?: PointType): any {
     if (this.condition && !this.condition(value)) {
       return this.complement ? this.complement(value) : this.stringify({ value });
     }
 
     switch (typeof value) {
       case 'object':
         if (value instanceof Date) {
-          return this.date(value, writer);
+          return this.date(value, writer, position);
         }
         if (value instanceof TimeDelta) {
-          return this.timedelta(value, writer);
+          return this.timedelta(value, writer, position);
         }
         if (value == null) {
-          return this.null(value, writer);
+          return this.null(value, writer, position);
         }
         if (value instanceof Table) {
-          return this.render(value.getByPoint({ y: value.top, x: value.left })?.value, table, writer);
+          return this.render(value.getByPoint({ y: value.top, x: value.left })?.value, table, writer, position);
         }
         if (Array.isArray(value)) {
-          return this.array(value, writer);
+          return this.array(value, writer, position);
         }
         if (value instanceof FormulaError) {
           throw value;
         }
-        return this.object(value, writer);
+        return this.object(value, writer, position);
       case 'string':
-        return this.string(value, table, writer);
+        return this.string(value, table, writer, position);
       case 'number':
-        return this.number(value, writer);
+        return this.number(value, writer, position);
       case 'boolean':
-        return this.bool(value, writer);
+        return this.bool(value, writer, position);
       case 'undefined':
-        return this.undefined(value, writer);
+        return this.undefined(value, writer, position);
       case 'function':
         return value() as string;
     }
     return '';
   }
 
-  stringify(cell: CellType): string {
+  stringify(cell: CellType, position?: PointType): string {
     const { value } = cell;
     if (value instanceof Date) {
       return this.date(value);
@@ -122,7 +122,7 @@ export class Renderer implements RendererMixinType {
     return value.toString();
   }
 
-  string(value: string, table: Table, writer?: WriterType): any {
+  string(value: string, table: Table, writer?: WriterType, position?: PointType): any {
     if (value[0] === "'") {
       return value.substring(1);
     }
@@ -145,41 +145,41 @@ export class Renderer implements RendererMixinType {
     return value;
   }
 
-  bool(value: boolean, writer?: WriterType): any {
+  bool(value: boolean, writer?: WriterType, position?: PointType): any {
     return value ? 'TRUE' : 'FALSE';
   }
 
-  number(value: number, writer?: WriterType): any {
+  number(value: number, writer?: WriterType, position?: PointType): any {
     if (isNaN(value)) {
       return 'NaN';
     }
     return value;
   }
 
-  date(value: Date, writer?: WriterType): any {
+  date(value: Date, writer?: WriterType, position?: PointType): any {
     if (value.getHours() + value.getMinutes() + value.getSeconds() === 0) {
       return dayjs(value).format(this.dateFormat);
     }
     return dayjs(value).format(this.datetimeFormat);
   }
 
-  timedelta(value: TimeDelta, writer?: WriterType): any {
+  timedelta(value: TimeDelta, writer?: WriterType, position?: PointType): any {
     return value.stringify(this.timeDeltaFormat);
   }
 
-  array(value: any[], writer?: WriterType): any {
+  array(value: any[], writer?: WriterType, position?: PointType): any {
     return value.map((v) => this.stringify({ value: v })).join(',');
   }
 
-  object(value: any, writer?: WriterType): any {
+  object(value: any, writer?: WriterType, position?: PointType): any {
     return JSON.stringify(value);
   }
 
-  null(value: any, writer?: WriterType): any {
+  null(value: any, writer?: WriterType, position?: PointType): any {
     return '';
   }
 
-  undefined(value: undefined, writer?: WriterType): any {
+  undefined(value: undefined, writer?: WriterType, position?: PointType): any {
     return '';
   }
 }

packages/react-right-menu/right-menu.tsx

@@ -36,8 +36,8 @@ export const SideMenuItems = () => {
   const { largeEditorRef, mainRef } = store;
 
   return (
-    <div 
-      className={`gs-rightmenu-main`} 
+    <div
+      className={`gs-rightmenu-main`}
       data-mode={store.mode}
       style={{
         maxHeight: (largeEditorRef.current?.clientHeight ?? 0) + (mainRef.current?.clientHeight ?? 0) + 2,

packages/storybook/stories/basic/renderer.stories.tsx

@@ -5,6 +5,8 @@ import {
   Renderer,
   RendererMixinType,
   CheckboxRendererMixin,
+  PointType,
+  p2a,
 } from '@gridsheet/react-core';
 
 export default {
@@ -25,6 +27,15 @@ const kanjiMap: { [s: string]: string } = {
   '.': '.',
 };
 
+const NullMixin: RendererMixinType = {
+  null(value: null, writer?: any, position?: PointType) {
+    return <span style={{ opacity: 0.3 }}>{p2a(position)}</span>;
+  },
+  undefined(value: null, writer?: any, position?: PointType) {
+    return <span style={{ opacity: 0.3 }}>{p2a(position)}</span>;
+  },
+};
+
 const KanjiRendererMixin: RendererMixinType = {
   number(value: number): string {
     const minus = value < 0;
@@ -68,7 +79,7 @@ export const RenderToKanji = () => {
         options={{
           renderers: {
             kanji: new Renderer({
-              mixins: [KanjiRendererMixin, CheckboxRendererMixin],
+              mixins: [KanjiRendererMixin, CheckboxRendererMixin, NullMixin],
             }),
           },
         }}

packages/storybook/stories/plugin/menu.stories.tsx

@@ -33,7 +33,6 @@ const Sheet = ({ numRows, numCols, defaultWidth, initialCells }: Props) => {
       </RightMenuComponent>
       <br />
 
-
       <RightMenuComponent>
         <GridSheet
           options={{
@@ -67,8 +66,6 @@ const Sheet = ({ numRows, numCols, defaultWidth, initialCells }: Props) => {
         />
       </RightMenuComponent>
       <br />
-
-
     </div>
   );
 };