mini editor 등록 시스템

mini-editor-system.md

특정 컴포넌트 또는 특정 설정에 대한 여러가지 값을 json 형태로 에디터를 바로 만들어서 사용하는 개념

inspector 에 추가 하는 방법

itemType 에 따라 수정되어야 하는 속성에 대해서 json 형태로 나열해주면 리턴을 json 형태로 동일하게 해준다.

    editor.registerInspector('polygon', (item) => {
        return [
            {
                key: 'count',
                editor: 'NumberRangeEditor',
                editorOptions: {
                    label: 'Count',
                    min: 3,
                    max: 100,
                    step: 1
                }, 
                defaultValue: item.count
            }
        ]
    })

editor 타입을 적어줘야 하는데 등록된 에디터를 지정해준다. 여기서 등록된 에디터는 리스트를 현재 알 수가 없는 상태다. 단순히 regiterElement 형태로만 등록되어 있다.

subeditor 를 등록하는 리스트가 필요하다. 그리고 editor 라는 alias 도 필요하다.

editor.registerSubEditor('number-range', { NumberRangeEditor });

이렇게 되면 사용법을 조금 바꿔야겠다.

editor.registerInspector('polygon', (item) => {
    return [
        {
            key: 'count',
            editor: {
                type: 'number-range',
                min: 3,
                max: 100,
                value: item.count
            }
        }
    ]
})

insepctor 는 기본적으로 리스트 형태로 이루어 지고
데이타는 아래 2개 타입을 가짐

string - 제목
object - 에디팅 도구 데이타

object 의 경우는

{
    key: '',
    editor: '',
    editorOptions: {
         label: '',
    },
    defaultValue: 0,
}

editor 속성은 editor.registerElement 에 등록된 모든 컴포넌트를 사용 가능, 몇가지 경우는 커스텀하고 바로 확장할 수 있음.

즉, 내가 직접 안 만들더라도 에디터 스펙만 알고 있으면 property 편집기를 채울 수 있는 구조가 됨.