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
  • Jump To Answer

  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

• 

  thom.prosch

  • Post Options:
  • Link
    Copy

  Posted 23 August 2023, 12:19 am EST

  Hi,

  I have a similiar problem. Can you guide me in how can I get access to the shape object, if it is not a constant, like in this case.

  // 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()]);
  }

  Many Thanks,
  
  thom

• 

  chandan.rawat

  

  • Post Options:
  • Link
    Copy

  Posted 24 August 2023, 12:59 am EST

  Hi,

  As per my understanding, you want to restrict the movement of only one shape object in the horizontal direction while allowing other shapes objects to move horizontally as well as vertically.

  For the above use case, you can add an event listener to the ShapeChanged event and store the shape that is selected. Inside the move() method of the ShapeUI class, only restrict the movement of a particular shape.

  Please refer to the attached sample.

  sample: https://jscodemine.grapecity.com/share/qlVSYIo6nECaj6w_UaRC1A/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  Please let us know if you face any issues. Also, if the above solution does not meet your requirements, please explain your use case in detail so that we can help you accordingly.

  Regards

• 

  thom.prosch

  • Post Options:
  • Link
    Copy

  Posted 26 August 2023, 10:18 pm EST

  Perfect, thanks a lot.
  
  BR, Thom