Gist containing APL document to change orientation of arrow

APLArrowDoc.json

{
  "type": "APL",
  "version": "1.4",
  "settings": {},
  "theme": "dark",
  "import": [],
  "resources": [],
  "styles": {},
  "onMount": [],
  "graphics": {
    "Arrow": {
      "type": "AVG",
      "version": "1.1",
      "height": 100,
      "width": 100,
      "items": {
        "type": "path",
        "fill": "red",
        "pathData": "M 50 0 L 100 50 L 75 50 L 75 100 L 25 100 L 25 50 L 0 50"
      }
    }
  },
  "commands": {
    "recordPosition": {
      "parameters": [
        "prefix"
      ],
      "commands": [
        {
          "type": "Parallel",
          "commands": [
            {
              "type": "SetValue",
              "componentId": "TouchArea",
              "property": "${prefix}X",
              "value": "${event.component.x}"
            },
            {
              "type": "SetValue",
              "componentId": "TouchArea",
              "property": "${prefix}Y",
              "value": "${event.component.y}"
            }
          ]
        }
      ]
    },
    "updateDirection": {
      "commands": [
        {
          "when": "${(Math.abs(upX - downX) - Math.abs(upY - downY)) > 0 }",
          "type": "SetValue",
          "componentId": "TouchArea",
          "property": "direction",
          "value": "${((upX - downX) > 0 ) ? 'RIGHT' : 'LEFT'}"
        },
        {
          "when": "${(Math.abs(upX - downX) - Math.abs(upY - downY)) < 0 }",
          "type": "SetValue",
          "componentId": "TouchArea",
          "property": "direction",
          "value": "${((upY - downY) > 0 ) ? 'DOWN' : 'UP'}"
        }
      ]
    }
  },
  "layouts": {},
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": [
      {
        "type": "Container",
        "width": "100vw",
        "height": "100vh",
        "items": [
          {
            "type": "Container",
            "width": "100%",
            "height": "10%",
            "id": "header",
            "items": [
              {
                "when": "${viewport.shape == 'rectangle'}",
                "type": "Text",
                "id": "headerText",
                "width": "100%",
                "height": "100%",
                "paddingLeft": "10dp",
                "text": "Flick Action Example",
                "textAlignVertical": "center"
              }
            ]
          },
          {
            "type": "Container",
            "id": "body",
            "width": "100%",
            "height": "90%",
            "justifyContent": "center",
            "alignItems": "center",
            "items": [
              {
                "type": "Container",
                "width": "80%",
                "height": "80%",
                "items": [
                  {
                    "type": "Frame",
                    "width": "100%",
                    "height": "100%",
                    "backgroundColor": "#564863",
                    "items": [
                      {
                        "type": "Container",
                        "width": "100%",
                        "height": "100%",
                        "item": [
                          {
                            "type": "TouchWrapper",
                            "id": "TouchArea",
                            "width": "100%",
                            "height": "100%",
                            "bind": [
                              {
                                "name": "downX",
                                "type": "number",
                                "value": "${0}"
                              },
                              {
                                "name": "downY",
                                "type": "number",
                                "value": "${0}"
                              },
                              {
                                "name": "upX",
                                "type": "number",
                                "value": "${0}"
                              },
                              {
                                "name": "upY",
                                "type": "number",
                                "value": "${0}"
                              },
                              {
                                "name": "direction",
                                "type": "string",
                                "value": ""
                              }
                            ],
                            "onDown": [
                              {
                                "type": "recordPosition",
                                "prefix": "down"
                              }
                            ],
                            "onUp": [
                              {
                                "type": "recordPosition",
                                "prefix": "up"
                              }
                            ],
                            "onPress": [
                              {
                                "type": "updateDirection"
                              },
                              {
                                "when": "${direction != ''}",
                                "type": "SetValue",
                                "property": "transform",
                                "componentId": "arrow",
                                "value": [
                                  {
                                    "rotate": "${direction == 'UP' ? 0 : direction == 'DOWN' ? 180 : direction == 'RIGHT' ? 90 : 270}"
                                  }
                                ]
                              },
                              {
                                "type": "SetValue",
                                "property": "direction",
                                "value": ""
                              }
                            ],
                            "items": [
                              {
                                "type": "Container",
                                "width": "100%",
                                "height": "100%",
                                "justifyContent": "center",
                                "alignItems": "center",
                                "items": [
                                  {
                                    "type": "VectorGraphic",
                                    "id": "arrow",
                                    "width": "300dp",
                                    "height": "300dp",
                                    "source": "Arrow",
                                    "scale": "best-fit"
                                  }
                                ]
                              }
                            ]
                          },
                          {
                            "type": "Text",
                            "position": "absolute",
                            "fontSize": "20dp",
                            "text": "Try flicking this area."
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}