Cursor hover in cell type custom

Cursor hover in cell type custom

Posted by: pedro.moraes on 5 May 2023, 3:39 am EST

• 

  pedro.moraes

  • Post Options:
  • Link
    Copy

  Posted 5 May 2023, 3:39 am EST

  Hi,

  I created a Cell Type that has an icon. But I need that when hovering over the cell the cursor changes the style to pointer. When I hover it activates processMouseEnter but does not activate activateEditor. Can you help me?

  export class EditPremissaCellType extends GC.Spread.Sheets.CellTypes.Base {
    mapIcones = new Map([
      [
        'icon-edit',
        new Path2D(
          'M926.293 883.626c-29.627 29.515-70.496 47.762-115.627 47.762s-86-18.248-115.632-47.767l-575.995-575.995c-5.016-5.195-8.732-11.678-10.602-18.904l-0.065-0.296-65.707-234.667c-0.936-3.335-1.474-7.164-1.474-11.119 0-23.564 19.103-42.667 42.667-42.667 0.518 0 1.035 0.009 1.549 0.028l-0.074-0.002c1.668-0.308 3.587-0.484 5.547-0.484s3.879 0.176 5.742 0.514l-0.195-0.029 234.667 64c7.522 1.935 14.005 5.65 19.212 10.679l575.988 575.988c30.026 29.711 48.619 70.924 48.619 116.48s-18.593 86.77-48.605 116.466l-0.014 0.014zM865.707 712.96l-567.040-568.32-151.467-42.667 40.533 154.027 567.893 567.040c14.086 14.086 33.546 22.798 55.040 22.798 42.989 0 77.838-34.849 77.838-77.838 0-21.494-8.712-40.954-22.798-55.040v0z'
        ),
      ],
      [
        'icon-delete',
        new Path2D(
          'M896 768h-170.667v42.667c0 70.692-57.308 128-128 128v0h-170.667c-70.692 0-128-57.308-128-128v0-42.667h-170.667c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h42.667v-554.667c0-70.692 57.308-128 128-128v0h426.667c70.692 0 128 57.308 128 128v0 554.667h42.667c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0zM384 810.666c0 23.564 19.103 42.667 42.667 42.667v0h170.667c23.564 0 42.667-19.103 42.667-42.667v0-42.667h-256zM768 128c0-23.564-19.103-42.667-42.667-42.667v0h-426.667c-23.564 0-42.667 19.103-42.667 42.667v0 554.667h512zM426.667 213.333c23.564 0 42.667 19.103 42.667 42.667v0 256c0 23.564-19.103 42.667-42.667 42.667s-42.667-19.103-42.667-42.667v0-256c0-23.564 19.103-42.667 42.667-42.667v0zM597.333 213.333c23.564 0 42.667 19.103 42.667 42.667v0 256c0 23.564-19.103 42.667-42.667 42.667s-42.667-19.103-42.667-42.667v0-256c0-23.564 19.103-42.667 42.667-42.667v0z'
        ),
      ],
    ]);
  
    changeCursorStyle = false;
  
    constructor(private icone: string, private color: string) {
      super();
      this.typeName = 'EditPremissaCellType';
    }
  
    paint(
      ctx: CanvasRenderingContext2D,
      _value: any,
      x: number,
      y: number,
      _w: number,
      h: number,
      _style: GC.Spread.Sheets.Style,
      context?: any
    ) {
      if (!ctx) {
        return;
      }
      ctx.save();
      ctx.fillStyle = this.color;
      ctx.translate((x + 5) * context.sheet.zoom(), (y + h - 5) * context.sheet.zoom());
      ctx.scale(-0.016 * context.sheet.zoom(), 0.016 * context.sheet.zoom());
      ctx.rotate(Math.PI);
      ctx.fill(this.mapIcones.get(this.icone));
      ctx.restore();
    }
  
    getHitInfo(x: number, y: number, _cellStyle: GC.Spread.Sheets.Style, cellRect: GC.Spread.Sheets.Rect, context?: any) {
      const hitInfoObject: GC.Spread.Sheets.IHitTestCellTypeHitInfo = {
        cellRect: cellRect,
        col: context.col,
        row: context.row,
        sheet: context.sheet,
        sheetArea: context.sheetArea,
        x: x,
        y: y,
        isReservedLocation: false,
      };
      return hitInfoObject;
    }
  
    processMouseEnter(hitInfo: GC.Spread.Sheets.IHitTestCellTypeHitInfo): boolean {
      let sheet = hitInfo.sheet;
      sheet.endEdit();
      sheet.setActiveCell(hitInfo.row, hitInfo.col);
      sheet.startEdit();
      this.changeCursorStyle = true;
      return true;
    }
  
    activateEditor(editorContext: HTMLElement, _cellStyle: GC.Spread.Sheets.Style, _cellRect: GC.Spread.Sheets.Rect, _context?: any): void {
      if (this.changeCursorStyle) {
        editorContext.style.cursor = 'pointer';
      }
    }
  }

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 7 May 2023, 10:59 pm EST

  Hello Pedro,

  You can bind an event handler to the mousemove event of canvas element of the sheet to change the cursor type and active cell in the sheet and then prevent the mousemove event from propagating further so that the internal life cycle of SpreadJS does not change the cursor type to default again.

  Please refer to the code snippet and attached sample for further understanding.

  let workbookCanvas = document.querySelector('[gcuielement="gcWorksheetCanvas"]');
  // changes mouse cursor when cursor hovers over a certain cell
  workbookCanvas.addEventListener('mousemove', (e) => {
      if (e.button === 0 && e.which === 1) {
          return;
      }
      let hitTestInfo = spread.hitTest(e.offsetX, e.offsetY);
      let sheet = spread.getActiveSheet();
      if (hitTestInfo && hitTestInfo.worksheetHitInfo) {
          let worksheetHitInfo = hitTestInfo.worksheetHitInfo;
          let row = worksheetHitInfo.row;
          let col = worksheetHitInfo.col;
          if (row === 1 && col === 1) {
              workbookCanvas.style.cursor = 'pointer';
              sheet.endEdit();
              sheet.setActiveCell(row, col);
              e.stopImmediatePropagation();
          }
      }
  }, true);
  

  Sample: https://jscodemine.grapecity.com/share/hMvHAabjik2QIa-MiyuiSQ/

  Please let us know if the issue still persist.

  Regards,

  Ankit