spreadjs实现类似于企业微信的协同提示

核心代码

import * as GC from "@grapecity-software/spread-sheets";

function HighlightLayout(name:string){
    this.name = name;
    this._eventNs = ".HighlightLayout" + name || "";
    this._sheetRangesInfo = {}
}
HighlightLayout.prototype.bind = function(spread:GC.Spread.Sheets.Workbook){
    if(spread){
        this._content = spread;
        this._container = this._createLayoutContainer(spread.getHost())
        this._bindEvents(spread);
    }
}
HighlightLayout.prototype._createLayoutContainer = function(host:HTMLElement){
    host.style.position = "relative";
    var container = document.createElement('div');
    container.style.cssText = "position: absolute;height: 100%;width: 100%;top: 0px;left: 0px;pointer-events: none";
    host.appendChild(container)
    return container;
}
HighlightLayout.prototype._bindEvents = function(context:GC.Spread.Sheets.Workbook){
    var self = this;
    context.bind(GC.Spread.Sheets.Events.TopRowChanged + self._eventNs, function (e, data) {
        setTimeout(function(){
            self._resetLayout();
        },0);
    });
    context.bind(GC.Spread.Sheets.Events.LeftColumnChanged + self._eventNs, function (e, data) {
        setTimeout(function(){
            self._resetLayout();
        },0);
    });
    context.bind(GC.Spread.Sheets.Events.ColumnWidthChanged + self._eventNs, function (e, data) {
        setTimeout(function(){
            self._resetLayout();
        },0);
    });
    context.bind(GC.Spread.Sheets.Events.RowHeightChanged + self._eventNs, function (e, data) {
        setTimeout(function(){
            self._resetLayout();
        },0);
    });
    context.bind(GC.Spread.Sheets.Events.FormulatextboxActiveSheetChanged + self._eventNs, function (e, data) {
        setTimeout(function(){
            self._resetLayout();
        },0);
    });
}

HighlightLayout.prototype._resetLayout = function(id){
    var content = this._content,
        container = this._container,
        sheet = content.getActiveSheet();

    //clear Layout
    container.innerHTML = "";

    var rangesInfo = this._sheetRangesInfo[sheet.name()];
    if(!rangesInfo){
        return;
    }
    for(var id in rangesInfo){
        var info = rangesInfo[id];
        if(!info.ranges){
            continue;
        }
        for(var i = 0; i < info.ranges.length; i++){
            this._paintRange(container, id + "_" + i,sheet, info.ranges[i], info.option,id)
        }
    }
}
HighlightLayout.prototype._paintRange = function(container:any, id:any, sheet:any, hightlightRange:any, option:any,name:string){
    const noneBorderStyle = "none",
        highlightBorderStyle = "3px solid " + (option && option.borderColor) || "lightseagreen";
    var tlRect = {},rbRect = {};
    var actualArea = {};
    for(var i = hightlightRange.row; i < hightlightRange.row + hightlightRange.rowCount; i++){
        var breakFlag = false;
        for(var j = hightlightRange.col; j < hightlightRange.col + hightlightRange.colCount; j++){
            var rect = sheet.getCellRect(i, j);
            if(rect.x != null){
                tlRect = rect;
                actualArea.rowStart = i;
                actualArea.colStart = j;
                breakFlag = true;
                break;
            }
        }
        if(breakFlag){
            break
        }
    }
    for(var i = hightlightRange.row + hightlightRange.rowCount - 1; i >= hightlightRange.row; i--){
        var breakFlag = false;
        for(var j = hightlightRange.col + hightlightRange.colCount - 1; j >= hightlightRange.col; j--){
            var rect = sheet.getCellRect(i, j);
            if(rect.x != null){
                rbRect = rect;
                actualArea.rowEnd = i;
                actualArea.colEnd = j;
                breakFlag = true;
                break;
            }
        }
        if(breakFlag){
            break
        }
    }
    var trRect = sheet.getCellRect(actualArea.rowStart, actualArea.colEnd),
        lbRect = sheet.getCellRect(actualArea.rowEnd, actualArea.colStart),
        cornerRect = sheet.getCellRect(0, 0, -1, -1);
    var viewportWidth = cornerRect.width + sheet.getViewportWidth(0) + sheet.getViewportWidth(1),
        viewportHeight = cornerRect.height + sheet.getViewportHeight(0) + sheet.getViewportHeight(1);

    var x = tlRect.x || lbRect.x,
        y = tlRect.y || trRect.y,
        endX = trRect.x != undefined && (trRect.x + trRect.width) || rbRect.x != undefined && (rbRect.x + rbRect.width),
        endY = rbRect.y != undefined && (rbRect.y + rbRect.height) || lbRect.y != undefined && (lbRect.y + lbRect.height);

    var left = x && x - cornerRect.width >= 0,
        top = y && y - cornerRect.height >= 0,
        right = endX && endX <= viewportWidth,
        bottom = endY && endY <= viewportHeight;

    if(!(left || top || right || bottom)){
        return;
    }
    x = left ? x : cornerRect.width;
    y = top ? y : cornerRect.height;
    endX = right ? endX : viewportWidth;
    endY = bottom ? endY : viewportHeight;
    var rectWidth= endX - x,
        rectHeight = endY - y;

    var highLightRect = document.createElement('div');
    highLightRect.id = id;
    highLightRect.style.position = "absolute";
    highLightRect.style.pointerEvents = "none";

    highLightRect.style.left = x - 2 + "px";
    highLightRect.style.top = y - 2 + "px";
    highLightRect.style.height = rectHeight - 2 + "px";
    highLightRect.style.width = rectWidth - 2 + "px";

    highLightRect.style.borderLeft = left ? highlightBorderStyle : noneBorderStyle;
    highLightRect.style.borderTop = top ? highlightBorderStyle : noneBorderStyle;
    highLightRect.style.borderRight = right ? highlightBorderStyle : noneBorderStyle;
    highLightRect.style.borderBottom = bottom ? highlightBorderStyle : noneBorderStyle;
    //改变位置的代码在这
    highLightRect.innerHTML = '<div style="position:absolute;right:0px;top:0px;transform:translateY(-100%);width: 80px;height: 20px;text-align:center;background-color:#1B9AF7;font-size: 12px;">' + name + '</div>'
    container.appendChild(highLightRect);
}

HighlightLayout.prototype.addRanges = function(sheetName, id, ranges, option){
    if(sheetName && id && ranges && ranges.length){
        var rangesInfo = this._sheetRangesInfo[sheetName];
        if(!rangesInfo){
            this._sheetRangesInfo[sheetName] = rangesInfo = {};
        }
        rangesInfo[id] = {ranges, option}
        this._resetLayout(id);
    }
}

export default HighlightLayout

调用

<template>
  <div ref="ssDesigner" style="width:100%;height:98vh;border:1px solid darkgray"></div>
</template>

<script setup lang="ts">
import "@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import "@grapecity-software/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"
import "@grapecity-software/spread-sheets-designer-resources-cn"
import * as GC from "@grapecity-software/spread-sheets";
import * as GC2 from "@grapecity-software/spread-sheets-designer"
import "@grapecity-software/spread-sheets-vue";
import HighlightLayout from "./components/HeightLightLayout.ts"

import {onMounted,ref} from "vue";

const ssDesigner = ref(null);

onMounted(() => {
  if(ssDesigner.value){
    const divElement = ssDesigner.value as HTMLDivElement;
    if(divElement)
    {
      var designer = new GC2.Spread.Sheets.Designer.Designer(divElement);
      if(designer){
        const spread = designer.getWorkbook() as GC.Spread.Sheets.Workbook;
        //const sheet = spread?.getActiveSheet();
        let highlightLayout = new HighlightLayout();
        highlightLayout.bind(spread)
        highlightLayout.addRanges("Sheet1", "wjl等",
            [new GC.Spread.Sheets.Range(1, 1, 1, 1), new GC.Spread.Sheets.Range(1, 1, 1, 1)], { borderColor: "lightGreen" })
      }
    }else{
      console.log('divElement不存在')
    }
  }
})
</script>

<style scoped>

</style>

如果想多个就Add多个就行

highlightLayout.addRanges("Sheet1", "wjl等",
    [new GC.Spread.Sheets.Range(1, 1, 1, 1), new GC.Spread.Sheets.Range(1, 1, 1, 1)], { borderColor: "lightGreen" })
highlightLayout.addRanges("Sheet1", "cs等",
    [new GC.Spread.Sheets.Range(2, 2, 1, 1), new GC.Spread.Sheets.Range(2, 2, 1, 1)], { borderColor: "lightGreen" })

参考

https://demo.grapecity.com.cn/spreadjs/practice/cell/highlight-area-and-add-tag
https://jscodemine.grapecity.com/share/mpNp1KNJm0qbm0HYvAE1fA/
https://gcdn.grapecity.com.cn/showtopic-199661-1-152.html
https://gcdn.grapecity.com.cn/showtopic-148906-1-1.html
https://gcdn.grapecity.com.cn/showtopic-148123-1-332.html