Is this Modern Docking, Swing, or me?

[i-make-robots]

I'm building a node-based editor. Effectively it's Swing components on a giant carpet, connected with lines to denote relationships and flow of data. My thought is to leverage Swing components so I don't have to reinvent the components. To achieve this I have my VisibleFrame with my Donatello JPanel that renders the carpet. Donatello gets the Swing component of items in the view area, and then draws it like this:

private void drawOneJPanel(Graphics2D g,JPanel panel) {
    frame.add(panel);  // frame is created in the constructor and never made visible.
    frame.pack();

    if (panel.getWidth() > 0 && panel.getHeight() > 0) {
        BufferedImage bi = new BufferedImage(panel.getWidth(), panel.getHeight(), BufferedImage.TYPE_INT_RGB);
        Graphics2D g2d = bi.createGraphics();
        panel.paint(g2d);
        g2d.dispose();

        // TODO draw the node at the correct position
        int x = (int)camera.x;
        int y = (int)camera.y;

        // draw bitmap scaled to the screen
        g.drawImage(bi,
                x, y, x + panel.getWidth(), y + panel.getHeight(),
                0, 0, panel.getWidth(), panel.getHeight(),
                null);
    }
    frame.remove(panel);
}

Somehow Donatello is showing panel twice - once at my desired position and once in the top left corner. But I'm never connecting panel to Donatello, or frame to Donatello, so I'm not sure how this is possible. If I comment out panel.paint(g2d) both disappear. Anyone have a hint for me?

[i-make-robots]

Here's a simpler test without MD that works as expected.

import com.formdev.flatlaf.FlatLightLaf;
import javax.swing.*;
import java.awt.*;
import java.awt.image.BufferedImage;

/**
 * {@link DrawJPanelAsBufferedImage} is a test to see if a JPanel can be drawn to a BufferedImage and rendered to the screen.
 */
public class DrawJPanelAsBufferedImage {
    public static void main(String[] args) {
        try {
            UIManager.setLookAndFeel(new FlatLightLaf());
            // option 2: UIManager.setLookAndFeel(new FlatDarkLaf());
        } catch (Exception ignored) {}

        var panel = createPanel();
        BufferedImage image = drawJPanelToBufferedImage(panel);

        JFrame visibleFrame = new JFrame();
        visibleFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        visibleFrame.setSize(400, 400);
        visibleFrame.add(new JPanel() {
            @Override
            protected void paintComponent(Graphics g) {
                super.paintComponent(g);

                g.drawImage(image,
                        (getWidth()-panel.getWidth())/2,
                        (getHeight()-panel.getHeight())/2,
                        null);
            }
        });
        visibleFrame.setVisible(true);
    }

    private static JPanel createPanel() {
        // test by creating a new JPanel and drawing it to a PNG file.
        var panel = new JPanel();
        panel.setLayout(new BoxLayout(panel, BoxLayout.Y_AXIS));
        // add some content to the panel
        panel.add(new JLabel("Hello, World!"));
        panel.add(new JButton("Click me!"));
        panel.add(new JCheckBox("Check me!"));
        panel.add(new JRadioButton("Radio me!"));
        panel.add(new JTextField("Type me!"));
        panel.add(new JTextArea("Write me!"));
        panel.add(new JProgressBar(0, 100));
        return panel;
    }

    private static BufferedImage drawJPanelToBufferedImage(JPanel panel) {
        // Use an off-screen JFrame to ensure layout and rendering
        JFrame hiddenFrame = new JFrame();
        hiddenFrame.add(panel);
        hiddenFrame.pack(); // Ensures the panel gets its preferred size
        // create a BufferedImage the same size as the panel.
        BufferedImage image = new BufferedImage(panel.getWidth(), panel.getHeight(), BufferedImage.TYPE_INT_ARGB);
        // Create a Graphics2D object from the BufferedImage.
        var graphics2D = image.createGraphics();
        // Draw the panel to the Graphics2D object.
        panel.paint(graphics2D);
        // Done with the Graphics2D object.
        hiddenFrame.dispose();

        return image;
    }
}

[andrewauclair]

Do you have a simple test with MD? Perhaps it's a problem with where you're drawing and to what.

[i-make-robots]

import ModernDocking.DockingRegion;
import ModernDocking.app.Docking;
import ModernDocking.app.RootDockingPanel;
import ModernDocking.ext.ui.DockingUI;
import com.formdev.flatlaf.FlatLightLaf;
import com.marginallyclever.ro3.DockingPanel;

import javax.swing.*;
import java.awt.*;
import java.awt.image.BufferedImage;

/**
 * Using Modern Docking, create a JFrame and panel.  inside the panel, use a custom Graphics2D to draw a BufferedImage which
 * contains the paint of a second panel.
 */
public class ProblemDemo {
    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> {
            // make a frame
            var frame = setupFrame();

            // create docking panel attached to frame
            DockingPanel dockingPanel = new DockingPanel("dockingPanel", "dockingPanel");
            Docking.dock(dockingPanel, frame, DockingRegion.CENTER);
            
            // make a panel with some normal components.
            var myPanel = new JPanel();
            myPanel.add(new JButton("Push me"));
            myPanel.add(new JCheckBox("And then just touch me"));
            myPanel.add(new TextArea("Till I can get my satisfaction"));
            myPanel.add(new JSlider(0, 100, 50));

            // make a hidden frame to help layout panel2.
            var frame2 = new JFrame("ProblemDemo2");
            frame2.add(myPanel);
            frame2.setSize(myPanel.getPreferredSize());
            frame2.pack();

            // make a custom panel that will paint myPanel to a BufferedImage and then draw that image.
            var specialPaintPanel = new JPanel() {
                @Override
                protected void paintComponent(java.awt.Graphics g) {
                    super.paintComponent(g);
                    var g2d = (java.awt.Graphics2D) g.create();

                    BufferedImage bi = new BufferedImage(myPanel.getWidth(), myPanel.getHeight(), BufferedImage.TYPE_INT_RGB);
                    var big = bi.createGraphics();
                    big.setColor(Color.WHITE);
                    big.drawLine(0, 0, getWidth(), getHeight());
                    big.drawLine(getWidth(), 0, 0, getHeight());
                    big.dispose();
                    myPanel.paint(big);

                    g2d.translate(50,50);
                    g2d.drawImage(bi, 0, 0, null);

                    g2d.dispose();
                }
            };
            dockingPanel.add(specialPaintPanel, BorderLayout.CENTER);

            frame.setVisible(true);
        });
    }

    private static JFrame setupFrame() {
        // init look n feel
        try {
            UIManager.setLookAndFeel(new FlatLightLaf());
            // option 2: UIManager.setLookAndFeel(new FlatDarkLaf());
        } catch (Exception ignored) {}
        
        var frame = new JFrame("ProblemDemo");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(800, 600);
        frame.setLocationRelativeTo(null);
        // init modern docking
        Docking.initialize(frame);
        DockingUI.initialize();
        ModernDocking.settings.Settings.setAlwaysDisplayTabMode(true);
        ModernDocking.settings.Settings.setTabLayoutPolicy(JTabbedPane.SCROLL_TAB_LAYOUT);
        // create root panel
        RootDockingPanel root = new RootDockingPanel(frame);
        frame.add(root, BorderLayout.CENTER);
        return frame;
    }
}

[andrewauclair]

Sorry for the delay. What's com.marginallyclever.ro3.DockingPanel? Is it easy to give a minimum piece of that as well?

[i-make-robots]

import ModernDocking.Dockable;
import ModernDocking.app.Docking;

import javax.swing.*;
import java.awt.*;

/**
 * {@link DockingPanel} is a {@link JPanel} that implements {@link Dockable}.
 */
public class DockingPanel extends JPanel implements Dockable {
    private final String tabText;
    private final String persistentID;

    public DockingPanel(String persistentID, String tabText) {
        super(new BorderLayout());
        this.persistentID = persistentID;
        this.tabText = tabText;
        Docking.registerDockable(this);
    }

    @Override
    public String getPersistentID() {
        return persistentID;
    }

    @Override
    public String getTabText() {
        return tabText;
    }

