Skip to content

Commit f593b2a

Browse files
author
Armel FORTUN
committed
Add a zIndex parameter
1 parent acb99b6 commit f593b2a

File tree

3 files changed

+156
-46
lines changed

3 files changed

+156
-46
lines changed

‎src/body/Body.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,8 @@ var Axes = require('../geometry/Axes');
8383
yScale: 1,
8484
xOffset: 0,
8585
yOffset: 0
86-
}
86+
},
87+
zIndex: 0
8788
},
8889
events: null,
8990
bounds: null,

‎src/constraint/Constraint.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,8 @@ var Common = require('../core/Common');
6969
lineWidth: 2,
7070
strokeStyle: '#ffffff',
7171
type: 'line',
72-
anchors: true
72+
anchors: true,
73+
zIndex: 0
7374
};
7475

7576
if (constraint.length === 0 && constraint.stiffness > 0.1) {

‎src/render/Render.js

+152-44
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,8 @@ var Mouse = require('../core/Mouse');
8989
showVertexNumbers: false,
9090
showConvexHulls: false,
9191
showInternalEdges: false,
92-
showMousePosition: false
92+
showMousePosition: false,
93+
enableZIndex: false
9394
}
9495
};
9596

@@ -367,6 +368,7 @@ var Mouse = require('../core/Mouse');
367368
background = options.wireframes ? options.wireframeBackground : options.background,
368369
bodies = [],
369370
constraints = [],
371+
items = [],
370372
i;
371373

372374
var event = {
@@ -391,8 +393,14 @@ var Mouse = require('../core/Mouse');
391393
for (i = 0; i < allBodies.length; i++) {
392394
var body = allBodies[i];
393395
if (Bounds.overlaps(body.bounds, render.bounds))
394-
bodies.push(body);
395-
}
396+
if (options.enableZIndex.on) {
397+
for (i = 0; i < allBodies.length; i++) {
398+
items.push({ type: 'body', object: allBodies[i] });
399+
}
400+
} else {
401+
bodies.push(body);
402+
}
403+
};
396404

397405
// filter out constraints that are not in view
398406
for (i = 0; i < allConstraints.length; i++) {
@@ -409,8 +417,14 @@ var Mouse = require('../core/Mouse');
409417
continue;
410418

411419
if (Bounds.contains(render.bounds, pointAWorld) || Bounds.contains(render.bounds, pointBWorld))
412-
constraints.push(constraint);
413-
}
420+
if (options.enableZIndex.on) {
421+
for (i = 0; i < allConstraints.length; i++) {
422+
items.push({ type: 'constraint', object: allConstraints[i] });
423+
}
424+
} else {
425+
constraints.push(constraint);
426+
}
427+
};
414428

