{"_id":"@eliasnystrom/d3-context-menu","_rev":"1-f8e77d477a4877b10bb751187cafa492","name":"@eliasnystrom/d3-context-menu","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.3":{"name":"@eliasnystrom/d3-context-menu","version":"1.0.3","description":"A plugin for d3.js that allows you to easily use context menus in your visualizations.","main":"js/d3-context-menu.js","directories":{"example":"examples"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","dist":"mkdirp dist && uglifyjs js/d3-context-menu.js -o dist/d3-context-menu.min.js -c -m --source-map \"includeSources\" && minify css/d3-context-menu.css > dist/d3-context-menu.min.css"},"repository":{"type":"git","url":"git+https://github.com/eliasnystrom/d3-context-menu.git"},"keywords":["d3js","context-menu","contextmenu"],"author":{"name":"Patrick Gillespie"},"license":"MIT","bugs":{"url":"https://github.com/patorjk/d3-context-menu/issues"},"homepage":"https://github.com/patorjk/d3-context-menu","devDependencies":{"minify":"^3.0.2","mkdirp":"^0.5.1","uglify-js":"^3.3.8"},"gitHead":"18cda7b58def0cc0b5cd4175765d9ea14e9f21db","_id":"@eliasnystrom/d3-context-menu@1.0.3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"eliasnystrom","email":"elias.nystrom@gmail.com"},"dist":{"integrity":"sha512-DewQ4wgcwVPvUYW3sOKCXk4jmAghzRWg2ZMsPLO9dewPxZfBbz6N1wKcvUy9gFGMuV+DkDOvI2heUD9d+EA07g==","shasum":"326526459ade5e541b1dbe077f37247b49401c43","tarball":"https://registry.npmjs.org/@eliasnystrom/d3-context-menu/-/d3-context-menu-1.0.3.tgz","fileCount":7,"unpackedSize":23992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrjhxCRA9TVsSAnZWagAAA6YP/1U+6zewdWb1vhD8m4rf\nWvDyOYstQ42guq98EpHmm8zFKmaCbh4tKTcFYMlAWjy9g4Ff7w4aMbXTamgM\nWMzttjFOlwtlCyxuP9PfYdirKXQ66Rb5EoCRV9ugI9jTx5HmRiYsPoKnYVm0\nsZSW0xmzWbtt04gzTg4QPZOo7ZsNEXpbiQG7a9Mttxhx78k7f3X96DgcKV6B\n0Eb3F8yAxGgme5RrkRpYcir8rq3u4T3cA853KdOzSmr51TmGnzc81m+KcswO\nmHug36IK3hoSGmTjoVIq8e5RhC/6ee/oW70Gz3Z8VJ1gQ2I9MZTLhZtrBpWX\nCTSiqw1M4VM7ZYK/+JNcWgJW+V//I50IOu3ch/9/POL3VShvJd/scAVU7hCq\nR+FdRMGbi2/XrKyXHgkfKjIB6wFJXbH05jZ1fA7ggqG8GUR7XF71JW5giao6\nOar9RBUBodrMAVyeAqhObdIhG1B6dZg3l4s/29l3Jdb6WaMoILTYcG/Q6bKg\niCiMEr1hiXlLpQw6xsE8kU9Hmc92muUsBCZ+MGgFDsDSEXWv++VhO5qVa7Gn\n33cX1xipyqijVmPVzc533+Di79tHbGUTf2c1CelbvOa2HJWU2QVFMvWKqGyL\nG98z/gXOa1U9S8FGjEWbkOvri8dYFOMxJFpQylgihjiYwb5ivTkzG1VGgQWY\ngn9+\r\n=4oDb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGywk+DhTA77waOqyHsnLyUqJV6Tu+TACl66nj34+sG8AiAxpEPgmZZT07Dyi5Ngg0m9w+dO/ug8dWU5T2OcNo+w6g=="}]},"maintainers":[{"name":"eliasnystrom","email":"elias.nystrom@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/d3-context-menu_1.0.3_1554921584777_0.9933497309298116"},"_hasShrinkwrap":false}},"time":{"created":"2019-04-10T18:39:44.589Z","1.0.3":"2019-04-10T18:39:44.971Z","modified":"2022-04-05T07:11:39.470Z"},"maintainers":[{"name":"eliasnystrom","email":"elias.nystrom@gmail.com"}],"description":"A plugin for d3.js that allows you to easily use context menus in your visualizations.","homepage":"https://github.com/patorjk/d3-context-menu","keywords":["d3js","context-menu","contextmenu"],"repository":{"type":"git","url":"git+https://github.com/eliasnystrom/d3-context-menu.git"},"author":{"name":"Patrick Gillespie"},"bugs":{"url":"https://github.com/patorjk/d3-context-menu/issues"},"license":"MIT","readme":"# d3-context-menu\r\n\r\nThis is a plugin for d3.js that allows you to easy use context-menus in your visualizations. It's 100% d3 based and done in the \"d3 way\", so you don't need to worry about including additional frameworks.\r\n\r\nIt's written to be very light weight and customizable. You can see it in action here:\r\n\r\nhttp://plnkr.co/edit/hAx36JQhb0RsvVn7TomS?p=info\r\n\r\n### Install with Bower\r\n\r\n```\r\nbower install d3-context-menu\r\n```\r\n\r\n### Basic usage:\r\n\r\n```\r\n// Define your menu\r\nvar menu = [\r\n\t{\r\n\t\ttitle: 'Item #1',\r\n\t\taction: function(d, i) {\r\n\t\t\tconsole.log('Item #1 clicked!');\r\n\t\t\tconsole.log('The data for this circle is: ' + d);\r\n\t\t},\r\n\t\tdisabled: false // optional, defaults to false\r\n\t},\r\n\t{\r\n\t\ttitle: 'Item #2',\r\n\t\taction: function(d, i) {\r\n\t\t\tconsole.log('You have clicked the second item!');\r\n\t\t\tconsole.log('The data for this circle is: ' + d);\r\n\t\t}\r\n\t}\r\n]\r\n\r\nvar data = [1, 2, 3];\r\n\r\nvar g = d3.select('body').append('svg')\r\n\t.attr('width', 200)\r\n\t.attr('height', 400)\r\n\t.append('g');\r\n\r\ng.selectAll('circles')\r\n\t.data(data)\r\n\t.enter()\r\n\t.append('circle')\r\n\t.attr('r', 30)\r\n\t.attr('fill', 'steelblue')\r\n\t.attr('cx', function(d) {\r\n\t\treturn 100;\r\n\t})\r\n\t.attr('cy', function(d) {\r\n\t\treturn d * 100;\r\n\t})\r\n\t.on('contextmenu', d3.contextMenu(menu)); // attach menu to element\r\n});\r\n```\r\n\r\n### Advanced usage:\r\n\r\n#### Headers and Dividers\r\n\r\nMenus can have Headers and Dividers. To specify a header simply don't define an \"action\" property. To specify a divider, simply add a \"divider: true\" property to the menu item, and it'll be considered a divider. Example menu definition:\r\n\r\n```\r\nvar menu = [\r\n\t{\r\n\t\ttitle: 'Header',\r\n\t},\r\n\t{\r\n\t\ttitle: 'Normal item',\r\n\t\taction: function() {}\r\n\t},\r\n\t{\r\n\t\tdivider: true\r\n\t},\r\n\t{\r\n\t\ttitle: 'Last item',\r\n\t\taction: function() {}\r\n\t}\r\n];\r\n```\r\n\r\n#### Nested Menu\r\n\r\nMenus can have Nested Menu. To specify a nested menu, simply add \"children\" property. Children has item of array.\r\n\r\n```\r\nvar menu = [\r\n\t{\r\n\t\ttitle: 'Parent',\r\n\t\tchildren: [\r\n\t\t\t{\r\n\t\t\t\ttitle: 'Child',\r\n\t\t\t\tchildren: [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t// header\r\n\t\t\t\t\t\ttitle: 'Grand-Child1'\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t// normal\r\n\t\t\t\t\t\ttitle: 'Grand-Child2',\r\n\t\t\t\t\t\taction: function() {}\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t// divider\r\n\t\t\t\t\t\tdivider: true\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t// disable\r\n\t\t\t\t\t\ttitle: 'Grand-Child3',\r\n\t\t\t\t\t\taction: function() {}\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t}\r\n\t\t]\r\n\t},\r\n];\r\n```\r\n\r\nSee the index.htm file in the example folder to see this in action.\r\n\r\n#### Pre-show callback\r\n\r\nYou can pass in a callback that will be executed before the context menu appears. This can be useful if you need something to close tooltips or perform some other task before the menu appears:\r\n\r\n```\r\n\t...\r\n\t.on('contextmenu', d3.contextMenu(menu, function() {\r\n\t\tconsole.log('Quick! Before the menu appears!');\r\n\t})); // attach menu to element\r\n\r\n```\r\n\r\n#### Post-show callback\r\n\r\nYou can pass in a callback that will be executed after the context menu appears using the onClose option:\r\n\r\n```\r\n\t...\r\n\t.on('contextmenu', d3.contextMenu(menu, {\r\n\t\tonOpen: function() {\r\n\t\t\tconsole.log('Quick! Before the menu appears!');\r\n\t\t},\r\n\t\tonClose: function() {\r\n\t\t\tconsole.log('Menu has been closed.');\r\n\t\t}\r\n\t})); // attach menu to element\r\n\r\n```\r\n\r\n#### Context-sensitive menu items\r\n\r\nYou can use information from your context in menu names, simply specify a function for title which returns a string:\r\n\r\n```\r\nvar menu = [\r\n\t{\r\n\t\ttitle: function(d) {\r\n\t\t\treturn 'Delete circle '+d.circleName;\r\n\t\t},\r\n\t\taction: function(d, i) {\r\n\t\t\t// delete it\r\n\t\t}\r\n\t},\r\n\t{\r\n\t\ttitle: function(d) {\r\n\t\t\treturn 'Item 2';\r\n\t\t},\r\n\t\taction: function(d, i) {\r\n\t\t\t// do nothing interesting\r\n\t\t}\r\n\t}\r\n];\r\n\r\n// Menu shown is:\r\n\r\n[Delete Circle MyCircle]\r\n[Item 2]\r\n```\r\n\r\n#### Dynamic menu list\r\n\r\nYou can also have different lists of menu items for different nodes if `menu` is a function:\r\n\r\n```\r\nvar menu = function(data) {\r\n\tif (data.x > 100) {\r\n\t\treturn [{\r\n\t\t\ttitle: 'Item #1',\r\n\t\t\taction: function(d, i) {\r\n\t\t\t\tconsole.log('Item #1 clicked!');\r\n\t\t\t\tconsole.log('The data for this circle is: ' + d);\r\n\t\t\t}\r\n\t\t}];\r\n\t} else {\r\n\t\treturn [{\r\n\t\t\ttitle: 'Item #1',\r\n\t\t\taction: function(d, i) {\r\n\t\t\t\tconsole.log('Item #1 clicked!');\r\n\t\t\t\tconsole.log('The data for this circle is: ' + d);\r\n\t\t\t}\r\n\t\t}, {\r\n\t\t\ttitle: 'Item #2',\r\n\t\t\taction: function(d, i) {\r\n\t\t\t\tconsole.log('Item #2 clicked!');\r\n\t\t\t\tconsole.log('The data for this circle is: ' + d);\r\n\t\t\t}\r\n\t\t}];\r\n\t}\r\n};\r\n\r\n// Menu shown for nodes with x < 100 contains 1 item, while other nodes have 2 menu items\r\n\r\n```\r\n\r\n#### Deleting Nodes Example\r\n\r\nThe following example shows how to add a right click menu to a tree diagram:\r\n\r\nhttp://plnkr.co/edit/bDBe0xGX1mCLzqYGOqOS?p=info\r\n\r\n#### Explicitly set menu position\r\n\r\nDefault position can be overwritten by providing a `position` option (either object or function returning an object):\r\n\r\n```\r\n\t...\r\n\t.on('contextmenu', d3.contextMenu(menu, {\r\n\t\tonOpen: function() {\r\n\t\t\t...\r\n\t\t},\r\n\t\tonClose: function() {\r\n\t\t\t...\r\n\t\t},\r\n\t\tposition: {\r\n\t\t\ttop: 100,\r\n\t\t\tleft: 200\r\n\t\t}\r\n\t})); // attach menu to element\r\n\r\n```\r\n\r\nor\r\n\r\n```\r\n\t...\r\n\t.on('contextmenu', d3.contextMenu(menu, {\r\n\t\tonOpen: function() {\r\n\t\t\t...\r\n\t\t},\r\n\t\tonClose: function() {\r\n\t\t\t...\r\n\t\t},\r\n\t\tposition: function(d, i) {\r\n\t\t\tvar elm = this;\r\n\t\t\tvar bounds = elm.getBoundingClientRect();\r\n\r\n\t\t\t// eg. align bottom-left\r\n\t\t\treturn {\r\n\t\t\t\ttop: bounds.top + bounds.height,\r\n\t\t\t\tleft: bounds.left\r\n\t\t\t}\r\n\t\t}\r\n\t})); // attach menu to element\r\n\r\n```\r\n\r\n#### Set your own CSS class as theme (make sure to style it)\r\n\r\n```\r\nd3.contextMenu(menu, {\r\n\t...\r\n\ttheme: 'my-awesome-theme'\r\n});\r\n```\r\n\r\nor\r\n\r\n```\r\nd3.contextMenu(menu, {\r\n\t...\r\n\ttheme: function () {\r\n\t\tif (foo) {\r\n\t\t\treturn 'my-foo-theme';\r\n\t\t}\r\n\t\telse {\r\n\t\t\treturn 'my-awesome-theme';\r\n\t\t}\r\n\t}\r\n});\r\n```\r\n\r\n#### Close the context menu programatically (can be used as cleanup, as well)\r\n\r\n```\r\nd3.contextMenu('close');\r\n```\r\n\r\nThe following example shows how to add a right click menu to a tree diagram:\r\n\r\nhttp://plnkr.co/edit/bDBe0xGX1mCLzqYGOqOS?p=info\r\n\r\n### What's new in version 1.0.1\r\n* Default theme styles extracted to their own CSS class (`d3-context-menu-theme`)\r\n* Ability to specify own theme css class via the `theme` configuration option (as string or function returning string)\r\n* onOpen/onClose callbacks now have consistent signature (they receive `data` and `index`, and `this` argument refers to the DOM element the context menu is related to)\r\n* all other functions (eg. `position`, `menu`) have the same signature and `this` object as `onClose`/`onOpen`\r\n* Context menu now closes on `mousedown` outside of the menu, instead of `click` outside (to mimic behaviour of the native context menu)\r\n* `disabled` and `divider` can now be functions as well and have the same signature and `this` object as explained above\r\n* Close the context menu programatically using `d3.contextMenu('close');`\r\n\r\n### What's new in version 0.2.1\r\n* Ability to set menu position\r\n* Minified css and js versions\r\n\r\n### What's new in version 0.1.3\r\n* Fixed issue where context menu element is never removed from DOM\r\n* Fixed issue where `<body>` click event is never removed\r\n* Fixed issue where the incorrect `onClose` callback was called when menu was closed as a result of clicking outside\r\n\r\n### What's new in version 0.1.2\r\n\r\n* If contextmenu is clicked twice it will close rather than open the browser's context menu.\r\n\r\n### What's new in version 0.1.1\r\n\r\n* Header and Divider items.\r\n* Ability to disable items.\r\n","readmeFilename":"README.md"}