├── .babelrc ├── .eslintignore ├── .eslintrc ├── .github └── stale.yml ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── bower.json ├── cytoscape-popper.d.ts ├── cytoscape-popper.js ├── demo-popper.html ├── demo-tippy.html ├── demo.html ├── gh-pages ├── cytoscape-popper.js ├── demo-popper.html ├── demo-tippy.html ├── demo.html └── index.html ├── package-lock.json ├── package.json ├── src ├── assign.js ├── bb.js ├── collection.js ├── content.js ├── core.js ├── index.js ├── popper.js └── ref.js ├── test └── example.js ├── tsconfig.json └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env"] 3 | } 4 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "commonjs": true, 5 | "node": true, 6 | "amd": true, 7 | "es6": true 8 | }, 9 | "extends": "eslint:recommended", 10 | "rules": { 11 | "semi": "error" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Number of days of inactivity before an issue becomes stale 2 | daysUntilStale: 30 3 | # Number of days of inactivity before a stale issue is closed 4 | daysUntilClose: 30 5 | # Issues with these labels will never be considered stale 6 | exemptLabels: 7 | - pinned 8 | # Label to use when marking an issue as stale 9 | staleLabel: stale 10 | # Comment to post when marking an issue as stale. Set to `false` to disable 11 | markComment: > 12 | This issue has been automatically marked as stale, because it has not had 13 | activity within the past 30 days. It will be closed if no further activity 14 | occurs within the next 30 days. If a feature request is important to you, 15 | please consider making a pull request. Thank you for your contributions. 16 | # Comment to post when closing a stale issue. Set to `false` to disable 17 | closeComment: false 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | .DS_Store -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | 3 | Copyright (c) 2018-2021, 2024, The Cytoscape Consortium. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the “Software”), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 9 | of the Software, and to permit persons to whom the Software is furnished to do 10 | so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | cytoscape-popper 2 | ================================================================================ 3 | 4 | [![DOI](https://zenodo.org/badge/102492695.svg)](https://zenodo.org/badge/latestdoi/102492695) 5 | 6 | ## Description 7 | 8 | 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. 9 | 10 | Integration examples: 11 | - Floating UI - [demo](https://cytoscape.github.io/cytoscape.js-popper), [usage](#usage-with-floating-ui) 12 | - Popper.js@2 - [demo](https://cytoscape.github.io/cytoscape.js-popper/demo-popper.html), [usage](#usage-with-popperjs--deprecated-) 13 | - Tippy.JS - [demo](https://cytoscape.github.io/cytoscape.js-popper/demo-tippy.html), [usage](#usage-with-tippyjs) 14 | 15 | 16 | ## Migration from v2 17 | 18 | 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 19 | (for example TippyJS, that supports only the previous version), so instead of depending on a specific external version 20 | this extension allows users to use any Popper library with providing `popperFactory` function during initializing. 21 | 22 | See [FloatingUI](#usage-with-floating-ui) or [Popper.js](#usage-with-popperjs--deprecated-) sections. 23 | 24 | 25 | 26 | ## Dependencies 27 | 28 | * Cytoscape.js ^3.2.0 29 | 30 | 31 | ## Usage instructions 32 | 33 | Download the library: 34 | * via npm: `npm install cytoscape-popper`, 35 | * via bower: `bower install cytoscape-popper`, or 36 | * via direct download in the repository (probably from a tag). 37 | 38 | Import the library as appropriate for your project: 39 | 40 | ES import: 41 | 42 | ```js 43 | import cytoscape from 'cytoscape'; 44 | import cytoscapePopper from 'cytoscape-popper'; 45 | 46 | function popperFactory(ref, content, opts) { 47 | // See integration sections 48 | } 49 | 50 | cytoscape.use( cytoscapePopper(popperFactory) ); 51 | ``` 52 | 53 | CommonJS require: 54 | 55 | ```js 56 | let cytoscape = require('cytoscape'); 57 | let cytoscapePopper = require('cytoscape-popper'); 58 | 59 | function popperFactory(ref, content, opts) { 60 | // See integration sections 61 | } 62 | 63 | cytoscape.use( cytoscapePopper(popperFactory) ); // register extension 64 | ``` 65 | 66 | AMD: 67 | 68 | ```js 69 | require(['cytoscape', 'cytoscape-popper'], function( cytoscape, popper ){ 70 | function popperFactory(ref, content, opts) { 71 | // See integration sections 72 | } 73 | // register extension 74 | popper(popperFactory)(cytoscape); 75 | }); 76 | ``` 77 | 78 | ## API 79 | 80 | 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. 81 | 82 | Each function takes an options object, as follows: 83 | 84 | `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. 85 | 86 | `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. 87 | 88 | - `options` 89 | - `content` : The HTML content of the popper. May be a DOM `Element` reference or a function that returns one. 90 | - `renderedPosition` : A function that can be used to override the [rendered Cytoscape position](http://js.cytoscape.org/#notation/position) of the Popper target. This option is mandatory when using Popper on the core. For an element, the centre of its bounding box is used by default. 91 | - `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. 92 | - `popper` : The `PopperOptions` object. These options are used in provided `popperFactory`. 93 | 94 | ## Usage with @floating-ui 95 | 96 | ### Initializing 97 | 98 | ``` js 99 | import cytoscape from 'cytoscape'; 100 | import cytoscapePopper from 'cytoscape-popper'; 101 | import { 102 | computePosition, 103 | flip, 104 | shift, 105 | limitShift, 106 | } from '@floating-ui/dom'; 107 | 108 | function popperFactory(ref, content, opts) { 109 | // see https://floating-ui.com/docs/computePosition#options 110 | const popperOptions = { 111 | // matching the default behaviour from Popper@2 112 | // https://floating-ui.com/docs/migration#configure-middleware 113 | middleware: [ 114 | flip(), 115 | shift({limiter: limitShift()}) 116 | ], 117 | ...opts, 118 | } 119 | 120 | function update() { 121 | computePosition(ref, content, popperOptions).then(({x, y}) => { 122 | Object.assign(content.style, { 123 | left: `${x}px`, 124 | top: `${y}px`, 125 | }); 126 | }); 127 | } 128 | update(); 129 | return { update }; 130 | } 131 | 132 | cytoscape.use(cytoscapePopper(popperFactory)); 133 | ``` 134 | 135 | ### `popper()` example 136 | 137 | ``` js 138 | // create a basic popper on the first node 139 | let popper1 = cy.nodes()[0].popper({ 140 | content: () => { 141 | let div = document.createElement('div'); 142 | 143 | div.innerHTML = 'Popper content'; 144 | 145 | document.body.appendChild(div); 146 | 147 | return div; 148 | } 149 | }); 150 | 151 | // create a basic popper on the core with custom options 152 | let popper2 = cy.popper({ 153 | content: () => { 154 | let div = document.createElement('div'); 155 | 156 | div.innerHTML = 'Popper content'; 157 | 158 | document.body.appendChild(div); 159 | 160 | return div; 161 | }, 162 | renderedPosition: () => ({ x: 100, y: 200 }), 163 | popper: { 164 | placement: 'bottom', 165 | } // @flaoting-ui options (https://floating-ui.com/docs/middleware) 166 | }); 167 | ``` 168 | 169 | ### `popperRef()` example 170 | 171 | ``` js 172 | // create a basic popper ref for the first node 173 | let popperRef1 = cy.nodes()[0].popperRef(); 174 | 175 | // create a basic popper ref on the core 176 | let popperRef2 = cy.popperRef({ 177 | renderedPosition: () => ({ x: 200, y: 300 }) 178 | }); 179 | ``` 180 | 181 | ### Sticky `popper()` example 182 | 183 | ```js 184 | let node = cy.nodes().first(); 185 | 186 | let popper = node.popper({ 187 | content: () => { 188 | let div = document.createElement('div'); 189 | 190 | div.innerHTML = 'Sticky Popper content'; 191 | 192 | document.body.appendChild( div ); 193 | 194 | return div; 195 | } 196 | }); 197 | 198 | let update = () => { 199 | popper.update(); 200 | }; 201 | 202 | node.on('position', update); 203 | 204 | cy.on('pan zoom resize', update); 205 | ``` 206 | 207 | ## Usage with Popper.js (deprecated) 208 | 209 | ### Initializing 210 | 211 | ``` js 212 | import cytoscape from 'cytoscape'; 213 | import cytoscapePopper from 'cytoscape-popper'; 214 | import { createPopper } from '@popperjs/core'; 215 | 216 | cytoscape.use(cytoscapePopper(createPopper)); 217 | ``` 218 | 219 | ### `popper()` example 220 | 221 | ``` js 222 | // create a basic popper on the first node 223 | let popper1 = cy.nodes()[0].popper({ 224 | content: () => { 225 | let div = document.createElement('div'); 226 | 227 | div.innerHTML = 'Popper content'; 228 | 229 | document.body.appendChild(div); 230 | 231 | return div; 232 | }, 233 | popper: {} // my popper options here 234 | }); 235 | 236 | // create a basic popper on the core 237 | let popper2 = cy.popper({ 238 | content: () => { 239 | let div = document.createElement('div'); 240 | 241 | div.innerHTML = 'Popper content'; 242 | 243 | document.body.appendChild(div); 244 | 245 | return div; 246 | }, 247 | renderedPosition: () => ({ x: 100, y: 200 }), 248 | popper: {} // my popper options here 249 | }); 250 | ``` 251 | 252 | ### `popperRef()` example 253 | 254 | ``` js 255 | // create a basic popper ref for the first node 256 | let popperRef1 = cy.nodes()[0].popperRef(); 257 | 258 | // create a basic popper ref on the core 259 | let popperRef2 = cy.popperRef({ 260 | renderedPosition: () => ({ x: 200, y: 300 }) 261 | }); 262 | ``` 263 | 264 | ### Sticky `popper()` example 265 | 266 | ```js 267 | let node = cy.nodes().first(); 268 | 269 | let popper = node.popper({ 270 | content: () => { 271 | let div = document.createElement('div'); 272 | 273 | div.innerHTML = 'Sticky Popper content'; 274 | 275 | document.body.appendChild( div ); 276 | 277 | return div; 278 | } 279 | }); 280 | 281 | let update = () => { 282 | popper.update(); 283 | }; 284 | 285 | node.on('position', update); 286 | 287 | cy.on('pan zoom resize', update); 288 | ``` 289 | 290 | ## Usage with Tippy.js 291 | 292 | 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. 293 | 294 | ### Initializing 295 | 296 | ```js 297 | import cytoscape from 'cytoscape'; 298 | import popper from 'cytoscape-popper'; 299 | import tippy from 'tippy.js'; 300 | 301 | function tippyFactory(ref, content){ 302 | // Since tippy constructor requires DOM element/elements, create a placeholder 303 | var dummyDomEle = document.createElement('div'); 304 | 305 | var tip = tippy( dummyDomEle, { 306 | getReferenceClientRect: ref.getBoundingClientRect, 307 | trigger: 'manual', // mandatory 308 | // dom element inside the tippy: 309 | content: content, 310 | // your own preferences: 311 | arrow: true, 312 | placement: 'bottom', 313 | hideOnClick: false, 314 | sticky: "reference", 315 | 316 | // if interactive: 317 | interactive: true, 318 | appendTo: document.body // or append dummyDomEle to document.body 319 | } ); 320 | 321 | return tip; 322 | } 323 | 324 | cytoscape.use(cytoscapePopper(tippyFactory)); 325 | ``` 326 | 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. 327 | 328 | ```js 329 | let node = cy.nodes().first(); 330 | 331 | var tip = node.popper({ 332 | content: () => { 333 | let content = document.createElement('div'); 334 | 335 | content.innerHTML = 'Tippy content'; 336 | 337 | return content; 338 | }, 339 | }); 340 | 341 | tip.show(); 342 | ``` 343 | 344 | Refer to [Tippy.js](https://atomiks.github.io/tippyjs/) documentation for more details. 345 | 346 | ## Typescript 347 | 348 | This extension exports empty `PopperInstance` and `PopperOptions` interfaces allows to extend them according to the final Popper implementation. 349 | 350 | `@floating-ui` example: 351 | ```ts 352 | import { ComputePositionConfig } from '@floating-ui/dom'; 353 | 354 | declare module 'cytoscape-popper' { 355 | interface PopperOptions extends ComputePositionConfig { 356 | } 357 | interface PopperInstance { 358 | update(): void; 359 | } 360 | } 361 | 362 | ``` 363 | 364 | ## Build targets 365 | 366 | * `npm run test` : Run Mocha tests in `./test` 367 | * `npm run build` : Build `./src/**` into `cytoscape-popper.js` 368 | * `npm run watch` : Automatically build on changes with live reloading (N.b. you must already have an HTTP server running) 369 | * `npm run dev` : Automatically build on changes with live reloading with webpack dev server 370 | * `npm run lint` : Run eslint on the source 371 | 372 | N.b. all builds use babel, so modern ES features can be used in the `src`. 373 | 374 | 375 | ## Publishing instructions 376 | 377 | This project is set up to automatically be published to npm and bower. To publish: 378 | 379 | 1. Build the extension : `npm run build:release` 380 | 1. Commit the build : `git commit -am "Build for release"` 381 | 1. Bump the version number and tag: `npm version major|minor|patch` 382 | 1. Push to origin: `git push && git push --tags` 383 | 1. Publish to npm: `npm publish .` 384 | 1. If publishing to bower for the first time, you'll need to run `bower register cytoscape-popper https://github.com/cytoscape/cytoscape.js-popper.git` 385 | 1. [Make a new release](https://github.com/cytoscape/cytoscape.js-popper/releases/new) for Zenodo. 386 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cytoscape-popper", 3 | "description": "A Cytoscape.js extension for Popper.js", 4 | "main": "cytoscape-popper.js", 5 | "dependencies": { 6 | "cytoscape": "^3.2.0" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/cytoscape/cytoscape.js-popper.git" 11 | }, 12 | "ignore": [ 13 | "**/.*", 14 | "node_modules", 15 | "bower_components", 16 | "test", 17 | "tests" 18 | ], 19 | "keywords": [ 20 | "cytoscape", 21 | "cytoscape-extension" 22 | ], 23 | "license": "MIT" 24 | } 25 | -------------------------------------------------------------------------------- /cytoscape-popper.d.ts: -------------------------------------------------------------------------------- 1 | import * as cy from "cytoscape"; 2 | 3 | declare const cytoscapePopper: (factory: cytoscapePopper.PopperFactory) => cy.Ext; 4 | export = cytoscapePopper; 5 | export as namespace cytoscapePopper; 6 | 7 | declare namespace cytoscapePopper { 8 | interface Dimensions { 9 | w: number; 10 | h: number; 11 | } 12 | 13 | interface PopperOptions { 14 | } 15 | interface PopperInstance { 16 | } 17 | 18 | type RefElement = Pick; 19 | 20 | interface Options { 21 | /* 22 | * The HTML content of the popper. May be a DOM Element reference or a function that returns one. 23 | */ 24 | content?: HTMLElement | (() => HTMLElement); 25 | /* 26 | * A function that can be used to override the [rendered](http://js.cytoscape.org/#notation/position) Cytoscape position of the Popper target. 27 | * This option is mandatory when using Popper on the core. 28 | * For an element, the centre of its bounding box is used by default. 29 | */ 30 | renderedPosition?: (el: Type) => cytoscape.Position; 31 | /* 32 | * A function that can be used to override the [rendered](http://js.cytoscape.org/#notation/position) Cytoscape bounding box dimensions 33 | * considered for the popper target (i.e. `cy` or `ele`). 34 | * It defines only the effective `width` and `height` (`bb.w` and `bb.h`) of the Popper target. 35 | * This option is more often useful for elements rather than for the core. 36 | */ 37 | renderedDimensions?: (el: Type) => Dimensions; 38 | /* 39 | * The PopperOptions object. 40 | * You may use this to override Popper options. 41 | */ 42 | popper?: PopperOptions; 43 | } 44 | 45 | type getPopperInstance = (opts?: Options) => PopperInstance; 46 | 47 | type getPopperRef = (opts?: Options) => RefElement; 48 | 49 | type PopperFactory = (ref: RefElement, content: HTMLElement, options?: PopperOptions) => PopperInstance; 50 | } 51 | 52 | declare global { 53 | namespace cytoscape { 54 | interface SingularData { 55 | /* 56 | * User-provided popper factory 57 | */ 58 | popperFactory: cytoscapePopper.PopperFactory; 59 | /* 60 | * Make a PopperInstance using provided popperFactory for the specified element. 61 | */ 62 | popper: cytoscapePopper.getPopperInstance; 63 | /* 64 | * Make a virtual popperRef element from the cytoscape instance 65 | */ 66 | popperRef: cytoscapePopper.getPopperRef; 67 | } 68 | 69 | interface Core { 70 | /* 71 | * User-provided popper factory 72 | */ 73 | popperFactory: cytoscapePopper.PopperFactory; 74 | /* 75 | * Make a PopperInstance using provided popperFactory for the specified element. 76 | */ 77 | popper: cytoscapePopper.getPopperInstance; 78 | /* 79 | * Make a virtual popperRef element from the cytoscape instance 80 | */ 81 | popperRef: cytoscapePopper.getPopperRef; 82 | } 83 | } 84 | } -------------------------------------------------------------------------------- /cytoscape-popper.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(); 4 | else if(typeof define === 'function' && define.amd) 5 | define([], factory); 6 | else if(typeof exports === 'object') 7 | exports["cytoscapePopper"] = factory(); 8 | else 9 | root["cytoscapePopper"] = factory(); 10 | })(this, function() { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | /******/ 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | /******/ 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) { 20 | /******/ return installedModules[moduleId].exports; 21 | /******/ } 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ i: moduleId, 25 | /******/ l: false, 26 | /******/ exports: {} 27 | /******/ }; 28 | /******/ 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | /******/ 32 | /******/ // Flag the module as loaded 33 | /******/ module.l = true; 34 | /******/ 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | /******/ 39 | /******/ 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | /******/ 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | /******/ 46 | /******/ // identity function for calling harmony imports with the correct context 47 | /******/ __webpack_require__.i = function(value) { return value; }; 48 | /******/ 49 | /******/ // define getter function for harmony exports 50 | /******/ __webpack_require__.d = function(exports, name, getter) { 51 | /******/ if(!__webpack_require__.o(exports, name)) { 52 | /******/ Object.defineProperty(exports, name, { 53 | /******/ configurable: false, 54 | /******/ enumerable: true, 55 | /******/ get: getter 56 | /******/ }); 57 | /******/ } 58 | /******/ }; 59 | /******/ 60 | /******/ // getDefaultExport function for compatibility with non-harmony modules 61 | /******/ __webpack_require__.n = function(module) { 62 | /******/ var getter = module && module.__esModule ? 63 | /******/ function getDefault() { return module['default']; } : 64 | /******/ function getModuleExports() { return module; }; 65 | /******/ __webpack_require__.d(getter, 'a', getter); 66 | /******/ return getter; 67 | /******/ }; 68 | /******/ 69 | /******/ // Object.prototype.hasOwnProperty.call 70 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 71 | /******/ 72 | /******/ // __webpack_public_path__ 73 | /******/ __webpack_require__.p = ""; 74 | /******/ 75 | /******/ // Load entry module and return exports 76 | /******/ return __webpack_require__(__webpack_require__.s = 7); 77 | /******/ }) 78 | /************************************************************************/ 79 | /******/ ([ 80 | /* 0 */ 81 | /***/ (function(module, exports, __webpack_require__) { 82 | 83 | "use strict"; 84 | 85 | 86 | var _require = __webpack_require__(5), 87 | getBoundingBox = _require.getBoundingBox; 88 | 89 | // Create a popper virtual element (aka popper v1 reference object) 90 | // https://popper.js.org/docs/v2/virtual-elements/ 91 | 92 | 93 | function getRef(target, opts) { 94 | 95 | //Define popper reference object and cy reference object 96 | var refObject = { 97 | getBoundingClientRect: function getBoundingClientRect() { 98 | return getBoundingBox(target, opts); 99 | } 100 | }; 101 | 102 | return refObject; 103 | } 104 | 105 | module.exports = { getRef: getRef }; 106 | 107 | /***/ }), 108 | /* 1 */ 109 | /***/ (function(module, exports, __webpack_require__) { 110 | 111 | "use strict"; 112 | 113 | 114 | // Simple, internal Object.assign() polyfill for options objects etc. 115 | 116 | module.exports = Object.assign != null ? Object.assign.bind(Object) : function (tgt) { 117 | for (var _len = arguments.length, srcs = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { 118 | srcs[_key - 1] = arguments[_key]; 119 | } 120 | 121 | srcs.forEach(function (src) { 122 | if (src !== null && src !== undefined) { 123 | Object.keys(src).forEach(function (k) { 124 | return tgt[k] = src[k]; 125 | }); 126 | } 127 | }); 128 | 129 | return tgt; 130 | }; 131 | 132 | /***/ }), 133 | /* 2 */ 134 | /***/ (function(module, exports, __webpack_require__) { 135 | 136 | "use strict"; 137 | 138 | 139 | var _require = __webpack_require__(0), 140 | getRef = _require.getRef; 141 | 142 | var _require2 = __webpack_require__(6), 143 | getContent = _require2.getContent; 144 | 145 | // Create a new popper object for a core or element target 146 | 147 | 148 | function getPopper(target, opts) { 149 | var refObject = getRef(target, opts); 150 | var content = getContent(target, opts.content); 151 | 152 | return target.popperFactory(refObject, content, opts.popper); 153 | } 154 | 155 | module.exports = { getPopper: getPopper }; 156 | 157 | /***/ }), 158 | /* 3 */ 159 | /***/ (function(module, exports, __webpack_require__) { 160 | 161 | "use strict"; 162 | 163 | 164 | var assign = __webpack_require__(1); 165 | 166 | var _require = __webpack_require__(2), 167 | getPopper = _require.getPopper; 168 | 169 | var _require2 = __webpack_require__(0), 170 | getRef = _require2.getRef; 171 | 172 | function popper(opts) { 173 | checkForWarning(this); 174 | 175 | return getPopper(this[0], createOptionsObject(this[0], opts)); 176 | } 177 | 178 | function popperRef(opts) { 179 | checkForWarning(this); 180 | 181 | return getRef(this[0], createOptionsObject(this[0], opts)); 182 | } 183 | 184 | function createOptionsObject(target, opts) { 185 | var renderedDimensions = function renderedDimensions(el) { 186 | return el.isNode() ? { w: el.renderedWidth(), h: el.renderedHeight() } : { w: 3, h: 3 }; 187 | }; 188 | var renderedPosition = function renderedPosition(el) { 189 | return el.isNode() ? getRenderedCenter(el, renderedDimensions) : getRenderedMidpoint(el); 190 | }; 191 | var popper = {}; 192 | var cy = target.cy(); 193 | 194 | var defaults = { renderedDimensions: renderedDimensions, renderedPosition: renderedPosition, popper: popper, cy: cy }; 195 | 196 | return assign({}, defaults, opts); 197 | } 198 | 199 | //Get the rendered center 200 | function getRenderedCenter(target, renderedDimensions) { 201 | var pos = target.renderedPosition(); 202 | var dimensions = renderedDimensions(target); 203 | var offsetX = dimensions.w / 2; 204 | var offsetY = dimensions.h / 2; 205 | 206 | return { 207 | x: pos.x - offsetX, 208 | y: pos.y - offsetY 209 | }; 210 | } 211 | 212 | //Get the rendered position of the midpoint 213 | function getRenderedMidpoint(target) { 214 | var p = target.midpoint(); 215 | var pan = target.cy().pan(); 216 | var zoom = target.cy().zoom(); 217 | 218 | return { 219 | x: p.x * zoom + pan.x, 220 | y: p.y * zoom + pan.y 221 | }; 222 | } 223 | 224 | //Warn user about misuse of the plugin 225 | function checkForWarning(elements) { 226 | /* eslint-disable no-console */ 227 | 228 | //Popper.js Should only be used on 1 element 229 | if (elements.length > 1) { 230 | console.warn("Popper.js Extension should only be used on one element."); 231 | console.warn("Ignoring all subsequent elements"); 232 | } 233 | 234 | /* eslint-enable */ 235 | } 236 | 237 | module.exports = { popper: popper, popperRef: popperRef }; 238 | 239 | /***/ }), 240 | /* 4 */ 241 | /***/ (function(module, exports, __webpack_require__) { 242 | 243 | "use strict"; 244 | 245 | 246 | var assign = __webpack_require__(1); 247 | 248 | var _require = __webpack_require__(2), 249 | getPopper = _require.getPopper; 250 | 251 | var _require2 = __webpack_require__(0), 252 | getRef = _require2.getRef; 253 | 254 | function popper(opts) { 255 | return getPopper(this, createOptionsObject(this, opts)); 256 | } 257 | 258 | function popperRef(opts) { 259 | return getRef(this, createOptionsObject(this, opts)); 260 | } 261 | 262 | //Create a options object with required default values 263 | function createOptionsObject(target, opts) { 264 | var defaults = { 265 | boundingBox: { 266 | top: 0, 267 | left: 0, 268 | right: 0, 269 | bottom: 0, 270 | w: 3, 271 | h: 3 272 | }, 273 | renderedDimensions: function renderedDimensions() { 274 | return { w: 3, h: 3 }; 275 | }, 276 | renderedPosition: function renderedPosition() { 277 | return { x: 0, y: 0 }; 278 | }, 279 | popper: {}, 280 | cy: target 281 | }; 282 | 283 | return assign({}, defaults, opts); 284 | } 285 | 286 | module.exports = { popper: popper, popperRef: popperRef }; 287 | 288 | /***/ }), 289 | /* 5 */ 290 | /***/ (function(module, exports, __webpack_require__) { 291 | 292 | "use strict"; 293 | 294 | 295 | function getBoundingBox(target, opts) { 296 | var renderedPosition = opts.renderedPosition, 297 | cy = opts.cy, 298 | renderedDimensions = opts.renderedDimensions; 299 | 300 | var offset = cy.container().getBoundingClientRect(); 301 | var dims = renderedDimensions(target); 302 | var pos = renderedPosition(target); 303 | 304 | return { 305 | top: pos.y + offset.top, 306 | left: pos.x + offset.left, 307 | right: pos.x + dims.w + offset.left, 308 | bottom: pos.y + dims.h + offset.top, 309 | width: dims.w, 310 | height: dims.h 311 | }; 312 | } 313 | 314 | module.exports = { getBoundingBox: getBoundingBox }; 315 | 316 | /***/ }), 317 | /* 6 */ 318 | /***/ (function(module, exports, __webpack_require__) { 319 | 320 | "use strict"; 321 | 322 | 323 | function getContent(target, content) { 324 | var contentObject = null; 325 | 326 | if (typeof content === "function") { 327 | //Execute function if user opted for a dyanamic target 328 | contentObject = content(target); 329 | } else if (content instanceof HTMLElement) { 330 | //Target option is an HTML element 331 | return content; 332 | } else { 333 | throw new Error("Can not create popper from 'target' with unknown type"); 334 | } 335 | 336 | // Check validity of parsed target 337 | if (contentObject === null) { 338 | throw new Error("No 'target' specified to create popper"); 339 | } else { 340 | return contentObject; 341 | } 342 | } 343 | 344 | module.exports = { getContent: getContent }; 345 | 346 | /***/ }), 347 | /* 7 */ 348 | /***/ (function(module, exports, __webpack_require__) { 349 | 350 | "use strict"; 351 | 352 | 353 | var coreImpl = __webpack_require__(4); 354 | var collectionImpl = __webpack_require__(3); 355 | 356 | // registers the extension on a cytoscape lib ref 357 | var registerFactory = function registerFactory(popperFactory) { 358 | if (typeof popperFactory !== "function") { 359 | throw new Error('Provide \'popperFactory\' before registering the module'); 360 | } 361 | 362 | return function register(cytoscape) { 363 | if (!cytoscape) { 364 | return; 365 | } // can't register if cytoscape unspecified 366 | 367 | // register with cytoscape.js 368 | cytoscape('core', 'popperFactory', popperFactory); // Cytoscape Core factory 369 | cytoscape('collection', 'popperFactory', popperFactory); //Cytoscape Collections factory 370 | cytoscape('core', 'popper', coreImpl.popper); //Cytoscape Core 371 | cytoscape('collection', 'popper', collectionImpl.popper); //Cytoscape Collections 372 | cytoscape('core', 'popperRef', coreImpl.popperRef); //Cytoscape Core for References 373 | cytoscape('collection', 'popperRef', collectionImpl.popperRef); //Cytoscape Collections for References 374 | }; 375 | }; 376 | 377 | module.exports = registerFactory; 378 | 379 | /***/ }) 380 | /******/ ]); 381 | }); -------------------------------------------------------------------------------- /demo-popper.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | cytoscape-popper + Popper.js@2 demo 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 46 | 47 | 130 | 131 | 132 | 133 |

cytoscape-popper + Popper.js@2 demo

134 |
135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /demo-tippy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | cytoscape-popper + TippyJS demo 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 45 | 46 | 139 | 140 | 141 | 142 |

cytoscape-popper + TippyJS demo

143 |
144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | cytoscape-popper + FloatingUI demo 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 51 | 52 | 157 | 158 | 159 | 160 |

cytoscape-popper + FloatingUI demo

161 |
162 | 163 | 164 | 165 | -------------------------------------------------------------------------------- /gh-pages/cytoscape-popper.js: -------------------------------------------------------------------------------- 1 | ../cytoscape-popper.js -------------------------------------------------------------------------------- /gh-pages/demo-popper.html: -------------------------------------------------------------------------------- 1 | ../demo-popper.html -------------------------------------------------------------------------------- /gh-pages/demo-tippy.html: -------------------------------------------------------------------------------- 1 | ../demo-tippy.html -------------------------------------------------------------------------------- /gh-pages/demo.html: -------------------------------------------------------------------------------- 1 | ../demo.html -------------------------------------------------------------------------------- /gh-pages/index.html: -------------------------------------------------------------------------------- 1 | ../demo.html -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cytoscape-popper", 3 | "version": "4.0.1", 4 | "description": "A Cytoscape.js extension for Popper.js", 5 | "main": "cytoscape-popper.js", 6 | "types": "cytoscape-popper.d.ts", 7 | "author": "Cytoscape", 8 | "scripts": { 9 | "postpublish": "run-s gh-pages", 10 | "gh-pages": "gh-pages -d gh-pages", 11 | "copyright": "update license", 12 | "lint": "eslint src", 13 | "build": "cross-env NODE_ENV=production webpack", 14 | "build:min": "cross-env NODE_ENV=production MIN=true webpack", 15 | "build:release": "run-s build copyright", 16 | "watch": "webpack --progress --watch", 17 | "dev": "webpack-dev-server --open", 18 | "test": "mocha" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "https://github.com/cytoscape/cytoscape.js-popper.git" 23 | }, 24 | "keywords": [ 25 | "cytoscape", 26 | "cytoscape-extension" 27 | ], 28 | "license": "MIT", 29 | "bugs": { 30 | "url": "https://github.com/cytoscape/cytoscape.js-popper/issues" 31 | }, 32 | "homepage": "https://github.com/cytoscape/cytoscape.js-popper", 33 | "devDependencies": { 34 | "@types/cytoscape": "^3.2.0", 35 | "babel-core": "^6.24.1", 36 | "babel-loader": "^7.0.0", 37 | "babel-preset-env": "^1.5.1", 38 | "camelcase": "^4.1.0", 39 | "chai": "4.0.2", 40 | "cpy-cli": "^1.0.1", 41 | "cross-env": "^5.0.0", 42 | "eslint": "^4.18.2", 43 | "gh-pages": "^1.0.0", 44 | "mocha": "3.4.2", 45 | "npm-run-all": "^4.1.2", 46 | "rimraf": "^2.6.2", 47 | "typescript": "^3.8.0", 48 | "update": "^0.7.4", 49 | "updater-license": "^1.0.0", 50 | "webpack": "^2.6.1", 51 | "webpack-dev-server": "^2.4.5" 52 | }, 53 | "peerDependencies": { 54 | "cytoscape": "^3.2.0" 55 | }, 56 | "dependencies": {} 57 | } 58 | -------------------------------------------------------------------------------- /src/assign.js: -------------------------------------------------------------------------------- 1 | // Simple, internal Object.assign() polyfill for options objects etc. 2 | 3 | module.exports = Object.assign != null ? Object.assign.bind(Object) : function (tgt, ...srcs) { 4 | srcs.forEach(src => { 5 | if (src !== null && src !== undefined) { 6 | Object.keys(src).forEach(k => tgt[k] = src[k]); 7 | } 8 | }); 9 | 10 | return tgt; 11 | }; 12 | -------------------------------------------------------------------------------- /src/bb.js: -------------------------------------------------------------------------------- 1 | function getBoundingBox(target, opts) { 2 | let { renderedPosition, cy, renderedDimensions } = opts; 3 | let offset = cy.container().getBoundingClientRect(); 4 | let dims = renderedDimensions(target); 5 | let pos = renderedPosition(target); 6 | 7 | return { 8 | top: pos.y + offset.top, 9 | left: pos.x + offset.left, 10 | right: pos.x + dims.w + offset.left, 11 | bottom: pos.y + dims.h + offset.top, 12 | width: dims.w, 13 | height: dims.h 14 | }; 15 | } 16 | 17 | module.exports = { getBoundingBox }; 18 | -------------------------------------------------------------------------------- /src/collection.js: -------------------------------------------------------------------------------- 1 | const assign = require('./assign'); 2 | const { getPopper } = require('./popper'); 3 | const { getRef } = require('./ref'); 4 | 5 | function popper (opts) { 6 | checkForWarning(this); 7 | 8 | return getPopper(this[0], createOptionsObject(this[0], opts)); 9 | } 10 | 11 | function popperRef(opts) { 12 | checkForWarning(this); 13 | 14 | return getRef(this[0], createOptionsObject(this[0], opts)); 15 | } 16 | 17 | function createOptionsObject(target, opts) { 18 | let renderedDimensions = el => el.isNode() ? ({ w: el.renderedWidth(), h: el.renderedHeight() }) : ({ w: 3, h: 3 }); 19 | let renderedPosition = el => el.isNode() ? getRenderedCenter(el, renderedDimensions) : getRenderedMidpoint(el); 20 | let popper = {}; 21 | let cy = target.cy(); 22 | 23 | let defaults = { renderedDimensions, renderedPosition, popper, cy }; 24 | 25 | return assign( {}, defaults, opts ); 26 | } 27 | 28 | //Get the rendered center 29 | function getRenderedCenter(target, renderedDimensions){ 30 | let pos = target.renderedPosition(); 31 | let dimensions = renderedDimensions(target); 32 | let offsetX = dimensions.w / 2; 33 | let offsetY = dimensions.h / 2; 34 | 35 | return { 36 | x : (pos.x - offsetX), 37 | y : (pos.y - offsetY) 38 | }; 39 | } 40 | 41 | //Get the rendered position of the midpoint 42 | function getRenderedMidpoint(target){ 43 | let p = target.midpoint(); 44 | let pan = target.cy().pan(); 45 | let zoom = target.cy().zoom(); 46 | 47 | return { 48 | x: p.x * zoom + pan.x, 49 | y: p.y * zoom + pan.y 50 | }; 51 | } 52 | 53 | //Warn user about misuse of the plugin 54 | function checkForWarning(elements) { 55 | /* eslint-disable no-console */ 56 | 57 | //Popper.js Should only be used on 1 element 58 | if (elements.length > 1) { 59 | console.warn("Popper.js Extension should only be used on one element."); 60 | console.warn("Ignoring all subsequent elements"); 61 | } 62 | 63 | /* eslint-enable */ 64 | } 65 | 66 | module.exports = { popper, popperRef }; 67 | -------------------------------------------------------------------------------- /src/content.js: -------------------------------------------------------------------------------- 1 | function getContent(target, content) { 2 | let contentObject = null; 3 | 4 | if (typeof content === "function") { 5 | //Execute function if user opted for a dyanamic target 6 | contentObject = content(target); 7 | } else if (content instanceof HTMLElement) { 8 | //Target option is an HTML element 9 | return content; 10 | } else { 11 | throw new Error(`Can not create popper from 'target' with unknown type`); 12 | } 13 | 14 | // Check validity of parsed target 15 | if (contentObject === null) { 16 | throw new Error(`No 'target' specified to create popper`); 17 | } else { 18 | return contentObject; 19 | } 20 | } 21 | 22 | module.exports = { getContent }; 23 | -------------------------------------------------------------------------------- /src/core.js: -------------------------------------------------------------------------------- 1 | const assign = require('./assign'); 2 | const { getPopper } = require('./popper'); 3 | const { getRef } = require('./ref'); 4 | 5 | function popper(opts) { 6 | return getPopper(this, createOptionsObject(this, opts)); 7 | } 8 | 9 | 10 | function popperRef(opts) { 11 | return getRef(this, createOptionsObject(this, opts)); 12 | } 13 | 14 | //Create a options object with required default values 15 | function createOptionsObject(target, opts) { 16 | let defaults = { 17 | boundingBox : { 18 | top: 0, 19 | left: 0, 20 | right: 0, 21 | bottom: 0, 22 | w: 3, 23 | h: 3, 24 | }, 25 | renderedDimensions : () => ({w: 3, h: 3}), 26 | renderedPosition : () => ({x : 0, y : 0}), 27 | popper : {}, 28 | cy : target 29 | }; 30 | 31 | return assign( {}, defaults, opts ); 32 | } 33 | 34 | module.exports = { popper, popperRef }; 35 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | const coreImpl = require('./core'); 2 | const collectionImpl = require('./collection'); 3 | 4 | // registers the extension on a cytoscape lib ref 5 | let registerFactory = function(popperFactory) { 6 | if (typeof popperFactory !== "function") { 7 | throw new Error(`Provide 'popperFactory' before registering the module`); 8 | } 9 | 10 | return function register(cytoscape) { 11 | if (!cytoscape) { return; } // can't register if cytoscape unspecified 12 | 13 | // register with cytoscape.js 14 | cytoscape('core', 'popperFactory', popperFactory); // Cytoscape Core factory 15 | cytoscape('collection', 'popperFactory', popperFactory); //Cytoscape Collections factory 16 | cytoscape('core', 'popper', coreImpl.popper); //Cytoscape Core 17 | cytoscape('collection', 'popper', collectionImpl.popper); //Cytoscape Collections 18 | cytoscape('core', 'popperRef', coreImpl.popperRef); //Cytoscape Core for References 19 | cytoscape('collection', 'popperRef', collectionImpl.popperRef); //Cytoscape Collections for References 20 | }; 21 | } ; 22 | 23 | module.exports = registerFactory; 24 | -------------------------------------------------------------------------------- /src/popper.js: -------------------------------------------------------------------------------- 1 | const { getRef } = require('./ref'); 2 | const { getContent } = require('./content'); 3 | 4 | // Create a new popper object for a core or element target 5 | function getPopper(target, opts) { 6 | let refObject = getRef(target, opts); 7 | let content = getContent(target, opts.content); 8 | 9 | return target.popperFactory(refObject, content, opts.popper); 10 | } 11 | 12 | module.exports = { getPopper }; 13 | -------------------------------------------------------------------------------- /src/ref.js: -------------------------------------------------------------------------------- 1 | const { getBoundingBox } = require('./bb'); 2 | 3 | // Create a popper virtual element (aka popper v1 reference object) 4 | // https://popper.js.org/docs/v2/virtual-elements/ 5 | function getRef(target, opts) { 6 | 7 | //Define popper reference object and cy reference object 8 | let refObject = { 9 | getBoundingClientRect: function() { 10 | return getBoundingBox(target, opts); 11 | } 12 | }; 13 | 14 | return refObject; 15 | } 16 | 17 | module.exports = { getRef }; 18 | -------------------------------------------------------------------------------- /test/example.js: -------------------------------------------------------------------------------- 1 | const chai = require('chai'); 2 | 3 | describe('This', function(){ 4 | it('does that', function(){ 5 | expect( true ).to.be.true; 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "lib": [ 5 | "es6", 6 | "dom" 7 | ], 8 | "noImplicitAny": true, 9 | "noImplicitThis": true, 10 | "strictNullChecks": true, 11 | "strictFunctionTypes": true, 12 | "baseUrl": "../", 13 | "typeRoots": [ 14 | "../" 15 | ], 16 | "types": [], 17 | "noEmit": true, 18 | "forceConsistentCasingInFileNames": true 19 | }, 20 | "files": [ 21 | "cytoscape-popper.d.ts" 22 | ] 23 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const pkg = require('./package.json'); 3 | const camelcase = require('camelcase'); 4 | const process = require('process'); 5 | const webpack = require('webpack'); 6 | const env = process.env; 7 | const NODE_ENV = env.NODE_ENV; 8 | const MIN = env.MIN; 9 | const PROD = NODE_ENV === 'production'; 10 | 11 | let config = { 12 | devtool: PROD ? false : 'inline-source-map', 13 | entry: './src/index.js', 14 | output: { 15 | path: path.join( __dirname ), 16 | filename: pkg.name + '.js', 17 | library: camelcase( pkg.name ), 18 | libraryTarget: 'umd' 19 | }, 20 | module: { 21 | rules: [ 22 | { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' } 23 | ] 24 | }, 25 | plugins: MIN ? [ 26 | new webpack.optimize.UglifyJsPlugin({ 27 | compress: { 28 | warnings: false, 29 | drop_console: false, 30 | } 31 | }) 32 | ] : [] 33 | }; 34 | 35 | module.exports = config; 36 | --------------------------------------------------------------------------------