Palette-Editor

A WebAssembly library written in Rust that provides a draggable and resizable block component for web applications. This library offers high-performance drag and resize operations compiled to WebAssembly from Rust.

특징

• 드래그 기능이 있는 블록 컴포넌트
• 크기 조절 기능
• 최소 크기 제한
• Rust로 구현되어 WebAssembly로 컴파일
• 브라우저와 Node.js 환경에서 사용 가능

설치 방법

npm install palette-editor

또는 yarn을 사용하는 경우:

yarn add palette-editor

또는 pnpm을 사용하는 경우:

pnpm add palette-editor

빌드 방법

이 라이브러리를 직접 빌드하려면:

# wasm-pack 설치 (아직 설치하지 않은 경우)
cargo install wasm-pack

# 라이브러리 빌드
wasm-pack build --target web # 브라우저 용
wasm-pack build --target nodejs # Node.js 용
wasm-pack build --target bundler # 웹팩 용

사용 방법

기본 사용법

import init, { DraggableBlock, Point, Size } from 'palette-editor';

// WebAssembly 모듈 초기화
async function run() {
  await init();
  
  // 새 드래그 가능한 블록 생성 (x, y, width, height)
  const block = new DraggableBlock(100, 100, 200, 150);
  
  // 마우스 이벤트 핸들러 예시
  document.addEventListener('mousedown', (e) => {
    const isResize = checkIfResizeArea(e); // 리사이즈 영역 확인 로직 구현 필요
    
    if (isResize) {
      block.start_resize(e.clientX, e.clientY);
    } else {
      block.start_drag(e.clientX, e.clientY);
    }
  });
  
  document.addEventListener('mousemove', (e) => {
    block.update(e.clientX, e.clientY);
    redrawBlock(); // 블록 다시 그리는 로직 구현 필요
  });
  
  document.addEventListener('mouseup', () => {
    block.stop();
  });
}

run();

DOM 요소와 함께 사용하기

import init, { DraggableBlock } from 'palette-editor';

async function setupDraggable() {
  await init();
  
  const element = document.getElementById('draggable-element');
  const block = new DraggableBlock(0, 0, 200, 150);
  
  // 드래그 시작
  element.addEventListener('mousedown', (e) => {
    if (e.target.classList.contains('resize-handle')) {
      block.start_resize(e.clientX, e.clientY);
    } else {
      block.start_drag(e.clientX, e.clientY);
    }
  });
  
  // 드래그 중
  document.addEventListener('mousemove', (e) => {
    block.update(e.clientX, e.clientY);
    
    // DOM 요소 위치 및 크기 업데이트
    element.style.left = `${block.position.x()}px`;
    element.style.top = `${block.position.y()}px`;
    element.style.width = `${block.size.width()}px`;
    element.style.height = `${block.size.height()}px`;
  });
  
  // 드래그 종료
  document.addEventListener('mouseup', () => {
    block.stop();
  });
}

API 문서

Point

위치 정보를 나타내는 구조체입니다.

생성자

const point = new Point(x, y);

속성

• x(): X 좌표 값을 반환합니다.
• y(): Y 좌표 값을 반환합니다.

Size

크기 정보를 나타내는 구조체입니다.

생성자

const size = new Size(width, height);

속성

• width(): 너비 값을 반환합니다.
• height(): 높이 값을 반환합니다.

DraggableBlock

드래그 및 리사이즈가 가능한 블록을 나타내는 클래스입니다.

생성자

const block = new DraggableBlock(x, y, width, height);

메서드

• start_drag(mouse_x, mouse_y): 블록의 드래그를 시작합니다.
• start_resize(mouse_x, mouse_y): 블록의 크기 조절을 시작합니다.
• update(mouse_x, mouse_y): 마우스 위치에 따라 블록의 위치나 크기를 업데이트합니다.
• stop(): 드래그나 리사이징을 중지합니다.

브라우저 지원

• 모든 주요 브라우저 (Chrome, Firefox, Safari, Edge)에서 WebAssembly를 지원합니다.
• IE11은 지원하지 않습니다.

요구사항

• wasm-bindgen >= 0.2.74
• Rust >= 1.56.0