react-graph-grid 0.0.0 → 0.0.1

package/README.md

@@ -1,16 +1,3 @@
-# React + Vite
+# react-graph-grid
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## React Compiler
-
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+A React package containing a grid that can communicate with other grids through a connection graph

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "react-graph-grid",
   "author": "Mikhail Razumtsev",
-  "description": "a React package containing a grid that can communicate with other grids through a connection graph",
+  "description": "A React package containing a grid that can communicate with other grids through a connection graph",
   "private": false,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite --port 4000",

package/src/Dropdown.jsx

@@ -170,7 +170,7 @@ export class DropdownClass extends ModalClass {
                                     style={{ listStyleType: 'none', display: 'flex', flexWrap: 'nowrap' }}
                                     onClick={(e) => dd.onItemClick(e, 'append')}
                                 >
-                                    ${dd.translate('more...')}
+                                    ${dd.translate('more') + '...'}
                                 </li>
                             </ul>
                             : <></>

package/src/FieldEdit.jsx

@@ -0,0 +1,357 @@
+/* eslint-disable no-mixed-operators */
+import { useState, useEffect, useRef, useLayoutEffect } from 'react';
+import { BaseComponent } from './Base';
+import { Modal } from './Modal';
+import { Images } from './Themes/Images';
+import { GridFE } from './GridFE';
+export function FieldEdit(props) {
+    let fe = null;
+
+    const [feState, setState] = useState({ fe: fe, ind: 0 });
+
+    fe = feState.fe;
+    if (!fe) {
+        if (props.findFieldEdit) {
+            fe = props.findFieldEdit();
+        }
+        fe = fe || new FieldEditClass(props);
+    }
+
+    fe.textareaRef = useRef(null);
+
+    fe.column = props.column;
+
+    if (fe.value == null) {
+        fe.value = props.value || '';
+        fe.text = props.text || '';
+    }
+
+    fe.getFilters = props.getFilters;
+
+    fe.multi = props.multi;
+
+    fe.id = props.keyPref || FieldEditClass._seq++;
+
+    fe.disabled = props.disabled;
+
+    BaseComponent.theme = BaseComponent.theme || {};
+
+    fe.buttonClass = props.buttonClass || BaseComponent.theme.filterButtonClass || '';
+    fe.inputClass = props.inputClass || BaseComponent.theme.inputClass || '';
+    fe.inputClassLG = props.inputClassLG || BaseComponent.theme.inputClassLG || '';
+    fe.clearButtonClass = props.clearButtonClass || BaseComponent.theme.clearButtonClass || '';
+    fe.selectClass = props.selectClass || BaseComponent.theme.selectClass || '';
+    fe.divContainerClass = props.divContainerClass || '';
+
+    fe.datePickerDateFormat = props.datePickerDateFormat || 'dd.MM.yyyy';
+
+    fe.w = props.w;
+    fe.maxW = props.maxW;
+    fe.h = fe.h || props.h || '1.6em';
+    fe.textareaH = props.textareaH || '2.1em';
+
+    if (props.init) {
+        props.init(fe);
+    }
+
+    fe.refreshState = function () {
+        setState({ fe: fe, ind: fe.stateind++ });
+    }
+
+    useEffect(() => {
+        return () => {
+            if (fe._resizeObserver && fe._resizeObservedObj) {
+                fe._resizeObserver.unobserve(fe._resizeObservedObj);
+            }
+        };
+    }, [fe])
+
+    useLayoutEffect(() => {
+        if (fe.textareaRef.current && fe._refocus) {
+            fe.textareaRef.current.focus();
+            if (fe.selectionStart > 0) {
+                fe.textareaRef.current.setSelectionRange(fe.selectionStart, fe.selectionStart);
+            }
+            fe._refocus = false;
+        }
+
+        const handleResize = () => {
+            //console.log('Textarea resized. New height:', fe.textareaRef.current.offsetHeight);
+            if (fe.textareaRef.current) {
+                fe.h = fe.textareaRef.current.offsetHeight;
+            }
+        };
+
+        if (fe.textareaRef.current && fe._resizeObserved !== fe.textareaRef.current) {
+            fe._resizeObserver = new ResizeObserver(handleResize);
+
+            if (fe._resizeObservedObj) {
+                fe._resizeObserver.unobserve(fe._resizeObservedObj);
+            }
+
+            fe._resizeObservedObj = fe.textareaRef.current;
+
+            fe._resizeObserver.observe(fe.textareaRef.current);
+        }
+    });
+
+    return (fe.render());
+}
+
+// ==================================================================================================================================================================
+export class FieldEditClass extends BaseComponent {
+
+    constructor(props) {
+        super(props);
+
+        const fe = this;
+
+        fe.stateind = 0;
+        fe.id = props.keyPref || FieldEditClass._seq++;
+
+        fe.onChange = props.onChange || (() => { });
+
+        fe.selectionStart = 0;
+
+        fe.large = props.large;
+
+        // просто разметка 'span 2' etc.
+        fe.gridColumn = props.gridColumn;
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    static _seq = 0;
+    static _autoFocusColumn;
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    render() {
+        const fe = this;
+
+        const isLookup = fe.column.type === 'lookup';
+        const isReadonly = fe.column.readonly;
+        const hasValue = fe.value != null && fe.value !== '';
+        const noClear = fe.column.required || fe.column.readonly || !fe.multi && !hasValue;
+
+        const needFocus = FieldEditClass._autoFocusColumn === fe.column;
+        if (needFocus) {
+            //FieldEditClass._autoFocusColumn = null;
+        }
+
+        return (
+            <>
+                <div
+                    key={`fieldEditDiv_${fe.id}_${fe.column.id}_`}
+                    className={fe.divContainerClass ? fe.divContainerClass : fe.large ? 'field-edit' : isLookup && !isReadonly ? 'grid-cell-lookup' : 'grid-cell-edit'}
+                    style={{
+                        border: 'none',
+                        height: !fe.inputClass ? fe.h : '',
+                        width: '100%',
+                        display: 'grid',
+                        gridColumn: fe.gridColumn || '',
+                        gridTemplateColumns: fe.large ? 'calc(100% - 4.6em) 2.2em 2.2em' : 'calc(100% - 2.8em) 1.4em 1.4em',
+                        maxWidth: fe.maxW ? fe.maxW : '',
+                        minHeight: fe.large ? '2.5em' : '',
+                        columnGap: fe.large ? '0.2em' : '',
+                        alignItems: 'center',
+                        justifyItems: 'center',
+                    }}
+                >
+                    {
+                        isLookup && !isReadonly ?
+                            <>
+                                <input
+                                    key={`fieldLookupTitle_${fe.id}_${fe.column.id}_`}
+                                    style={{
+                                        width: '100%',
+                                        gridColumn: noClear ? !fe.comboboxValues ? 'span 2' : 'span 3' : 'span 1',
+                                        overflowX: 'hidden',
+                                        height: !fe.large ? '1.7em' : '2.2em',
+                                        minHeight: !fe.inputClass ? fe.textareaH : fe.h,
+                                        boxSizing: 'border-box',
+                                    }}
+                                    disabled={true}
+                                    className={fe.large ? fe.inputClassLG : fe.inputClass || ''}
+                                    value={!hasValue ? '' : fe.text != null && fe.text !== '' ? fe.text : fe.value}
+                                >
+                                </input>
+                                <button
+                                    key={`fieldLookupButton_${fe.id}_${fe.column.id}_`}
+                                    className={`${fe.large ? 'graph-filter-button' : 'grid-cell-button'} ${fe.clearButtonClass}`}
+                                    style={{ width: !fe.large ? '1.6em' : '', height: !fe.large ? '1.6em' : '' }}
+                                    onClick={(e) => {
+                                        fe.openLookupField(e);
+                                    }}
+                                    disabled={fe.disabled}
+                                >
+                                    {!fe.large ? '...' : Images.images.filterSelect()}
+                                </button>
+                            </>
+                            : //autoFocus={needFocus}
+                            <textarea
+                                key={`fieldTextarea_${fe.id}_${fe.column.id}_`}
+                                ref={fe.textareaRef}
+                                className={`${fe.large ? fe.inputClassLG : fe.inputClass}`}
+                                value={isLookup ? fe.text : fe.value || ''}
+                                style={{
+                                    width: noClear ? 'calc(100% - 2px)' : '100%',
+                                    minHeight: !fe.inputClass ? fe.textareaH : fe.minH,
+                                    height: fe.h ? fe.h : !fe.large ? '1.7em' : '2.2em',
+                                    padding: '0',
+                                    boxSizing: 'border-box',
+                                    gridColumn: noClear ? 'span 3' : 'span 2',
+                                    resize: 'vertical',
+                                    overflowX: 'hidden',
+                                }}
+                                onChange={(e) => {
+                                    e.value = e.text = e.target.value;
+                                    fe.value = fe.text = e.target.value;
+                                    e.fe = fe;
+                                    FieldEditClass._autoFocusColumn = fe.column;
+
+                                    fe.selectionStart = e.target.selectionStart;
+                                    fe._refocus = true;
+
+                                    fe.onChange(e);
+                                    fe.refreshState();
+                                }}
+                                disabled={fe.disabled || fe.column.readonly}
+                            >
+                            </textarea>
+                    }
+                    {
+                        noClear || fe.column.readonly ? <></>
+                            :
+                            <button
+                                key={`fieldClearButton_${fe.id}_${fe.column.id}_`}
+                                className={`${fe.large ? 'graph-filter-clear' : 'grid-cell-button'} ${fe.clearButtonClass || ''}`}
+                                style={{ width: !fe.large ? '1.6em' : '', height: !fe.large ? '1.6em' : '' }}
+                                onClick={(e) => {
+                                    e.value = e.text = '';
+                                    fe.value = fe.text = '';
+                                    e.fe = fe;
+                                    fe.onChange(e);
+                                    fe.refreshState();
+                                }}
+                                disabled={fe.disabled}
+                            >
+                                {!fe.large ? '×' : Images.images.filterClear()}
+                            </button>
+
+                    }
+                </div >
+                {
+                    fe.lookupIsShowing ?
+                        <Modal
+                            title={fe.column.title}
+                            renderContent={(wnd) => { return fe.renderLookupGrid(wnd); }}
+                            pos={fe.popupPos}
+                            onClose={(e) => {
+                                if (fe.grid) {
+                                    delete fe.grid.value;
+                                }
+                                fe.closeLookupField();
+                                fe.refreshState();
+                            }}
+                        >
+                        </Modal>
+                        :
+                        <></>
+                }
+            </>
+        )
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    renderLookupGrid(wnd) {
+        const fe = this;
+
+        return (
+            <GridFE
+                getRows={fe.column.getRows}
+                keyField={fe.column.refKeyField}
+                nameField={fe.column.refNameField}
+                activeRow={fe.value}
+                multi={fe.multi}
+                level={fe.level + 1}
+                findGrid={() => { return fe.grid; }}
+                onSelectValue={(e) => {
+                    fe._selectedOptions = e.values || [];
+                    
+                    fe.value = e.value;
+                    fe.text = e.text;
+
+                    e.fe = fe;
+
+                    fe.closeLookupField();
+                    fe.onChange(e);
+                    fe.refreshState();
+                }}
+                init={(lookupGrid) => {
+                    if (!lookupGrid.value || fe.value && fe.value !== lookupGrid.value) {
+                        fe.onLookupGridInit(lookupGrid);
+
+                        delete lookupGrid._selectedRows;
+                        if (fe.value) {
+                            lookupGrid._selectedRowsDict = {};
+                            for (let opt of fe._selectedOptions) {
+                                let fakeRow = {};
+                                fakeRow[fe.column.refKeyField] = opt.value;
+                                fakeRow[fe.column.refNameField] = opt.label;
+                                lookupGrid._selectedRowsDict[opt.value] = fakeRow;
+                            }
+                        }
+                    }
+
+                    lookupGrid.closeSelfWnd = () => {
+                        fe.closeLookupField();
+                        fe.refreshState();
+                    };
+                }}
+                onClose={() => {
+                    fe.closeLookupField();
+                }}
+            >
+            </GridFE>
+        );
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    closeLookupField() {
+        const fe = this;
+        fe.lookupIsShowing = false;
+        if (fe.ownerGrid) {
+            fe.ownerGrid._clicksDisabled = false;
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    openLookupField(e) {
+        const fe = this;
+
+        const shift = (fe.level + 1) * 20;
+
+        fe.popupPos = fe.popupPos || { x: 100 + shift, y: 100 + shift, w: 1700, h: 900 };
+
+        fe.lookupIsShowing = true;
+        if (fe.ownerGrid) {
+            fe.ownerGrid._clicksDisabled = true;
+        }
+
+        fe.refreshState();
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    onLookupGridInit(grid) {
+        const fe = this;
+        fe.grid = grid;
+        grid.value = fe.value;
+        grid.getSelectedRowIndex();
+
+        if (fe.getFilters) {
+            grid.collectFilters = fe.getFilters;
+        }
+
+        if (grid._lookupPrepared) return;
+
+        grid._lookupPrepared = true;
+
+        grid.visible = true;
+        grid.title = fe.column.title;
+        grid.isSelecting = true;
+    };
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+}

package/src/Graph.jsx

@@ -128,9 +128,6 @@ export class GraphClass {
 
         const graph = this;
 
-        // выставляем у графа признак "пущена волна"
-        graph._isMakingWave = true;
-
         if (e.prepared == null) {
             if (e.waveType == null) {
                 e.waveType = WaveType.value;
@@ -146,6 +143,9 @@ export class GraphClass {
             e.prepared = true;
         }
 
+        // выставляем у графа признак "пущена волна"
+        graph._isMakingWave = true;
+
         // если запущена новая однотипная волна, то нет смысла продолжать текущую
         if (graph.lastWaveInds[e.waveType] != null && e.waveInd < graph.lastWaveInds[e.waveType]) return;
 
@@ -163,13 +163,20 @@ export class GraphClass {
 
         if (graph.lastWaveInds[e.waveType] == e.waveInd && e.nodes.length <= 0) {
             graph._isMakingWave = false;
+
+            if (e.afterAllVisited) {
+                e.afterAllVisited();
+            }
             return;
         }
 
         let i = 0;
         while (i < e.nodes.length) {
             let node = e.nodes[i];
-            node._lastWaveInd = e.waveInd;
+            if (node._lastWaveInd == e.waveInd) {
+                i++;
+                continue;
+            }
 
             // если текущий узел не должен посещаться текущей волной
             if (node.skipOnWaveVisit && node.skipOnWaveVisit(e)) {
@@ -187,19 +194,41 @@ export class GraphClass {
                 node.visited = true;
             }
 
-            e.nodes.splice(i, 1);
+            node._lastWaveInd = e.waveInd;
 
             if (node.visitByWave) {
+                i++;
                 node.visitByWave(e).then(() => {
                     graph.addChildrenToWave([node], e);
 
+                    const index = e.nodes.indexOf(node);
+
+                    if (index > -1) {
+                        e.nodes.splice(index, 1);
+                    }
+
                     graph.triggerWave(e);
 
                     if (graph.lastWaveInds[e.waveType] == e.waveInd && e.nodes.length <= 0) {
                         graph._isMakingWave = false;
+
+                        if (e.afterAllVisited) {
+                            e.afterAllVisited();
+                        }
                     }
                 });
             }
+            else {
+                e.nodes.splice(i, 1);
+
+                if (graph.lastWaveInds[e.waveType] == e.waveInd && e.nodes.length <= 0) {
+                    graph._isMakingWave = false;
+
+                    if (e.afterAllVisited) {
+                        e.afterAllVisited();
+                    }
+                }
+            }
         }
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------

package/src/Grid.jsx

@@ -85,7 +85,6 @@ export class GridClass extends BaseComponent {
         grid.keyField = props.keyField;
         grid.nameField = props.nameField;
 
-        //grid._selectedRowsDict = {};
         if (props.renderCell) {
             grid.defaultRenderCell = grid.renderCell;
             grid.renderCell = props.renderCell;
@@ -164,6 +163,7 @@ export class GridClass extends BaseComponent {
             rows => {
                 grid.rows = rows;
                 grid.afterGetRows();
+                grid._waitingRows = false;
                 grid.refreshState();
             }
         ).finally(() => {
@@ -420,11 +420,19 @@ export class GridClass extends BaseComponent {
     renderCell(grid, col, row) {
         let val = row[col.name];
 
-        if (col.type === 'date' && val) {
-            val = grid.formatDate(val, grid.dateFormat);
+        if (col.type === 'date' && val != null) {
+            try {
+                val = grid.formatDate(val, grid.dateFormat);
+            }
+            catch {
+            }
         }
-        else if (col.type === 'datetime' && val) {
-            val = grid.formatDate(val, grid.dateTimeFormat);
+        else if (col.type === 'datetime' && val != null) {
+            try {
+                val = grid.formatDate(val, grid.dateTimeFormat);
+            }
+            catch {
+            }
         }
 
         if (col.allowVerticalResize) {

package/src/GridDB.jsx

@@ -690,7 +690,7 @@ export class GridDBClass extends GridPKClass {
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     setPocketImage() {
         const grid = this;
-        if (!grid.multi) return;
+        if (!grid.multi || !grid.pagerButtonsDict) return;
 
         const pocket = grid.pagerButtonsDict['pocket'];
         if (!pocket) return;