Skip to content

Commit 3ef9c0f

Browse files
maxkfranzmaxkfranz
committed
Build for release
1 parent 796e9c8 commit 3ef9c0f

File tree

1 file changed

+43
-29
lines changed

1 file changed

+43
-29
lines changed

‎cytoscape-cxtmenu.js

Lines changed: 43 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,8 @@ var cxtmenu = function cxtmenu(params) {
110110
var canvas = createElement({ tag: 'canvas' });
111111
var commands = [];
112112
var c2d = canvas.getContext('2d');
113-
var r = options.menuRadius;
113+
114+
var r = 100; // defailt radius;
114115
var containerSize = (r + options.activePadding) * 2;
115116
var activeCommandI = void 0;
116117
var offset = void 0;
@@ -209,13 +210,12 @@ var cxtmenu = function cxtmenu(params) {
209210
}
210211
}
211212

212-
function queueDrawBg(rspotlight) {
213-
redrawQueue.drawBg = [rspotlight];
213+
function queueDrawBg(radius, rspotlight) {
214+
redrawQueue.drawBg = [radius, rspotlight];
214215
}
215216

216-
function drawBg(rspotlight) {
217+
function drawBg(radius, rspotlight) {
217218
rspotlight = rspotlight !== undefined ? rspotlight : rs;
218-
219219
c2d.globalCompositeOperation = 'source-over';
220220

221221
c2d.clearRect(0, 0, containerSize, containerSize);
@@ -233,8 +233,8 @@ var cxtmenu = function cxtmenu(params) {
233233
c2d.fillStyle = command.fillColor;
234234
}
235235
c2d.beginPath();
236-
c2d.moveTo(r + options.activePadding, r + options.activePadding);
237-
c2d.arc(r + options.activePadding, r + options.activePadding, r, 2 * Math.PI - theta1, 2 * Math.PI - theta2, true);
236+
c2d.moveTo(radius + options.activePadding, radius + options.activePadding);
237+
c2d.arc(radius + options.activePadding, radius + options.activePadding, radius, 2 * Math.PI - theta1, 2 * Math.PI - theta2, true);
238238
c2d.closePath();
239239
c2d.fill();
240240

@@ -252,11 +252,11 @@ var cxtmenu = function cxtmenu(params) {
252252
theta2 = theta1 + dtheta;
253253

254254
for (var i = 0; i < commands.length; i++) {
255-
var rx1 = r * Math.cos(theta1);
256-
var ry1 = r * Math.sin(theta1);
255+
var rx1 = radius * Math.cos(theta1);
256+
var ry1 = radius * Math.sin(theta1);
257257
c2d.beginPath();
258-
c2d.moveTo(r + options.activePadding, r + options.activePadding);
259-
c2d.lineTo(r + options.activePadding + rx1, r + options.activePadding - ry1);
258+
c2d.moveTo(radius + options.activePadding, radius + options.activePadding);
259+
c2d.lineTo(radius + options.activePadding + rx1, radius + options.activePadding - ry1);
260260
c2d.closePath();
261261
c2d.stroke();
262262

@@ -267,18 +267,18 @@ var cxtmenu = function cxtmenu(params) {
267267
c2d.fillStyle = 'white';
268268
c2d.globalCompositeOperation = 'destination-out';
269269
c2d.beginPath();
270-
c2d.arc(r + options.activePadding, r + options.activePadding, rspotlight + options.spotlightPadding, 0, Math.PI * 2, true);
270+
c2d.arc(radius + options.activePadding, radius + options.activePadding, rspotlight + options.spotlightPadding, 0, Math.PI * 2, true);
271271
c2d.closePath();
272272
c2d.fill();
273273

274274
c2d.globalCompositeOperation = 'source-over';
275275
}
276276

277-
function queueDrawCommands(rx, ry, theta) {
278-
redrawQueue.drawCommands = [rx, ry, theta];
277+
function queueDrawCommands(rx, ry, radius, theta) {
278+
redrawQueue.drawCommands = [rx, ry, radius, theta];
279279
}
280280

281-
function drawCommands(rx, ry, theta) {
281+
function drawCommands(rx, ry, radius, theta) {
282282
var dtheta = 2 * Math.PI / commands.length;
283283
var theta1 = Math.PI / 2;
284284
var theta2 = theta1 + dtheta;
@@ -290,16 +290,16 @@ var cxtmenu = function cxtmenu(params) {
290290
c2d.strokeStyle = 'black';
291291
c2d.lineWidth = 1;
292292
c2d.beginPath();
293-
c2d.moveTo(r + options.activePadding, r + options.activePadding);
294-
c2d.arc(r + options.activePadding, r + options.activePadding, r + options.activePadding, 2 * Math.PI - theta1, 2 * Math.PI - theta2, true);
293+
c2d.moveTo(radius + options.activePadding, radius + options.activePadding);
294+
c2d.arc(radius + options.activePadding, radius + options.activePadding, radius + options.activePadding, 2 * Math.PI - theta1, 2 * Math.PI - theta2, true);
295295
c2d.closePath();
296296
c2d.fill();
297297

298298
c2d.fillStyle = 'white';
299299
c2d.globalCompositeOperation = 'destination-out';
300300

301-
var tx = r + options.activePadding + rx / r * (rs + options.spotlightPadding - options.indicatorSize / 4);
302-
var ty = r + options.activePadding + ry / r * (rs + options.spotlightPadding - options.indicatorSize / 4);
301+
var tx = radius + options.activePadding + rx / radius * (rs + options.spotlightPadding - options.indicatorSize / 4);
302+
var ty = radius + options.activePadding + ry / radius * (rs + options.spotlightPadding - options.indicatorSize / 4);
303303
var rot = Math.PI / 4 - theta;
304304

305305
c2d.translate(tx, ty);
@@ -318,7 +318,7 @@ var cxtmenu = function cxtmenu(params) {
318318

319319
// clear the spotlight
320320
c2d.beginPath();
321-
c2d.arc(r + options.activePadding, r + options.activePadding, rs + options.spotlightPadding, 0, Math.PI * 2, true);
321+
c2d.arc(radius + options.activePadding, radius + options.activePadding, rs + options.spotlightPadding, 0, Math.PI * 2, true);
322322
c2d.closePath();
323323
c2d.fill();
324324

@@ -497,8 +497,8 @@ var cxtmenu = function cxtmenu(params) {
497497
rh = void 0;
498498
if (!isCy && ele.isNode() && !ele.isParent() && !options.atMouse) {
499499
rp = ele.renderedPosition();
500-
rw = ele.renderedWidth();
501-
rh = ele.renderedHeight();
500+
rw = ele.renderedOuterWidth();
501+
rh = ele.renderedOuterHeight();
502502
} else {
503503
rp = e.renderedPosition || e.cyRenderedPosition;
504504
rw = 1;
@@ -510,19 +510,24 @@ var cxtmenu = function cxtmenu(params) {
510510
ctrx = rp.x;
511511
ctry = rp.y;
512512

513-
createMenuItems();
513+
r = rw / 2 + (options.menuRadius instanceof Function ? options.menuRadius(target) : Number(options.menuRadius));
514+
containerSize = (r + options.activePadding) * 2;
515+
updatePixelRatio();
514516

515517
setStyles(parent, {
518+
width: containerSize + 'px',
519+
height: containerSize + 'px',
516520
display: 'block',
517521
left: rp.x - r + 'px',
518522
top: rp.y - r + 'px'
519523
});
524+
createMenuItems();
520525

521526
rs = Math.max(rw, rh) / 2;
522527
rs = Math.max(rs, options.minSpotlightRadius);
523528
rs = Math.min(rs, options.maxSpotlightRadius);
524529

525-
queueDrawBg();
530+
queueDrawBg(r);
526531

527532
activeCommandI = undefined;
528533

@@ -554,12 +559,19 @@ var cxtmenu = function cxtmenu(params) {
554559
var cosTheta = (dy * dy - d * d - dx * dx) / (-2 * d * dx);
555560
var theta = Math.acos(cosTheta);
556561

562+
var rw = void 0;
563+
if (target && target.isNode instanceof Function && target.isNode() && !target.isParent() && !options.atMouse) {
564+
rw = target.renderedOuterWidth();
565+
} else {
566+
rw = 1;
567+
}
568+
569+
r = rw / 2 + (options.menuRadius instanceof Function ? options.menuRadius(target) : Number(options.menuRadius));
557570
if (d < rs + options.spotlightPadding) {
558-
queueDrawBg();
571+
queueDrawBg(r);
559572
return;
560573
}
561-
562-
queueDrawBg();
574+
queueDrawBg(r);
563575

564576
var rx = dx * r / d;
565577
var ry = dy * r / d;
@@ -590,7 +602,7 @@ var cxtmenu = function cxtmenu(params) {
590602
theta2 += dtheta;
591603
}
592604

593-
queueDrawCommands(rx, ry, theta);
605+
queueDrawCommands(rx, ry, r, theta);
594606
}).on('tapdrag', dragHandler).on('cxttapend tapend', function () {
595607
parent.style.display = 'none';
596608

@@ -677,7 +689,9 @@ module.exports = Object.assign != null ? Object.assign.bind(Object) : function (
677689

678690

679691
var defaults = {
680-
menuRadius: 100, // the radius of the circular menu in pixels
692+
menuRadius: function menuRadius(ele) {
693+
return 100;
694+
}, // the radius of the circular menu in pixels
681695
selector: 'node', // elements matching this Cytoscape.js selector will trigger cxtmenus
682696
commands: [// an array of commands to list in the menu or a function that returns the array
683697
/*

0 commit comments

Comments
 (0)