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

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 편집기를 채울 수 있는 구조가 됨.