@windoc/core 0.3.12 → 0.3.13

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var version = "0.3.12";
+var version = "0.3.13";
 
 // src/dataset/enum/Common.ts
 var MaxHeightRatio = /* @__PURE__ */ ((MaxHeightRatio2) => {
@@ -4200,8 +4200,8 @@ var defaultSeparatorOption = {
 
 // src/dataset/constant/Table.ts
 var defaultTableOption = {
-  tdPadding: [0, 5, 5, 5],
-  defaultTrMinHeight: 42,
+  tdPadding: [4, 5, 4, 5],
+  defaultTrMinHeight: 22,
   defaultColMinWidth: 40,
   defaultBorderColor: "#000000",
   overflow: true
@@ -9351,12 +9351,13 @@ var Position = class {
         index++;
         x += metrics.width;
         if (element.type === "table" /* TABLE */ && !element.hide) {
-          const tdPaddingWidth = tdPadding[1] + tdPadding[3];
-          const tdPaddingHeight = tdPadding[0] + tdPadding[2];
           for (let t = 0; t < element.trList.length; t++) {
             const tr = element.trList[t];
             for (let d = 0; d < tr.tdList.length; d++) {
               const td = tr.tdList[d];
+              const cellPadding = td.padding || tdPadding;
+              const cellPaddingWidth = cellPadding[1] + cellPadding[3];
+              const cellPaddingHeight = cellPadding[0] + cellPadding[2];
               td.positionList = [];
               const rowList2 = td.rowList;
               const drawRowResult = this.computePageRowPosition({
@@ -9365,9 +9366,9 @@ var Position = class {
                 pageNo,
                 startRowIndex: 0,
                 startIndex: 0,
-                startX: (td.x + tdPadding[3]) * scale + tablePreX + (element.translateX || 0) * scale,
-                startY: (td.y + tdPadding[0]) * scale + tablePreY,
-                innerWidth: (td.width - tdPaddingWidth) * scale,
+                startX: (td.x + cellPadding[3]) * scale + tablePreX + (element.translateX || 0) * scale,
+                startY: (td.y + cellPadding[0]) * scale + tablePreY,
+                innerWidth: (td.width - cellPaddingWidth) * scale,
                 isTable: true,
                 index: index - 1,
                 tdIndex: d,
@@ -9379,7 +9380,7 @@ var Position = class {
                   (pre, cur) => pre + cur.height,
                   0
                 );
-                const blankHeight = (td.height - tdPaddingHeight) * scale - rowsHeight;
+                const blankHeight = (td.height - cellPaddingHeight) * scale - rowsHeight;
                 const offsetHeight = td.verticalAlign === "middle" /* MIDDLE */ ? blankHeight / 2 : blankHeight;
                 if (Math.floor(offsetHeight) > 0) {
                   td.positionList.forEach((tdPosition) => {
@@ -11673,6 +11674,10 @@ var TableParticle = class {
         const height = td.height * scale;
         const x = Math.round(td.x * scale + startX + width);
         const y = Math.round(td.y * scale + startY);
+        if (td.borderColor) {
+          ctx.save();
+          ctx.strokeStyle = td.borderColor;
+        }
         ctx.translate(0.5, 0.5);
         ctx.beginPath();
         if (td.borderTypes?.includes("top" /* TOP */)) {
@@ -11726,6 +11731,25 @@ var TableParticle = class {
           ctx.stroke();
         }
         ctx.translate(-0.5, -0.5);
+        if (td.borderColor && !isEmptyBorderType && !isExternalBorderType) {
+          ctx.translate(0.5, 0.5);
+          ctx.beginPath();
+          if (td.rowIndex === 0) {
+            ctx.moveTo(x - width, y);
+            ctx.lineTo(x, y);
+          }
+          if (td.colIndex === 0) {
+            ctx.moveTo(x - width, y);
+            ctx.lineTo(x - width, y + height);
+          }
+          if (td.rowIndex === 0 || td.colIndex === 0) {
+            ctx.stroke();
+          }
+          ctx.translate(-0.5, -0.5);
+        }
+        if (td.borderColor) {
+          ctx.restore();
+        }
       }
     }
     ctx.restore();
@@ -17384,7 +17408,14 @@ var en_default = {
       borderTdBottom: "Bottom",
       borderTdLeft: "Left",
       borderTdForward: "Forward",
-      borderTdBack: "Back"
+      borderTdBack: "Back",
+      cellBackgroundColor: "Cell background color",
+      tdBorderColor: "Cell border color",
+      cellPadding: "Cell padding",
+      cellPaddingCompact: "Compact (2px)",
+      cellPaddingNormal: "Normal (4px)",
+      cellPaddingComfortable: "Comfortable (8px)",
+      cellPaddingNone: "No padding"
     }
   },
   datePicker: {
@@ -17478,7 +17509,14 @@ var id_default = {
       borderTdBottom: "Bawah",
       borderTdLeft: "Kiri",
       borderTdForward: "Maju",
-      borderTdBack: "Mundur"
+      borderTdBack: "Mundur",
+      cellBackgroundColor: "Warna latar sel",
+      tdBorderColor: "Warna garis sel",
+      cellPadding: "Padding sel",
+      cellPaddingCompact: "Rapat (2px)",
+      cellPaddingNormal: "Normal (4px)",
+      cellPaddingComfortable: "Lega (8px)",
+      cellPaddingNone: "Tanpa padding"
     }
   },
   datePicker: {
@@ -19819,7 +19857,7 @@ var TableOperate = class {
       const row = rowCol[r];
       for (let c = 0; c < row.length; c++) {
         const col = row[c];
-        col.backgroundColor = payload;
+        col.backgroundColor = payload || void 0;
       }
     }
     const { endIndex } = this.range.getRange();
@@ -19828,6 +19866,50 @@ var TableOperate = class {
       isCompute: false
     });
   }
+  tableTdBorderColor(payload) {
+    const positionContext = this.position.getPositionContext();
+    if (!positionContext.isTable) return;
+    const { index } = positionContext;
+    const originalElementList = this.draw.getOriginalElementList();
+    const element = originalElementList[index];
+    const rowCol = this.tableParticle.getRangeRowCol();
+    if (!rowCol) return;
+    const tdList = rowCol.flat();
+    const totalCells = element.trList.reduce(
+      (sum, tr) => sum + tr.tdList.length,
+      0
+    );
+    const allSelected = tdList.length >= totalCells;
+    if (allSelected) {
+      element.borderColor = payload || void 0;
+      element.trList.forEach(
+        (tr) => tr.tdList.forEach((td) => {
+          delete td.borderColor;
+        })
+      );
+    } else {
+      tdList.forEach((td) => {
+        td.borderColor = payload || void 0;
+      });
+    }
+    const { endIndex } = this.range.getRange();
+    this.draw.render({
+      curIndex: endIndex,
+      isCompute: false
+    });
+  }
+  tableTdPadding(payload) {
+    const rowCol = this.tableParticle.getRangeRowCol();
+    if (!rowCol) return;
+    const tdList = rowCol.flat();
+    tdList.forEach((td) => {
+      td.padding = payload;
+    });
+    const { endIndex } = this.range.getRange();
+    this.draw.render({
+      curIndex: endIndex
+    });
+  }
   tableSelectAll() {
     const positionContext = this.position.getPositionContext();
     const { index, tableId, isTable } = positionContext;
@@ -21310,8 +21392,6 @@ var Draw = class {
         }
         metrics.boundingBoxAscent = 0;
       } else if (element.type === "table" /* TABLE */) {
-        const tdPaddingWidth = tdPadding[1] + tdPadding[3];
-        const tdPaddingHeight = tdPadding[0] + tdPadding[2];
         if (element.pagingId) {
           let tableIndex = i + 1;
           let combineCount = 0;
@@ -21345,15 +21425,18 @@ var Draw = class {
           const tr = trList[t];
           for (let d = 0; d < tr.tdList.length; d++) {
             const td = tr.tdList[d];
+            const cellPadding = td.padding || tdPadding;
+            const cellPaddingWidth = cellPadding[1] + cellPadding[3];
+            const cellPaddingHeight = cellPadding[0] + cellPadding[2];
             const rowList2 = this.computeRowList({
-              innerWidth: (td.width - tdPaddingWidth) * scale,
+              innerWidth: (td.width - cellPaddingWidth) * scale,
               elementList: td.value,
               isFromTable: true,
               isPagingMode
             });
             const rowHeight = rowList2.reduce((pre, cur) => pre + cur.height, 0);
             td.rowList = rowList2;
-            const curTdHeight = rowHeight / scale + tdPaddingHeight;
+            const curTdHeight = rowHeight / scale + cellPaddingHeight;
             if (td.height < curTdHeight) {
               const extraHeight = curTdHeight - td.height;
               const changeTr = trList[t + td.rowspan - 1];
@@ -21424,8 +21507,11 @@ var Draw = class {
             const tr = constrainedTrList[t];
             for (let d = 0; d < tr.tdList.length; d++) {
               const td = tr.tdList[d];
+              const cellPadding = td.padding || tdPadding;
+              const cellPaddingWidth = cellPadding[1] + cellPadding[3];
+              const cellPaddingHeight = cellPadding[0] + cellPadding[2];
               const tdRowList = this.computeRowList({
-                innerWidth: (td.width - tdPaddingWidth) * scale,
+                innerWidth: (td.width - cellPaddingWidth) * scale,
                 elementList: td.value,
                 isFromTable: true,
                 isPagingMode
@@ -21435,7 +21521,7 @@ var Draw = class {
                 0
               );
               td.rowList = tdRowList;
-              const curTdHeight = rowHeight / scale + tdPaddingHeight;
+              const curTdHeight = rowHeight / scale + cellPaddingHeight;
               if (td.height < curTdHeight) {
                 const extraHeight = curTdHeight - td.height;
                 const changeTr = constrainedTrList[t + td.rowspan - 1];
@@ -22220,18 +22306,19 @@ var Draw = class {
         }
         index++;
         if (element.type === "table" /* TABLE */ && !element.hide) {
-          const tdPaddingWidth = tdPadding[1] + tdPadding[3];
           for (let t = 0; t < element.trList.length; t++) {
             const tr = element.trList[t];
             for (let d = 0; d < tr.tdList.length; d++) {
               const td = tr.tdList[d];
+              const cellPadding = td.padding || tdPadding;
+              const cellPaddingWidth = cellPadding[1] + cellPadding[3];
               this.drawRow(ctx, {
                 elementList: td.value,
                 positionList: td.positionList,
                 rowList: td.rowList,
                 pageNo,
                 startIndex: 0,
-                innerWidth: (td.width - tdPaddingWidth) * scale,
+                innerWidth: (td.width - cellPaddingWidth) * scale,
                 zone,
                 isDrawLineBreak
               });
@@ -22695,6 +22782,8 @@ var Command = class {
     this.executeTableTdBorderType = adapt.tableTdBorderType.bind(adapt);
     this.executeTableTdSlashType = adapt.tableTdSlashType.bind(adapt);
     this.executeTableTdBackgroundColor = adapt.tableTdBackgroundColor.bind(adapt);
+    this.executeTableTdBorderColor = adapt.tableTdBorderColor.bind(adapt);
+    this.executeTableTdPadding = adapt.tableTdPadding.bind(adapt);
     this.executeTableSelectAll = adapt.tableSelectAll.bind(adapt);
     this.executeImage = adapt.image.bind(adapt);
     this.executeHyperlink = adapt.hyperlink.bind(adapt);
@@ -23676,6 +23765,16 @@ var CommandAdapt = class {
     if (isReadonly) return;
     this.tableOperate.tableTdBackgroundColor(payload);
   }
+  tableTdBorderColor(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly) return;
+    this.tableOperate.tableTdBorderColor(payload);
+  }
+  tableTdPadding(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly) return;
+    this.tableOperate.tableTdPadding(payload);
+  }
   tableSelectAll() {
     this.tableOperate.tableSelectAll();
   }
@@ -25148,7 +25247,14 @@ var INTERNAL_CONTEXT_MENU_KEY = {
     DELETE_COL: "tableDeleteCol",
     DELETE_TABLE: "tableDeleteTable",
     MERGE_CELL: "tableMergeCell",
-    CANCEL_MERGE_CELL: "tableCancelMergeCell"
+    CANCEL_MERGE_CELL: "tableCancelMergeCell",
+    TD_BG_COLOR: "tableTdBgColor",
+    TD_BORDER_COLOR: "tableTdBorderColor",
+    TD_PADDING: "tableTdPadding",
+    TD_PADDING_COMPACT: "tableTdPaddingCompact",
+    TD_PADDING_NORMAL: "tableTdPaddingNormal",
+    TD_PADDING_COMFORTABLE: "tableTdPaddingComfortable",
+    TD_PADDING_NONE: "tableTdPaddingNone"
   }
 };
 
@@ -25390,6 +25496,42 @@ var imageMenus = [
 ];
 
 // src/core/contextmenu/menus/tableMenus.ts
+var COLOR_PALETTE = [
+  { name: "Black", value: "#000000" },
+  { name: "Dark gray", value: "#444444" },
+  { name: "Gray", value: "#888888" },
+  { name: "Light gray", value: "#cccccc" },
+  { name: "White", value: "#ffffff" },
+  { name: "Red", value: "#ff0000" },
+  { name: "Orange", value: "#ff9900" },
+  { name: "Yellow", value: "#ffff00" },
+  { name: "Green", value: "#00aa00" },
+  { name: "Cyan", value: "#00aaff" },
+  { name: "Blue", value: "#0000ff" },
+  { name: "Purple", value: "#9900ff" },
+  { name: "Pink", value: "#ff00aa" },
+  { name: "Light red", value: "#ffcccc" },
+  { name: "Light orange", value: "#ffeecc" },
+  { name: "Light yellow", value: "#ffffcc" },
+  { name: "Light green", value: "#ccffcc" },
+  { name: "Light blue", value: "#ccecff" },
+  { name: "Light purple", value: "#eeccff" }
+];
+function openNativeColorPicker(defaultColor, onSelect) {
+  const input2 = document.createElement("input");
+  input2.type = "color";
+  input2.value = defaultColor;
+  input2.style.cssText = "position:fixed;opacity:0;pointer-events:none;top:0;left:0;width:0;height:0";
+  document.body.appendChild(input2);
+  input2.addEventListener("change", () => {
+    onSelect(input2.value);
+    document.body.removeChild(input2);
+  });
+  input2.addEventListener("cancel", () => {
+    document.body.removeChild(input2);
+  });
+  input2.click();
+}
 var {
   TABLE: {
     BORDER,
@@ -25419,7 +25561,14 @@ var {
     DELETE_COL,
     DELETE_TABLE,
     MERGE_CELL,
-    CANCEL_MERGE_CELL
+    CANCEL_MERGE_CELL,
+    TD_BG_COLOR,
+    TD_BORDER_COLOR,
+    TD_PADDING,
+    TD_PADDING_COMPACT,
+    TD_PADDING_NORMAL,
+    TD_PADDING_COMFORTABLE,
+    TD_PADDING_NONE
   }
 } = INTERNAL_CONTEXT_MENU_KEY;
 var tableMenus = [
@@ -25684,6 +25833,128 @@ var tableMenus = [
     callback: (command) => {
       command.executeCancelMergeTableCell();
     }
+  },
+  {
+    key: TD_BG_COLOR,
+    i18nPath: "contextmenu.table.cellBackgroundColor",
+    icon: "td-bg-color",
+    when: (payload) => {
+      return !payload.isReadonly && payload.isInTable && payload.options.mode !== "form" /* FORM */;
+    },
+    childMenus: [
+      ...COLOR_PALETTE.map((c) => ({
+        key: `${TD_BG_COLOR}_${c.value}`,
+        name: c.name,
+        color: c.value,
+        when: () => true,
+        callback: (command) => {
+          command.executeTableTdBackgroundColor(c.value);
+        }
+      })),
+      {
+        isDivider: true
+      },
+      {
+        key: `${TD_BG_COLOR}_custom`,
+        name: "Custom color...",
+        when: () => true,
+        callback: (command) => {
+          openNativeColorPicker("#ffffff", (color) => {
+            command.executeTableTdBackgroundColor(color);
+          });
+        }
+      },
+      {
+        key: `${TD_BG_COLOR}_none`,
+        name: "No fill",
+        when: () => true,
+        callback: (command) => {
+          command.executeTableTdBackgroundColor("");
+        }
+      }
+    ]
+  },
+  {
+    key: TD_BORDER_COLOR,
+    i18nPath: "contextmenu.table.tdBorderColor",
+    icon: "td-border-color",
+    when: (payload) => {
+      return !payload.isReadonly && payload.isInTable && payload.options.mode !== "form" /* FORM */;
+    },
+    childMenus: [
+      ...COLOR_PALETTE.map((c) => ({
+        key: `${TD_BORDER_COLOR}_${c.value}`,
+        name: c.name,
+        color: c.value,
+        when: () => true,
+        callback: (command) => {
+          command.executeTableTdBorderColor(c.value);
+        }
+      })),
+      {
+        isDivider: true
+      },
+      {
+        key: `${TD_BORDER_COLOR}_custom`,
+        name: "Custom color...",
+        when: () => true,
+        callback: (command) => {
+          openNativeColorPicker("#000000", (color) => {
+            command.executeTableTdBorderColor(color);
+          });
+        }
+      },
+      {
+        key: `${TD_BORDER_COLOR}_reset`,
+        name: "Reset to default",
+        when: () => true,
+        callback: (command) => {
+          command.executeTableTdBorderColor("");
+        }
+      }
+    ]
+  },
+  {
+    key: TD_PADDING,
+    i18nPath: "contextmenu.table.cellPadding",
+    icon: "td-padding",
+    when: (payload) => {
+      return !payload.isReadonly && payload.isInTable && payload.options.mode !== "form" /* FORM */;
+    },
+    childMenus: [
+      {
+        key: TD_PADDING_NONE,
+        i18nPath: "contextmenu.table.cellPaddingNone",
+        when: () => true,
+        callback: (command) => {
+          command.executeTableTdPadding([0, 0, 0, 0]);
+        }
+      },
+      {
+        key: TD_PADDING_COMPACT,
+        i18nPath: "contextmenu.table.cellPaddingCompact",
+        when: () => true,
+        callback: (command) => {
+          command.executeTableTdPadding([2, 4, 2, 4]);
+        }
+      },
+      {
+        key: TD_PADDING_NORMAL,
+        i18nPath: "contextmenu.table.cellPaddingNormal",
+        when: () => true,
+        callback: (command) => {
+          command.executeTableTdPadding([4, 5, 4, 5]);
+        }
+      },
+      {
+        key: TD_PADDING_COMFORTABLE,
+        i18nPath: "contextmenu.table.cellPaddingComfortable",
+        when: () => true,
+        callback: (command) => {
+          command.executeTableTdPadding([8, 12, 8, 12]);
+        }
+      }
+    ]
   }
 ];
 
@@ -25889,6 +26160,11 @@ var ContextMenu = class {
         if (menu.icon) {
           icon.classList.add(`${EDITOR_PREFIX}-contextmenu-${menu.icon}`);
         }
+        if (menu.color) {
+          const swatch = document.createElement("span");
+          swatch.style.cssText = `display:inline-block;width:12px;height:12px;border-radius:2px;background:${menu.color};border:1px solid rgba(0,0,0,0.2);margin-right:4px;vertical-align:middle;flex-shrink:0`;
+          menuItem.append(swatch);
+        }
         const span = document.createElement("span");
         const name = menu.i18nPath ? this._formatName(this.i18n.t(menu.i18nPath)) : this._formatName(menu.name || "");
         span.append(document.createTextNode(name));