<f-flow fDraggable (fLoaded)="onLoaded()">
  <f-canvas>

    <div fGroup fDragHandle fGroupId="group1" class="with-padding"
         [fGroupPosition]="{ x: 0, y: 0 }" [fGroupSize]="{ width: 300, height: 300 }">
      I'm Group 1 with padding
    </div>

    <div fGroup fDragHandle fGroupId="group3" fGroupParentId="group1"
         [fGroupPosition]="{ x: 30, y: 30 }" [fGroupSize]="{ width: 200, height: 200 }">
      I'm Group 3 in Group 1
    </div>

    <div fGroup fDragHandle fGroupId="group2"
         [fGroupPosition]="{ x: 320, y: 0 }" [fGroupSize]="{ width: 300, height: 300 }">
      I'm Group 2
      <div fResizeHandle [fResizeHandleType]="eResizeHandleType.LEFT_TOP"></div>
      <div fResizeHandle [fResizeHandleType]="eResizeHandleType.RIGHT_TOP"></div>
      <div fResizeHandle [fResizeHandleType]="eResizeHandleType.LEFT_BOTTOM"></div>
      <div fResizeHandle [fResizeHandleType]="eResizeHandleType.RIGHT_BOTTOM"></div>
    </div>

    <div fGroup fDragHandle fGroupId="group4" fGroupParentId="group2"
         [fGroupPosition]="{ x: 350, y: 50 }" [fGroupSize]="{ width: 200, height: 200 }">
      I'm Group 4 in Group 2
    </div>

    <div fNode fDragHandle fNodeId="node1" fNodeParentId="group2"
         [fNodePosition]="{ x: 330, y: 90 }" [fNodeSize]="{width: 240, height: 80}">
      I'm Node 1 in Group 2
      <div fResizeHandle [fResizeHandleType]="eResizeHandleType.LEFT_TOP"></div>
      <div fResizeHandle [fResizeHandleType]="eResizeHandleType.RIGHT_TOP"></div>
      <div fResizeHandle [fResizeHandleType]="eResizeHandleType.LEFT_BOTTOM"></div>
      <div fResizeHandle [fResizeHandleType]="eResizeHandleType.RIGHT_BOTTOM"></div>
    </div>


    <div fNode fDragHandle fNodeId="node2" fNodeParentId="node1"
         [fNodePosition]="{ x: 360, y: 120 }">
      I'm Node 2 in Node 1
    </div>
  </f-canvas>
</f-flow>