import Modeler from 'bpmn-js/lib/Modeler'
import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import { xmlStr } from './xmlData.js'
export default {
  data() {
    return {
      bpmnModeler: null
    }
  },
  async mounted() {
    this.bpmnModeler = new Modeler({
      container: this.$refs.canvas
    })

    try {
      const { warnings } = await this.bpmnModeler.importXML(xmlStr)//xmlStr为导入的xml文件
      // 调整在正中间
      this.bpmnModeler.get('canvas').zoom('fit-viewport', 'auto')
      console.log('rendered')
    } catch (err) {
      console.log('error rendering', err)
    }
  }
}

	'hand-tool': {//抓手工具
            group: 'tools',
            className: 'bpmn-icon-hand-tool',
            title: translate('Activate the hand tool'),
            action: {
                click: function(event) {
                    handTool.activateHand(event);
                }
            }
        },
        'space-tool': {//创建/删除空间工具
            group: 'tools',
            className: 'bpmn-icon-space-tool',
            title: translate('Activate the create/remove space tool'),
            action: {
                click: function(event) {
                    spaceTool.activateSelection(event);
                }
            }
        },
        'lasso-tool': {//索套工具
            group: 'tools',
            className: 'bpmn-icon-lasso-tool',
            title: translate('Activate the lasso tool'),
            action: {
                click: function(event) {
                    lassoTool.activateSelection(event);
                }
            }
        },
        'global-connect-tool': {//全局连接工具
            group: 'tools',
            className: 'bpmn-icon-connection-multi',
            title: translate('Activate the global connect tool'),
            action: {
                click: function(event) {
                    globalConnect.toggle(event);
                }
            }
        },
        'tool-separator': {//工具分割线
            group: 'tools',
            separator: true
        },
        'create.start-event': createAction(//开始事件
            'bpmn:StartEvent', 'event', 'bpmn-icon-start-event-none',
            translate('Create StartEvent')
        ),
        'create.end-event': createAction(//结束事件
            'bpmn:EndEvent', 'event', 'bpmn-icon-end-event-none',
            translate('Create EndEvent')
        ),
        'create.intermediate-event': createAction(//中间/边界事件
            'bpmn:IntermediateThrowEvent', 'event', 'bpmn-icon-intermediate-event-none',
            translate('Create Intermediate/Boundary Event')
        ),
        'event-separator': {//事件分割线
            group: 'events',
            separator: true
        },
        'create.exclusive-gateway': createAction(//互斥网关
            'bpmn:ExclusiveGateway', 'gateway', 'bpmn-icon-gateway-xor',
            translate('Create ExclusiveGateway')
        ),
        'create.parallel-gateway': createAction(//并行网关
            'bpmn:ParallelGateway', 'gateway', 'bpmn-icon-gateway-parallel',
            translate('Create ParallelGateway')
        ),
        'create.inclusive-gateway': createAction(//相容网关
            'bpmn:InclusiveGateway', 'gateway', 'bpmn-icon-gateway-or',
            translate('Create InclusiveGateway')
        ),
        'create.complex-gateway': createAction(//复杂网关
            'bpmn:ComplexGateway', 'gateway', 'bpmn-icon-gateway-complex',
            translate('Create ComplexGateway')
        ),
        'create.event-based-gateway': createAction(//事件网关
            'bpmn:EventBasedGateway', 'gateway', 'bpmn-icon-gateway-eventbased',
            translate('Create EventbasedGateway')
        ),
        'gateway-separator': {//网关分割线
            group: 'gateways',
            separator: true
        },
        'create.task': createAction(//空白任务
            'bpmn:Task', 'activity', 'bpmn-icon-task',
            translate('Create Task')
        ),
        'create.user-task': createAction(//用户任务
            'bpmn:UserTask', 'activity', 'bpmn-icon-user-task',
            translate('Create UserTask')
        ),
        'create.send-task': createAction(//发送任务
            'bpmn:SendTask', 'activity', 'bpmn-icon-send-task',
            translate('Create SendTask')
        ),
        'create.receive-task': createAction(//接收任务
            'bpmn:ReceiveTask', 'activity', 'bpmn-icon-receive-task',
            translate('Create ReceiveTask')
        ),
        'create.business-rule-task': createAction(//业务规则任务
            'bpmn:BusinessRuleTask', 'activity', 'bpmn-icon-business-rule-task',
            translate('Create BusinessRuleTask')
        ),
        'create.service-task': createAction(//服务任务
            'bpmn:ServiceTask', 'activity', 'bpmn-icon-service-task',
            translate('Create ServiceTask')
        ),
        'create.script-task': createAction(//脚本任务
            'bpmn:ScriptTask', 'activity', 'bpmn-icon-script-task',
            translate('Create ScriptTask')
        ),
        'create.manual-task': createAction(//手工任务
            'bpmn:ManualTask', 'activity', 'bpmn-icon-manual-task',
            translate('Create ManualTask')
        ),
        'create.call-activity': createAction(//调用活动
            'bpmn:CallActivity', 'activity', 'bpmn-icon-call-activity',
            translate('Create CallActivityTask')
        ),
        'create.subprocess-expanded': {//创建子流程（展开的）
            group: 'activity',
            className: 'bpmn-icon-subprocess-expanded',
            title: translate('Create SubProcessExpanded'),
            action: {
                dragstart: createSubprocess,
                click: createSubprocess
            }
        },
        'task-separator': {//任务分割线
            group: 'tasks',
            separator: true
        },
        'create.data-object': createAction(//数据对象
            'bpmn:DataObjectReference', 'data-object', 'bpmn-icon-data-object',
            translate('Create DataObjectReference')
        ),
 
        'create.data-store': createAction(//数据存储引用
            'bpmn:DataStoreReference', 'data-store', 'bpmn-icon-data-store',
            translate('Create DataStoreReference')
        ),
 
        'create.participant-expanded': {//池/参与者
            group: 'collaboration',
            className: 'bpmn-icon-participant',
            title: translate('Create Pool/Participant'),
            action: {
                dragstart: createParticipant,
                click: createParticipant
            }
        },
        'create.group': createAction(//组
            'bpmn:Group', 'artifact', 'bpmn-icon-group',
            translate('Create Group')
        )
}

