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

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

XMLWordPrintable

    • 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)

      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.

        1. js-snippets.zip
          5 kB

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

              Created:
              Updated:
              Resolved: