kind: Solution
version: v0

router:
  kind: Router
  routes:
    - frame: home-frame

frames:
  home-frame:
    kind: Frame
    layout:
      kind: ColumnLayout
      widths: [auto, 300px]
      areas: [viewer, params]
    contents:
      # Grasshopper model
      model:
        kind: Model
        modelFile: model.gh
        subscribe:
          - kind: ControlPanel
            frame: home-frame
            source: params

      # Model viewer
      viewer:
        kind: Viewer
        materials:
          outer:
            kind: StandardMaterial
            color: [0, 0, 255]
          inner:
            kind: StandardMaterial
            color: [255, 100, 0]
        subscribe:
          - kind: Model
            frame: home-frame
            source: model
            assignMaterials:
              inner: inner # gh output : material
              outer: outer # gh output : material
          - kind: ControlPanel
            frame: home-frame
            source: params
            control: outer-color
            material: outer
            assignMaterialPropertiesByKey:
              blue:
                color: [0, 0, 255]
              dark:
                color: [0, 0, 50]
              red:
                color: [200, 0, 0]
          - kind: ControlPanel
            frame: home-frame
            source: params
            control: inner-color
            material: inner
            assignMaterialPropertiesByKey:
              orange:
                color: [255, 100, 0]
              dark:
                color: [0, 0, 50]
              light-blue:
                color: [119, 173, 238]

      # Model parameters
      params:
        kind: ControlPanel
        controls:
          outer-size:
            kind: Slider
            value: 200
            min: 1
            max: 500
            precision: 0
            label: Form size

          inner-size:
            kind: Slider
            value: 50
            min: 1
            max: 99
            precision: 0
            label: Shape size
            unit: "%"

          shape:
            kind: Dropdown
            label: Operation type
            value: box
            choices:
              - label: None
                value: none
              - label: Box
                value: box
              - label: Sphere
                value: sphere
              - label: Cylinder
                value: cylinder

          operation:
            kind: Dropdown
            label: Operation type
            value: union
            choices:
              - label: Difference
                value: difference
              - label: Union
                value: union
            disableWhen:
              kind: Equal
              control: shape
              value: none

          outer-color:
            kind: Select
            label: Outer color
            value: blue
            height: 60
            choices:
              - label: Blue
                value: blue
                kind: Color
                color: [0, 0, 255]
              - label: Dark
                value: dark
                kind: Color
                color: [0, 0, 50]
              - label: Red
                value: red
                kind: Color
                color: [200, 0, 0]

          inner-color:
            kind: Select
            label: Inner color
            value: orange
            height: 60
            hideWhen:
              kind: Equal
              control: shape
              value: none
            choices:
              - label: Orange
                value: orange
                kind: Color
                color: [255, 100, 0]
              - label: Dark
                value: dark
                kind: Color
                color: [0, 0, 50]
              - label: Light blue
                value: light-blue
                kind: Color
                color: [119, 173, 238]