function createAction(type, group, className, title, imageUrl) {

    // 还记得 CustomPalette.js 吗？便是这里回调 createListener 函数

    // if (action === 'click') {

    // handler(originalEvent, autoActivate, elementFactory, create)

    // }

    function createListener(event, autoActivate, elementFactory, create) {

        var shape = elementFactory.createShape({ type })
        create.start(event, shape)
    }
    
    return {

        group: group,

        className: className,

        title: title,

        imageUrl, // 📌

        action: {

            dragstart: createListener,

            click: createListener,

        },

    }

import { isArray, isFunction, forEach } from 'min-dash'

import {
    domify,
    query as domQuery,
    attr as domAttr,
    clear as domClear,
    classes as domClasses,
    matches as domMatches,
    delegate as domDelegate,
    event as domEvent,
} from 'min-dom'

var TOGGLE_SELECTOR = '.djs-palette-toggle'
var ENTRY_SELECTOR = '.entry'
var ELEMENT_SELECTOR = TOGGLE_SELECTOR + ', ' + ENTRY_SELECTOR

var PALETTE_OPEN_CLS = 'open'
var PALETTE_TWO_COLUMN_CLS = 'two-column'

var DEFAULT_PRIORITY = 1000

/**
 * A palette containing modeling elements.
 */
export default function Palette(
    eventBus,
    canvas,
    elementFactory,
    create,
    paletteContainer,
    paletteEntries
) {
    this._eventBus = eventBus
    this._canvas = canvas
    // 新增赋值
    this._entries = paletteEntries // 传入的工具栏数据
    this._paletteContainer = paletteContainer // 传入的工具栏容器
    this._elementFactory = elementFactory
    this._create = create

    var self = this
    eventBus.on('tool-manager.update', function (event) {
        var tool = event.tool

        self.updateToolHighlight(tool)
    })

    eventBus.on('i18n.changed', function () {
        self._update()
    })

    eventBus.on('diagram.init', function () {
        self._diagramInitialized = true

        self._rebuild()
    })
}

Palette.$inject = [
    'eventBus',
    'canvas',
    'elementFactory',
    'create',
    'config.paletteContainer',
    'config.paletteEntries',
]

/**
 * Register a provider with the palette
 *
 * @param  {number} [priority=1000]
 * @param  {PaletteProvider} provider
 *
 * @example
 * const paletteProvider = {
 *   getPaletteEntries: function() {
 *     return function(entries) {
 *       return {
 *         ...entries,
 *         'entry-1': {
 *           label: 'My Entry',
 *           action: function() { alert("I have been clicked!"); }
 *         }
 *       };
 *     }
 *   }
 * };
 *
 * palette.registerProvider(800, paletteProvider);
 */
Palette.prototype.registerProvider = function (priority, provider) {
    if (!provider) {
        provider = priority
        priority = DEFAULT_PRIORITY
    }

    this._eventBus.on('palette.getProviders', priority, function (event) {
        event.providers.push(provider)
    })

    this._rebuild()
}

/**
 * Returns the palette entries
 *
 * @return {Object<string, PaletteEntryDescriptor>} map of entries
 */
Palette.prototype.getEntries = function () {
    var providers = this._getProviders()

    return providers.reduce(addPaletteEntries, {})
}

Palette.prototype._rebuild = function () {
    if (!this._diagramInitialized) {
        return
    }

    var providers = this._getProviders()

    if (!providers.length) {
        return
    }

    if (!this._container) {
        this._init()
    }

    this._update()
}

/**
 * Initialize
 */
Palette.prototype._init = function () {
    var self = this

    var eventBus = this._eventBus

    var parentContainer = this._getParentContainer()

    var container = (this._container = domify(Palette.HTML_MARKUP))

    parentContainer.appendChild(container)

    domDelegate.bind(container, ELEMENT_SELECTOR, 'click', function (event) {
        var target = event.delegateTarget

        if (domMatches(target, TOGGLE_SELECTOR)) {
            return self.toggle()
        }

        self.trigger('click', event)
    })

    // prevent drag propagation
    domEvent.bind(container, 'mousedown', function (event) {
        event.stopPropagation()
    })

    // prevent drag propagation
    domDelegate.bind(container, ENTRY_SELECTOR, 'dragstart', function (event) {
        self.trigger('dragstart', event)
    })

    eventBus.on('canvas.resized', this._layoutChanged, this)

    eventBus.fire('palette.create', {
        container: container,
    })
}

Palette.prototype._getProviders = function (id) {
    var event = this._eventBus.createEvent({
        type: 'palette.getProviders',
        providers: [],
    })

    this._eventBus.fire(event)

    return event.providers
}

/**
 * Update palette state.
 *
 * @param  {Object} [state] { open, twoColumn }
 */
Palette.prototype._toggleState = function (state) {
    state = state || {}

    var parent = this._getParentContainer()
    var container = this._container

    var eventBus = this._eventBus

    var twoColumn

    var cls = domClasses(container)

    if ('twoColumn' in state) {
        twoColumn = state.twoColumn
    } else {
        twoColumn = this._needsCollapse(parent.clientHeight, this._entries || {})
    }

    // always update two column
    cls.toggle(PALETTE_TWO_COLUMN_CLS, twoColumn)

    if ('open' in state) {
        cls.toggle(PALETTE_OPEN_CLS, state.open)
    }

    eventBus.fire('palette.changed', {
        twoColumn: twoColumn,
        open: this.isOpen(),
    })
}

Palette.prototype._update = function () {
    var entriesContainer = domQuery('.djs-palette-entries', this._container)
    var entries = (this._entries = this.getEntries())

    domClear(entriesContainer)

    forEach(entries, function (entry, id) {
        var grouping = entry.group || 'default'

        var container = domQuery('[data-group=' + grouping + ']', entriesContainer)
        if (!container) {
            container = domify('<div class="group" data-group="' + grouping + '"></div>')
            entriesContainer.appendChild(container)
        }

        var html =
            entry.html ||
            (entry.separator
                ? '<hr class="separator" />'
                : '<div class="entry" draggable="true"></div>')

        var control = domify(html)
        container.appendChild(control)

        if (!entry.separator) {
            domAttr(control, 'data-action', id)

            if (entry.title) {
                domAttr(control, 'title', entry.title)
            }

            if (entry.className) {
                addClasses(control, entry.className)
            }

            if (entry.imageUrl) {
                control.appendChild(domify('<img src="' + entry.imageUrl + '">'))
            }
        }
    })

    // open after update
    this.open()
}

/**
 * Trigger an action available on the palette
 *
 * @param  {string} action
 * @param  {Event} event
 */
Palette.prototype.trigger = function (action, event, autoActivate) {
    var entries = this._entries
    var entry
    var handler
    var originalEvent
    var button = event.delegateTarget || event.target
    var elementFactory = this._elementFactory,
        create = this._create

    if (!button) {
        return event.preventDefault()
    }

    entry = entries[domAttr(button, 'data-action')]

    // when user clicks on the palette and not on an action
    if (!entry) {
        return
    }

    handler = entry.action

    originalEvent = event.originalEvent || event
    // simple action (via callback function)
    if (isFunction(handler)) {
        if (action === 'click') {
            handler(originalEvent, autoActivate, elementFactory, create)
        }
    } else {
        if (handler[action]) {
            handler[action](originalEvent, autoActivate, elementFactory, create)
        }
    }

    // silence other actions
    event.preventDefault()
}

Palette.prototype._layoutChanged = function () {
    this._toggleState({})
}

/**
 * Do we need to collapse to two columns?
 *
 * @param {number} availableHeight
 * @param {Object} entries
 *
 * @return {boolean}
 */
Palette.prototype._needsCollapse = function (availableHeight, entries) {
    // top margin + bottom toggle + bottom margin
    // implementors must override this method if they
    // change the palette styles
    var margin = 20 + 10 + 20

    var entriesHeight = Object.keys(entries).length * 46

    return availableHeight < entriesHeight + margin
}

/**
 * Close the palette
 */
Palette.prototype.close = function () {
    this._toggleState({
        open: false,
        twoColumn: false,
    })
}

/**
 * Open the palette
 */
Palette.prototype.open = function () {
    this._toggleState({ open: true })
}

Palette.prototype.toggle = function (open) {
    if (this.isOpen()) {
        this.close()
    } else {
        this.open()
    }
}

Palette.prototype.isActiveTool = function (tool) {
    return tool && this._activeTool === tool
}

Palette.prototype.updateToolHighlight = function (name) {
    var entriesContainer, toolsContainer

    if (!this._toolsContainer) {
        entriesContainer = domQuery('.djs-palette-entries', this._container)

        this._toolsContainer = domQuery('[data-group=tools]', entriesContainer)
    }

    toolsContainer = this._toolsContainer

    forEach(toolsContainer.children, function (tool) {
        var actionName = tool.getAttribute('data-action')

        if (!actionName) {
            return
        }

        var toolClasses = domClasses(tool)

        actionName = actionName.replace('-tool', '')

        if (toolClasses.contains('entry') && actionName === name) {
            toolClasses.add('highlighted-entry')
        } else {
            toolClasses.remove('highlighted-entry')
        }
    })
}

/**
 * Return true if the palette is opened.
 *
 * @example
 *
 * palette.open();
 *
 * if (palette.isOpen()) {
 *   // yes, we are open
 * }
 *
 * @return {boolean} true if palette is opened
 */
Palette.prototype.isOpen = function () {
    return domClasses(this._container).has(PALETTE_OPEN_CLS)
}

/**
 * Get container the palette lives in.
 *
 * @return {Element}
 */
Palette.prototype._getParentContainer = function () {
    return this._canvas.getContainer()
}

/* markup definition */

Palette.HTML_MARKUP =
    '<div class="djs-palette">' +
    '<div class="djs-palette-entries"></div>' +
    '<div class="djs-palette-toggle"></div>' +
    '</div>'

// helpers //////////////////////

function addClasses(element, classNames) {
    var classes = domClasses(element)

    var actualClassNames = isArray(classNames) ? classNames : classNames.split(/\s+/g)
    actualClassNames.forEach(function (cls) {
        classes.add(cls)
    })
}

function addPaletteEntries(entries, provider) {
    var entriesOrUpdater = provider.getPaletteEntries()

    if (isFunction(entriesOrUpdater)) {
        return entriesOrUpdater(entries)
    }

    forEach(entriesOrUpdater, function (entry, id) {
        entries[id] = entry
    })

    return entries
}

export default {
    //工具栏配置项
    'event-separator': {
        //事件分割线
        group: 'events',
        separator: true,
    },
    'create.start-event': createAction(
        'bpmn:StartEvent',
        'event',
        'bpmn-icon-start-event-none',
        '开始任务'
    ),
    'create.end-event': createAction(
        'bpmn:EndEvent',
        'event',
        'bpmn-icon-end-event-none',
        '结束任务'
    ),
    'task-separator': {
        //任务分割线
        group: 'tasks',
        separator: true,
    },
    'create.task': createAction(
        'bpmn:Task',
        'activity',
        'bpmn-icon-task', // 🙋‍♂️ 使用图片后，记得修改成自己的类名
        '创建空白任务'
        // require('../img/task.png') // 📌
    ),
    'create.user-task': createAction(
        //用户任务
        'bpmn:UserTask',
        'activity',
        'bpmn-icon-user-task',
        '创建用户任务'
    ),
    'create.service-task': createAction(
        //服务任务
        'bpmn:ServiceTask',
        'activity',
        'bpmn-icon-service-task',
        '创建服务任务'
    ),

    'gateway-separator': {
        //网关分割线
        group: 'gateways',
        separator: true,
    },
    'create.exclusive-gateway': createAction(
        'bpmn:ExclusiveGateway',
        'gateway',
        'bpmn-icon-gateway-xor',
        '创建互斥网关'
    ),
    'create.parallel-gateway': createAction(
        'bpmn:ParallelGateway',
        'gateway',
        'bpmn-icon-gateway-parallel',
        '创建并行网关'
    ),
    'group-separator': {
        //网关分割线
        group: 'artifact',
        separator: true,
    },
    'create.group': createAction('bpmn:Group', 'artifact', 'bpmn-icon-group', '创建组'),
}

function createAction(type, group, className, title, imageUrl) {
    // 还记得 CustomPalette.js 吗？便是这里回调 createListener 函数
    // if (action === 'click') {
    // handler(originalEvent, autoActivate, elementFactory, create)
    // }
    function createListener(event, autoActivate, elementFactory, create) {
        var shape = elementFactory.createShape({ type })

        create.start(event, shape)
    }

    return {
        group: group,
        className: className,
        title: title,
        imageUrl, // 📌
        action: {
            dragstart: createListener,
            click: createListener,
        },
    }
}