{
  "custom": {},
  "params": {
    "path": "Pages/Spaces/Layouts/DM11_Layout"
  },
  "propConfig": {
    "params.path": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 600,
      "width": 1300
    }
  },
  "root": {
    "children": [
      {
        "events": {
          "dom": {
            "onMouseDown": {
              "config": {
                "script": "\tself.parent.custom.clickedX \u003d event.pageX\n\tself.parent.custom.clickedY \u003d event.pageY"
              },
              "scope": "G",
              "type": "script"
            },
            "onMouseEnter": {
              "config": {
                "script": "\tif event.buttons:\n\t\tself.parent.custom.clickedX \u003d event.pageX\n\t\tself.parent.custom.clickedY \u003d event.pageY"
              },
              "enabled": false,
              "scope": "G",
              "type": "script"
            },
            "onMouseLeave": {
              "config": {
                "script": "\tif event.buttons:\n\t\tdiffX \u003d event.pageX - self.parent.custom.clickedX\n\t\tdiffY \u003d event.pageY - self.parent.custom.clickedY\n\t\n\t\tself.parent.custom.viewX +\u003d diffX\n\t\tself.parent.custom.viewY +\u003d diffY"
              },
              "enabled": false,
              "scope": "G",
              "type": "script"
            },
            "onMouseUp": {
              "config": {
                "script": "\tdiffX \u003d event.pageX - self.parent.custom.clickedX\n\tdiffY \u003d event.pageY - self.parent.custom.clickedY\n\t\n\tself.parent.custom.viewX +\u003d diffX\n\tself.parent.custom.viewY +\u003d diffY"
              },
              "scope": "G",
              "type": "script"
            },
            "onWheel": {
              "config": {
                "script": "\tif event.deltaY \u003e 0:\n\t\tself.parent.custom.scale -\u003d 0.1\n\tif event.deltaY \u003c 0:\n\t\tself.parent.custom.scale +\u003d 0.1"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "Layout"
        },
        "position": {
          "height": 600,
          "width": 1300
        },
        "propConfig": {
          "props.path": {
            "binding": {
              "config": {
                "path": "view.params.path"
              },
              "type": "property"
            }
          },
          "props.style.transform": {
            "binding": {
              "config": {
                "expression": "stringFormat(\"translate(%dpx, %dpx) scale(%f)\", \r\n  {parent.custom.viewX}, \r\n  {parent.custom.viewY}, \r\n  toFloat({parent.custom.scale})\r\n)"
              },
              "type": "expr"
            }
          }
        },
        "props": {
          "style": {
            "transition": "transform 0.2s linear"
          }
        },
        "type": "ia.display.view"
      },
      {
        "children": [
          {
            "events": {
              "dom": {
                "onClick": {
                  "config": {
                    "script": "\tself.view.getChild(\"root\").custom.viewY -\u003d 5"
                  },
                  "scope": "G",
                  "type": "script"
                }
              }
            },
            "meta": {
              "name": "btn__up"
            },
            "position": {
              "basis": "80px"
            },
            "props": {
              "image": {
                "icon": {
                  "color": "var(--text-color)",
                  "path": "material/arrow_upward"
                }
              },
              "text": ""
            },
            "type": "ia.input.button"
          },
          {
            "events": {
              "dom": {
                "onClick": {
                  "config": {
                    "script": "\tself.view.getChild(\"root\").custom.viewY +\u003d 5"
                  },
                  "scope": "G",
                  "type": "script"
                }
              }
            },
            "meta": {
              "name": "btn_down"
            },
            "position": {
              "basis": "80px"
            },
            "props": {
              "image": {
                "icon": {
                  "color": "var(--text-color)",
                  "path": "material/arrow_downward"
                }
              },
              "text": ""
            },
            "type": "ia.input.button"
          },
          {
            "events": {
              "dom": {
                "onClick": {
                  "config": {
                    "script": "\tself.view.getChild(\"root\").custom.viewX -\u003d 5"
                  },
                  "scope": "G",
                  "type": "script"
                }
              }
            },
            "meta": {
              "name": "btn_left"
            },
            "position": {
              "basis": "80px"
            },
            "props": {
              "image": {
                "icon": {
                  "color": "var(--text-color)",
                  "path": "material/arrow_back"
                }
              },
              "text": ""
            },
            "type": "ia.input.button"
          },
          {
            "events": {
              "dom": {
                "onClick": {
                  "config": {
                    "script": "\tself.view.getChild(\"root\").custom.viewX +\u003d 5"
                  },
                  "scope": "G",
                  "type": "script"
                }
              }
            },
            "meta": {
              "name": "btn_right"
            },
            "position": {
              "basis": "80px"
            },
            "props": {
              "image": {
                "icon": {
                  "color": "var(--text-color)",
                  "path": "material/arrow_forward"
                }
              },
              "text": ""
            },
            "type": "ia.input.button"
          },
          {
            "events": {
              "dom": {
                "onClick": {
                  "config": {
                    "script": "\tself.view.getChild(\"root\").custom.scale +\u003d 0.05"
                  },
                  "scope": "G",
                  "type": "script"
                }
              }
            },
            "meta": {
              "name": "btn_zoom_in"
            },
            "position": {
              "basis": "80px"
            },
            "props": {
              "image": {
                "icon": {
                  "color": "var(--text-color)",
                  "path": "material/zoom_in"
                }
              },
              "text": ""
            },
            "type": "ia.input.button"
          },
          {
            "events": {
              "dom": {
                "onClick": {
                  "config": {
                    "script": "\tself.view.getChild(\"root\").custom.scale -\u003d 0.05"
                  },
                  "scope": "G",
                  "type": "script"
                }
              }
            },
            "meta": {
              "name": "btn_zoom_out"
            },
            "position": {
              "basis": "80px"
            },
            "props": {
              "image": {
                "icon": {
                  "color": "var(--text-color)",
                  "path": "material/zoom_out"
                }
              },
              "text": ""
            },
            "type": "ia.input.button"
          },
          {
            "events": {
              "dom": {
                "onClick": {
                  "config": {
                    "script": "\tself.view.getChild(\"root\").custom.viewX \u003d 0\n\tself.view.getChild(\"root\").custom.viewY \u003d 0\n\tself.view.getChild(\"root\").custom.scale \u003d 1"
                  },
                  "scope": "G",
                  "type": "script"
                }
              }
            },
            "meta": {
              "name": "bnt_rst"
            },
            "position": {
              "basis": "80px"
            },
            "props": {
              "image": {
                "icon": {
                  "color": "var(--text-color)",
                  "path": "material/zoom_out_map"
                }
              },
              "text": ""
            },
            "type": "ia.input.button"
          }
        ],
        "meta": {
          "name": "ControlBox"
        },
        "position": {
          "height": 40.02,
          "width": 349.96,
          "x": 14.95,
          "y": 15
        },
        "props": {
          "style": {
            "backgroundColor": "var(--container-nested)",
            "borderBottomLeftRadius": "var(--border-radius)",
            "borderBottomRightRadius": "var(--border-radius)",
            "borderTopLeftRadius": "var(--border-radius)",
            "borderTopRightRadius": "var(--border-radius)",
            "boxShadow": "var(--box-shadow-2)"
          }
        },
        "type": "ia.container.flex"
      }
    ],
    "custom": {
      "clickedX": 0,
      "clickedY": 0,
      "scale": 1,
      "viewX": 0,
      "viewY": 0
    },
    "events": {
      "system": {
        "onStartup": {
          "config": {
            "script": "\tself.custom.scale \u003d 1.0\n\tself.custom.viewX \u003d 0\n\tself.custom.viewY \u003d 0\n\tself.custom.clickedX \u003d 0\n\tself.custom.clickedY \u003d 0"
          },
          "scope": "G",
          "type": "script"
        }
      }
    },
    "meta": {
      "name": "root"
    },
    "props": {
      "style": {
        "background": "var(--container-root)",
        "overflow": "hidden"
      }
    },
    "type": "ia.container.coord"
  }
}