For small process diagrams we experienced that the svg panel has a minimum size of 800 x 600 px. (see screenshot)

      It would be very nice to always get the actual dimensions of the rendered diagram instead of this minimum/default dimensions.

        This is the controller panel for Smart Panels app

            [CAM-936] JS: Remove minimum svg panel size

            Hi Michael,

            Thanks you for this one. Understandable.

            I will put that on the list for 7.0, but not with a high priority.

            So I am not sure if we will finally have it in 7.0 or not. Things are getting a little tight with the must-have issue...

            Or are you interested in contributing this one?

            Robert

            Robert Gimbel added a comment - Hi Michael, Thanks you for this one. Understandable. I will put that on the list for 7.0, but not with a high priority. So I am not sure if we will finally have it in 7.0 or not. Things are getting a little tight with the must-have issue... Or are you interested in contributing this one? Robert

            Hi Robert,

            I can't give you any promises because this does not have a very high priority for us either.

            But I will create a task on our side and if we find a solution we will definitely contribute it back.

            Michael

            Michael Oberwasserlechner added a comment - Hi Robert, I can't give you any promises because this does not have a very high priority for us either. But I will create a task on our side and if we find a solution we will definitely contribute it back. Michael

            Suggested fix: add minWidth/minHeight options. We can set them to some low numbers (80, 60 works fine for us) to avoid scroll bars.
            Explicitly set width and hight still take precedence. Users that do not specify minWidth/minHeight get the default values (800, 600).

            svn diff js/bpmn/Renderer.js
            --- Renderer.js (current revision)
            +++ Renderer.js (working copy)
            @@ -1151,8 +1151,8 @@
            
                 // create surface element if needed
                 if (!gfxGroup) {
            -      var width = options.width ? options.width : 800;
            -      var height = options.height ? options.height : 600;
            +      var width = options.width ? options.width : options.minWidth ? options.minWidth : 800;
            +      var height = options.height ? options.height : options.minHeight ? options.minHeight : 600;
            
                   gfxGroup = this.gfxGroup = gfx.createSurface(options.diagramElement, width, height).createGro
            up();
                 }
            

            Michael Pichler added a comment - Suggested fix: add minWidth/minHeight options. We can set them to some low numbers (80, 60 works fine for us) to avoid scroll bars. Explicitly set width and hight still take precedence. Users that do not specify minWidth/minHeight get the default values (800, 600). svn diff js/bpmn/Renderer.js --- Renderer.js (current revision) +++ Renderer.js (working copy) @@ -1151,8 +1151,8 @@ // create surface element if needed if (!gfxGroup) { - var width = options.width ? options.width : 800; - var height = options.height ? options.height : 600; + var width = options.width ? options.width : options.minWidth ? options.minWidth : 800; + var height = options.height ? options.height : options.minHeight ? options.minHeight : 600; gfxGroup = this .gfxGroup = gfx.createSurface(options.diagramElement, width, height).createGro up(); }

            Thank you for that hint, this will be helpful when we start working on this ticket.

            Robert Gimbel added a comment - Thank you for that hint, this will be helpful when we start working on this ticket.

            Stefan added a comment -

            Hi there,

            I don't see the need for a minWidth and maxWidth option.
            For this we have a width and height options and it works for my diagram if I set them.

            For example:

            I've used the diagram from the camunda-bpmn.js demo html and extended it with a height and a width

            require(["bpmn/Bpmn", "dojo/domReady!"], function(Bpmn) {
            new Bpmn().renderUrl("test/resources/task_loop.bpmn",

            { diagramElement : "diagram", overlayHtml : '<div style="position: relative; top:100%"></div>', --> height: 20, --> width: 20 }

            ).then(function (bpmn)

            { bpmn.zoom(0.8); bpmn.annotation("sid-C7031B1A-7F7E-4846-B046-73C638547449").setHtml('<span class="bluebox" style="position: relative; top:100%">New Text</span>').addClasses(["highlight"]); bpmn.annotation("sid-C7031B1A-7F7E-4846-B046-73C638547449").addDiv("<span>Test Div</span>", ["testDivClass"]); }

            );
            });

            I attached a view of my compressed browser the show you the outcome.

            You can reopen the ticket and explain it some more if you think that I have missed something.

            Cheers,

            Stefan

            Stefan added a comment - Hi there, I don't see the need for a minWidth and maxWidth option. For this we have a width and height options and it works for my diagram if I set them. For example: I've used the diagram from the camunda-bpmn.js demo html and extended it with a height and a width require( ["bpmn/Bpmn", "dojo/domReady!"] , function(Bpmn) { new Bpmn().renderUrl("test/resources/task_loop.bpmn", { diagramElement : "diagram", overlayHtml : '<div style="position: relative; top:100%"></div>', --> height: 20, --> width: 20 } ).then(function (bpmn) { bpmn.zoom(0.8); bpmn.annotation("sid-C7031B1A-7F7E-4846-B046-73C638547449").setHtml('<span class="bluebox" style="position: relative; top:100%">New Text</span>').addClasses(["highlight"]); bpmn.annotation("sid-C7031B1A-7F7E-4846-B046-73C638547449").addDiv("<span>Test Div</span>", ["testDivClass"]); } ); }); I attached a view of my compressed browser the show you the outcome. You can reopen the ticket and explain it some more if you think that I have missed something. Cheers, Stefan

            I think when we set width and height, the diagram used to be scaled down to these values, but your screenshot shows this should work fine now. Will test it soon.

            Michael Pichler added a comment - I think when we set width and height, the diagram used to be scaled down to these values, but your screenshot shows this should work fine now. Will test it soon.

            Thank you Stefan,

            setting width and height to small values and adding

            .then(function (bpmn) {
            bpmn.zoom(1.0);
            });

            works fine.

            The diagram thus uses the space it needs, no minimum size of 800x600.

            Michael Pichler added a comment - Thank you Stefan, setting width and height to small values and adding .then(function (bpmn) { bpmn.zoom(1.0); }); works fine. The diagram thus uses the space it needs, no minimum size of 800x600.

              stefan.hentschel Stefan
              moberwasserlechner Michael Oberwasserlechner
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

                Created:
                Updated:
                Resolved: