Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface DrawingToolImplementation

An interface holding the methods used by Custom Drawing Tools. See DrawingToolImplementation.render, DrawingToolImplementation.update, DrawingToolImplementation.anchorRestraints, DrawingToolImplementation.anchorStyles, DrawingToolImplementation.tooltips, DrawingToolImplementation.init.

Hierarchy

  • DrawingToolImplementation

Properties

anchorRestraints
anchorStyles
init
tooltips
update

Methods

render

Properties

anchorRestraints: function

Limits the valid X and Y coordinate ranges that the Anchors can be separated by.


 const MyCustomTool = {
     //...

     //anchors with these retraints can be up to 2 units apart in the Y axis and up to 14 units apart in the X axis
     anchorRestraints() {
         return [{y: 2}, {x: 14}]
     },

     //anchors with these restraints can be between the 4525 and 4535 price in the Y axis
     anchorRestraints() {
         return [{y: [4525, 4535]}]
     }

     //...
 }

Type declaration

    • Parameters

      Returns readonly AnchorRestraint[]

anchorStyles: function

Returns an array of AnchorStyle objects that define the colors for the Anchors in this Custom Drawing Tool.

 const MyCustomTool = {
     //...

     // The anchor at anchors[0] will be red, the anchor at anchors[1] will be blue
     anchorStyles() {
         return [{ color: 'red' }, { color: 'blue' }]
     },

     //...
 }

Type declaration

init: function

Initializes the state parameter of DrawingArgs.

const MyCustomTool = {
   init() {
       return {
           myCustomValue: 'hello world!',
           myCalculation: someBigCalculation()
       }
   },
   //...
}

Type declaration

    • (): any

    • Returns any

tooltips: function

Returns an array of DrawingTooltip objects.

const MyCustomTool = {
    //...
    tooltips({ anchors }) {
        return [
            {
                coord: anchors[0],
                alignment: {
                    tag: 'predef',
                    x: 'center',
                    y: 'center'
                },
                items: [
                    {
                        content: "Hurray5",
                        key: 'hurray',
                        title: "Woot-"
                    },
                    {
                        key: 'date',
                        content: new Date()
                    },
                    {
                        key: 'number',
                        content: 500
                    },
                    {
                        key: 'delta',
                        content: {delta: anchors[1].y.value - anchors[0].y.value}
                    }
                ]
            }
        ]
    },
    //...
}

Type declaration

    • Parameters

      Returns readonly DrawingTooltip[]

update: function

Updates the state of the DrawingArgs parameter.

const MyCustomTool = {
   //...
   update({state}) {
       if(checkSomeCondition(state)) {     //check a condition on your state
           return {                        //if it is true, re-run some big calculation
               newState: {
                   ...state,
                   myBigCalculation: runMyBigCalculation()
               }
           }
       }

       //returning nothing will keep the old state, or
       //you can return { newState: state }
   }
   //...
},

Type declaration

Methods

  • Returns a GraphicsResponse object that defines what graphics to render and where. The returned object should contain an items array of DisplayObject.

    //the render function of a custom tool

const MyCustomTool = {
   //...
   render({anchors, props}) {
       return {
           items: [
               //DisplayObjects here
           ]
       }
   }
   //...
}

    Parameters

    Returns GraphicsResponse

Generated using TypeDoc