@canvas-components/list-table 0.3.1 → 0.3.2

package/README.md

@@ -170,7 +170,9 @@ table.mount();
 - `checkbox`
 - `radio`
 - `switch`
-- `link`
+- `link`
+
+`icon` 当前内置 `star`、`sun`、`moon`、`check`（√）和 `close`（×）。
 
 ### 金额单元格示例
 

package/dist/index.cjs

@@ -3928,11 +3928,25 @@ function drawImagePlaceholder(ctx, x, y, width, height, backgroundColor = PLACEH
 var SYMBOL_COLOR_MAP = {
   star: "#fadb14",
   sun: "#faad14",
-  moon: "#597ef7"
+  moon: "#597ef7",
+  check: "#52c41a",
+  close: "#ff4d4f"
 };
 function drawCellSymbol(ctx, params) {
   const { type, x, y, size, activeColor, inactiveColor } = params;
   const fillRatio = Math.min(Math.max(params.fillRatio, 0), 1);
+  if (type === "check" || type === "close") {
+    drawStatusSymbol(ctx, {
+      type,
+      x,
+      y,
+      size,
+      activeColor,
+      inactiveColor,
+      fillRatio
+    });
+    return;
+  }
   appendCellSymbolPath(ctx, type, x, y, size);
   ctx.fillStyle = inactiveColor;
   ctx.fill("evenodd");
@@ -3950,6 +3964,10 @@ function resolveCellSymbolColor(type) {
   return SYMBOL_COLOR_MAP[type];
 }
 function appendCellSymbolPath(ctx, type, x, y, size) {
+  if (type === "check" || type === "close") {
+    appendStatusSymbolPath(ctx, type, x, y, size);
+    return;
+  }
   if (type === "moon") {
     appendMoonPath(ctx, x, y, size);
     return;
@@ -3970,6 +3988,38 @@ function appendCellSymbolPath(ctx, type, x, y, size) {
   }
   ctx.closePath();
 }
+function drawStatusSymbol(ctx, params) {
+  const { type, x, y, size, activeColor, inactiveColor, fillRatio } = params;
+  ctx.save();
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.lineWidth = Math.max(size * 0.12, 1.5);
+  appendStatusSymbolPath(ctx, type, x, y, size);
+  ctx.strokeStyle = inactiveColor;
+  ctx.stroke();
+  if (fillRatio > 0) {
+    ctx.beginPath();
+    ctx.rect(x, y, size * fillRatio, size);
+    ctx.clip();
+    appendStatusSymbolPath(ctx, type, x, y, size);
+    ctx.strokeStyle = activeColor;
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+function appendStatusSymbolPath(ctx, type, x, y, size) {
+  ctx.beginPath();
+  if (type === "check") {
+    ctx.moveTo(x + size * 0.16, y + size * 0.52);
+    ctx.lineTo(x + size * 0.4, y + size * 0.76);
+    ctx.lineTo(x + size * 0.84, y + size * 0.26);
+    return;
+  }
+  ctx.moveTo(x + size * 0.22, y + size * 0.22);
+  ctx.lineTo(x + size * 0.78, y + size * 0.78);
+  ctx.moveTo(x + size * 0.78, y + size * 0.22);
+  ctx.lineTo(x + size * 0.22, y + size * 0.78);
+}
 function appendMoonPath(ctx, x, y, size) {
   ctx.beginPath();
   ctx.moveTo(x + size * 0.64, y + size * 0.04);
@@ -6239,6 +6289,7 @@ function resolveColumnFormItemProps(column, context) {
 // src/rendering/cell-content/cell-content-renderer.ts
 var CONTENT_HORIZONTAL_PADDING = 12;
 var CONTENT_GAP = 8;
+var LINK_CONTENT_GAP = 4;
 var CONTENT_VERTICAL_PADDING = 6;
 function resolveBodyCellContents(params) {
   return resolveRawBodyCellContents(params).filter(
@@ -6673,8 +6724,8 @@ function drawBodyCellContents(params) {
       align: column.align
     });
     line.items.forEach((item, itemIndex) => {
-      if (itemIndex > 0 && item.gapBefore) {
-        cursorX += CONTENT_GAP;
+      if (itemIndex > 0) {
+        cursorX += item.gapBefore;
       }
       const itemDescriptors = [];
       drawExpandedBodyContent({
@@ -6769,7 +6820,7 @@ function measureBodyCellContentsWidth(params) {
       currentLineWidth = 0;
       return;
     }
-    const gapWidth = currentLineWidth > 0 && item.gapBefore ? CONTENT_GAP : 0;
+    const gapWidth = currentLineWidth > 0 ? item.gapBefore : 0;
     currentLineWidth += gapWidth + contentWidth;
   });
   return Math.ceil(
@@ -6800,10 +6851,11 @@ function expandBodyContents(contents) {
   const textOnly = contents.every((content) => content.type === "text");
   const expanded = [];
   contents.forEach((content, contentIndex) => {
+    const previousContent = contents[contentIndex - 1];
     expanded.push({
       content,
       contentIndex,
-      gapBefore: expanded.length > 0 && !textOnly
+      gapBefore: expanded.length === 0 || textOnly ? 0 : previousContent?.type === "link" && content.type === "link" ? LINK_CONTENT_GAP : CONTENT_GAP
     });
     if ((content.type === "checkbox" || content.type === "radio") && content.label) {
       const textLabelContent = {
@@ -6816,7 +6868,7 @@ function expandBodyContents(contents) {
       expanded.push({
         content: textLabelContent,
         contentIndex,
-        gapBefore: true
+        gapBefore: CONTENT_GAP
       });
     }
   });
@@ -6857,7 +6909,7 @@ function buildSingleLineLayout(ctx, contents, availableWidth, theme) {
       }
       break;
     }
-    const gapWidth = line.items.length > 0 && item.gapBefore ? CONTENT_GAP : 0;
+    const gapWidth = line.items.length > 0 ? item.gapBefore : 0;
     const remainingWidth = availableWidth - line.width - gapWidth;
     if (remainingWidth <= 0) {
       truncated = true;
@@ -6925,7 +6977,7 @@ function buildWrappedLineLayout(ctx, contents, availableWidth, maxLines, theme)
             items: [
               {
                 ...currentItem,
-                gapBefore: false,
+                gapBefore: 0,
                 width: fullWidth2
               }
             ],
@@ -6956,7 +7008,7 @@ function buildWrappedLineLayout(ctx, contents, availableWidth, maxLines, theme)
             {
               ...currentItem,
               content: fittedContent2,
-              gapBefore: false,
+              gapBefore: 0,
               width: fittedWidth
             }
           ],
@@ -6978,11 +7030,11 @@ function buildWrappedLineLayout(ctx, contents, availableWidth, maxLines, theme)
         currentItem = {
           ...currentItem,
           content: setBreakableContentText(currentItem.content, remainingText2),
-          gapBefore: false
+          gapBefore: 0
         };
         continue;
       }
-      const gapWidth = currentLine.items.length > 0 && currentItem.gapBefore ? CONTENT_GAP : 0;
+      const gapWidth = currentLine.items.length > 0 ? currentItem.gapBefore : 0;
       const remainingWidth = availableWidth - currentLine.width - gapWidth;
       if (remainingWidth <= 0) {
         if (lines.length + 1 >= maxLines) {
@@ -6996,7 +7048,7 @@ function buildWrappedLineLayout(ctx, contents, availableWidth, maxLines, theme)
         currentLine = { items: [], width: 0 };
         currentItem = {
           ...currentItem,
-          gapBefore: false
+          gapBefore: 0
         };
         continue;
       }
@@ -7016,7 +7068,7 @@ function buildWrappedLineLayout(ctx, contents, availableWidth, maxLines, theme)
           currentLine = { items: [], width: 0 };
           currentItem = {
             ...currentItem,
-            gapBefore: false
+            gapBefore: 0
           };
           continue;
         }
@@ -7056,7 +7108,7 @@ function buildWrappedLineLayout(ctx, contents, availableWidth, maxLines, theme)
         currentLine = { items: [], width: 0 };
         currentItem = {
           ...currentItem,
-          gapBefore: false
+          gapBefore: 0
         };
         continue;
       }
@@ -7084,7 +7136,7 @@ function buildWrappedLineLayout(ctx, contents, availableWidth, maxLines, theme)
       currentItem = {
         ...currentItem,
         content: setBreakableContentText(currentItem.content, remainingText),
-        gapBefore: false
+        gapBefore: 0
       };
     }
     if (truncated) {
@@ -7597,10 +7649,10 @@ function applyTrailingEllipsis(ctx, line, theme, availableWidth) {
       continue;
     }
     const widthBefore = line.items.slice(0, index).reduce((sum, current, currentIndex) => {
-      const gapWidth2 = currentIndex > 0 && current.gapBefore ? CONTENT_GAP : 0;
+      const gapWidth2 = currentIndex > 0 ? current.gapBefore : 0;
       return sum + gapWidth2 + current.width;
     }, 0);
-    const gapWidth = index > 0 && item.gapBefore ? CONTENT_GAP : 0;
+    const gapWidth = index > 0 ? item.gapBefore : 0;
     const nextContent = truncateExpandedContent(
       ctx,
       item.content,
@@ -20127,7 +20179,7 @@ function buildListTableRenderSnapshot(params) {
     options.scrollbar?.thickness ?? DEFAULT_SCROLLBAR_THICKNESS,
     6
   );
-  let width = hostWidth;
+  let width = Math.max(hostWidth - scrollbarThickness, 0);
   let height = hostHeight;
   const sourceNormalizedColumns = normalizeColumns(
     getResolvedColumns(options, selectedRowKeys)
@@ -20402,54 +20454,6 @@ function buildListTableRenderSnapshot(params) {
     fixedWidthRight: columnMetrics.fixedWidthRight,
     scroll
   });
-  for (let index = 0; index < 2 && scrollbarThickness > 0; index += 1) {
-    const nextWidth = Math.max(
-      hostWidth - (viewportResult.viewport.maxScrollTop > 0 ? scrollbarThickness : 0),
-      0
-    );
-    const nextHeight = Math.max(
-      hostHeight - (viewportResult.viewport.maxScrollLeft > 0 ? scrollbarThickness : 0),
-      0
-    );
-    if (nextWidth === width && nextHeight === height) {
-      break;
-    }
-    width = nextWidth;
-    height = nextHeight;
-    bodyState = resolveCurrentBodyState();
-    if (plainRowWindow) {
-      bodyState.frozenRows.scroll.windowed = true;
-      bodyState.frozenRows.scroll.dataRowIndexAligned = true;
-      bodyState.frozenRows.scroll.rowIndexMap = plainRowWindow.rowIndexMap;
-      bodyState.frozenRows.scroll.rowOffsetMap = plainRowWindow.rowOffsetMap;
-      bodyState.bodyLayout = resolveBodyLayout({
-        height,
-        headerHeight,
-        summaryRowHeight,
-        hasSummary,
-        rowHeight,
-        totalBodyHeight: plainRowWindow.totalBodyHeight,
-        topFrozenRowCount: 0,
-        bottomFrozenRowCount: 0,
-        scrollRowCount: plainRowWindow.totalRowCount
-      });
-    }
-    columnMetrics = resolveColumnMetrics({
-      columns: leafColumns,
-      tableWidth: width
-    });
-    viewportResult = computeViewport({
-      width,
-      height,
-      headerHeight,
-      bodyHeight: bodyState.bodyLayout.scrollBodyHeight,
-      totalWidth: columnMetrics.totalWidth,
-      totalBodyHeight: bodyState.bodyLayout.totalBodyHeight,
-      fixedWidthLeft: columnMetrics.fixedWidthLeft,
-      fixedWidthRight: columnMetrics.fixedWidthRight,
-      scroll
-    });
-  }
   scrollPageSize = resolveScrollPageSize({
     options,
     pageSize: query.pagination.pageSize,