From c6e3166eaf2d0d08136caf64da6e404b095cc829 Mon Sep 17 00:00:00 2001 From: revolist Date: Sat, 19 Sep 2020 14:43:55 +0300 Subject: [PATCH] type updates --- custom-elements.json | 10 +- src/components.d.ts | 39 +++--- src/components/data/columnService.ts | 10 +- src/components/data/readme.md | 2 +- src/components/data/revogr-data.tsx | 4 +- src/components/header/headerRenderer.tsx | 4 +- src/components/header/headerService.ts | 10 +- src/components/header/readme.md | 4 +- src/components/header/revogr-header.tsx | 6 +- src/components/overlay/editors/text.tsx | 2 +- src/components/overlay/readme.md | 2 +- src/components/overlay/revogr-edit.tsx | 2 +- .../overlay/revogr-overlay-selection.tsx | 9 +- src/components/revo-grid/readme.md | 30 ++--- src/components/revo-grid/revo-grid.tsx | 19 ++- src/components/viewport/revogr-viewport.tsx | 2 +- src/components/viewport/viewport.helpers.ts | 2 +- .../viewport/viewport.interfaces.ts | 3 +- src/index.html | 13 +- src/interfaces.d.ts | 124 ++++++++++++++---- src/services/column.data.provider.ts | 16 +-- src/services/dimension.provider.ts | 6 +- src/store/dataSource/data.store.ts | 4 +- src/utilsExternal/generate-data.d.ts | 2 +- 24 files changed, 194 insertions(+), 131 deletions(-) diff --git a/custom-elements.json b/custom-elements.json index 4aa0cc85..c8d98939 100644 --- a/custom-elements.json +++ b/custom-elements.json @@ -34,7 +34,15 @@ }, { "name": "theme", - "description": "Theme name" + "description": "Theme name", + "values": [ + { + "name": "default" + }, + { + "name": "material" + } + ] } ] }, diff --git a/src/components.d.ts b/src/components.d.ts index 86555785..a9a0eab6 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -17,7 +17,7 @@ export namespace Components { /** * Columns - defines an array of grid columns. Can be column or grouped column. */ - "columns": (RevoGrid.ColumnDataSchemaRegular|RevoGrid.ColumnDataSchemaGrouping)[]; + "columns": (RevoGrid.ColumnRegular|RevoGrid.ColumnGrouping)[]; /** * Custom editors register */ @@ -51,17 +51,17 @@ export namespace Components { */ "rowSize": number; /** - * Source: {[T in ColumnProp]: any} - defines main data source. Can be an Object or 2 dimensional array([][]); ColumnProp - string|number. It is reference for column mapping. + * Source - defines main data source. Can be an Object or 2 dimensional array([][]); Keys/indexes referenced from columns Prop */ "source": RevoGrid.DataType[]; /** * Theme name */ - "theme": string; + "theme": 'default'|'material'; } interface RevogrData { "canDrag": boolean; - "colData": RevoGrid.ColumnDataSchemaRegular[]; + "colData": RevoGrid.ColumnRegular[]; "cols": RevoGrid.VirtualPositionItem[]; /** * Static stores, not expected to change during component lifetime @@ -73,7 +73,7 @@ export namespace Components { "rows": RevoGrid.VirtualPositionItem[]; } interface RevogrEdit { - "column": RevoGrid.ColumnDataSchemaRegular|null; + "column": RevoGrid.ColumnRegular|null; "editCell": Edition.EditCell; /** * Custom editors register @@ -82,7 +82,7 @@ export namespace Components { } interface RevogrHeader { "canResize": boolean; - "colData": RevoGrid.ColumnDataSchemaRegular[]; + "colData": RevoGrid.ColumnRegular[]; "cols": RevoGrid.VirtualPositionItem[]; "dimensionCol": ObservableMap; "groupingDepth": number; @@ -100,7 +100,7 @@ export namespace Components { } interface RevogrOverlaySelection { "canDrag": boolean; - "colData": RevoGrid.ColumnDataSchemaRegular[]; + "colData": RevoGrid.ColumnRegular[]; /** * Static stores, not expected to change during component lifetime */ @@ -129,7 +129,7 @@ export namespace Components { "virtualSize": number; } interface RevogrViewport { - "columnStores": {[T in RevoGrid.DimensionCols]: ObservableMap>}; + "columnStores": {[T in RevoGrid.DimensionCols]: ObservableMap>}; "dimensions": {[T in RevoGrid.MultiDimensionType]: ObservableMap}; /** * Custom editors register @@ -224,7 +224,7 @@ declare namespace LocalJSX { /** * Columns - defines an array of grid columns. Can be column or grouped column. */ - "columns"?: (RevoGrid.ColumnDataSchemaRegular|RevoGrid.ColumnDataSchemaGrouping)[]; + "columns"?: (RevoGrid.ColumnRegular|RevoGrid.ColumnGrouping)[]; /** * Custom editors register */ @@ -284,17 +284,17 @@ declare namespace LocalJSX { */ "rowSize"?: number; /** - * Source: {[T in ColumnProp]: any} - defines main data source. Can be an Object or 2 dimensional array([][]); ColumnProp - string|number. It is reference for column mapping. + * Source - defines main data source. Can be an Object or 2 dimensional array([][]); Keys/indexes referenced from columns Prop */ "source"?: RevoGrid.DataType[]; /** * Theme name */ - "theme"?: string; + "theme"?: 'default'|'material'; } interface RevogrData { "canDrag"?: boolean; - "colData"?: RevoGrid.ColumnDataSchemaRegular[]; + "colData"?: RevoGrid.ColumnRegular[]; "cols"?: RevoGrid.VirtualPositionItem[]; /** * Static stores, not expected to change during component lifetime @@ -307,7 +307,7 @@ declare namespace LocalJSX { "rows"?: RevoGrid.VirtualPositionItem[]; } interface RevogrEdit { - "column"?: RevoGrid.ColumnDataSchemaRegular|null; + "column"?: RevoGrid.ColumnRegular|null; "editCell"?: Edition.EditCell; /** * Custom editors register @@ -321,12 +321,12 @@ declare namespace LocalJSX { } interface RevogrHeader { "canResize"?: boolean; - "colData"?: RevoGrid.ColumnDataSchemaRegular[]; + "colData"?: RevoGrid.ColumnRegular[]; "cols"?: RevoGrid.VirtualPositionItem[]; "dimensionCol"?: ObservableMap; "groupingDepth"?: number; "groups"?: Groups; - "onHeaderClick"?: (event: CustomEvent) => void; + "onHeaderClick"?: (event: CustomEvent) => void; "onHeaderResize"?: (event: CustomEvent) => void; "parent"?: string; } @@ -350,7 +350,7 @@ declare namespace LocalJSX { } interface RevogrOverlaySelection { "canDrag"?: boolean; - "colData"?: RevoGrid.ColumnDataSchemaRegular[]; + "colData"?: RevoGrid.ColumnRegular[]; /** * Static stores, not expected to change during component lifetime */ @@ -371,10 +371,7 @@ declare namespace LocalJSX { /** * Selection range changed */ - "onInitialSelectionChanged"?: (event: CustomEvent<{ - newRange: {start: Selection.Cell; end: Selection.Cell;}; - oldRange: {start: Selection.Cell; end: Selection.Cell;}; - }>) => void; + "onInitialSelectionChanged"?: (event: CustomEvent) => void; "onSetEdit"?: (event: CustomEvent) => void; "onUnregister"?: (event: CustomEvent) => void; "range"?: boolean; @@ -391,7 +388,7 @@ declare namespace LocalJSX { "virtualSize"?: number; } interface RevogrViewport { - "columnStores"?: {[T in RevoGrid.DimensionCols]: ObservableMap>}; + "columnStores"?: {[T in RevoGrid.DimensionCols]: ObservableMap>}; "dimensions"?: {[T in RevoGrid.MultiDimensionType]: ObservableMap}; /** * Custom editors register diff --git a/src/components/data/columnService.ts b/src/components/data/columnService.ts index fbac5d8b..202a070a 100644 --- a/src/components/data/columnService.ts +++ b/src/components/data/columnService.ts @@ -10,7 +10,7 @@ import DataSource = RevoGrid.DataSource; import DataType = RevoGrid.DataType; export interface ColumnServiceI { - columns: RevoGrid.ColumnDataSchemaRegular[]; + columns: RevoGrid.ColumnRegular[]; customRenderer(r: number, c: number): VNode | void; @@ -20,19 +20,19 @@ export interface ColumnServiceI { } export default class ColumnService implements ColumnServiceI { - private source: RevoGrid.ColumnDataSchemaRegular[] = []; + private source: RevoGrid.ColumnRegular[] = []; - get columns(): RevoGrid.ColumnDataSchemaRegular[] { + get columns(): RevoGrid.ColumnRegular[] { return this.source; } - set columns(source: RevoGrid.ColumnDataSchemaRegular[]) { + set columns(source: RevoGrid.ColumnRegular[]) { this.source = source; } constructor( private dataStore: ObservableMap>, - columns: RevoGrid.ColumnDataSchemaRegular[]) { + columns: RevoGrid.ColumnRegular[]) { this.source = columns; } diff --git a/src/components/data/readme.md b/src/components/data/readme.md index 9d4e1368..6a3a2755 100644 --- a/src/components/data/readme.md +++ b/src/components/data/readme.md @@ -10,7 +10,7 @@ | Property | Attribute | Description | Type | Default | | -------------- | ---------- | --------------------------------------------------------------- | --------------------------------------------------------- | ----------- | | `canDrag` | `can-drag` | | `boolean` | `undefined` | -| `colData` | -- | | `ColumnDataSchemaRegular[]` | `undefined` | +| `colData` | -- | | `ColumnRegular[]` | `undefined` | | `cols` | -- | | `VirtualPositionItem[]` | `undefined` | | `dataStore` | -- | Static stores, not expected to change during component lifetime | `ObservableMap>` | `undefined` | | `dimensionRow` | -- | | `ObservableMap` | `undefined` | diff --git a/src/components/data/revogr-data.tsx b/src/components/data/revogr-data.tsx index b489eb89..a4324435 100644 --- a/src/components/data/revogr-data.tsx +++ b/src/components/data/revogr-data.tsx @@ -17,7 +17,7 @@ export class RevogrData { private columnService: ColumnService; @Element() element!: HTMLStencilElement; - @Prop() colData: RevoGrid.ColumnDataSchemaRegular[]; + @Prop() colData: RevoGrid.ColumnRegular[]; @Prop() readonly: boolean; @Prop() range: boolean; @@ -33,7 +33,7 @@ export class RevogrData { @Event() dragStartCell: EventEmitter; - @Watch('colData') colChanged(newData: RevoGrid.ColumnDataSchemaRegular[]): void { + @Watch('colData') colChanged(newData: RevoGrid.ColumnRegular[]): void { this.columnService.columns = newData; } diff --git a/src/components/header/headerRenderer.tsx b/src/components/header/headerRenderer.tsx index a178610c..cf6a87fa 100644 --- a/src/components/header/headerRenderer.tsx +++ b/src/components/header/headerRenderer.tsx @@ -3,9 +3,9 @@ import { RevoGrid } from '../../interfaces'; import { DATA_COL, HEADER_CLASS } from '../../utils/consts'; type Props = { - data: RevoGrid.ColumnDataSchemaRegular; + data: RevoGrid.ColumnRegular; column: RevoGrid.VirtualPositionItem; - onClick(data: RevoGrid.ColumnDataSchemaRegular): void; + onClick(data: RevoGrid.ColumnRegular): void; } const HeaderRenderer = ({column, data, onClick}: Props, _children: VNode[]): VNode[] => { diff --git a/src/components/header/headerService.ts b/src/components/header/headerService.ts index d074dbc7..57068a09 100644 --- a/src/components/header/headerService.ts +++ b/src/components/header/headerService.ts @@ -8,14 +8,14 @@ interface Config { } export default class HeaderService { - private source: RevoGrid.ColumnDataSchemaRegular[] = []; - get columns(): RevoGrid.ColumnDataSchemaRegular[] { + private source: RevoGrid.ColumnRegular[] = []; + get columns(): RevoGrid.ColumnRegular[] { return this.source; } - set columns(source: RevoGrid.ColumnDataSchemaRegular[]) { + set columns(source: RevoGrid.ColumnRegular[]) { this.source = source; } - constructor(private target: string, columns: RevoGrid.ColumnDataSchemaRegular[], private config: Config) { + constructor(private target: string, columns: RevoGrid.ColumnRegular[], private config: Config) { this.columns = columns; this.resizeChange(config.canResize); } @@ -28,7 +28,7 @@ export default class HeaderService { edges: { bottom: false, right: true }, onend: event => { const index: number = parseInt(event.target.getAttribute(DATA_COL), 10); - const col: RevoGrid.ColumnDataSchemaRegular = this.columns[index]; + const col: RevoGrid.ColumnRegular = this.columns[index]; let width: number = event.rect.width; const minSize: number = col.minSize || MIN_COL_SIZE; if (width < minSize) { diff --git a/src/components/header/readme.md b/src/components/header/readme.md index 09504d77..0f7a6429 100644 --- a/src/components/header/readme.md +++ b/src/components/header/readme.md @@ -10,7 +10,7 @@ | Property | Attribute | Description | Type | Default | | --------------- | ---------------- | ----------- | --------------------------------------- | ----------- | | `canResize` | `can-resize` | | `boolean` | `undefined` | -| `colData` | -- | | `ColumnDataSchemaRegular[]` | `undefined` | +| `colData` | -- | | `ColumnRegular[]` | `undefined` | | `cols` | -- | | `VirtualPositionItem[]` | `undefined` | | `dimensionCol` | -- | | `ObservableMap` | `undefined` | | `groupingDepth` | `grouping-depth` | | `number` | `0` | @@ -22,7 +22,7 @@ | Event | Description | Type | | -------------- | ----------- | ------------------------------------------- | -| `headerClick` | | `CustomEvent` | +| `headerClick` | | `CustomEvent` | | `headerResize` | | `CustomEvent<{ [index: string]: number; }>` | diff --git a/src/components/header/revogr-header.tsx b/src/components/header/revogr-header.tsx index c8c9e7ba..610fa05b 100644 --- a/src/components/header/revogr-header.tsx +++ b/src/components/header/revogr-header.tsx @@ -24,14 +24,14 @@ export class RevogrHeaderComponent { @Prop() groups: Groups; @Prop() groupingDepth: number = 0; - @Event() headerClick: EventEmitter; + @Event() headerClick: EventEmitter; @Event() headerResize: EventEmitter; @Prop() canResize: boolean; - @Prop() colData: RevoGrid.ColumnDataSchemaRegular[]; + @Prop() colData: RevoGrid.ColumnRegular[]; private headerService: HeaderService; - @Watch('colData') colChanged(newVal: RevoGrid.ColumnDataSchemaRegular[]): void { + @Watch('colData') colChanged(newVal: RevoGrid.ColumnRegular[]): void { this.headerService.columns = newVal; } @Watch('canResize') onResizeChanged(newVal: boolean) { diff --git a/src/components/overlay/editors/text.tsx b/src/components/overlay/editors/text.tsx index 92c10d40..e58db550 100644 --- a/src/components/overlay/editors/text.tsx +++ b/src/components/overlay/editors/text.tsx @@ -9,7 +9,7 @@ export class TextEditor implements Edition.EditorBase { public editCell: Edition.EditCell|null = null; constructor( - public column: RevoGrid.ColumnDataSchemaRegular, + public column: RevoGrid.ColumnRegular, private editCallback?: (value: Edition.SaveData) => void ) {} diff --git a/src/components/overlay/readme.md b/src/components/overlay/readme.md index 50e26b9a..568fa2bb 100644 --- a/src/components/overlay/readme.md +++ b/src/components/overlay/readme.md @@ -10,7 +10,7 @@ | Property | Attribute | Description | Type | Default | | ---------------- | ---------- | --------------------------------------------------------------- | --------------------------------------------------------- | ----------- | | `canDrag` | `can-drag` | | `boolean` | `undefined` | -| `colData` | -- | | `ColumnDataSchemaRegular[]` | `undefined` | +| `colData` | -- | | `ColumnRegular[]` | `undefined` | | `dataStore` | -- | Static stores, not expected to change during component lifetime | `ObservableMap>` | `undefined` | | `dimensionCol` | -- | | `ObservableMap` | `undefined` | | `dimensionRow` | -- | | `ObservableMap` | `undefined` | diff --git a/src/components/overlay/revogr-edit.tsx b/src/components/overlay/revogr-edit.tsx index ab1ecc95..f31ea2ca 100644 --- a/src/components/overlay/revogr-edit.tsx +++ b/src/components/overlay/revogr-edit.tsx @@ -12,7 +12,7 @@ export class Edit { @Prop() editCell: Edition.EditCell; private currentEditor: Edition.EditorBase|null = null; - @Prop() column: RevoGrid.ColumnDataSchemaRegular|null; + @Prop() column: RevoGrid.ColumnRegular|null; /** Custom editors register */ @Prop() editor: Edition.EditorCtr|null; diff --git a/src/components/overlay/revogr-overlay-selection.tsx b/src/components/overlay/revogr-overlay-selection.tsx index 3895db4f..7c8db78b 100644 --- a/src/components/overlay/revogr-overlay-selection.tsx +++ b/src/components/overlay/revogr-overlay-selection.tsx @@ -49,13 +49,13 @@ export class OverlaySelection { /** Static stores, not expected to change during component lifetime */ @Prop() dataStore: ObservableMap>; - @Prop() colData: RevoGrid.ColumnDataSchemaRegular[]; + @Prop() colData: RevoGrid.ColumnRegular[]; /** Last cell position */ @Prop() lastCell: Selection.Cell; /** Custom editors register */ @Prop() editors: Edition.Editors; - @Watch('colData') colChanged(newData: RevoGrid.ColumnDataSchemaRegular[]): void { + @Watch('colData') colChanged(newData: RevoGrid.ColumnRegular[]): void { this.columnService.columns = newData; } @Watch('lastCell') lastCellChanged(cell: Cell): void { @@ -70,10 +70,7 @@ export class OverlaySelection { @Event({ bubbles: false }) unregister: EventEmitter; /** Selection range changed */ - @Event({ cancelable: true }) initialSelectionChanged: EventEmitter<{ - newRange: {start: Selection.Cell; end: Selection.Cell;}; - oldRange: {start: Selection.Cell; end: Selection.Cell;}; - }>; + @Event({ cancelable: true }) initialSelectionChanged: EventEmitter; /** Pointer left document, clear any active operation */ @Listen('mouseleave', { target: 'document' }) diff --git a/src/components/revo-grid/readme.md b/src/components/revo-grid/readme.md index 6ac7d665..58b48e9e 100644 --- a/src/components/revo-grid/readme.md +++ b/src/components/revo-grid/readme.md @@ -1,4 +1,4 @@ -# grid-component +# revo-grid @@ -7,20 +7,20 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ----------- | -| `colSize` | `col-size` | Indicates default column size. | `number` | `100` | -| `columns` | -- | Columns - defines an array of grid columns. Can be column or grouped column. | `(ColumnDataSchemaRegular \| ColumnDataSchemaGrouping)[]` | `[]` | -| `editors` | -- | Custom editors register | `{ [name: string]: EditorCtr; }` | `{}` | -| `frameSize` | `frame-size` | Defines how many rows/columns should be rendered outside visible area. | `number` | `0` | -| `pinnedBottomSource` | -- | Pinned bottom Source: {[T in ColumnProp]: any} - defines pinned bottom rows data source. | `DataType[]` | `[]` | -| `pinnedTopSource` | -- | Pinned top Source: {[T in ColumnProp]: any} - defines pinned top rows data source. | `DataType[]` | `[]` | -| `range` | `range` | When true, user can range selection. | `boolean` | `false` | -| `readonly` | `readonly` | When true, grid in read only mode. | `boolean` | `false` | -| `resize` | `resize` | When true, columns are resizable. | `boolean` | `false` | -| `rowSize` | `row-size` | Indicates default row size. | `number` | `42` | -| `source` | -- | Source: {[T in ColumnProp]: any} - defines main data source. Can be an Object or 2 dimensional array([][]); ColumnProp - string\|number. It is reference for column mapping. | `DataType[]` | `[]` | -| `theme` | `theme` | Theme name | `string` | `'default'` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ----------- | +| `colSize` | `col-size` | Indicates default column size. | `number` | `100` | +| `columns` | -- | Columns - defines an array of grid columns. Can be column or grouped column. | `(ColumnRegular \| ColumnGrouping)[]` | `[]` | +| `editors` | -- | Custom editors register | `{ [name: string]: EditorCtr; }` | `{}` | +| `frameSize` | `frame-size` | Defines how many rows/columns should be rendered outside visible area. | `number` | `0` | +| `pinnedBottomSource` | -- | Pinned bottom Source: {[T in ColumnProp]: any} - defines pinned bottom rows data source. | `DataType[]` | `[]` | +| `pinnedTopSource` | -- | Pinned top Source: {[T in ColumnProp]: any} - defines pinned top rows data source. | `DataType[]` | `[]` | +| `range` | `range` | When true, user can range selection. | `boolean` | `false` | +| `readonly` | `readonly` | When true, grid in read only mode. | `boolean` | `false` | +| `resize` | `resize` | When true, columns are resizable. | `boolean` | `false` | +| `rowSize` | `row-size` | Indicates default row size. | `number` | `42` | +| `source` | -- | Source - defines main data source. Can be an Object or 2 dimensional array([][]); Keys/indexes referenced from columns Prop | `DataType[]` | `[]` | +| `theme` | `theme` | Theme name | `"default" \| "material"` | `'default'` | ## Events diff --git a/src/components/revo-grid/revo-grid.tsx b/src/components/revo-grid/revo-grid.tsx index 480535f6..90a1973e 100644 --- a/src/components/revo-grid/revo-grid.tsx +++ b/src/components/revo-grid/revo-grid.tsx @@ -11,7 +11,7 @@ import {Edition, Selection, RevoGrid} from '../../interfaces'; type ColumnStores = { - [T in RevoGrid.DimensionCols]: ObservableMap>; + [T in RevoGrid.DimensionCols]: ObservableMap>; }; type RowStores = { [T in RevoGrid.DimensionRows]: ObservableMap>; @@ -30,7 +30,6 @@ type ViewportStores = { default: 'revo-grid.default.scss', material: 'revo-grid.material.scss', }, - assetsDirs: ['./nunito-font'] }) export class RevoGridComponent { // -------------------------------------------------------------------------- @@ -54,13 +53,14 @@ export class RevoGridComponent { /** When true, columns are resizable. */ @Prop() resize: boolean = false; /** - * Columns - defines an array of grid columns. Can be column or grouped column. + * Columns - defines an array of grid columns. + * Can be column or grouped column. */ - @Prop() columns: (RevoGrid.ColumnDataSchemaRegular|RevoGrid.ColumnDataSchemaGrouping)[] = []; + @Prop() columns: (RevoGrid.ColumnRegular|RevoGrid.ColumnGrouping)[] = []; /** - * Source: {[T in ColumnProp]: any} - defines main data source. + * Source - defines main data source. * Can be an Object or 2 dimensional array([][]); - * ColumnProp - string|number. It is reference for column mapping. + * Keys/indexes referenced from columns Prop */ @Prop() source: RevoGrid.DataType[] = []; /** Pinned top Source: {[T in ColumnProp]: any} - defines pinned top rows data source. */ @@ -73,7 +73,7 @@ export class RevoGridComponent { /** Theme name */ - @Prop() theme: string = 'default'; + @Prop() theme: 'default'|'material' = 'default'; // -------------------------------------------------------------------------- @@ -143,10 +143,7 @@ export class RevoGridComponent { } @Listen('initialSelectionChanged') - onRangeChanged(e: CustomEvent<{ - newRange: {start: Selection.Cell; end: Selection.Cell;}; - oldRange: {start: Selection.Cell; end: Selection.Cell;}; - }>): void { + onRangeChanged(e: CustomEvent): void { e.cancelBubble = true; const beforeRange = this.beforeRange.emit(e.detail); if (beforeRange.defaultPrevented) { diff --git a/src/components/viewport/revogr-viewport.tsx b/src/components/viewport/revogr-viewport.tsx index 1a42161e..50374fe6 100644 --- a/src/components/viewport/revogr-viewport.tsx +++ b/src/components/viewport/revogr-viewport.tsx @@ -25,7 +25,7 @@ export class RevogrViewport { @Event() setViewportSize: EventEmitter; @Element() element: Element; - @Prop() columnStores: {[T in RevoGrid.DimensionCols]: ObservableMap>}; + @Prop() columnStores: {[T in RevoGrid.DimensionCols]: ObservableMap>}; @Prop() rowStores: {[T in RevoGrid.DimensionRows]: ObservableMap>}; @Prop() dimensions: {[T in RevoGrid.MultiDimensionType]: ObservableMap}; @Prop() viewports: {[T in RevoGrid.MultiDimensionType]: ObservableMap}; diff --git a/src/components/viewport/viewport.helpers.ts b/src/components/viewport/viewport.helpers.ts index bd135012..90b62d22 100644 --- a/src/components/viewport/viewport.helpers.ts +++ b/src/components/viewport/viewport.helpers.ts @@ -22,7 +22,7 @@ export interface ViewportColumn { viewports: {[T in RevoGrid.MultiDimensionType]: ObservableMap}; dimensions: {[T in RevoGrid.MultiDimensionType]: ObservableMap}; rowStores: {[T in RevoGrid.DimensionRows]: ObservableMap>}; - colStore: ObservableMap>; + colStore: ObservableMap>; onHeaderResize?(e: CustomEvent): void; onResizeViewport?(e: CustomEvent): void; } diff --git a/src/components/viewport/viewport.interfaces.ts b/src/components/viewport/viewport.interfaces.ts index 5c29e4bb..e2e18ef7 100644 --- a/src/components/viewport/viewport.interfaces.ts +++ b/src/components/viewport/viewport.interfaces.ts @@ -14,7 +14,7 @@ declare namespace ViewportSpace { /** Viewport data position. Position provides connection between independent data stores and Selection store. */ position: Selection.Cell; - colData: RevoGrid.ColumnDataSchemaRegular[]; + colData: RevoGrid.ColumnRegular[]; dataStore: ObservableMap>; @@ -35,6 +35,7 @@ declare namespace ViewportSpace { canDrag?: boolean; style?: {[key: string]: string}; }; + type ViewportProps = { prop: Properties; diff --git a/src/index.html b/src/index.html index 5642852d..1fcc751d 100644 --- a/src/index.html +++ b/src/index.html @@ -15,17 +15,11 @@ text-align: center; } - .grid-component { + revo-grid { display: block; width: 100%; height: 100%; } - .grid-component2 { - display: block; - width: 100%; - height: 100%; - } - .inner-cell { width: 100%; @@ -59,7 +53,7 @@
- +
@@ -67,8 +61,7 @@ import {generateFakeDataObject} from "/utilsExternal/generate-data.js"; const data = generateFakeDataObject(1000, 100); - // const grid2 = document.querySelector('.grid-component2'); - const grid = document.querySelector('.grid-component'); + const grid = document.querySelector('revo-grid'); grid.columns = data.headers; grid.source = data.rows; diff --git a/src/interfaces.d.ts b/src/interfaces.d.ts index 49d5d970..02df5c48 100644 --- a/src/interfaces.d.ts +++ b/src/interfaces.d.ts @@ -1,72 +1,115 @@ import {VNode} from "@stencil/core"; export declare namespace RevoGrid { + + // -------------------------------------------------------------------------- + // + // Dimensions + // + // -------------------------------------------------------------------------- + type DimensionTypeRow = 'row'; type DimensionTypeCol = 'col'; + type DimensionColPin = 'colPinStart'|'colPinEnd'; type DimensionRowPin = 'rowPinStart'|'rowPinEnd'; + type DimensionType = DimensionTypeCol|DimensionTypeRow; + type DimensionCols = DimensionColPin|DimensionTypeCol; type DimensionRows = DimensionTypeRow|DimensionRowPin; - type MultiDimensionType = DimensionType|DimensionColPin|DimensionRowPin; - type ViewPortScrollEvent = { - dimension: DimensionType; - coordinate: number; - }; + type MultiDimensionType = DimensionCols|DimensionRows; - type ViewPortResizeEvent = { - dimension: DimensionType; - size: number; - }; + + // -------------------------------------------------------------------------- + // + // Columns + // + // -------------------------------------------------------------------------- type ColumnDataSchemaModel = { prop: ColumnProp; model: DataType; data: DataSource; - column: ColumnDataSchemaRegular; + column: ColumnRegular; }; type ReadOnlyFormat = boolean | ((row: number, col: number) => boolean); - type RowDrag = boolean| {(params: ColumnDataSchemaModel): boolean}; - interface ColumnDataSchemaBase { - name?: DataFormat; - readonly?: ReadOnlyFormat; - size?: number; - minSize?: number; - cellTemplate?: CellTemplateFunc; - rowDrag?: RowDrag; - columnTemplate?: ColumnTemplateFunc; - } - interface ColumnDataSchemaGrouping { + interface ColumnGrouping { children: ColumnDataSchema[]; name: DataFormat; } - interface ColumnDataSchemaRegular extends ColumnDataSchemaBase { + interface ColumnRegular { prop: ColumnProp; editor?: string; pin?: DimensionColPin; + name?: DataFormat; + readonly?: ReadOnlyFormat; + size?: number; + minSize?: number; + + rowDrag?: RowDrag; + cellTemplate?: CellTemplateFunc; + columnTemplate?: ColumnTemplateFunc; } - type ColumnDataSchema = ColumnDataSchemaGrouping|ColumnDataSchemaRegular; + type ColumnDataSchema = ColumnGrouping|ColumnRegular; + type ColumnData = ColumnDataSchema[]; type ColumnProp = string|number; type DataFormat = any; - interface HyperFunc { (tag: string, props?: object, value?: string): T; } + // -------------------------------------------------------------------------- + // + // Create Element function description + // + // -------------------------------------------------------------------------- + + interface HyperFunc { (tag: string, props?: object, value?: string): T; } type CellTemplateFunc = (createElement: HyperFunc, props: ColumnDataSchemaModel) => T; - type ColumnTemplateFunc = (createElement: HyperFunc, props: ColumnDataSchemaRegular) => T; - type ColumnData = ColumnDataSchema[]; + type ColumnTemplateFunc = (createElement: HyperFunc, props: ColumnRegular) => T; + + + // -------------------------------------------------------------------------- + // + // Row data source + // + // -------------------------------------------------------------------------- type DataType = { [T in ColumnProp]: DataFormat }; type DataSource = DataType[]; + + // -------------------------------------------------------------------------- + // + // Events + // + // -------------------------------------------------------------------------- + + type ViewPortResizeEvent = { + dimension: DimensionType; + size: number; + }; + + type ViewPortScrollEvent = { + dimension: DimensionType; + coordinate: number; + }; + + + // -------------------------------------------------------------------------- + // + // Viewport store + // + // -------------------------------------------------------------------------- + type Range = { start: number; end: number; @@ -94,6 +137,13 @@ export declare namespace RevoGrid { end: number; } + + // -------------------------------------------------------------------------- + // + // Dimension store + // + // -------------------------------------------------------------------------- + interface DimensionSettingsState { indexes: number[]; positionIndexes: number[]; @@ -107,6 +157,13 @@ export declare namespace RevoGrid { } + +// -------------------------------------------------------------------------- +// +// Selection space +// +// -------------------------------------------------------------------------- + export declare namespace Selection { type RowIndex = number; type ColIndex = number; @@ -126,6 +183,11 @@ export declare namespace Selection { y1: RowIndex; }; + type ChangedRange = { + newRange: { start: Selection.Cell; end: Selection.Cell; }; + oldRange: { start: Selection.Cell; end: Selection.Cell; }; + }; + interface Cell { x: ColIndex; y: RowIndex; @@ -139,6 +201,14 @@ export declare namespace Selection { }; } + + +// -------------------------------------------------------------------------- +// +// Edition space +// +// -------------------------------------------------------------------------- + export declare namespace Edition { import HyperFunc = RevoGrid.HyperFunc; type SaveData = string; @@ -163,7 +233,7 @@ export declare namespace Edition { interface EditorCtr { new ( - column: RevoGrid.ColumnDataSchemaRegular, + column: RevoGrid.ColumnRegular, editCallback?: (value: Edition.SaveData) => void, ): EditorBase; } diff --git a/src/services/column.data.provider.ts b/src/services/column.data.provider.ts index 80e4229d..4a32b74f 100644 --- a/src/services/column.data.provider.ts +++ b/src/services/column.data.provider.ts @@ -18,14 +18,14 @@ type ColumnGrouping = { }; type Columns = { sizes: RevoGrid.ViewSettingSizeProp; -} & {[T in RevoGrid.DimensionCols]: RevoGrid.ColumnDataSchemaRegular[];}; +} & {[T in RevoGrid.DimensionCols]: RevoGrid.ColumnRegular[];}; type ColumnCollection = { columns: Columns; columnGrouping: ColumnGrouping; maxLevel: number; }; -type ColumnDataSources = {[T in RevoGrid.DimensionCols]: DataStore}; +type ColumnDataSources = {[T in RevoGrid.DimensionCols]: DataStore}; export default class ColumnDataProvider { private readonly dataSources: ColumnDataSources; @@ -39,11 +39,11 @@ export default class ColumnDataProvider { }, {}) as ColumnDataSources; } - column(c: number, pin?: RevoGrid.DimensionColPin): RevoGrid.ColumnDataSchemaRegular|undefined { + column(c: number, pin?: RevoGrid.DimensionColPin): RevoGrid.ColumnRegular|undefined { return this.getColumn(c, pin || 'col'); } - getColumn(c: number, type: RevoGrid.DimensionCols): RevoGrid.ColumnDataSchemaRegular|undefined { + getColumn(c: number, type: RevoGrid.DimensionCols): RevoGrid.ColumnRegular|undefined { return this.dataSources[type].store.get('items')[c]; } @@ -71,8 +71,8 @@ export default class ColumnDataProvider { } } - private static getPinSizes(cols: RevoGrid.ColumnDataSchemaRegular[]): RevoGrid.ViewSettingSizeProp { - return reduce(cols, (res: RevoGrid.ViewSettingSizeProp, c: RevoGrid.ColumnDataSchemaRegular, i: number) => { + private static getPinSizes(cols: RevoGrid.ColumnRegular[]): RevoGrid.ViewSettingSizeProp { + return reduce(cols, (res: RevoGrid.ViewSettingSizeProp, c: RevoGrid.ColumnRegular, i: number) => { if (c.size) { res[i] = c.size; } @@ -81,8 +81,8 @@ export default class ColumnDataProvider { } - private static isColGrouping(colData: RevoGrid.ColumnDataSchemaGrouping | RevoGrid.ColumnDataSchemaRegular): colData is RevoGrid.ColumnDataSchemaGrouping { - return !!(colData as RevoGrid.ColumnDataSchemaGrouping).children; + private static isColGrouping(colData: RevoGrid.ColumnGrouping | RevoGrid.ColumnRegular): colData is RevoGrid.ColumnGrouping { + return !!(colData as RevoGrid.ColumnGrouping).children; } // columns processing diff --git a/src/services/dimension.provider.ts b/src/services/dimension.provider.ts index 0e3c9d4d..d927d318 100644 --- a/src/services/dimension.provider.ts +++ b/src/services/dimension.provider.ts @@ -7,7 +7,7 @@ import {RevoGrid} from "../interfaces"; type Columns = { sizes: RevoGrid.ViewSettingSizeProp; -} & {[T in RevoGrid.DimensionCols]: RevoGrid.ColumnDataSchemaRegular[];}; +} & {[T in RevoGrid.DimensionCols]: RevoGrid.ColumnRegular[];}; type DimensionStores = {[T in RevoGrid.MultiDimensionType]: DimensionStore}; export default class DimensionProvider { public readonly stores: DimensionStores; @@ -23,13 +23,13 @@ export default class DimensionProvider { this.viewports.stores[dimensionType].setViewPortDimension(sizes); } - setRealSize(items: RevoGrid.ColumnDataSchemaRegular[]|RevoGrid.DataType[], dimensionType: RevoGrid.MultiDimensionType): void { + setRealSize(items: RevoGrid.ColumnRegular[]|RevoGrid.DataType[], dimensionType: RevoGrid.MultiDimensionType): void { const realCount: number = items.length; this.viewports.stores[dimensionType].setViewport({ realCount }); this.stores[dimensionType].setRealSize(realCount); } - setPins(items: RevoGrid.ColumnDataSchemaRegular[]|RevoGrid.DataType[], dimensionType: RevoGrid.MultiDimensionType, pinSizes?: RevoGrid.ViewSettingSizeProp): void { + setPins(items: RevoGrid.ColumnRegular[]|RevoGrid.DataType[], dimensionType: RevoGrid.MultiDimensionType, pinSizes?: RevoGrid.ViewSettingSizeProp): void { const realCount = items.length; this.stores[dimensionType].setRealSize(realCount); this.stores[dimensionType].setDimensionSize(pinSizes); diff --git a/src/store/dataSource/data.store.ts b/src/store/dataSource/data.store.ts index 93f42dbf..811da185 100644 --- a/src/store/dataSource/data.store.ts +++ b/src/store/dataSource/data.store.ts @@ -7,7 +7,7 @@ import {createStore, ObservableMap} from '@stencil/store'; import {setStore} from '../../utils/store.utils'; import {RevoGrid} from "../../interfaces"; import DataType = RevoGrid.DataType; -import ColumnDataSchemaRegular = RevoGrid.ColumnDataSchemaRegular; +import ColumnRegular = RevoGrid.ColumnRegular; import DimensionRows = RevoGrid.DimensionRows; import DimensionCols = RevoGrid.DimensionCols; @@ -16,7 +16,7 @@ export type Group = { ids: (string|number)[]; } export type Groups = {[level: number]: Group[]}; -export type GDataType = DataType|ColumnDataSchemaRegular; +export type GDataType = DataType|ColumnRegular; export type GDimension = DimensionRows|DimensionCols; export type DataSourceState = { items: T[]; diff --git a/src/utilsExternal/generate-data.d.ts b/src/utilsExternal/generate-data.d.ts index 65bb2489..8cf08048 100644 --- a/src/utilsExternal/generate-data.d.ts +++ b/src/utilsExternal/generate-data.d.ts @@ -2,7 +2,7 @@ import {RevoGrid} from "../interfaces"; type FakeData = { rows: T[], - headers: RevoGrid.ColumnDataSchemaRegular[] + headers: RevoGrid.ColumnRegular[] }; type Data = {[key: string]: string}[]; declare var generateFakeDataObject: { (rowsNumber:number, colsNumber: number): FakeData<{[key: string]: string}>};