feat(layers): Graph and Paper embedding layers implementation #2908

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft

Geliogabalus wants to merge 54 commits into clientIO:master from Geliogabalus:embedding-layers

packages/joint-core/src/dia/Cell.mjs

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -239,15 +239,15 @@ export const Cell = Model.extend({
  
                }

            }

            this.trigger('remove', this, graph.attributes.cells, opt);

            this.trigger('remove', this, graph.cellCollection, opt);

            graph.stopBatch('remove');

            return this;

        },

        toFront: function(opt) {

            var graph = this.graph;

            const { graph } = this;

            if (graph) {

                opt = defaults(opt || {}, { foregroundEmbeds: true });

    @@ -261,12 +261,14 @@ export const Cell = Model.extend({
  
                const sortedCells = opt.foregroundEmbeds ? cells : sortBy(cells, cell => cell.z());

                const maxZ = graph.maxZIndex();

                const layerId = this.layer();

                const maxZ = graph.maxZIndex(layerId);

                let z = maxZ - cells.length + 1;

                const collection = graph.get('cells');

                const layerCells = graph.getCellLayerCells(layerId);

                let shouldUpdate = (collection.toArray().indexOf(sortedCells[0]) !== (collection.length - cells.length));

                let shouldUpdate = (layerCells.indexOf(sortedCells[0]) !== (layerCells.length - cells.length));

                if (!shouldUpdate) {

                    shouldUpdate = sortedCells.some(function(cell, index) {

                        return cell.z() !== z + index;

    @@ -290,7 +292,7 @@ export const Cell = Model.extend({
  
        },

        toBack: function(opt) {

            var graph = this.graph;

            const { graph } = this;

            if (graph) {

                opt = defaults(opt || {}, { foregroundEmbeds: true });

    @@ -304,11 +306,13 @@ export const Cell = Model.extend({
  
                const sortedCells = opt.foregroundEmbeds ? cells : sortBy(cells, cell => cell.z());

                let z = graph.minZIndex();

                const layerId = this.layer();

                let z = graph.minZIndex(layerId);

                var collection = graph.get('cells');

                const layerCells = graph.getCellLayerCells(layerId);

                let shouldUpdate = (collection.toArray().indexOf(sortedCells[0]) !== 0);

                let shouldUpdate = (layerCells.indexOf(sortedCells[0]) !== 0);

                if (!shouldUpdate) {

                    shouldUpdate = sortedCells.some(function(cell, index) {

                        return cell.z() !== z + index;

    @@ -942,6 +946,31 @@ export const Cell = Model.extend({
  
                .getPointRotatedAroundCenter(this.angle(), x, y)

                // Transform the absolute position into relative

                .difference(this.position());

        },

        layer: function(layerId, opt) {

            // if strictly null unset the layer

            if (layerId === null) {

                return this.unset('layer', opt);

            }

            // if undefined return the current layer id

            if (layerId === undefined) {

                layerId = this.get('layer') || null;

                // If the cell is part of a graph, use the graph's default cell layer.

                if (layerId == null && this.graph) {

                    layerId = this.graph.getDefaultCellLayer().id;

                }

                return layerId;

            }

            // otherwise set the layer id

            if (!isString(layerId)) {

                throw new Error('Layer id must be a string.');

            }

            return this.set('layer', layerId, opt);

        }

    }, {

packages/joint-core/src/dia/ElementView.mjs

-Original file line number
+Diff line change
@@ Expand Up / @@ -365,7 +365,12 @@ export const ElementView = CellView.extend({ @@
             element.startBatch('to-front');
             // Bring the model to the front with all his embeds.
-            element.toFront({ deep: true, ui: true });
+            if (paper.options.useLayersForEmbedding) {
+                // don't use deep: true, because embedded cells are already on top of the container because of the layer
+                element.toFront({ ui: true });
+            } else {
+                element.toFront({ deep: true, ui: true });
+            }
             // Note that at this point cells in the collection are not sorted by z index (it's running in the batch, see
             // the dia.Graph._sortOnChangeZ), so we can't assume that the last cell in the collection has the highest z.
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(layers): Graph and Paper embedding layers implementation #2908

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

feat(layers): Graph and Paper embedding layers implementation #2908

Are you sure you want to change the base?

Uh oh!

feat(layers): Graph and Paper embedding layers implementation #2908

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!