Components

Component는 Layer와 Interaction을 재사용할 수 있도록 모듈화 시킨 요소 입니다. 반복적으로 사용되는 요소를 Component로 만들고, master component 를 수정하여 공통적인 부분을 저작한 후 instance 를 scene에 생성하여 반복을 줄일 수 있습니다. 이를 통해 생산성과 pie 파일의 가독성을 높일 수 있습니다.

Using Components

Creating Components in a Scene

Scene 에 만들어진 layer 로부터 component 를 만들 수 있습니다. Component 로 만들고 자 하는 layer 를 선택한 후 메뉴바의 Component 버튼이나 우클릭을 사용해서 선택된 layer 를 Component로 만들 수 있습니다. 그러면 선택된 레이어 및 레이어와 관련된 인터렉션을 포 함한 component 가 생성되고, 기존의 레이어는 instance 로 대체됩니다.

Creating Components Directly

좌측의 Component 패널에서 직접 Component를 만들 수 있습니다. Component panel 을 열고 "+" 버튼을 클릭하면 빈 상태의 component 가 생성됩니다. 이 상태에서 component 저 작을 시작하시면 됩니다.

Adding Component Instances

좌측의 Component 패널에서 Scene으로 drag & drop하여 Instance를 추가할 수 있습니 다.

Editing Components

Master Component

Master Component를 수정하기 위해서는 component edit 모드로 진입해야 합니다. Component edit mode 에 들어가려면 좌측의 Component 패널을 열어서 해당 Component를 클릭하거나 Instance를 우클릭합니다. Master component 저작 방식은 scene 저작 방식과 거의 동일합니다. Component 에서 사 용될 layer, variable, trigger, response 을 생성, 수정, 삭제할 수 있습니다. Master component 의 변경사항은 자동으로 모든 instance 에 반됩니다 Master component 편집을 마친 후 component edit 모드 우상단의 'Go to scene' 버튼을 클릭해서 바로 이전에 머물던 scene으로 돌아갈 수 있습니다. 또는 scene panel 의 scene 을 클릭해서 임의의 다른 scene 으로 이동할 수도 있습니다.

Instance

Instance 의 하위 레이어는 Position, Size, Origin을 제외한 속성들을 Override 하여 사용 할 수 있습니다. Instance Component에서 변경한 속성들은 Master Component에 향을 주지 않지만 Master Component에서의 수정은 Instance에 반됩니다. 단 Instance Component에서 Override한 속성들은 Master Component에서 수정하더라도 향받지 않 습니다. Instance Component를 우클릭하여 Reset Overriding을 하면 초기 상태로 되돌릴 수 있습 니다.

Link with Master

Instance의 Link With Master를 사용하면, Component Edit Mode로 이동하지 않고 instance 를 수정함으로써 Master Component 를 수정할 수 있습니다.

Variable Overrides

Variable 의 초기값도 override 할 수 있습니다. 변수 초기값을 override 하려면 master component 의 변수의 'Overridable' 옵션을 활성화합니다. 이 옵션이 활성화 되면 instance 의 property panel 에서 변수의 초기값을 override 할 수 있게 됩니다.

Swap Component Instances

우측 Property Panel에서 Component의 Instance를 다른 Instance로 교체할 수 있습니다. Nested Component의 Instance도 같은 방법으로 교체할 수 있습니다.

Grouping Components

Component의 이름에 '/' 를 사용해서 Group을 만들거나, 구분해줄 수 있습니다. 예를 들어, 첫 번째 Component의 이름을 button / primary / normal, 두 번째 Component의 이름을 button / secondary / normal 로 하면 아래와 같이 그룹핑 됩니다.