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

Stunner - Editor API Canvas/Session/Domain Definitions exposed in JS

    XMLWordPrintable

Details

    • 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), 2022 Week 50-02 (from Dec 12), 2023 Week 03-05 (from Jan 16), 2023 Week 06-08 (from Feb 6), 2023 Week 09-11 (from Feb 27), 2023 Week 12-14 (from Mar 20), 2023 Week 15-17 (from Apr 10)

    Description

      Goals: Expose the Editor Canvas and Session APIs in js  allowing  the interaction with the canvas and its elements only using js/ts. 

      This implementation exposes the API into the diagram frame only. For testing purposes (IT tests) and futher validation it is ok to consume them directly from the frame.

      Considering the multiplying architecture for VsCode, Standalone editor and other channels the API needs also to be exposed through the "Envelope" to be properly consumed by developers without issues.  It will also favor the automatic generation of documentation. 

      Actions

      Domain model

      • Refactor use of APT by pure js declaration of model objects
        • Drop use of Errai data binding
        • Adapters refactoring
        • Rules refactoring
        • Domain initialization refactoring
        • Drop model/domain processors
      • Exposing JS API's
        • Canvas (Lienzo low level API) 
        • Session (Stunner low level API)

       

      Canvas API

        // Get canvas instance

      // Standalone Editor
var canvas = window.frames[0].frames[1].canvas
// VsCode from the active frame
var canvas = window.frames.canvas
      Function Parameters Return Type Description
      getNodeIds   String[] get all nodes ids
      getBackgroundColor String id String get background color
      setBackgroundColor String id,
      String color      		   set background color,
      take color name or color Hex code
      e.g. 'black' or '#000000'
      getBorderColor String id String get border color
      setBorderColor String id,
      string color      		   set border color,
      take color name or color Hex code
      e.g. 'black' or '#000000'
      getLocation String id Number[] get location [x, y]
      getAbsoluteLocation String id Number[] get absolute location [x, y]
      getDimensions String id Number[] get dimensions [width, height]
      applyState String id,
      String state      		   apply state {'none', 'highlight', 'selected', 'invalid'}
      center String id   center node in the viewable canvas,
      only applicable to large diagrams where the node is not within the visible area
      isConnected String id1,
      String id2      		 boolean check if two nodes are connected
      isShapeVisible String id1 boolean check if the node is within the viewable canvas
      translate Number x,
      Number y      		   change canvas viewable area
      getTranslateX   Number get X position of the viewable canvas
      getTranslateY   Number get Y position of the viewable canvas
      scale Number factor   scale the diagram (zoom in/out)
      scaleWithXY Number x,
      Number y      		   scale the diagram (zoom in/out)
      getScaleX   Number get X scale factor
      getScaleY   Number get Y scale factor
      getLayer   Layer get HTMLCanvasElement element
      getCanvas   HTMLCanvasElement get canvas Layer instance
      getViewport   Viewport get canvas Viewport instance
      getNativeContext   NativeContext2D get canvas NativeContext2D instance
      draw     repaint canvas,
      apply graphic changes to the shapes in the canvas
      add Primitive shape   add shape to the canvas
      primitive shapes are available in the package "com.ait.lienzo.client.core.shape"
      e.g. var rect = new com.ait.lienzo.client.core.shape.Rectangle(50, 50);
      To add the shape to the specific position on canvas you can use the shape x and y properties
      getShape String id Primitive get shape instance
      getWiresShape String id WiresShape get WiresShape instance,
      wireshapes can group shapes and handle them as single composite "shape", besides the basic shape functionalities it adds connection capabilities through magnets and means to iterate through its grouped elements
      To get a specific shape in the group of shapes of a node use the method 'flatShapes()' of the WiresShape and then from array of shapes pick a shape
      close     close canvas

      Session API

       // Get session instance

      // Standalone editor
var session = window.frames[0].frames[1].editor.session
// VsCode from the active frame
var session = window.frames.editor.session
      Function Parameters Return Type Description
      getNodeByUUID String id Node get Node instance by id
      getNodeByName String name Node get Node instance by name
      getNodeName Node node String get name from Node instance
      getEdgeByUUID String id Edge get Edge instance by id
      getSelectedElementUUID   String get selected element id
      selectByUUID String id   select element by id
      selectByName String name   select element by name
      clearSelection     clear selection
      getSelectedNode   Node get selected Node instance
      getSelectedEdge   Edge get selected Edge instance
      getSelectedDefinition   Object get definition Object from selected Node
      This object contains all declared Node properties and values
      getName Object definition String get name from Definition instance

      Acceptance criteria

      All functions listed above are implemented and accessible via javascript.

      There is refactoring around the Model, Domain, rules and Adapters so the editor should load and present workflows just like before the changes.

      Attachments

        Issue Links

          blocks

          Task - Represents a small unit of work that is not end-user facing. KOGITO-9085 Use Session API in diagram navigation VSCode extension test

          • Major - To be worked after higher priority work items are addressed. When the severity is high and the effort to change it is low to moderate, this term is chosen. Issues in this category likely have an existing workaround but implementation or execution may be non-trivial.
          • Open
          causes

          Bug - A problem that impairs or prevents the functions of the product. KOGITO-9303 SWF - Selecing nodes using session API doesn't change the cursor in text editor

          • Major - To be worked after higher priority work items are addressed. When the severity is high and the effort to change it is low to moderate, this term is chosen. Issues in this category likely have an existing workaround but implementation or execution may be non-trivial.
          • Closed

          Bug - A problem that impairs or prevents the functions of the product. KOGITO-8964 SWF Viewer - setBackgroundColor function sets black color for non-existent color values

          • Major - To be worked after higher priority work items are addressed. When the severity is high and the effort to change it is low to moderate, this term is chosen. Issues in this category likely have an existing workaround but implementation or execution may be non-trivial.
          • Open

          Bug - A problem that impairs or prevents the functions of the product. KOGITO-8977 SWF Viewer - center function doesn't work when the whole node is visible

          • Major - To be worked after higher priority work items are addressed. When the severity is high and the effort to change it is low to moderate, this term is chosen. Issues in this category likely have an existing workaround but implementation or execution may be non-trivial.
          • Open
          is triggering

          Task - Represents a small unit of work that is not end-user facing. KOGITO-7066 SWF - Expose Stunner API through omnichannel architecture

          • Major - To be worked after higher priority work items are addressed. When the severity is high and the effort to change it is low to moderate, this term is chosen. Issues in this category likely have an existing workaround but implementation or execution may be non-trivial.
          • Resolved

          Task - Represents a small unit of work that is not end-user facing. KOGITO-8965 SWF Viewer - Add function for getting Edge Ids to Session API

          • Major - To be worked after higher priority work items are addressed. When the severity is high and the effort to change it is low to moderate, this term is chosen. Issues in this category likely have an existing workaround but implementation or execution may be non-trivial.
          • Open
          relates to

          Bug - A problem that impairs or prevents the functions of the product. KOGITO-8793 BoudingBox values of states with icons and tooltip boxes are wrong

          • Critical - To be worked on immediately following BLOCKER issues.
          • Closed

          Task - Represents a small unit of work that is not end-user facing. KOGITO-8547 Add support for selecting nodes in VSCode extension tests

          • Major - To be worked after higher priority work items are addressed. When the severity is high and the effort to change it is low to moderate, this term is chosen. Issues in this category likely have an existing workaround but implementation or execution may be non-trivial.
          • Resolved

          Activity

            People

              handreyrc Handrey Cunha
              romartin@redhat.com Roger Martinez
              Lubomir Terifaj Lubomir Terifaj
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: