How to define a custom connector in JointJS

Dov Rosenberg

I'm attempting to define a custom connector in JointJS in Vue. Though I don't think this is really a JointJS issue or a Vue issue, but rather my lack of understanding of how Javascript modules work in this context...

I have this code, which seems to match the docs (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)  
{
...
}

Note that Vue.joint is created as a plugin, this way:

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);

But when I later attempt to use this connector, findPath() in JointJS throws an error that the connector doesn't exist. The issue appears to be that in findPath, it's importing the connectors module from the npm package. That module obviously doesn't have anything I added to the Vue.joint.connectors property.

If I try to add the function to the module more directly, I get a 'Object is not extensible' error. For example doing something like this in the plugin instead:

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);

So I guess the question is how does one properly add a property to a module export in a way that other code that imports the module directly can still see it? I think outside Vue, this would all just work because joint would be a global variable (?)

tony19

Part of the problem is the plugin creates a new joint object, which is missing the original import's connectors property.

However, I believe the plugin should keep the original import and setup the custom connector on that:

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

JointJs: Define a custom shape with Node.Js

JointJS - Custom LinkView: How associate to my Custom model?

How to define []= and at() = for a custom collection?

How to create a custom connector for Presto and InfluxDB

How to integrate custom connector to Botium Box

How to define custom functions in Maple?

How to define a custom build setting?

How to define custom macros in MathJax

How to define custom routes in theme?

How to use jointjs with reactjs?

how to connect to custom objects of Salesforce using connector in logic app

How do I pass a Java HashMap to a custom Mule connector?

How to set up Kafka-connector to use custom transform in Debezium?

How to write custom SMT in Kafka Source Connector to obfuscate private data

How to add a custom SSL verification to MySql Connector/NET

How to handle missing fields in a PowerBI custom data connector?

JointJS: Unable to display a foreignObject in a custom shape with JSON

JointJS drawing multiple custom connectors to an element

Changing Port Location in custom element in JointJS

How to define custom animations for noUislider.js?

How to define custom configuration variables in rails

How to define a custom order in ORDER BY clause?

How to define a custom element method with angular elements

How can I define !! as a custom postfix operator?

How to define the custom parameter of a record in Dymola?

How to define custom html tags in ckeditor

How to define custom equality in case classes

How to define custom fiscal quarters in pandas?

How to define an arbitrary for a custom list in scalacheck?