【16.1.0】插入一张浮动图片，在图片前边插入多列撤销之后图片尺寸变化[SJS-19584]

如图所示：


插入一张浮动图片，放在B列中间，选中A列，向右插入10列，在撤销之后，图片尺寸变大，图片设置pic.dynamicMove(true); pic.dynamicSize(false);
插入列的command为自定义command，代码如下：


// 右侧插入列事件注册
  public setPushCol(callBack) {
    this.spread.commandManager().register("pushMutiColsCommand", {
      canUndo: true,
      execute: (context, options, isUndo) => {
        const sheet = context.getSheetFromName(options.sheetName);
        let Commands = GC.Spread.Sheets.Commands;
        if (isUndo) {
          // fix框架bug: 插入列后反复撤销重做会导致图表宽度变化
          const charts = sheet.charts.all();
          const width = [];
          charts.forEach((item) => {
            width.push(item?.width());
          })
          Commands.undoTransaction(context, options);
          charts.forEach((item, index) => {
            item?.width(width[index]);
          })
          sheet.suspendPaint();
          sheet.suspendEvent();
          resetFrozenRange.call(this,false,'col','right',options.selections[0].col+options.selections[0].colCount -1,parseInt(options.addNum));
          callBack && callBack();
          sheet.resumePaint();
          sheet.resumeEvent();
          return true;
        } else {
          Commands.startTransaction(context, options);
          sheet.suspendPaint();
          sheet.suspendEvent();  //todo:使用后不会触发行列change事件回调，影响协同        
          try {
            if (parseInt(options.addNum)) {
              const col = options.selections[0].col < 0 ? 0 : options.selections[0].col;
              const lastCol = (options.selections[0].col + options.selections[0].colCount - 1) > sheet.getColumnCount(GC.Spread.Sheets.SheetArea.viewport) ? sheet.getColumnCount(GC.Spread.Sheets.SheetArea.viewport) : options.selections[0].col + options.selections[0].colCount - 1;
              const columnWidth = sheet.getColumnWidth(lastCol);
              let colCount = options.selections[0].colCount;
              // 记录选中列的style
              const styleList = [];
              for (let i = 0; i < sheet.getRowCount(); i++) {
                let style = sheet.getActualStyle(i, lastCol, GC.Spread.Sheets.SheetArea.viewport, true);
                style.backgroundImage = null;
                styleList.push(style);
              }
              insertColChart(sheet, col + 1);
              resetFrozenRange.call(this,true,'col','right',col + colCount-1,parseInt(options.addNum));
              sheet.resumePaint();
              sheet.resumeEvent();
              sheet.addColumns(col + colCount, parseInt(options.addNum));
              sheet.suspendPaint();
              sheet.suspendEvent();//todo:使用后不会触发行列change事件回调，影响协同
              for (let i = 0; i < options.addNum; i++) {
                // 设置插入列的列宽
                sheet.setColumnWidth(col + colCount + i, columnWidth);
                // 设置插入的列为选中列的样式，自号、颜色等、加粗等
                for (let j = 0; j < sheet.getRowCount(); j++) {
                  sheet.setStyle(j, col + colCount + i, styleList[j]);
                }
              }
              sheet.setSelection(-1, col + colCount, sheet.getRowCount(), parseInt(options.addNum));
              callBack && callBack();
              resetCharts(sheet);
            }
          } catch (e) {
            console.log(e);
          }
          sheet.resumePaint();
          sheet.resumeEvent();
          Commands.endTransaction(context, options);
          this.spread.focus(true);
          return true;
        }
      }
    });
  }

这边调研了一下，推测是因为撤销操作执行后，图片所在的列被消除，使得该图片被挤了回来，且大小也发生了变化。

我这边尝试在撤销操作时，先将图片的所在列进行调整，然后再执行撤销，即消除列的操作，之后我这边就无法再重现了，代码如下，您试试看。

Joestar.Xu 发表于 2023-8-31 09:06
抱歉之前表述不准确，是的，可以使用shape，设置shape的allowResize为0即可。

因为我们最初使用picture实现的，如果改成shape可能改动有点大，暂时还得使用picture，麻烦您用我的demo复现一下问题，看能否解决当前的问题

抱歉之前表述不准确，是的，可以使用shape，设置shape的allowResize为0即可。

Joestar.Xu 发表于 2023-8-30 17:09
既然要限定图片的缩放模式，为什么不直接使用图片呢？

你是说使用shape吗

既然要限定图片的缩放模式，为什么不直接使用图片呢？

Joestar.Xu 发表于 2023-8-18 12:12
您好，也就是说要复现您的这个问题，需要满足以下三点：

首先表格需要够大。

在demo中我添加了一段代码，现在可以复现这个问题


操作步骤（如果一次不能复现，就将图片拖拽变小多试几次）：
1、先将插入的图片拖拽变小
2、在图片之前插入列
3、undo撤销，即可看见图片尺寸变大
插入图片撤销变形.zip (31.77 KB, 下载次数: 36)

2023-8-30 15:01 上传

点击文件名下载附件

您好，也就是说要复现您的这个问题，需要满足以下三点：

首先表格需要够大。
其次插入的图片的需要超出可视区域。
最后插入足够多的列后撤销。

对吗？

如果是的话，我这边按照您说的在原来的demo上做了一些调整，但是未能复现出您的问题。



我已将这个Demo上传，可以的话请您在这个Demo中调整复现后再上传给我们这边，以供我们复现后进一步调研。

Joestar.Xu 发表于 2023-8-16 16:49
可能我之前的表述让您产生了误解，我再详细解释一下，前文说的可视区域，实际上指的是有单元格的区域，如： ...

比如我们的的单元格总共是200行*20列，可显示区域是20行10列
1、我们的图片是通过以下方法插入的

const pic = sheet.pictures.add(picName, imgSrc, 0, 0, width, height);
pic.startRow(row);
    pic.startColumn(col);
    pic.pictureStretch(0);
    pic.dynamicMove(true);
    pic.dynamicSize(false);

2、图片并没有超出200行*20列，可在当前可视区域内，但是插入列，在撤销插入后，也是会出现图片变大的情况
3、您说的，图片超出单元格区域后，插入列，在撤销列，图片宽高改变，这个问题跟我说的问题不一样，我插入的图片没有超出单元格单元格区域，也在可视范围内，但是撤销插入行列后，图片会变很大

可能我之前的表述让您产生了误解，我再详细解释一下，前文说的可视区域，实际上指的是有单元格的区域，如：



当插入的图片没有超出单元格的区域，一切正常。

但是当插入的图片超出了单元格的区域，增加列，再撤销，就会使这个超出可视区域的图片强制缩小到单元格的区域内。



因此如果想要解决这个问题，只能通过ShapeChanged事件去做，当用户粘贴一个图片进来的时候，通过图片的坐标、高度、宽度和单元格区域的宽度和高度来判断单元格区域与这个图片的关系，如果图片超出单元格区域，就修改这个图片的宽度到不超出单元格区域。