e-tipsmemo

ごった煮

diagram-js customize 5. ContextPadProvider

e-tipsmemo.hatenablog.com

つぎはContextPadProvider
f:id:katakanan:20190622010224p:plain
といっても今回もソースコードを分離する程度

f:id:katakanan:20190622010429p:plain
ExampleContextPadProvider.jsの実装を/lib/features/context-pad/に移す。
ほぼコピペ

ContextPadProvider.js

import {
    assign,
    forEach,
    isArray
} from 'min-dash';

export default class ContextPadProvider{
    constructor(connect, contextPad, modeling){


        this._connect = connect;
        this._modeling = modeling;

        contextPad.registerProvider(this);
    }

    getContextPadEntries(element){
        var modeling = this._modeling;
        var connect = this._connect;

        var actions = {};

        function removeElement(){
            modeling.removeElements([ element ]);
        }
    
        function startConnect(event, element, autoActivate) {
            connect.start(event, element, autoActivate);
        }

        assign(actions, {
            'delete': {
                group: 'edit',
                className: 'context-pad-icon-remove',
                title: 'Remove',
                action: {
                  click: removeElement,
                  dragstart: removeElement
                }
            },
            'connect': {
                group: 'edit',
                className: 'context-pad-icon-connect',
                title: 'Connect',
                action: {
                  click: startConnect,
                  dragstart: startConnect
                }
            }
        });

        return actions;

    }

}

ContextPadProvider.$inject = [
    'connect',
    'contextPad',
    'modeling'
];

index.js

import DirectEditingModule from 'diagram-js-direct-editing';
import ContextPadModule from 'diagram-js/lib/features/context-pad';
import SelectionModule from 'diagram-js/lib/features/selection';
import ConnectModule from 'diagram-js/lib/features/connect';
import CreateModule from 'diagram-js/lib/features/create';

import ContextPadProvider from './ContextPadProvider';

export default {
  __depends__: [
    DirectEditingModule,
    ContextPadModule,
    SelectionModule,
    ConnectModule,
    CreateModule,
  ],
  __init__: [ 'contextPadProvider' ],
  contextPadProvider: [ 'type', ContextPadProvider ]
};

本当はこのすべてに依存しているわけではなさそうだが、とりあえず動いているのでヨシ(?)