如何在 JointJS 中定义自定义连接器

Question

我正在尝试在 Vue 的 JointJS 中定义自定义连接器。虽然我不认为这真的是 JointJS 问题或 Vue 问题，但我对 Javascript 模块在这种情况下的工作方式缺乏了解...

我有这段代码，似乎与文档相符 (https://resources.jointjs.com/docs/jointjs/v3.3/joint.html#connectors.custom):

import Vue from 'vue';
let joint = Vue.joint;

joint.connectors = joint.connectors || {};

joint.connectors.CloudConflictConnector = function(sourcePoint, targetPoint, vertices, args)  
{
...
}

注意Vue.joint创建为插件，这样：

const Joint = {
    install: function (Vue) {
        let joint = { g, dia, layout, linkTools, V };

        Object.defineProperty(Vue.prototype, '$joint', { value: joint });
        Vue.joint = Vue.prototype.$joint;
    }
};
Vue.use(Joint);

但是当我稍后尝试使用此连接器时，JointJS 中的 findPath() 会抛出连接器不存在的错误。问题似乎是在 findPath 中，它正在从 npm 包中导入连接器模块。该模块显然没有我添加到 Vue.joint.connectors 属性.

的任何内容

如果我尝试更直接地将函数添加到模块，我会收到 'Object is not extensible' 错误。例如在插件中做这样的事情：

import * as connectors from 'jointjs/src/connectors/index.mjs';

const Joint = {
    install: function (Vue) {
        let joint = { g, dia, layout, linkTools, V, connectors };
        joint.connectors.customConnector = ...;

        Object.defineProperty(Vue.prototype, '$joint', { value: joint });
        Vue.joint = Vue.prototype.$joint;
    }
};
Vue.use(Joint);

所以我想问题是如何正确地将属性添加到模块导出中，而其他直接导入该模块的代码仍然可以看到它？我认为在 Vue 之外，这一切都会起作用，因为 joint 将是一个全局变量 (?)

Answer 1

部分问题是插件创建了一个新的 joint 对象，该对象缺少原始导入的 connectors 属性.

但是，我认为插件应该保留原始导入并在其上设置自定义连接器：

export default {
  install(app) {
    const joint = require('jointjs')
    addCustomConnector(joint)

    app.prototype.$joint = joint
    app.joint = joint
  }
}

function addCustomConnector({ connectors }) {
  connectors.CloudConflictConnector = (sourcePoint, targetPoint, vertices, args) => {
    //...
  }
}

GitHub demo

如何在 JointJS 中定义自定义连接器

How to define a custom connector in JointJS

javascript

vue.js

ecmascript-6

node-modules

jointjs