피규마 (Pigyuma)

• 레이어 선택

• 레이어 이동

• 레이어 크기 조정
• 정밀(소수점) 크기 조정: Ctrl + 드래그
• 중앙 기준 크기 조정: Alt + 드래그

• 레이어 회전
• 정밀(소수점) 회전: Ctrl + 드래그

• 아트보드 그리기 (단축키 F)

• 도형 레이어 그리기 (단축키 S)

• 제어 패널에서 수치 조작

import UIDesignTool, {
  UIDesignCanvas,
  UIDesignToolProvider,
  useUIController,
  Artboard,
  ShapeLayer,
  TextLayer,
} from '@pigyuma/ui-design-tool';

const uiDesignTool = new UIDesignTool();

const initialData = [
  new Artboard(/* ... */),
  new ShapeLayer(/* ... */),
  new TextLayer(/* ... */),
  { type: 'artboard', /* ... */ },
  { type: 'layer', layerType: 'shape', /* ... */ },
  { type: 'layer', layerType: 'text', /* ... */ },
];

const App = () => {
  return (
    <UIDesignToolProvider api={uiDesignTool}>
      <Workspace />
    </UIDesignToolProvider>
  );
};

const Workspace = () => {
  const uiController = useUIController();

  const onClick = () => {
    uiController.set('RECORD-KEY', { name: 'Changed!' });
  };

  return (
    <>
      <UIDesignCanvas initialData={initialData} />
      <button type="button" onClick={onClick}>
        Change?
      </button>
    </>
  );
};