@canvas-components/list-table 0.3.35 → 0.3.36

package/dist/index.cjs

@@ -5314,6 +5314,31 @@ function drawHeaderActionGlyph(ctx, rect, actionType, color = "#8c8c8c", sortOrd
   }
   ctx.restore();
 }
+function drawHeaderEditMarker(ctx, headerRect) {
+  const size = Math.max(0, Math.min(10, headerRect.width - 2, headerRect.height - 2));
+  const rect = { x: headerRect.x + 1, y: headerRect.y + 1, width: size, height: size };
+  if (size > 0) {
+    ctx.save();
+    ctx.fillStyle = "rgba(22, 119, 255, 0.08)";
+    ctx.beginPath();
+    const { x, y } = rect;
+    const radius = Math.min(4, size / 2);
+    if (typeof ctx.arcTo === "function") {
+      ctx.moveTo(x + radius, y);
+      ctx.arcTo(x + size, y, x + size, y + size, radius);
+      ctx.arcTo(x + size, y + size, x, y + size, radius);
+      ctx.arcTo(x, y + size, x, y, radius);
+      ctx.arcTo(x, y, x + size, y, radius);
+      ctx.closePath();
+    } else {
+      ctx.rect(x, y, size, size);
+    }
+    ctx.fill();
+    ctx.restore();
+    drawHeaderActionGlyph(ctx, rect, "edit", "#1677ff");
+  }
+  return rect;
+}
 function drawEditIcon(ctx, rect) {
   const scale = Math.min(rect.width, rect.height) / 14;
   const x = rect.x + (rect.width - 14 * scale) / 2;
@@ -8851,15 +8876,14 @@ function drawHeaderCell(params, cell, clipRect) {
   );
   const isExpandSystemColumn = cell.node.children.length === 0 && cell.node.column.meta?.systemType === "expandable";
   const isRowSelectorSystemColumn = cell.node.children.length === 0 && cell.node.column.meta?.systemType === "rowSelector";
-  const isEditableLeaf = cell.node.children.length === 0 && !!cell.node.column.editable && cell.node.column.showEditIcon === true;
+  const isEditableLeaf = cell.node.children.length === 0 && !!cell.node.column.editable && cell.node.column.showEditIcon !== false;
   const visibleState = getHeaderActionVisibilityState(
     cell.node.key,
     params.hoveredColumnKey,
     params.sortState.find((item) => item.key === cell.node.key)?.key ?? null,
     params.filteredColumnKeys,
     params.filterableColumnKeys,
-    params.fixedColumnKeys,
-    isEditableLeaf
+    params.fixedColumnKeys
   );
   const titleContent = cell.node.titleContent ?? [
     { type: "text", text: cell.node.title }
@@ -8871,7 +8895,6 @@ function drawHeaderCell(params, cell, clipRect) {
     actionVisibilityState: visibleState,
     allowActions: cell.node.children.length === 0,
     hasFilter: params.filterableColumnKeys.has(cell.node.key),
-    hasEdit: isEditableLeaf,
     contentWidth: measureHeaderContentWidth(ctx, titleContent),
     paddingInline: cell.node.style?.paddingInline,
     contentInsetStart: resolveHeaderContentInsetStart({
@@ -9038,18 +9061,29 @@ function measureHeaderContentWidth(ctx, contents) {
   ) + Math.max(contents.length - 1, 0) * gap;
 }
 function drawHeaderActions(params, rect, columnKey, visibilityState, fixed, visibleRect = rect, hasEdit = false, selected = false) {
-  if (!visibilityState.visible) {
-    return;
-  }
   const { ctx, descriptors } = params;
   ctx.save();
   ctx.beginPath();
   ctx.rect(visibleRect.x, visibleRect.y, visibleRect.width, visibleRect.height);
   ctx.clip();
+  if (hasEdit) {
+    const hitRect = intersectRects(drawHeaderEditMarker(ctx, rect), visibleRect);
+    if (hitRect) descriptors.push({
+      kind: "header",
+      rect: hitRect,
+      columnKey,
+      fixed,
+      debugNodeType: "header-edit-icon",
+      debugText: "\u5F53\u524D\u5217\u53EF\u7F16\u8F91"
+    });
+  }
+  if (!visibilityState.visible) {
+    ctx.restore();
+    return;
+  }
   const actionLayout = getHeaderActionLayout({
     rect,
     hasFilter: params.filterableColumnKeys.has(columnKey),
-    hasEdit,
     visibilityState,
     trailingInset: resolveCollapsedColumnMarkerSet(
       params.collapsedColumnMarkers,
@@ -9080,28 +9114,7 @@ function drawHeaderActions(params, rect, columnKey, visibilityState, fixed, visi
       width: ACTION_SIZE2,
       height: ACTION_SIZE2
     };
-    if (actionType === "edit") {
-      drawHeaderActionIcon(
-        ctx,
-        actionRect,
-        "edit",
-        true,
-        false,
-        headerSelected,
-        params.theme.selectionBackgroundColor
-      );
-      const hitRect2 = intersectRects(actionRect, visibleRect);
-      if (hitRect2)
-        descriptors.push({
-          kind: "header",
-          rect: hitRect2,
-          columnKey,
-          fixed,
-          debugNodeType: "header-edit-icon",
-          debugText: "\u5F53\u524D\u5217\u53EF\u7F16\u8F91"
-        });
-      return;
-    }
+    if (actionType === "edit") return;
     const iconHovered = params.hoveredColumnKey === columnKey && params.hoveredActionType === (actionType === "sort" ? "sort-trigger" : actionType === "filter" ? "filter-trigger" : "fixed-trigger");
     drawHeaderActionIcon(
       ctx,
@@ -9254,7 +9267,7 @@ function getHeaderSelectionRect(rect) {
     height: size
   };
 }
-function getHeaderActionVisibilityState(columnKey, hoveredColumnKey, sortedColumnKey, filteredColumnKeys, filterableColumnKeys, fixedColumnKeys, editable) {
+function getHeaderActionVisibilityState(columnKey, hoveredColumnKey, sortedColumnKey, filteredColumnKeys, filterableColumnKeys, fixedColumnKeys) {
   const hovered = hoveredColumnKey === columnKey;
   const sorted = sortedColumnKey === columnKey;
   const filtered = filterableColumnKeys.has(columnKey) && filteredColumnKeys.has(columnKey);
@@ -9264,7 +9277,7 @@ function getHeaderActionVisibilityState(columnKey, hoveredColumnKey, sortedColum
     sorted,
     filtered,
     fixed,
-    visible: hovered || sorted || filtered || fixed || editable
+    visible: hovered || sorted || filtered || fixed
   };
 }
 function getActionActive(actionType, visibilityState) {
@@ -10351,8 +10364,7 @@ function drawBodyNestedTableContent(params) {
       align: column.align ?? "left",
       actionVisibilityState,
       allowActions: true,
-      hasFilter: column.allowFilter === true,
-      hasEdit: !!column.editable && column.showEditIcon === true
+      hasFilter: column.allowFilter === true
     });
     const headerHighlighted = isNestedTableHeaderHighlighted(
       content,
@@ -10729,11 +10741,27 @@ function drawNestedTableHeaderActions(params) {
   const filtered = highlight?.filterState?.[columnKey] != null;
   const fixed = resolveNestedColumnFixed(column, highlight);
   const headerSelected = highlight?.kind === "header" && isNestedTableRuntimeColumnMatched(highlight, column, columnIndex);
+  if (column.editable && column.showEditIcon !== false) {
+    const markerRect = drawHeaderEditMarker(drawParams.ctx, rect);
+    drawParams.descriptors.push({
+      kind: "body-content",
+      rect: markerRect,
+      columnKey: drawParams.column.key,
+      rowIndex: drawParams.rowIndex,
+      contentIndex: drawParams.contentIndex,
+      contentKey: "nested-table",
+      nestedColumnDataIndex: columnKey,
+      nestedColumnIndex: columnIndex,
+      fixed: drawParams.column.fixed,
+      frozen: drawParams.frozen,
+      debugNodeType: "nested-table-header-edit-icon",
+      debugText: "\u5F53\u524D\u5217\u53EF\u7F16\u8F91"
+    });
+  }
   if (!visibilityState.visible) return;
   const { actionTypes, startX, totalWidth } = getHeaderActionLayout({
     rect,
     hasFilter: column.allowFilter === true,
-    hasEdit: !!column.editable && column.showEditIcon === true,
     visibilityState
   });
   drawParams.ctx.save();
@@ -10755,33 +10783,7 @@ function drawNestedTableHeaderActions(params) {
       width: size,
       height: size
     };
-    if (actionType === "edit") {
-      drawHeaderActionIcon(
-        drawParams.ctx,
-        actionRect,
-        "edit",
-        true,
-        false,
-        headerSelected,
-        drawParams.theme.selectionBackgroundColor
-      );
-      drawParams.descriptors.push({
-        kind: "body-content",
-        rect: actionRect,
-        columnKey: drawParams.column.key,
-        rowIndex: drawParams.rowIndex,
-        contentIndex: drawParams.contentIndex,
-        contentKey: "nested-table",
-        nestedColumnDataIndex: columnKey,
-        nestedColumnIndex: columnIndex,
-        fixed: drawParams.column.fixed,
-        frozen: drawParams.frozen,
-        debugNodeType: "nested-table-header-edit-icon",
-        debugText: "\u5F53\u524D\u5217\u53EF\u7F16\u8F91"
-      });
-      actionX += size + gap;
-      return;
-    }
+    if (actionType === "edit") return;
     const active = actionType === "sort" && sortOrder != null || actionType === "filter" && filtered || actionType === "fixed" && fixed != null;
     drawHeaderActionIcon(
       drawParams.ctx,
@@ -10825,7 +10827,7 @@ function resolveNestedTableHeaderActionVisibility(params) {
     sorted,
     filtered,
     fixed,
-    visible: hovered || sorted || filtered || fixed || !!column.editable && column.showEditIcon === true
+    visible: hovered || sorted || filtered || fixed
   };
 }
 function isNestedTableRowHighlighted(content, record, rowIndex, highlight, highlightMode) {

package/dist/index.d.cts

@@ -959,7 +959,7 @@ interface ListTableNestedTableColumn {
     align?: ListTableHorizontalAlign;
     /** 是否允许编辑子表格单元格。 */
     editable?: ListTableEditable<Record<string, unknown>>;
-    /** 是否显示可编辑列的表头编辑图标，默认 false；不影响编辑能力。 */
+    /** 是否显示可编辑列的表头左上角编辑图标，默认 true；不影响编辑能力。 */
     showEditIcon?: boolean;
     /** 子表格单元格编辑器配置。 */
     formItemProps?: ListTableFormItemProps<Record<string, unknown>>;
@@ -1140,7 +1140,7 @@ interface ListTableColumn<RecordType = Record<string, unknown>> {
     ellipsis?: boolean;
     /** 是否允许进入编辑输入态。 */
     editable?: ListTableEditable<RecordType>;
-    /** 是否显示可编辑列的表头编辑图标，默认 false；不影响编辑能力。 */
+    /** 是否显示可编辑列的表头左上角编辑图标，默认 true；不影响编辑能力。 */
     showEditIcon?: boolean;
     /** 编辑器配置，未传时默认使用文本输入。 */
     formItemProps?: ListTableFormItemProps<RecordType>;

package/dist/index.d.ts

@@ -959,7 +959,7 @@ interface ListTableNestedTableColumn {
     align?: ListTableHorizontalAlign;
     /** 是否允许编辑子表格单元格。 */
     editable?: ListTableEditable<Record<string, unknown>>;
-    /** 是否显示可编辑列的表头编辑图标，默认 false；不影响编辑能力。 */
+    /** 是否显示可编辑列的表头左上角编辑图标，默认 true；不影响编辑能力。 */
     showEditIcon?: boolean;
     /** 子表格单元格编辑器配置。 */
     formItemProps?: ListTableFormItemProps<Record<string, unknown>>;
@@ -1140,7 +1140,7 @@ interface ListTableColumn<RecordType = Record<string, unknown>> {
     ellipsis?: boolean;
     /** 是否允许进入编辑输入态。 */
     editable?: ListTableEditable<RecordType>;
-    /** 是否显示可编辑列的表头编辑图标，默认 false；不影响编辑能力。 */
+    /** 是否显示可编辑列的表头左上角编辑图标，默认 true；不影响编辑能力。 */
     showEditIcon?: boolean;
     /** 编辑器配置，未传时默认使用文本输入。 */
     formItemProps?: ListTableFormItemProps<RecordType>;

package/dist/index.js

@@ -5292,6 +5292,31 @@ function drawHeaderActionGlyph(ctx, rect, actionType, color = "#8c8c8c", sortOrd
   }
   ctx.restore();
 }
+function drawHeaderEditMarker(ctx, headerRect) {
+  const size = Math.max(0, Math.min(10, headerRect.width - 2, headerRect.height - 2));
+  const rect = { x: headerRect.x + 1, y: headerRect.y + 1, width: size, height: size };
+  if (size > 0) {
+    ctx.save();
+    ctx.fillStyle = "rgba(22, 119, 255, 0.08)";
+    ctx.beginPath();
+    const { x, y } = rect;
+    const radius = Math.min(4, size / 2);
+    if (typeof ctx.arcTo === "function") {
+      ctx.moveTo(x + radius, y);
+      ctx.arcTo(x + size, y, x + size, y + size, radius);
+      ctx.arcTo(x + size, y + size, x, y + size, radius);
+      ctx.arcTo(x, y + size, x, y, radius);
+      ctx.arcTo(x, y, x + size, y, radius);
+      ctx.closePath();
+    } else {
+      ctx.rect(x, y, size, size);
+    }
+    ctx.fill();
+    ctx.restore();
+    drawHeaderActionGlyph(ctx, rect, "edit", "#1677ff");
+  }
+  return rect;
+}
 function drawEditIcon(ctx, rect) {
   const scale = Math.min(rect.width, rect.height) / 14;
   const x = rect.x + (rect.width - 14 * scale) / 2;
@@ -8829,15 +8854,14 @@ function drawHeaderCell(params, cell, clipRect) {
   );
   const isExpandSystemColumn = cell.node.children.length === 0 && cell.node.column.meta?.systemType === "expandable";
   const isRowSelectorSystemColumn = cell.node.children.length === 0 && cell.node.column.meta?.systemType === "rowSelector";
-  const isEditableLeaf = cell.node.children.length === 0 && !!cell.node.column.editable && cell.node.column.showEditIcon === true;
+  const isEditableLeaf = cell.node.children.length === 0 && !!cell.node.column.editable && cell.node.column.showEditIcon !== false;
   const visibleState = getHeaderActionVisibilityState(
     cell.node.key,
     params.hoveredColumnKey,
     params.sortState.find((item) => item.key === cell.node.key)?.key ?? null,
     params.filteredColumnKeys,
     params.filterableColumnKeys,
-    params.fixedColumnKeys,
-    isEditableLeaf
+    params.fixedColumnKeys
   );
   const titleContent = cell.node.titleContent ?? [
     { type: "text", text: cell.node.title }
@@ -8849,7 +8873,6 @@ function drawHeaderCell(params, cell, clipRect) {
     actionVisibilityState: visibleState,
     allowActions: cell.node.children.length === 0,
     hasFilter: params.filterableColumnKeys.has(cell.node.key),
-    hasEdit: isEditableLeaf,
     contentWidth: measureHeaderContentWidth(ctx, titleContent),
     paddingInline: cell.node.style?.paddingInline,
     contentInsetStart: resolveHeaderContentInsetStart({
@@ -9016,18 +9039,29 @@ function measureHeaderContentWidth(ctx, contents) {
   ) + Math.max(contents.length - 1, 0) * gap;
 }
 function drawHeaderActions(params, rect, columnKey, visibilityState, fixed, visibleRect = rect, hasEdit = false, selected = false) {
-  if (!visibilityState.visible) {
-    return;
-  }
   const { ctx, descriptors } = params;
   ctx.save();
   ctx.beginPath();
   ctx.rect(visibleRect.x, visibleRect.y, visibleRect.width, visibleRect.height);
   ctx.clip();
+  if (hasEdit) {
+    const hitRect = intersectRects(drawHeaderEditMarker(ctx, rect), visibleRect);
+    if (hitRect) descriptors.push({
+      kind: "header",
+      rect: hitRect,
+      columnKey,
+      fixed,
+      debugNodeType: "header-edit-icon",
+      debugText: "\u5F53\u524D\u5217\u53EF\u7F16\u8F91"
+    });
+  }
+  if (!visibilityState.visible) {
+    ctx.restore();
+    return;
+  }
   const actionLayout = getHeaderActionLayout({
     rect,
     hasFilter: params.filterableColumnKeys.has(columnKey),
-    hasEdit,
     visibilityState,
     trailingInset: resolveCollapsedColumnMarkerSet(
       params.collapsedColumnMarkers,
@@ -9058,28 +9092,7 @@ function drawHeaderActions(params, rect, columnKey, visibilityState, fixed, visi
       width: ACTION_SIZE2,
       height: ACTION_SIZE2
     };
-    if (actionType === "edit") {
-      drawHeaderActionIcon(
-        ctx,
-        actionRect,
-        "edit",
-        true,
-        false,
-        headerSelected,
-        params.theme.selectionBackgroundColor
-      );
-      const hitRect2 = intersectRects(actionRect, visibleRect);
-      if (hitRect2)
-        descriptors.push({
-          kind: "header",
-          rect: hitRect2,
-          columnKey,
-          fixed,
-          debugNodeType: "header-edit-icon",
-          debugText: "\u5F53\u524D\u5217\u53EF\u7F16\u8F91"
-        });
-      return;
-    }
+    if (actionType === "edit") return;
     const iconHovered = params.hoveredColumnKey === columnKey && params.hoveredActionType === (actionType === "sort" ? "sort-trigger" : actionType === "filter" ? "filter-trigger" : "fixed-trigger");
     drawHeaderActionIcon(
       ctx,
@@ -9232,7 +9245,7 @@ function getHeaderSelectionRect(rect) {
     height: size
   };
 }
-function getHeaderActionVisibilityState(columnKey, hoveredColumnKey, sortedColumnKey, filteredColumnKeys, filterableColumnKeys, fixedColumnKeys, editable) {
+function getHeaderActionVisibilityState(columnKey, hoveredColumnKey, sortedColumnKey, filteredColumnKeys, filterableColumnKeys, fixedColumnKeys) {
   const hovered = hoveredColumnKey === columnKey;
   const sorted = sortedColumnKey === columnKey;
   const filtered = filterableColumnKeys.has(columnKey) && filteredColumnKeys.has(columnKey);
@@ -9242,7 +9255,7 @@ function getHeaderActionVisibilityState(columnKey, hoveredColumnKey, sortedColum
     sorted,
     filtered,
     fixed,
-    visible: hovered || sorted || filtered || fixed || editable
+    visible: hovered || sorted || filtered || fixed
   };
 }
 function getActionActive(actionType, visibilityState) {
@@ -10329,8 +10342,7 @@ function drawBodyNestedTableContent(params) {
       align: column.align ?? "left",
       actionVisibilityState,
       allowActions: true,
-      hasFilter: column.allowFilter === true,
-      hasEdit: !!column.editable && column.showEditIcon === true
+      hasFilter: column.allowFilter === true
     });
     const headerHighlighted = isNestedTableHeaderHighlighted(
       content,
@@ -10707,11 +10719,27 @@ function drawNestedTableHeaderActions(params) {
   const filtered = highlight?.filterState?.[columnKey] != null;
   const fixed = resolveNestedColumnFixed(column, highlight);
   const headerSelected = highlight?.kind === "header" && isNestedTableRuntimeColumnMatched(highlight, column, columnIndex);
+  if (column.editable && column.showEditIcon !== false) {
+    const markerRect = drawHeaderEditMarker(drawParams.ctx, rect);
+    drawParams.descriptors.push({
+      kind: "body-content",
+      rect: markerRect,
+      columnKey: drawParams.column.key,
+      rowIndex: drawParams.rowIndex,
+      contentIndex: drawParams.contentIndex,
+      contentKey: "nested-table",
+      nestedColumnDataIndex: columnKey,
+      nestedColumnIndex: columnIndex,
+      fixed: drawParams.column.fixed,
+      frozen: drawParams.frozen,
+      debugNodeType: "nested-table-header-edit-icon",
+      debugText: "\u5F53\u524D\u5217\u53EF\u7F16\u8F91"
+    });
+  }
   if (!visibilityState.visible) return;
   const { actionTypes, startX, totalWidth } = getHeaderActionLayout({
     rect,
     hasFilter: column.allowFilter === true,
-    hasEdit: !!column.editable && column.showEditIcon === true,
     visibilityState
   });
   drawParams.ctx.save();
@@ -10733,33 +10761,7 @@ function drawNestedTableHeaderActions(params) {
       width: size,
       height: size
     };
-    if (actionType === "edit") {
-      drawHeaderActionIcon(
-        drawParams.ctx,
-        actionRect,
-        "edit",
-        true,
-        false,
-        headerSelected,
-        drawParams.theme.selectionBackgroundColor
-      );
-      drawParams.descriptors.push({
-        kind: "body-content",
-        rect: actionRect,
-        columnKey: drawParams.column.key,
-        rowIndex: drawParams.rowIndex,
-        contentIndex: drawParams.contentIndex,
-        contentKey: "nested-table",
-        nestedColumnDataIndex: columnKey,
-        nestedColumnIndex: columnIndex,
-        fixed: drawParams.column.fixed,
-        frozen: drawParams.frozen,
-        debugNodeType: "nested-table-header-edit-icon",
-        debugText: "\u5F53\u524D\u5217\u53EF\u7F16\u8F91"
-      });
-      actionX += size + gap;
-      return;
-    }
+    if (actionType === "edit") return;
     const active = actionType === "sort" && sortOrder != null || actionType === "filter" && filtered || actionType === "fixed" && fixed != null;
     drawHeaderActionIcon(
       drawParams.ctx,
@@ -10803,7 +10805,7 @@ function resolveNestedTableHeaderActionVisibility(params) {
     sorted,
     filtered,
     fixed,
-    visible: hovered || sorted || filtered || fixed || !!column.editable && column.showEditIcon === true
+    visible: hovered || sorted || filtered || fixed
   };
 }
 function isNestedTableRowHighlighted(content, record, rowIndex, highlight, highlightMode) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canvas-components/list-table",
-  "version": "0.3.35",
+  "version": "0.3.36",
   "description": "Framework-agnostic list table core engine.",
   "license": "MIT",
   "type": "module",