You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.4 KiB
87 lines
2.4 KiB
4 months ago
|
# BubbleSets for JavaScript
|
||
|
|
|
||
|
|
[![NPM Package][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url]
|
||
|
|
|
||
|
|
Fork of http://github.com/josuakrause/bubblesets-js/ - a JavaScript implementation of Christopher Collins' [bubble sets](http://vialab.science.uoit.ca/portfolio/bubblesets) without the use of external libraries.
|
||
|
|
A Java implementation can be found [here](https://github.com/JosuaKrause/Bubble-Sets).
|
||
|
|
|
||
|
|
A [Cytoscape](https://js.cytoscape.org/#extensions/ui-extensions) plugin is located at [Cytoscape.js-Bubblesets](https://github.com/upsetjs/cytoscape.js-bubblesets).
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
## Install
|
||
|
|
|
||
|
|
```sh
|
||
|
|
npm install --save bubblesets-js
|
||
|
|
```
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
```js
|
||
|
|
const bubbleSets = new BubbleSets.BubbleSets();
|
||
|
|
bubbleSets.pushMember(BubbleSets.rect(30, 30, 50, 20));
|
||
|
|
bubbleSets.pushMember(BubbleSets.rect(200, 100, 50, 20));
|
||
|
|
bubbleSets.pushMember(BubbleSets.circle(240, 40, 10));
|
||
|
|
|
||
|
|
const pointPath = bubbleSets.compute();
|
||
|
|
const cleanPath = pointPath.sample(8).simplify(0).bSplines().simplify(0);
|
||
|
|
|
||
|
|
const canvas = document.createElement('canvas');
|
||
|
|
canvas.width = 400;
|
||
|
|
canvas.height = 200;
|
||
|
|
document.body.appendChild(canvas);
|
||
|
|
const ctx = canvas.getContext('2d');
|
||
|
|
|
||
|
|
// svg path
|
||
|
|
//const path = document.createElement('path');
|
||
|
|
//path.setAttribute('d', cleanPath.toString());
|
||
|
|
|
||
|
|
// canvas
|
||
|
|
ctx.beginPath();
|
||
|
|
cleanPath.draw(ctx);
|
||
|
|
ctx.strokeStyle = 'black';
|
||
|
|
ctx.fillStyle = 'rgba(0,0,255,0.2)';
|
||
|
|
ctx.fill();
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
ctx.beginPath();
|
||
|
|
bubbleSets.drawMembers(ctx);
|
||
|
|
ctx.fillStyle = 'steelblue';
|
||
|
|
ctx.fill();
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
see [Samples](https://github.com/upsetjs/bubblesets-js/tree/master/samples) on Github
|
||
|
|
|
||
|
|
or at this [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/MWKYRWo)
|
||
|
|
|
||
|
|
## Development Environment
|
||
|
|
|
||
|
|
```sh
|
||
|
|
npm i -g yarn
|
||
|
|
yarn set version latest
|
||
|
|
cat .yarnrc_patch.yml >> .yarnrc.yml
|
||
|
|
yarn
|
||
|
|
yarn pnpify --sdk vscode
|
||
|
|
```
|
||
|
|
|
||
|
|
### Common commands
|
||
|
|
|
||
|
|
```sh
|
||
|
|
yarn compile
|
||
|
|
yarn test
|
||
|
|
yarn lint
|
||
|
|
yarn fix
|
||
|
|
yarn build
|
||
|
|
yarn docs
|
||
|
|
yarn release
|
||
|
|
yarn release:pre
|
||
|
|
```
|
||
|
|
|
||
|
|
[npm-image]: https://badge.fury.io/js/bubblesets-js.svg
|
||
|
|
[npm-url]: https://npmjs.org/package/bubblesets-js
|
||
|
|
[github-actions-image]: https://github.com/upsetjs/bubblesets-js/workflows/ci/badge.svg
|
||
|
|
[github-actions-url]: https://github.com/upsetjs/bubblesets-js/actions
|
||
|
|
[codepen]: https://img.shields.io/badge/CodePen-open-blue?logo=codepen
|