kind: Solution
version: v0

router:
  kind: Router
  routes:
    - frame: my-home-frame
      children:
        - frame: my-intro-frame
        - frame: my-model-frame
          children:
            - frame: my-box-frame
            - frame: my-sphere-frame
            - frame: my-results-frame

frames:
  my-home-frame:
    kind: Frame
    layout:
      kind: ColumnLayout
      widths: ["1fr", 100px]
      areas: ["my-outlet1", "my-nav-panel1"]
    contents:
      my-outlet1:
        kind: RouterOutlet
      my-nav-panel1:
        kind: NavPanel
        orientation: vertical
        type: icon
        items:
          - kind: NavIcon
            icon:
              kind: Icon
              icon: fas-home
            frame: my-intro-frame
          - kind: NavIcon
            icon:
              kind: Icon
              icon: fas-pen
            frame: my-model-frame
        subscribe:
          - kind: RouterOutlet
            frame: my-home-frame
            source: my-outlet1
  my-intro-frame:
    kind: Frame
    contents:
      my-intro-control-panel:
        kind: ControlPanel
        controls:
          my-title:
            kind: Text
            text: Demo home page
            type: h1
          my-explanation:
            kind: Text
            text: This demo solution demonstrates how to set up multiple nested frames. Click on the pen icon to start designing the box.
  my-model-frame:
    kind: Frame
    layout:
      kind: GridLayout
      areas:
        - [my-viewer, my-nav-panel2]
        - [my-viewer, my-outlet2]
      widths: [1fr, 350px]
      heights:
        - 75px
        - 1fr
    contents:
      my-nav-panel2:
        kind: NavPanel
        orientation: horizontal
        type: number
        items:
          - kind: NavNumber
            number: 1
            frame: my-box-frame
          - kind: NavNumber
            number: 2
            frame: my-sphere-frame
          - kind: NavNumber
            number: 3
            frame: my-results-frame
        subscribe:
          - kind: RouterOutlet
            frame: my-model-frame
            source: my-outlet2
      my-outlet2:
        kind: RouterOutlet
      my-viewer:
        kind: Viewer
        settings:
          kind: BasicSettings
          grid: false
          shadows: false
        materials:
          my-blurple-mat:
            kind: StandardMaterial
            color: [42, 75, 240]
          my-light-blue-mat:
            kind: StandardMaterial
            color: [119, 173, 238]
        subscribe:
          - kind: Model
            frame: my-model-frame
            source: my-model
            assignMaterials:
              sphere: my-blurple-mat
              box: my-light-blue-mat
      my-data-store:
        kind: DataStore
        value:
          width: 50
          height: 50
          depth: 50
          radius: 65
        subscribe:
          - kind: ControlPanel
            frame: my-box-frame
            source: my-box-control-panel
          - kind: ControlPanel
            frame: my-sphere-frame
            source: my-sphere-control-panel
      my-model:
        kind: Model
        modelFile: trimbox-part3.gh
        subscribe:
          - kind: DataStore
            frame: my-model-frame
            source: my-data-store
  my-box-frame:
    kind: Frame
    layout:
      kind: RowLayout
      areas:
        - my-box-control-panel
        - my-next-button
        - ""
      heights: [1fr, auto, 50px]
    contents:
      my-box-control-panel:
        kind: ControlPanel
        controls:
          title:
            kind: Text
            type: h1
            text: Box controls
          subtext:
            kind: Text
            text: Change the sizes of the cube.
          width: # match GH
            kind: Slider
            label: Box width
            value: 50
            min: 1
            max: 100
            precision: 0
          depth: # match GH
            kind: Slider
            label: Box depth
            value: 50
            min: 1
            max: 100
            precision: 0
          height: # match GH
            kind: Slider
            label: Box height
            value: 50
            min: 1
            max: 100
            precision: 0
        subscribe:
          - kind: Model # for disabling controls
            frame: my-model-frame
            source: my-model
            setOutputs: {} # will be optional soon
          - kind: DataStore # for init from saved data
            frame: my-model-frame
            source: my-data-store
      my-next-button:
        kind: Button
        text: Confirm
        routerLink: /my-home-frame/my-model-frame/my-sphere-frame
  my-sphere-frame:
    kind: Frame
    layout:
      kind: RowLayout
      areas:
        - my-sphere-control-panel
        - my-back-button
        - ""
        - my-next-button
        - ""
      heights: [1fr, auto, 10px, auto, 50px]
    contents:
      my-sphere-control-panel:
        kind: ControlPanel
        controls:
          title:
            kind: Text
            type: h1
            text: Sphere Controls
          subtext:
            kind: Text
            text: Change the size of the sphere.
          radius: # match GH
            kind: Slider
            label: Sphere radius
            value: 65
            min: 1
            max: 100
            precision: 0
        subscribe:
          - kind: Model # for disabling controls
            frame: my-model-frame
            source: my-model
          - kind: DataStore # for init from saved data
            frame: my-model-frame
            source: my-data-store
      my-back-button:
        kind: Button
        text: Back
        routerLink: /my-home-frame/my-model-frame/my-box-frame
      my-next-button:
        kind: Button
        text: Confirm
        routerLink: /my-home-frame/my-model-frame/my-results-frame
  my-results-frame:
    kind: Frame
    layout:
      kind: RowLayout
      areas:
        - my-results-control-panel
        - my-back-button
        - ""
      heights: [1fr, auto, 50px]
    contents:
      my-results-control-panel:
        kind: ControlPanel
        controls:
          title:
            kind: Text
            type: h1
            text: Results
          box-vol-label:
            kind: Text
            text: "Box volume:"
          box-volume: # match GH
            kind: Text
            text: ""
          sphere-vol-label:
            kind: Text
            text: "Sphere volume:"
          sphere-volume: # match GH
            kind: Text
            text: ""
        subscribe:
          - kind: Model
            frame: my-model-frame
            source: my-model
            setOutputs:
              sphere-volume:
                type: setText
              box-volume:
                type: setText
      my-back-button:
        kind: Button
        text: Back
        routerLink: /my-home-frame/my-model-frame/my-sphere-frame
