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
            }
        }
    ]
})

현재 2개를 만듦

Button

{
    key: 'yellow', 
    editor: 'Button',
    editorOptions: {
        label: 'Test Button', 
        value: 'test',
        onClick: (key, value, params) => { } ,
        action: "runAction", 
        action: ['runAction', 'button'],
    },
    defaultValue: "This is defaultValue"

}

ToggleCheckBox

{
    key: 'isCurve', 
    editor: 'ToggleCheckBox', 
    editorOptions: {
            label: 'xxxx',
            checked: true,
            toggleLabels: ['True', 'False']
    },

}

https://github.com/cocopon/tweakpane 비슷한게 있다.

설정 개념을 조금 넘어가보자.

설정은 어떤 패턴으로 이루어지는가?

1. 하나의 객체가 필요한 전체 속성 편집
2. 하나의 객체가 가지고 있는 복잡한 속성 편집
3. 불특정 다시를 묶어놓은 속성 편집
4. 완전 자유 편집

자, property 를 정의할 것인가? 속성 편집을 위한 데이타만 따로 만들 것인가?

아님 순서만 맞춰서 다시 만들것인가?

예를 들어

inspector : [
    {
        title: "Appearance", 
         inspector
]

몇가지 방법을 연구해보다가 결국은 ObjectProperty 라는 놈으로 edtiableProperty 를 적용해서 처리함.

XXXProperty 를 json 으로 동적으로 생성하기

    editor.registerMenuItem('inspector.tab.style', {
        SVGItemProperty: ObjectProperty.create({
            title: editor.$i18n('svg.item.property.title'),
            editableProperty: 'svg-item',
        })
    })

editableProperty 라는 속성을 통해서 등록된 inspector 를 호출 하는 방식
특정 레이어가 지원하는 속성 이름을 적으면 그 속성을 지원하는 에디터가 열림

    editor.registerInspector('svg-item', current => {
        return [
            {
              key: 'fill',
              editor: 'FillSingleEditor',
              editorOptions: {
                label: editor.$i18n('svg.item.property.fill'),
              },
              defaultValue: current['fill']        
            },
            {
              key: 'fill-opacity',
              editor: 'number-range',
              editorOptions: {
                label: editor.$i18n('svg.item.property.fillOpacity'),
                min: 0,
                max: 1, 
                step: 0.01
              },
              defaultValue: current['fill-opacity']
            },
            {
              key: 'fill-rule',
              editor: 'ToggleCheckBox',
              editorOptions: {
                label: editor.$i18n('svg.item.property.fillRule'),
                toggleLabels: ["NONZERO","EVENODD" ],
                toggleValues: ["nonzero","evenodd" ]
              },
              defaultValue: current['fill-rule'] || "nonzero"
            },
            {
              key: 'stroke',
              editor: 'fill-single',
              editorOptions: {
                label: editor.$i18n('svg.item.property.stroke'),
              },
              defaultValue: current['stroke']        
            },
            {
              key: 'stroke-width',
              editor: 'range',
              editorOptions: {
                label: editor.$i18n('svg.item.property.strokeWidth'),
              },
              defaultValue: current['stroke-width']        
            },      
            {
              key: 'stroke-dasharray',
              editor: 'StrokeDashArrayEditor',
              editorOptions: {
                label: editor.$i18n('svg.item.property.dashArray'),
              },
              defaultValue: current['stroke-dasyarray'] || ""        
            },    
            {
              key: 'stroke-dashoffset',
              editor: 'number-range',
              editorOptions: {
                label: editor.$i18n('svg.item.property.dashOffset'),
                min: -1000,
                max: 1000,
                step: 1
              },
              defaultValue: current['stroke-dashoffset']        
            },
            {
              key: 'stroke-linecap',
              editor: 'ToggleCheckBox',
              editorOptions: {
                label: editor.$i18n('svg.item.property.lineCap'),
                toggleLabels: ["BUTT","ROUND","SQUARE"],
                toggleValues: ["butt","round","square"],
              },
              defaultValue: current['stroke-linecap'] || "butt"
            },
            {
              key: 'stroke-linejoin',
              editor: 'ToggleCheckBox',
              editorOptions: {
                label: editor.$i18n('svg.item.property.lineJoin'),
                toggleLabels: ["MITER","BEVEL","ROUND"],
                toggleValues: ["miter","bevel","round"]
              },
              defaultValue: current['stroke-linejoin'] || "miter"
            },
            {
              key: 'mix-blend-mode',
              editor: 'BlendSelectEditor',
              editorOptions: {
                label: editor.$i18n('svg.item.property.blend'),
                options: ["butt","round","square"]
              },
              defaultValue: current['mix-blend-mode']
            },
          ]
    })

ObjectProperty.create({
    title: 'property title',
    editableProperty: 'svg-item', 
    inspector: (item) => {
        return [
                 ... 
        ] 
    }
})

editableProperty 로 지정하던가 아님 inspector 함수를 직접 넣어서 생성할 수 있음.

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

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

object 의 경우는

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

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

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