{
  "custom": {
    "scale": 1,
    "x": 0,
    "y": 0
  },
  "params": {
    "controls": {
      "click": true,
      "in": true,
      "out": true,
      "pan": true,
      "reset": true,
      "zoom": true
    },
    "panning": true,
    "viewParams": {
      "highlightTagPath": "value"
    },
    "viewPath": "autStand/Detailed_Views/MCM-Views/MCM02"
  },
  "propConfig": {
    "custom.scale": {
      "binding": {
        "config": {
          "expression": "{page.props.dimensions.viewport.width} / 1920"
        },
        "transforms": [
          {
            "code": "\t#this script is to see the view in the DESIGNER!!!\n\tif value \u003d\u003d 0.0:\n\t\treturn 1\n\treturn value ",
            "type": "script"
          }
        ],
        "type": "expr"
      },
      "persistent": true
    },
    "custom.x": {
      "persistent": true
    },
    "custom.y": {
      "persistent": true
    },
    "params.controls": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.panning": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.viewParams": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.viewPath": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 1080,
      "width": 1920
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "EmbeddedView"
        },
        "position": {
          "height": 1,
          "width": 1
        },
        "propConfig": {
          "props.params": {
            "binding": {
              "config": {
                "path": "view.params.viewParams"
              },
              "type": "property"
            }
          },
          "props.path": {
            "binding": {
              "config": {
                "path": "view.params.viewPath"
              },
              "type": "property"
            }
          },
          "props.style.transform": {
            "binding": {
              "config": {
                "expression": "\"scale(\"+{view.custom.scale}+\") translate(\"+{view.custom.x}+\"px,\"+{view.custom.y}+\"px)\""
              },
              "type": "expr"
            }
          }
        },
        "props": {
          "style": {
            "overflow": "visible",
            "transition": "transform 100ms linear"
          },
          "useDefaultViewHeight": true,
          "useDefaultViewWidth": true
        },
        "type": "ia.display.view"
      },
      {
        "events": {
          "dom": {
            "onPointerMove": {
              "config": {
                "script": "\tif event.buttons \u003e 0:\n\t\tself.view.custom.x +\u003d event.movementX/self.view.custom.scale\n\t\tself.view.custom.y +\u003d event.movementY/self.view.custom.scale"
              },
              "scope": "G",
              "type": "script"
            },
            "onWheel": {
              "config": {
                "script": "\tif event.deltaY \u003c 0:\n\t\tself.view.custom.scale *\u003d 1.1\n\telse:\n\t\tself.view.custom.scale /\u003d 1.1"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "Overlay"
        },
        "position": {
          "height": 1,
          "width": 1
        },
        "propConfig": {
          "meta.visible": {
            "binding": {
              "config": {
                "path": "view.params.panning"
              },
              "type": "property"
            }
          }
        },
        "props": {
          "alignItems": "flex-end",
          "justify": "flex-end",
          "style": {
            "cursor": "grab",
            "user-select": "none"
          }
        },
        "type": "ia.container.flex"
      },
      {
        "events": {
          "dom": {
            "onClick": {
              "config": {
                "script": "\tself.view.custom.scale \u003d 1\n\tself.view.custom.x \u003d 0\n\tself.view.custom.y \u003d 0"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "Reset",
          "tooltip": {
            "enabled": true,
            "text": "Reset zoom"
          }
        },
        "position": {
          "height": 0.0324,
          "width": 0.0182
        },
        "propConfig": {
          "meta.visible": {
            "binding": {
              "config": {
                "path": "view.params.controls.reset"
              },
              "type": "property"
            }
          }
        },
        "props": {
          "path": "material/zoom_out_map",
          "style": {
            "color": "#555555",
            "cursor": "pointer",
            "filter": "invert(100%)",
            "mix-blend-mode": "difference"
          }
        },
        "type": "ia.display.icon"
      },
      {
        "events": {
          "dom": {
            "onClick": {
              "config": {
                "script": "\tself.view.custom.scale /\u003d 1.1"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "Out",
          "tooltip": {
            "enabled": true,
            "text": "Zoom out"
          }
        },
        "position": {
          "height": 0.0324,
          "width": 0.0182,
          "x": 0.0183
        },
        "propConfig": {
          "meta.visible": {
            "binding": {
              "config": {
                "path": "view.params.controls.out"
              },
              "type": "property"
            }
          }
        },
        "props": {
          "path": "material/zoom_out",
          "style": {
            "color": "#555555",
            "cursor": "pointer",
            "filter": "invert(100%)",
            "mix-blend-mode": "difference"
          }
        },
        "type": "ia.display.icon"
      },
      {
        "events": {
          "dom": {
            "onClick": {
              "config": {
                "script": "\tself.view.custom.scale *\u003d 1.1"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "In",
          "tooltip": {
            "enabled": true,
            "text": "Zoom in"
          }
        },
        "position": {
          "height": 0.0324,
          "width": 0.0182,
          "x": 0.0366
        },
        "propConfig": {
          "meta.visible": {
            "binding": {
              "config": {
                "path": "view.params.controls.in"
              },
              "type": "property"
            }
          }
        },
        "props": {
          "path": "material/zoom_in",
          "style": {
            "color": "#555555",
            "cursor": "pointer",
            "filter": "invert(100%)",
            "mix-blend-mode": "difference"
          }
        },
        "type": "ia.display.icon"
      },
      {
        "meta": {
          "name": "Zoom"
        },
        "position": {
          "height": 0.0324,
          "width": 0.0469,
          "x": 0.0549,
          "y": 0.0028
        },
        "propConfig": {
          "meta.visible": {
            "binding": {
              "config": {
                "path": "view.params.controls.zoom"
              },
              "type": "property"
            }
          },
          "props.placeholder.text": {
            "binding": {
              "config": {
                "expression": "round({view.custom.scale}*100)+\"%\""
              },
              "type": "expr"
            }
          },
          "props.value": {
            "binding": {
              "config": {
                "bidirectional": true,
                "path": "view.custom.scale"
              },
              "type": "property"
            }
          }
        },
        "props": {
          "dropdownOptionStyle": {
            "borderStyle": "none",
            "fontSize": "10px",
            "textAlign": "center"
          },
          "options": [
            {
              "label": "25%",
              "value": 0.25
            },
            {
              "label": "50%",
              "value": 0.5
            },
            {
              "label": "100%",
              "value": 1
            },
            {
              "label": "150%",
              "value": 1.5
            },
            {
              "label": "200%",
              "value": 2
            },
            {
              "label": "500%",
              "value": 5
            }
          ],
          "placeholder": {},
          "search": {
            "enabled": false
          },
          "style": {
            "backgroundColor": "#FFFFFF00",
            "borderStyle": "none",
            "color": "#555555",
            "cursor": "pointer",
            "filter": "invert(100%)",
            "fontSize": "1.5vmin",
            "mix-blend-mode": "difference",
            "user-select": "none"
          },
          "textAlign": "center"
        },
        "type": "ia.input.dropdown"
      },
      {
        "events": {
          "dom": {
            "onClick": {
              "config": {
                "script": "\tself.view.params.panning \u003d True"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "Pan",
          "tooltip": {
            "enabled": true,
            "text": "Enable panning"
          }
        },
        "position": {
          "height": 0.0324,
          "width": 0.0182,
          "x": 0.1019
        },
        "propConfig": {
          "meta.visible": {
            "binding": {
              "config": {
                "path": "view.params.controls.pan"
              },
              "type": "property"
            }
          },
          "props.style.borderWidth": {
            "binding": {
              "config": {
                "path": "view.params.panning"
              },
              "transforms": [
                {
                  "fallback": 0,
                  "inputType": "scalar",
                  "mappings": [
                    {
                      "input": true,
                      "output": 1
                    }
                  ],
                  "outputType": "scalar",
                  "type": "map"
                }
              ],
              "type": "property"
            }
          },
          "props.style.color": {
            "binding": {
              "config": {
                "path": "view.params.panning"
              },
              "transforms": [
                {
                  "fallback": "#555555",
                  "inputType": "scalar",
                  "mappings": [
                    {
                      "input": true,
                      "output": "#F79200"
                    }
                  ],
                  "outputType": "scalar",
                  "type": "map"
                }
              ],
              "type": "property"
            }
          }
        },
        "props": {
          "path": "material/pan_tool",
          "style": {
            "borderBottomLeftRadius": 8,
            "borderBottomRightRadius": 8,
            "borderStyle": "solid",
            "borderTopLeftRadius": 8,
            "borderTopRightRadius": 8,
            "cursor": "pointer",
            "filter": "invert(100%)",
            "margin": 2,
            "mix-blend-mode": "difference",
            "padding": 4
          }
        },
        "type": "ia.display.icon"
      },
      {
        "events": {
          "dom": {
            "onClick": {
              "config": {
                "script": "\tself.view.params.panning \u003d False"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "Click",
          "tooltip": {
            "enabled": true,
            "text": "Enabe interaction"
          }
        },
        "position": {
          "height": 0.0324,
          "width": 0.0182,
          "x": 0.1223
        },
        "propConfig": {
          "meta.visible": {
            "binding": {
              "config": {
                "path": "view.params.controls.click"
              },
              "type": "property"
            }
          },
          "props.style.borderWidth": {
            "binding": {
              "config": {
                "path": "view.params.panning"
              },
              "transforms": [
                {
                  "fallback": 0,
                  "inputType": "scalar",
                  "mappings": [
                    {
                      "input": false,
                      "output": 1
                    }
                  ],
                  "outputType": "scalar",
                  "type": "map"
                }
              ],
              "type": "property"
            }
          },
          "props.style.color": {
            "binding": {
              "config": {
                "path": "view.params.panning"
              },
              "transforms": [
                {
                  "fallback": "#555555",
                  "inputType": "scalar",
                  "mappings": [
                    {
                      "input": false,
                      "output": "#F79200"
                    }
                  ],
                  "outputType": "scalar",
                  "type": "map"
                }
              ],
              "type": "property"
            }
          }
        },
        "props": {
          "path": "material/touch_app",
          "style": {
            "borderBottomLeftRadius": 8,
            "borderBottomRightRadius": 8,
            "borderStyle": "solid",
            "borderTopLeftRadius": 8,
            "borderTopRightRadius": 8,
            "cursor": "pointer",
            "filter": "invert(100%)",
            "margin": 2,
            "mix-blend-mode": "difference",
            "paddingBottom": 4,
            "paddingTop": 0
          }
        },
        "type": "ia.display.icon"
      },
      {
        "events": {
          "dom": {
            "onClick": {
              "config": {
                "script": "\n\tcurrentRotation \u003d self.session.custom.rotation\n\t\n\tcurrentAngle \u003d currentRotation.replace(\"deg\", \"\")\n\t\n\t# Increment by 90° and wrap around 360\n\tnewAngle \u003d (int(currentAngle) + 90) % 360\n\t\n\t# Save back as string with \"deg\"\n\tself.session.custom.rotation \u003d str(newAngle) + \"deg\"\n\t\t\n\t# Reset XY\t\t\n\tself.view.custom.x \u003d 0\n\tself.view.custom.y \u003d 0"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "Rotate",
          "tooltip": {
            "enabled": true,
            "text": "Rotate a view"
          }
        },
        "position": {
          "height": 0.0324,
          "width": 0.0182,
          "x": 0.1404,
          "y": 0.0018
        },
        "props": {
          "path": "material/rotate_right",
          "style": {
            "alignSelf": "center",
            "color": "#555555",
            "cursor": "pointer",
            "filter": "invert(100%)",
            "margin": 1,
            "mix-blend-mode": "difference"
          }
        },
        "type": "ia.display.icon"
      },
      {
        "events": {
          "dom": {
            "onClick": {
              "config": {
                "script": "\tself.session.custom.rotation \u003d \"0deg\""
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "Reset-rotation",
          "tooltip": {
            "enabled": true,
            "text": "Reset rotation"
          }
        },
        "position": {
          "height": 0.0324,
          "width": 0.0182,
          "x": 0.1595,
          "y": 0.0018
        },
        "props": {
          "path": "material/360",
          "style": {
            "alignSelf": "center",
            "color": "#555555",
            "cursor": "pointer",
            "filter": "invert(100%)",
            "margin": 1,
            "mix-blend-mode": "difference"
          }
        },
        "type": "ia.display.icon"
      }
    ],
    "meta": {
      "name": "root"
    },
    "position": {
      "x": 0.0177,
      "y": 0.0972
    },
    "props": {
      "mode": "percent",
      "style": {
        "overflow": "hidden",
        "overflowX": "hidden",
        "overflowY": "hidden"
      }
    },
    "scripts": {
      "customMethods": [],
      "extensionFunctions": null,
      "messageHandlers": [
        {
          "messageType": "focusDevice",
          "pageScope": false,
          "script": "\tself.view.custom.x \u003d payload[\"x\"]\n\tself.view.custom.y \u003d payload[\"y\"]\n\tself.view.custom.scale \u003d payload[\"scale\"]",
          "sessionScope": true,
          "viewScope": false
        }
      ]
    },
    "type": "ia.container.coord"
  }
}