Uploaded image for project: 'Kogito'
  1. Kogito
  2. KOGITO-7644

Lienzo - Native Support for orthogonal segments in lines

    XMLWordPrintable

Details

    • False
    • None
    • False
    • ---
    • ---
    • 2022 Week 29-31 (from Jul 18), 2022 Week 32-34 (from Aug 8), 2022 Week 35-37 (from Aug 29), 2022 Week 38-40 (from Sept 19), 2022 Week 41-43 (from Oct 10), 2022 Week 44-46 (from Oct 31), 2022 Week 47-49 (from Nov 21)

    Description

      The main goal is to provide native orthogonal segments support for lines in Lienzo.

      Actually lienzo only provides support for polylines, but it doesn't consider orthogonality of segments. This way if a segment connecting two nodes is orthognal it should remain as othogonal while one of the nodes is moved.

      An aplication example "Orthogonal Lines" with orthogonal lines enabled will be made available in the lienzo-webapp in order to validate this implementation. 

       

      Acceptance Criteria

      • Line becomes a composition of 2 types of segments:
        • "Orthogonal" (relative to the X/Y axis)
          • Horizontal (west <-> east) == –
          • Vertical (north <-> south) ==> |
          • Connected to a fixed or auto  magnet , or the combination of both 
        • Regular ==>  / , \ or conneted to center magnet
        • [Note] Notice even if 2 segments are defining a 90º degree angle between them, it does not mean those will behave as orthogonal segments. Only H/V segments, relative to the coordinate system (X/Y axis) are behaving as orthogonal, otherwise, it's being considered a regular one
      • Behavior of the segments
        • Depending on the direction of the segment, it will behave orthogonal or regular, so behavior changes dynamically given the endings location and so the segment direction
        • Orthogonal segments will stay in the same direction while moving the endings when connected to a fixed magnet
        • Orthogonal segments may change direction while moving the endings when connected to an auto magnet
        • Regular segments may change their direction while moving any of both endings
      • Drag capabilities for orthogonal segments
        • Orthogonal segments can be moved top/down (when H segment), or left/right (when V segment), by dragging the segment handle icon.
          • Drag the segment to a new position makes the segment a pinned segment (orange handle)
          • If the distance between the two points of the orthogonal segment (the segment is too short) is less than 20 pixels the handle icon won't be shown. Otherwise, the handle icon will overlap the bendpoints of that segment and the user won't be able to interact with them. 
        • Unpinning an orthogonal segment that was moved to a different position by the user will cause the recalculation of the path depending on the position of the nodes  
      • Pinning capabilities for orthogonal segments
        • There are two types of orthogonal segments to be considered when moving nodes:
          • Inferred (blue handle): those created/destroyed automatiacally based on the position of the nodes
          • User Defined/pinned (orange handle): those pinned/moved by the user that should keep their position
            • if the pinned segment is vertical, it might grow verticaly, however, it must to keep the X coordinate fixed
            • if the pinned segment is horizontal, it might grow  horizontaly, however, it must keep the Y coordinate fixed
        • For pinning/unpinning an orthogonal segment click on the handle icon
        • Points of pinned segments are marshalled to the XML, this way when the diagram is reopened they will remain pinned
      • Bendpoints
        • Bendpoints will be available for all segments, as it currently works in the polylines
        • Users will be able to create new bendpoints, on any segment
        • Users will be able to delete new bendpoints, on any segment
        • Users will be able to move bendpoints around
        • Implications with segments:
          • Once moving a bendpoint to a different location, the segment will behave orthogonal or regular given its final direction
          • While moving a bendpoint and the angle between the two regular segments reaches 90°, an "L" angle icon will appear next to the bendpoint then if the bendpoint is released the segments will be converted to orthogonal.  
          • And vice versa
      • Magnet selection strategy
        • Depends on the location & bounding boxes of both source / target shapes and the type of the connection set (Automatic / Fixed)
        • Type of connetion can be changed by clicking on the source/target control-point of the line
            • "A" inside the control-point indicates the connection is set to auto-magnet. The magnet will be be selected automaically based on the position of the source and target nodes.
            • "F" inside  the control-point indicates the connetion is set to fixed. The magnet won't change if any of the nodes move.

       

      Known issues and Improvements

      • Change the connetion to fixed,  pin the vertical orthogonal segment,  move the target node vertically to below the source node  then move the target shape around until some points reach the same coordinates.  There will be more than one point at the same coordinates. A possible solution is to merge the points in the same coordinates or somehow prevent the points from reaching same coordinates.
      • Orthogonality is broken in some situations: source/target nodes overlap
      • With the magnets auto by default, pin a vertical segment and move the taget shape vertically(only Y) to be above or below the source shape, then unpin the segment. It will cause the line to be rebuilt but the old handle and control points are not being destroyed.

      Attachments

        Issue Links

          Activity

            People

              handreyrc Handrey Cunha
              handreyrc Handrey Cunha
              Lubomir Terifaj Lubomir Terifaj
              Lubomir Terifaj Lubomir Terifaj
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

                Created:
                Updated: