New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

cytoscape-popper

Package Overview
Dependencies
Maintainers
5
Versions
11
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

cytoscape-popper - npm Package Compare versions

Comparing version 2.0.0 to 4.0.0

cytoscape-popper.d.ts
demo-popper.html
tsconfig.json

121

cytoscape-popper.js
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("@popperjs/core"));
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define(["@popperjs/core"], factory);
define([], factory);
else if(typeof exports === 'object')
exports["cytoscapePopper"] = factory(require("@popperjs/core"));
exports["cytoscapePopper"] = factory();
else
root["cytoscapePopper"] = factory(root["Popper"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_8__) {
root["cytoscapePopper"] = factory();
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap

@@ -86,27 +86,2 @@ /******/ // The module cache

// Simple, internal Object.assign() polyfill for options objects etc.
module.exports = Object.assign != null ? Object.assign.bind(Object) : function (tgt) {
for (var _len = arguments.length, srcs = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
srcs[_key - 1] = arguments[_key];
}
srcs.forEach(function (src) {
if (src !== null && src !== undefined) {
Object.keys(src).forEach(function (k) {
return tgt[k] = src[k];
});
}
});
return tgt;
};
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var _require = __webpack_require__(5),

@@ -134,2 +109,27 @@ getBoundingBox = _require.getBoundingBox;

/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
// Simple, internal Object.assign() polyfill for options objects etc.
module.exports = Object.assign != null ? Object.assign.bind(Object) : function (tgt) {
for (var _len = arguments.length, srcs = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
srcs[_key - 1] = arguments[_key];
}
srcs.forEach(function (src) {
if (src !== null && src !== undefined) {
Object.keys(src).forEach(function (k) {
return tgt[k] = src[k];
});
}
});
return tgt;
};
/***/ }),
/* 2 */

@@ -141,5 +141,3 @@ /***/ (function(module, exports, __webpack_require__) {

var assign = __webpack_require__(0);
var _require = __webpack_require__(1),
var _require = __webpack_require__(0),
getRef = _require.getRef;

@@ -150,7 +148,2 @@

var popperDefaults = {};
var _require3 = __webpack_require__(8),
createPopper = _require3.createPopper;
// Create a new popper object for a core or element target

@@ -162,5 +155,4 @@

var content = getContent(target, opts.content);
var popperOpts = assign({}, popperDefaults, opts.popper);
return createPopper(refObject, content, popperOpts);
return target.popperFactory(refObject, content, opts.popper);
}

@@ -177,3 +169,3 @@

var assign = __webpack_require__(0);
var assign = __webpack_require__(1);

@@ -183,3 +175,3 @@ var _require = __webpack_require__(2),

var _require2 = __webpack_require__(1),
var _require2 = __webpack_require__(0),
getRef = _require2.getRef;

@@ -261,3 +253,3 @@

var assign = __webpack_require__(0);
var assign = __webpack_require__(1);

@@ -267,3 +259,3 @@ var _require = __webpack_require__(2),

var _require2 = __webpack_require__(1),
var _require2 = __webpack_require__(0),
getRef = _require2.getRef;

@@ -370,4 +362,2 @@

/* global cytoscape */
var coreImpl = __webpack_require__(4);

@@ -377,29 +367,26 @@ var collectionImpl = __webpack_require__(3);

// registers the extension on a cytoscape lib ref
var register = function register(cytoscape) {
if (!cytoscape) {
return;
} // can't register if cytoscape unspecified
var registerFactory = function registerFactory(popperFactory) {
if (typeof popperFactory !== "function") {
throw new Error('Provide \'popperFactory\' before registering the module');
}
// register with cytoscape.js
cytoscape('core', 'popper', coreImpl.popper); //Cytoscape Core
cytoscape('collection', 'popper', collectionImpl.popper); //Cytoscape Collections
cytoscape('core', 'popperRef', coreImpl.popperRef); //Cytoscape Core for References
cytoscape('collection', 'popperRef', collectionImpl.popperRef); //Cytoscape Collections for References
return function register(cytoscape) {
if (!cytoscape) {
return;
} // can't register if cytoscape unspecified
// register with cytoscape.js
cytoscape('core', 'popperFactory', popperFactory); // Cytoscape Core factory
cytoscape('collection', 'popperFactory', popperFactory); //Cytoscape Collections factory
cytoscape('core', 'popper', coreImpl.popper); //Cytoscape Core
cytoscape('collection', 'popper', collectionImpl.popper); //Cytoscape Collections
cytoscape('core', 'popperRef', coreImpl.popperRef); //Cytoscape Core for References
cytoscape('collection', 'popperRef', collectionImpl.popperRef); //Cytoscape Collections for References
};
};
if (typeof cytoscape !== 'undefined') {
// expose to global cytoscape (i.e. window.cytoscape)
register(cytoscape);
}
module.exports = registerFactory;
module.exports = register;
/***/ }),
/* 8 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_8__;
/***/ })
/******/ ]);
});

9

package.json
{
"name": "cytoscape-popper",
"version": "2.0.0",
"version": "4.0.0",
"description": "A Cytoscape.js extension for Popper.js",
"main": "cytoscape-popper.js",
"types": "cytoscape-popper.d.ts",
"author": "Cytoscape",

@@ -33,2 +34,3 @@ "scripts": {

"devDependencies": {
"@types/cytoscape": "^3.2.0",
"babel-core": "^6.24.1",

@@ -46,2 +48,3 @@ "babel-loader": "^7.0.0",

"rimraf": "^2.6.2",
"typescript": "^3.8.0",
"update": "^0.7.4",

@@ -55,5 +58,3 @@ "updater-license": "^1.0.0",

},
"dependencies": {
"@popperjs/core": "^2.0.0"
}
"dependencies": {}
}

246

README.md

@@ -8,10 +8,23 @@ cytoscape-popper

A Cytoscape.js extension for integrating [Popper.js](https://popper.js.org/) ([demo](https://cytoscape.github.io/cytoscape.js-popper)) ([tippy demo](https://cytoscape.github.io/cytoscape.js-popper/demo-tippy.html))
Popper allows you to dynamically align a div, e.g. a tooltip, to another element in the page. This extension allows you to use any popper library on Cytoscape elements. This allows you to create DOM elements positioned on or around Cytoscape elements. It is useful for tooltips and overlays, for example.
Popper.js allows you to dynamically align a div, e.g. a tooltip, to another element in the page. This extension allows you to use Popper.js on Cytoscape elements. This allows you to create DOM elements positioned on or around Cytoscape elements. It is useful for tooltips and overlays, for example.
Integration examples:
- Floating UI - [demo](https://cytoscape.github.io/cytoscape.js-popper), [usage](#usage-with-floating-ui)
- Popper.js@2 - [demo](https://cytoscape.github.io/cytoscape.js-popper/demo-popper.html), [usage](#usage-with-popperjs--deprecated-)
- Tippy.JS - [demo](https://cytoscape.github.io/cytoscape.js-popper/demo-tippy.html), [usage](#usage-with-tippyjs)
## Migration from v2
Since `Popper.js` has become `@floating-ui` (https://floating-ui.com/docs/migration) and the API has changed a lot it becomes harder to support both versions
(for example TippyJS, that supports only the previous version), so instead of depending on a specific external version
this extension allows users to use any Popper library with providing `popperFactory` function during initializing.
See [FloatingUI](#usage-with-floating-ui) or [Popper.js](#usage-with-popperjs--deprecated-) sections.
## Dependencies
* Cytoscape.js ^3.2.0
* Popper.js ^2.0.0

@@ -32,5 +45,9 @@

import cytoscape from 'cytoscape';
import popper from 'cytoscape-popper';
import cytoscapePopper from 'cytoscape-popper';
cytoscape.use( popper );
function popperFactory(ref, content, opts) {
// See integration sections
}
cytoscape.use( cytoscapePopper(popperFactory) );
```

@@ -42,5 +59,9 @@

let cytoscape = require('cytoscape');
let popper = require('cytoscape-popper');
let cytoscapePopper = require('cytoscape-popper');
cytoscape.use( popper ); // register extension
function popperFactory(ref, content, opts) {
// See integration sections
}
cytoscape.use( cytoscapePopper(popperFactory) ); // register extension
```

@@ -52,17 +73,19 @@

require(['cytoscape', 'cytoscape-popper'], function( cytoscape, popper ){
popper( cytoscape ); // register extension
function popperFactory(ref, content, opts) {
// See integration sections
}
// register extension
popper(popperFactory)(cytoscape);
});
```
Plain HTML/JS has the extension registered for you automatically, because no `require()` is needed.
## API
This extension exposes two functions, `popper()` and `popperRef()`. These functions are defined for both the core and for elements, so you can call `cy.popper()` or `ele.popper()` for example.
This extension exposes `popper()` and `popperRef()` functions and provided `popperFactory()`. These functions are defined for both the core and for elements, so you can call `cy.popper()` or `ele.popper()` for example.
Each function takes an options object, as follows:
`cy.popper( options )` or `ele.popper( options )` : Get a [Popper Instance](https://popper.js.org/docs/v2/constructors/) for the specified core Cytoscape instance or the specified element. This is useful for positioning a div relative to or on top of a core instance or element.
`cy.popper( options )` or `ele.popper( options )` : Make a `PopperInstance` for the specified core Cytoscape instance or the specified element. This is useful for positioning a div relative to or on top of a core instance or element.
`cy.popperRef( options )` or `ele.popperRef( options )` : Get a [Popper virtual element](https://popper.js.org/docs/v2/virtual-elements/) (aka `Popper reference object` in Popper v1) for the specified core Cytoscape instance or the specified element. A Popper virtual element is useful only for positioning, as it represent the target rather than the content. This is useful for cases where you want to create a new Popper instance manually via Popper constructor `createPopper()` or where you need to pass a `popperRef` object to another library like Tippy.js.
`cy.popperRef( options )` or `ele.popperRef( options )` : Make a `PopperInstance` for the specified core Cytoscape instance or the specified element. A Popper virtual element is useful only for positioning, as it represent the target rather than the content. This is useful for cases where you want to create a new Popper instance manually via Popper constructor `createPopper()` or where you need to pass a `popperRef` object to another library like Tippy.js.

@@ -73,7 +96,132 @@ - `options`

- `renderedDimensions` : A function that can be used to override the [rendered](http://js.cytoscape.org/#notation/position) Cytoscape [bounding box dimensions](http://js.cytoscape.org/#eles.renderedBoundingBox) considered for the popper target (i.e. `cy` or `ele`). It defines only the effective width and height (`bb.w` and `bb.h`) of the Popper target. This option is more often useful for elements rather than for the core.
- `popper` : The Popper [options object](https://popper.js.org/docs/v2/constructors/#options). You may use this to override Popper options.
- `popper` : The `PopperOptions` object. These options are used in provided `popperFactory`.
## Usage with @floating-ui
### Initializing
``` js
import cytoscape from 'cytoscape';
import cytoscapePopper from 'cytoscape-popper';
import {
computePosition,
flip,
shift,
limitShift,
} from '@floating-ui/dom';
function popperFactory(ref, content, opts) {
// see https://floating-ui.com/docs/computePosition#options
const popperOptions = {
// matching the default behaviour from Popper@2
// https://floating-ui.com/docs/migration#configure-middleware
middleware: [
flip(),
shift({limiter: limitShift()})
],
...opts,
}
function update() {
computePosition(ref, content, opts).then(({x, y}) => {
Object.assign(content.style, {
left: `${x}px`,
top: `${y}px`,
});
});
}
update();
return { update };
}
cytoscape.use(cytoscapePopper(popperFactory));
```
### `popper()` example
``` js
// create a basic popper on the first node
let popper1 = cy.nodes()[0].popper({
content: () => {
let div = document.createElement('div');
div.innerHTML = 'Popper content';
document.body.appendChild(div);
return div;
}
});
// create a basic popper on the core with custom options
let popper2 = cy.popper({
content: () => {
let div = document.createElement('div');
div.innerHTML = 'Popper content';
document.body.appendChild(div);
return div;
},
renderedPosition: () => ({ x: 100, y: 200 }),
popper: {
placement: 'bottom',
} // @flaoting-ui options (https://floating-ui.com/docs/middleware)
});
```
### `popperRef()` example
``` js
// create a basic popper ref for the first node
let popperRef1 = cy.nodes()[0].popperRef();
// create a basic popper ref on the core
let popperRef2 = cy.popperRef({
renderedPosition: () => ({ x: 200, y: 300 })
});
```
### Sticky `popper()` example
```js
let node = cy.nodes().first();
let popper = node.popper({
content: () => {
let div = document.createElement('div');
div.innerHTML = 'Sticky Popper content';
document.body.appendChild( div );
return div;
}
});
let update = () => {
popper.update();
};
node.on('position', update);
cy.on('pan zoom resize', update);
```
## Usage with Popper.js (deprecated)
### Initializing
``` js
import cytoscape from 'cytoscape';
import cytoscapePopper from 'cytoscape-popper';
import { createPopper } from '@popperjs/core';
cytoscape.use(cytoscapePopper(createPopper));
```
### `popper()` example
``` js
// create a basic popper on the first node

@@ -146,7 +294,39 @@ let popper1 = cy.nodes()[0].popper({

```
Note that for Popper v2 the update method is asynchronous and returns a promise. See [Manual update](https://popper.js.org/docs/v2/lifecycle/#manual-update).
### Usage with Tippy.js
## Usage with Tippy.js
This extension can also be used to enable [Tippy.js](https://github.com/atomiks/tippyjs) tooltip functionality with Cytoscape. Any version of Tippy that is compatible with Popper v2 is compatible with this extension.
### Initializing
```js
import cytoscape from 'cytoscape';
import popper from 'cytoscape-popper';
import tippy from 'tippy.js';
function tippyFactory(ref, content){
// Since tippy constructor requires DOM element/elements, create a placeholder
var dummyDomEle = document.createElement('div');
var tip = tippy( dummyDomEle, {
getReferenceClientRect: ref.getBoundingClientRect,
trigger: 'manual', // mandatory
// dom element inside the tippy:
content: content,
// your own preferences:
arrow: true,
placement: 'bottom',
hideOnClick: false,
sticky: "reference",
// if interactive:
interactive: true,
appendTo: document.body // or append dummyDomEle to document.body
} );
return tip;
}
cytoscape.use(cytoscapePopper(tippyFactory));
```
The creation of many `Tippy` instances at once has performance implications, especially for large graphs. Create each instance on demand, e.g. on `tap`. Use [`destroy()`](https://atomiks.github.io/tippyjs/v6/methods/#destroy) instead of `hide()` where possible.

@@ -157,14 +337,3 @@

let ref = node.popperRef(); // used only for positioning
// A dummy element must be passed as tippy only accepts dom element(s) as the target
// https://atomiks.github.io/tippyjs/v6/constructor/#target-types
let dummyDomEle = document.createElement('div');
let tip = new Tippy(dummyDomEle, { // tippy props:
getReferenceClientRect: ref.getBoundingClientRect, // https://atomiks.github.io/tippyjs/v6/all-props/#getreferenceclientrect
trigger: 'manual', // mandatory, we cause the tippy to show programmatically.
// your own custom props
// content prop can be used when the target is a single element https://atomiks.github.io/tippyjs/v6/constructor/#prop
var tip = node.popper({
content: () => {

@@ -176,3 +345,3 @@ let content = document.createElement('div');

return content;
}
},
});

@@ -185,7 +354,20 @@

## v2 changes
This version of cytoscape-popper has been updated to use Popper 2 and be compatible with Tippy 6. Thus, it is no longer compatible with Popper v1/Tippy v5. If your application needs Popper v1/Tippy v5, use the latest v1 version of cytoscape-popper instead. Cytoscape-popper v1 dependencies are Cytoscape.js ^3.2.0 and Popper.js ^1.12.0.
## Typescript
The cytoscape-popper api has not changed in v2, but you may need to update your code if it references Popper/Tippy. See [Migrating to Popper 2](https://popper.js.org/docs/v2/migration-guide/) and [Tippy Migration Guide](https://github.com/atomiks/tippyjs/blob/master/MIGRATION_GUIDE.md#5x-to-6x).
This extension exports empty `PopperInstance` and `PopperOptions` interfaces allows to extend them according to the final Popper implementation.
`@floating-ui` example:
```ts
import { ComputePositionConfig } from '@floating-ui/dom';
declare module 'cytoscape-popper' {
interface PopperOptions extends ComputePositionConfig {
}
interface PopperInstance {
update(): void;
}
}
```
## Build targets

@@ -192,0 +374,0 @@

31

src/index.js

@@ -1,3 +0,1 @@

/* global cytoscape */
const coreImpl = require('./core');

@@ -7,17 +5,20 @@ const collectionImpl = require('./collection');

// registers the extension on a cytoscape lib ref
let register = function (cytoscape) {
if (!cytoscape) { return; } // can't register if cytoscape unspecified
let registerFactory = function(popperFactory) {
if (typeof popperFactory !== "function") {
throw new Error(`Provide 'popperFactory' before registering the module`);
}
// register with cytoscape.js
cytoscape('core', 'popper', coreImpl.popper); //Cytoscape Core
cytoscape('collection', 'popper', collectionImpl.popper); //Cytoscape Collections
cytoscape('core', 'popperRef', coreImpl.popperRef); //Cytoscape Core for References
cytoscape('collection', 'popperRef', collectionImpl.popperRef); //Cytoscape Collections for References
return function register(cytoscape) {
if (!cytoscape) { return; } // can't register if cytoscape unspecified
};
// register with cytoscape.js
cytoscape('core', 'popperFactory', popperFactory); // Cytoscape Core factory
cytoscape('collection', 'popperFactory', popperFactory); //Cytoscape Collections factory
cytoscape('core', 'popper', coreImpl.popper); //Cytoscape Core
cytoscape('collection', 'popper', collectionImpl.popper); //Cytoscape Collections
cytoscape('core', 'popperRef', coreImpl.popperRef); //Cytoscape Core for References
cytoscape('collection', 'popperRef', collectionImpl.popperRef); //Cytoscape Collections for References
};
} ;
if (typeof cytoscape !== 'undefined') { // expose to global cytoscape (i.e. window.cytoscape)
register(cytoscape);
}
module.exports = register;
module.exports = registerFactory;

8

src/popper.js

@@ -1,9 +0,4 @@

const assign = require('./assign');
const { getRef } = require('./ref');
const { getContent } = require('./content');
const popperDefaults = {};
const {createPopper} = require('@popperjs/core');
// Create a new popper object for a core or element target

@@ -13,7 +8,6 @@ function getPopper(target, opts) {

let content = getContent(target, opts.content);
let popperOpts = assign({}, popperDefaults, opts.popper);
return createPopper(refObject, content, popperOpts);
return target.popperFactory(refObject, content, opts.popper);
}
module.exports = { getPopper };

8

webpack.config.js

@@ -25,10 +25,2 @@ const path = require('path');

},
externals: {
"@popperjs/core" : {
commonjs: "@popperjs/core",
commonjs2: "@popperjs/core",
amd: "@popperjs/core",
root: "Popper"
}
},
plugins: MIN ? [

@@ -35,0 +27,0 @@ new webpack.optimize.UglifyJsPlugin({

demo-tippy.html

Sorry, the diff of this file is not supported yet

demo.html

Sorry, the diff of this file is not supported yet

LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc