Edge labels with border

[imatpot]

Would it be possible to implement the ability to add a border around an edge label? Something like the rough sketch I have attached below:

I have found a nearly identical issue in the old, archived repository, with the only difference being that I'd also need a border radius.

[Thomaash]

Hi @mladenbrankovic,

I think this is possible and probably not even particularly difficult to implement. Sadly at the moment there's no maintainer who would have time to implement new features. Would you find the time to work on this? If so that would be great and (not only) I would be very grateful.

[imatpot]

Hi @Thomaash I have barely any experience with contributing to open-source projects, but I'll definitely give it a try.

[imatpot]

Hi @Thomaash

Sorry to bother you again, but I'm having some trouble setting up the package repository locally. When trying to build or test, I get following error:

[!] AssertionError: There has to be a single entry file (entry-esnext.{js,ts}) for the ESNext build: expected [] to have a length of 1 but got 0
AssertionError: There has to be a single entry file (entry-esnext.{js,ts}) for the ESNext build: expected [] to have a length of 1 but got 0
    at callback (C:\devsbb\source\open-source\vis-network\node_modules\vis-dev-utils\src\module\generate-rollup-configuration\index.ts:410:18)
    at validate (C:\devsbb\source\open-source\vis-network\node_modules\vis-dev-utils\src\module\generate-rollup-configuration\index.ts:152:12)
    at C:\devsbb\source\open-source\vis-network\node_modules\vis-dev-utils\src\module\generate-rollup-configuration\index.ts:405:5
    at Array.map (<anonymous>)
    at Object.generateRollupConfiguration (C:\devsbb\source\open-source\vis-network\node_modules\vis-dev-utils\src\module\generate-rollup-configuration\index.ts:397:53)
    at Object.<anonymous> (C:\devsbb\source\open-source\vis-network\rollup.build.js:10:32)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.require.extensions.(anonymous function) [as .js] (C:\devsbb\source\open-source\vis-network\node_modules\rollup\dist\bin\rollup:1809:24)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at rollup_js.rollup.then.then (C:\devsbb\source\open-source\vis-network\node_modules\rollup\dist\bin\rollup:1816:32)

I checked the package.json for the entry point(s), which seem to be peer/umd/vis-network.js (main) and esnext/esm/vis-network.js (jsnext), but neither of these paths exist. The reason I'm asking is because serving works fine, except that I can't test the example(s) because the reference vis is undefined, since the (assumingly in the build generated) standalone folder doesn't exist.

Have I missed a step when setting up the project locally?

[Thomaash]

It should just work with git clone, npm ci and npm build. I tested it and it works. Can you provide more info? Also check if your up to date with the master.

[imatpot]

Ah, I see. I've only used npm i so far, I haven't tried with npm ci yet. I'll try that tomorrow. Thanks for the heads-up!

[imatpot]

Hm, that doesn't seem to have worked so well. I've tried cloning directly from master, running npm ci and npm run build on two different devices, both running Windows 10 and npm v6.13.4, resulting in the same output as before. If I just run npm build (as you suggested), I don't get any errors, but a warning that there are no arguments.

npm info it worked if it ends with ok
npm info using npm@6.14.2
npm info using node@v10.15.1
npm WARN build `npm build` called with no arguments. Did you mean to `npm run-script build`?
npm timing npm Completed in 177ms
npm info ok

This is the error I'm getting, again in its full glory.

[!] AssertionError: There has to be a single entry file (entry-esnext.{js,ts}) for the ESNext build: expected [] to have a length of 1 but got 0
AssertionError: There has to be a single entry file (entry-esnext.{js,ts}) for the ESNext build: expected [] to have a length of 1 but got 0
    at callback (C:\devsbb\source\open-source\vis-network-origin\node_modules\vis-dev-utils\src\module\generate-rollup-configuration\index.ts:410:18)
    at validate (C:\devsbb\source\open-source\vis-network-origin\node_modules\vis-dev-utils\src\module\generate-rollup-configuration\index.ts:152:12)
    at C:\devsbb\source\open-source\vis-network-origin\node_modules\vis-dev-utils\src\module\generate-rollup-configuration\index.ts:405:5
    at Array.map (<anonymous>)
    at Object.generateRollupConfiguration (C:\devsbb\source\open-source\vis-network-origin\node_modules\vis-dev-utils\src\module\generate-rollup-configuration\index.ts:397:53)
    at Object.<anonymous> (C:\devsbb\source\open-source\vis-network-origin\rollup.build.js:10:32)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.require.extensions.(anonymous function) [as .js] (C:\devsbb\source\open-source\vis-network-origin\node_modules\rollup\dist\bin\rollup:1809:24)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at rollup_js.rollup.then.then (C:\devsbb\source\open-source\vis-network-origin\node_modules\rollup\dist\bin\rollup:1816:32)

npm info lifecycle vis-network@0.0.0-no-version~build:code: Failed to exec build:code script
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vis-network@0.0.0-no-version build:code: `rollup --config rollup.build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vis-network@0.0.0-no-version build:code script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm timing npm Completed in 1362ms

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\E501913\AppData\Roaming\npm-cache\_logs\2020-03-18T08_53_49_144Z-debug.log
npm info lifecycle vis-network@0.0.0-no-version~build: Failed to exec build script
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vis-network@0.0.0-no-version build: `npm run build:declarations && npm run build:code && npm run build:legacy:types && npm run build:legacy:code && npm run build:legacy:images`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vis-network@0.0.0-no-version build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm timing npm Completed in 5933ms

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\E501913\AppData\Roaming\npm-cache\_logs\2020-03-18T08_53_49_185Z-debug.log

2020-03-18T08_53_49_144Z-debug.log 2020-03-18T08_53_49_185Z-debug.log

The logs generated don't really help me either, but maybe you can find something in there. Odd, that it works for you but doesn't on my machines...

[arnemileswinter]

The way I am solving is is by generating svg on the fly and setting it to be the image for an edges' middle arrow like this:

middle: {
    enabled: true,
    src:  "data:image/svg+xml;base64," + btoa(labelToSvgElement(myLabel).outerHTML),
    type: "image"
}

The problem I am having with this is however, that the image will be rotated when the edge points at an angle, still looking for a way to counter-hack this :)

[hansiemithun]

Is there any update on this? We have similar requirement