Skip to content

Instantly share code, notes, and snippets.

@easylogic
Last active December 8, 2021 01:12
Show Gist options
  • Save easylogic/fd7353f58207992fc0e5ed8a2a01d188 to your computer and use it in GitHub Desktop.
Save easylogic/fd7353f58207992fc0e5ed8a2a01d188 to your computer and use it in GitHub Desktop.
mini editor 등록 시스템

특정 컴포넌트 또는 특정 설정에 대한 여러가지 값을 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
            }
        }
    ]
})
@easylogic
Copy link
Author

easylogic commented Nov 12, 2021

현재 2개를 만듦

Button

스크린샷 2021-11-12 오후 5 06 44

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

}

ToggleCheckBox

스크린샷 2021-11-12 오후 5 06 55

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

}

@easylogic
Copy link
Author

@easylogic
Copy link
Author

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

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

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

@easylogic
Copy link
Author

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

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

예를 들어

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

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

@easylogic
Copy link
Author

easylogic commented Dec 8, 2021

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

@easylogic
Copy link
Author

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

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

@easylogic
Copy link
Author

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

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

object 의 경우는

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

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment