Allow a shape only to be moved horizontally

Allow a shape only to be moved horizontally

Posted by: christian.baumgartner on 5 March 2023, 8:57 pm EST

• 

  christian.baumgartner

  • Post Options:
  • Link
    Copy

  Posted 5 March 2023, 8:57 pm EST

  Hi,

  is there a way to allow a shape only to be move horizontally.
  
  Like with the ResizeMode.horizontal for resizing.

  Thanks,

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 7 March 2023, 4:55 am EST

  Dear Christian,

  I hope this message finds you well. I wanted to bring to your attention some information that may be helpful in your work with shapes on worksheets.

  I wanted to let you know that when you move a shape on a worksheet, the move() method of the GC.Spread.Sheets.Shapes.ShapeUI class is called. This method changes the position of the shape on the worksheet. However, if you only want to move the shape horizontally, you can override this method by passing a constant value for the y coordinate in the arguments of the move() method. I have included a code snippet and a sample for further understanding.

  To add a shape to the sheet, you can use the following code:

  let shape = sheet.shapes.add("rectangle", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 40, 20, 150, 150);

  To override the move method of ShapeUI class, you can use the following code:

  let oldMove = GC.Spread.Sheets.Shapes.ShapeUI.prototype.move;
  GC.Spread.Sheets.Shapes.ShapeUI.prototype.move = function (x, y) {
  oldMove.apply(this, [x, shape.y()]);
  }

  I have also included a link to a sample that you may find useful: https://jscodemine.grapecity.com/share/iEMQ2hCDWUKd5k3OUwrZMg/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  If you have any questions or issues, please do not hesitate to let us know. Additionally, I have included some helpful links to the ShapeCollection class and the Shape class for your reference:

  ShapeCollection class: https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Shapes.ShapeCollection

  Shape class: https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Shapes.Shape

  Thank you for your time and consideration.

  Best regards,

  Ankit

• 

  christian.baumgartner

  • Post Options:
  • Link
    Copy

  Posted 7 March 2023, 8:23 am EST

  Hi Ankit,

  many thanks for your help and the sample. It seems to work, but there is a problem if you zoom in and out. The location of the shape is then not updated correctly and it moves up and down in the rows.

  Any suggestion how to fix this?

  Many Thanks, Christian.

• 

  christian.baumgartner

  • Post Options:
  • Link
    Copy

  Posted 8 March 2023, 8:45 pm EST

  Hi,

  any update on this?

  Thanks, Christian

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 8 March 2023, 9:06 pm EST

  Hello Christian,

  You can keep the shape aligned with the rows by simply multiplying the zoom factor of the sheet to the y coordinates of the shape in the move() method of GC.Spread.Sheets.Shapes.ShapeUI class.

  Please refer to code snippet and attached sample.

  // overriding the move method of ShapeUI class
  let oldMove = GC.Spread.Sheets.Shapes.ShapeUI.prototype.move;
  GC.Spread.Sheets.Shapes.ShapeUI.prototype.move = function (x, y) {
      oldMove.apply(this, [x, shape.y() * sheet.zoom()]);
  }

  Sample: https://jscodemine.grapecity.com/share/A4SwfIVxwkGSzwx_V00Qqg/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  Doc reference

  sheet.zoom(): https://www.grapecity.com/spreadjs/api/v16/classes/GC.Spread.Sheets.Worksheet#zoom

  Regards,

  Ankit