본문으로 건너뛰기

원격 저장

에디터의 변경사항이 있을때 마다 전체 상태를 전송하는건 비효율적입니다.
실시간 데이터 복제 API를 지원합니다.

설치

npm install @dineug/erd-editor

사용

type ReplicationStore = {
readonly value: string;
on: (reducers: Partial<{ change: () => void }>) => Unsubscribe;
setInitialValue: (value: string) => void;
dispatch: (actions: Array<AnyAction> | AnyAction) => void;
dispatchSync: (actions: Array<AnyAction> | AnyAction) => void;
destroy: () => void;
};

type EngineContext = {
toWidth: (text: string) => number;
};

type CreateReplicationStore = (context: EngineContext) => ReplicationStore;

// example
import { createReplicationStore } from '@dineug/erd-editor/engine.js';

const replicationStore = createReplicationStore({
toWidth: text => text.length * 10,
});

EngineContext

toWidth

텍스트의 width를 계산하는데 사용합니다.

const toWidth = text => text.length * 10;
const replicationStore = createReplicationStore({ toWidth });

ReplicationStore

value getter

현재 에디터 상태를 json 데이터로 받아옵니다.

const data = replicationStore.value;

setInitialValue

이전에 저장했던 에디터 상태를 불러옵니다.

replicationStore.setInitialValue('json...');

on@change

에디터의 상태변경 이벤트를 구독합니다.

const unsubscribe = replicationStore.on({
change: () => {
const data = replicationStore.value;
// save...
},
});

dispatch, dispatchSync

원격 에디터 변경사항을 replicationStore에 반영합니다.

replicationStore.dispatch(actions...); // async
replicationStore.dispatchSync(actions...); // sync

destroy

replicationStore 인스턴스를 완전히 파괴합니다.

replicationStore.destroy();