415429
// transform the view
416430
Render.startViewTransform(render);
@@ -425,65 +439,159 @@ var Mouse = require('../core/Mouse');
425439
Mouse.setOffset(render.mouse, render.bounds.min);
426440
}
427441
} else {
428-
constraints = allConstraints;
429-
bodies = allBodies;
430-
431-
if (render.options.pixelRatio !== 1) {
432-
render.context.setTransform(render.options.pixelRatio, 0, 0, render.options.pixelRatio, 0, 0);
442+
if (options.enableZIndex.on) {
443+
for (i = 0; i < allBodies.length; i++) {
444+
items.push({ type: 'body', object: allBodies[i] });
445+
}
446+
for (i = 0; i < allConstraints.length; i++) {
447+
items.push({ type: 'constraint', object: allConstraints[i] });
448+
}
449+
if (render.options.pixelRatio !== 1) {
450+
render.context.setTransform(render.options.pixelRatio, 0, 0, render.options.pixelRatio, 0, 0);
451+
}
452+
} else {
453+
bodies = allBodies;
454+
constraints = allConstraints;
433455
}
434456
}
435457

436-
if (!options.wireframes || (engine.enableSleeping && options.showSleeping)) {
437-
// fully featured rendering of bodies
438-
Render.bodies(render, bodies, context);
458+
if (options.enableZIndex.on) {
459+
// Sort elements by zIndex
460+
items.sort(function(a, b) {
461+
zIndexA = a.object.render.zIndex;
462+
zIndexB = b.object.render.zIndex
463+
return zIndexA - zIndexB;
464+
});
465+
466+
// Start rendering in chunks using requestAnimationFrame
467+
var batchSize = options.enableZIndex.chunkSize; // Adjust the batch size as needed
468+
var currentIndex = 0;
469+
470+
function renderNextBatch() {
471+
var endIndex = Math.min(currentIndex + batchSize, items.length);
472+
var batch = items.slice(currentIndex, endIndex);
473+
renderBatch(batch, render, context, engine, options);
474+
475+
currentIndex = endIndex;
476+
if (currentIndex < items.length) {
477+
requestAnimationFrame(renderNextBatch);
478+
} else {
479+
if (options.hasBounds) {
480+
// revert view transforms
481+
Render.endViewTransform(render);
482+
}
483+
484+
Events.trigger(render, 'afterRender', event);
485+
486+
// log the time elapsed computing this update
487+
timing.lastElapsed = Common.now() - startTime;
488+
}
489+
}
490+
491+
requestAnimationFrame(renderNextBatch);
492+
493+
function renderBatch(batch, render, context, engine, options) {
494+
for (var i = 0; i < batch.length; i++) {
495+
var item = batch[i];
496+
if (item.type === 'body') {
497+
if (!options.wireframes || (engine.enableSleeping && options.showSleeping)) {
498+
// fully featured rendering of bodies
499+
Render.bodies(render, [item.object], context);
500+
} else {
501+
if (options.showConvexHulls)
502+
Render.bodyConvexHulls(render, [item.object], context);
503+
504+
// optimised method for wireframes only
505+
Render.bodyWireframes(render, [item.object], context);
506+
}
507+
508+
if (options.showBounds)
509+
Render.bodyBounds(render, [item.object], context);
510+
511+
if (options.showAxes || options.showAngleIndicator)
512+
Render.bodyAxes(render, [item.object], context);
513+
514+
if (options.showPositions)
515+
Render.bodyPositions(render, [item.object], context);
516+
517+
if (options.showVelocity)
518+
Render.bodyVelocity(render, [item.object], context);
519+
520+
if (options.showIds)
521+
Render.bodyIds(render, [item.object], context);
522+
523+
if (options.showSeparations)
524+
Render.separations(render, engine.pairs.list, context);
525+
526+
if (options.showCollisions)
527+
Render.collisions(render, engine.pairs.list, context);
528+
529+
if (options.showVertexNumbers)
530+
Render.vertexNumbers(render, [item.object], context);
531+
532+
if (options.showMousePosition)
533+
Render.mousePosition(render, render.mouse, context);
534+
535+
} else if (item.type === 'constraint') {
536+
Render.constraints([item.object], context);
537+
}
538+
}
539+
};
540+
439541
} else {
440-
if (options.showConvexHulls)
441-
Render.bodyConvexHulls(render, bodies, context);
542+
if (!options.wireframes || (engine.enableSleeping && options.showSleeping)) {
543+
// fully featured rendering of bodies
544+
Render.bodies(render, bodies, context);
545+
} else {
546+
if (options.showConvexHulls)
547+
Render.bodyConvexHulls(render, bodies, context);
442548

443-
// optimised method for wireframes only
444-
Render.bodyWireframes(render, bodies, context);
445-
}
549+
// optimised method for wireframes only
550+
Render.bodyWireframes(render, bodies, context);
551+
}
446552

447-
if (options.showBounds)
448-
Render.bodyBounds(render, bodies, context);
553+
if (options.showBounds)
554+
Render.bodyBounds(render, bodies, context);
449555

450-
if (options.showAxes || options.showAngleIndicator)
451-
Render.bodyAxes(render, bodies, context);
556+
if (options.showAxes || options.showAngleIndicator)
557+
Render.bodyAxes(render, bodies, context);
452558

453-
if (options.showPositions)
454-
Render.bodyPositions(render, bodies, context);
559+
if (options.showPositions)
560+
Render.bodyPositions(render, bodies, context);
455561

456-
if (options.showVelocity)
457-
Render.bodyVelocity(render, bodies, context);
562+
if (options.showVelocity)
563+
Render.bodyVelocity(render, bodies, context);
458564

459-
if (options.showIds)
460-
Render.bodyIds(render, bodies, context);
565+
if (options.showIds)
566+
Render.bodyIds(render, bodies, context);
461567

462-
if (options.showSeparations)
463-
Render.separations(render, engine.pairs.list, context);
568+
if (options.showSeparations)
569+
Render.separations(render, engine.pairs.list, context);
464570

465-
if (options.showCollisions)
466-
Render.collisions(render, engine.pairs.list, context);
571+
if (options.showCollisions)
572+
Render.collisions(render, engine.pairs.list, context);
467573

468-
if (options.showVertexNumbers)
469-
Render.vertexNumbers(render, bodies, context);
574+
if (options.showVertexNumbers)
575+
Render.vertexNumbers(render, bodies, context);
470576

471-
if (options.showMousePosition)
472-
Render.mousePosition(render, render.mouse, context);
577+
if (options.showMousePosition)
578+
Render.mousePosition(render, render.mouse, context);
473579

474-
Render.constraints(constraints, context);
580+
Render.constraints(constraints, context);
475581

476-
if (options.hasBounds) {
477-
// revert view transforms
478-
Render.endViewTransform(render);
479-
}
582+
if (options.hasBounds) {
583+
// revert view transforms
584+
Render.endViewTransform(render);
585+
}
480586

481-
Events.trigger(render, 'afterRender', event);
587+
Events.trigger(render, 'afterRender', event);
482588

483-
// log the time elapsed computing this update
484-
timing.lastElapsed = Common.now() - startTime;
589+
// log the time elapsed computing this update
590+
timing.lastElapsed = Common.now() - startTime;
591+
}
485592
};
486593

594+
487595
/**
488596
* Renders statistics about the engine and world useful for debugging.
489597
* @private

0 commit comments

Comments
 (0)