VisActor / VTable

VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.
https://visactor.io/vtable
MIT License
1.81k stars 170 forks source link

[Bug] 双击列头编辑 和 拖拽列头 交互冲突 #2927

Open skie1997 opened 4 days ago

skie1997 commented 4 days ago

Version

1.11.2-alpha.3

Link to Minimal Reproduction

vscreen

Steps to Reproduce

react demo

// import * as ReactVTable from '@visactor/react-vtable';
const input_editor = new VTable_editors.InputEditor();
VTable.register.editor('input-editor', input_editor);
VTable.register.icon('dragReorder', {
  type: 'svg',
  svg: '<svg t="1730689590784" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2460" width="200" height="200"><path d="M362.666667 192m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#666666" p-id="2461"></path><path d="M661.333333 192m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#666666" p-id="2462"></path><path d="M362.666667 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#666666" p-id="2463"></path><path d="M661.333333 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#666666" p-id="2464"></path><path d="M362.666667 832m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#666666" p-id="2465"></path><path d="M661.333333 832m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#666666" p-id="2466"></path></svg>',
  width: 10,
  height: 10,
  name: 'dragReorder',
  positionType: VTable.TYPES.IconPosition.left,
  marginRight: 0,
  funcType: VTable.TYPES.IconFuncTypeEnum.dragReorder,
  hover: {
    width: 10,
    height: 10,
    bgColor: 'rgba(101, 117, 168, 0.1)'
  },
  cursor: 'move'
});

VTable.register.icon('corner', {
  type: 'svg',
  svg: '<svg t="1731651606379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3370" fill="#959da5"><path d="M65.669652 957.453375 955.946045 957.453375 955.946045 67.176982Z" p-id="3371"></path></svg>',
  width: 12,
  height: 12,
  name: 'corner',
  positionType: VTable.TYPES.IconPosition.right,
  visibleTime: 'always',
  cursor: 'pointer'
});
const option = {
    "columns": [
        {
            "title": "Province",
            "field": 0,
            "width": 98,
            "headerEditor": "input-editor"
        },
        {
            "title": "Sales",
            "field": 1,
            "width": 98,
            "headerEditor": "input-editor"
        },
        {
            "title": "Profit",
            "field": 2,
            "width": 98,
            "headerEditor": "input-editor"
        }
    ],
    "records": [
        [
            "河北",
            20,
            60
        ],
        [
            "山西",
            50,
            30
        ],
        [
            "内蒙古",
            40,
            50
        ],
        [
            "辽宁",
            50,
            10
        ],
        [
            "吉林",
            35,
            20
        ]
    ],
    "dragHeaderMode": "column",
    "columnResizeMode": "all",
    "autoWrapText": true,
    "rowSeriesNumber": {
        "title": "",
        "dragOrder": true,
        "headerIcon": "corner",
        "width": 60,
        "headerStyle": {
            "fontSize": 12,
            "fontFamily": "PingFang SC",
            "padding": 2,
            "textAlign": "center",
            "borderColor": "#eceef1",
            "bgColor": "#f6f8fa",
            "color": "#1f2329",
            "autoWrapText": true
        },
        "disableColumnResize": true,
        "style": {
            "fontSize": 12,
            "fontFamily": "PingFang SC",
            "padding": 2,
            "textAlign": "center",
            "borderColor": "#eceef1",
            "bgColor": "#f6f8fa",
            "color": "#1f2329",
            "autoWrapText": true
        }
    },
    "defaultRowHeight": 22,
    "defaultHeaderRowHeight": 24,
    "editor": "input-editor",
    "select": {
        "outsideClickDeselect": true,
        "headerSelectMode": "body"
    },
    "theme": {
        "bodyStyle": {
            "fontSize": 12,
            "fontFamily": "PingFang SC",
            "padding": 2,
            "textAlign": "center",
            "borderColor": "#eceef1",
            "color": "#1f2329",
            "select": {
                "cellBgColor": "#c2defc",
                "inlineRowBgColor": "#F3F8FF",
                "inlineColumnBgColor": "rgba(0,100,250,.16)",
                "cellBorderColor": "#3073f2",
                "cellBorderLineWidth": 1
            }
        },
        "headerStyle": {
            "fontSize": 12,
            "fontFamily": "PingFang SC",
            "padding": 2,
            "textAlign": "center",
            "borderColor": "#eceef1",
            "bgColor": "#f6f8fa",
            "color": "#1f2329",
            "click": {
                "cellBgColor": "#c2defc",
                "inlineRowBgColor": "#F3F8FF",
                "inlineColumnBgColor": "rgba(0,100,250,.16)",
                "cellBorderColor": "#3073f2",
                "cellBorderLineWidth": 1
            }
        },
        "selectionStyle": {
            "inlineRowBgColor": "rgba(0, 100, 250, 0.16)",
            "inlineColumnBgColor": "rgba(0, 100, 250, 0.16)",
            "cellBgColor": "rgba(0, 100, 250, 0.16)",
            "cellBorderColor": "#3073f2",
            "cellBorderLineWidth": 1
        }
    },
    "keyboardOptions": {
        "moveEditCellOnArrowKeys": true,
        "copySelected": true,
        "pasteValueToCell": true
    },
    "customConfig": {
        "limitContentHeight": false
    },
    "menu": {}
}

const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
root.render(<ReactVTable.ListTable option={option} height={'500px'} />);

// release openinula instance, do not copy
window.customRelease = () => {
  root.unmount();
};

Current Behavior

20241127151738_rec_

Expected Behavior

编辑列头 和 拖拽列序 不冲突

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

skie1997 commented 4 days ago

预计修复时间:11.29