    /**
     * Refuse to wrap this {@link DockingPanel} in a {@link JScrollPane}.  The panel is responsibile for scrolling,
     * not the docking system.
     * @return false
     */
    @Override
    public boolean isWrappableInScrollpane() {
        return false;
    }
}

[andrewauclair]

I believe the issue is how you are drawing. I will look a little closer over the next few days to see if I can help determine the right way to do this.

[andrewauclair]

import ModernDocking.Dockable;
import ModernDocking.DockingRegion;
import ModernDocking.app.Docking;
import ModernDocking.app.RootDockingPanel;
import ModernDocking.ext.ui.DockingUI;
import com.formdev.flatlaf.FlatLightLaf;

import javax.swing.*;
import java.awt.*;
import java.awt.image.BufferedImage;

/**
 * Using Modern Docking, create a JFrame and panel.  inside the panel, use a custom Graphics2D to draw a BufferedImage which
 * contains the paint of a second panel.
 */
public class ProblemDemo {
    public static class DockingPanel extends JPanel implements Dockable {
        private final String tabText;
        private final String persistentID;

        public DockingPanel(String persistentID, String tabText) {
            super(new BorderLayout());
            this.persistentID = persistentID;
            this.tabText = tabText;
            Docking.registerDockable(this);
        }

        @Override
        public String getPersistentID() {
            return persistentID;
        }

        @Override
        public String getTabText() {
            return tabText;
        }

        /**
         * Refuse to wrap this {@link DockingPanel} in a {@link JScrollPane}.  The panel is responsibile for scrolling,
         * not the docking system.
         * @return false
         */
        @Override
        public boolean isWrappableInScrollpane() {
            return false;
        }
    }
    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> {
            // make a frame
            var frame = setupFrame();

            // create docking panel attached to frame
            DockingPanel dockingPanel = new DockingPanel("dockingPanel", "dockingPanel");
            Docking.dock(dockingPanel, frame, DockingRegion.CENTER);

            // make a panel with some normal components.
            var myPanel = new JPanel();
            myPanel.add(new JButton("Push me"));
            myPanel.add(new JCheckBox("And then just touch me"));
            myPanel.add(new TextArea("Till I can get my satisfaction"));
            myPanel.add(new JSlider(0, 100, 50));

            myPanel.setSize(700, 200);

            // make a custom panel that will paint myPanel to a BufferedImage and then draw that image.
            var specialPaintPanel = new JPanel() {
                @Override
                protected void paintComponent(java.awt.Graphics g) {
                    super.paintComponent(g);
                    var g2d = (java.awt.Graphics2D) g.create();

                    BufferedImage bi = new BufferedImage(getWidth(), getHeight(), BufferedImage.TYPE_INT_RGB);
                    var big = bi.createGraphics();
                    big.setColor(Color.WHITE);
                    big.drawLine(0, 0, getWidth(), getHeight());
                    big.drawLine(getWidth(), 0, 0, getHeight());
                    big.dispose();


                    g2d.drawImage(bi, 0, 0, null);
                    g2d.dispose();
                }
            };
            specialPaintPanel.setLayout(null);
            specialPaintPanel.add(myPanel);
            myPanel.setLocation(50, 50);
            dockingPanel.add(specialPaintPanel, BorderLayout.CENTER);

            frame.setVisible(true);
        });
    }

    private static JFrame setupFrame() {
        // init look n feel
        try {
            UIManager.setLookAndFeel(new FlatLightLaf());
            // option 2: UIManager.setLookAndFeel(new FlatDarkLaf());
        } catch (Exception ignored) {}

        var frame = new JFrame("ProblemDemo");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(800, 600);
        frame.setLocationRelativeTo(null);
        // init modern docking
        Docking.initialize(frame);
        DockingUI.initialize();
        ModernDocking.settings.Settings.setAlwaysDisplayTabMode(true);
        ModernDocking.settings.Settings.setTabLayoutPolicy(JTabbedPane.SCROLL_TAB_LAYOUT);
        // create root panel
        RootDockingPanel root = new RootDockingPanel(frame);
        frame.add(root, BorderLayout.CENTER);
        return frame;
    }
}

Here's a sample that works. The trick is to use a null layout, draw your custom background in paintComponent and let Swing do the rest. You'll have to manually deal with sizes and positions of components.