Quantcast
Channel: SmartClient Forums
Viewing all articles
Browse latest Browse all 4756

Maximize size of Zoomable DrawPane inside Canvas without flickering

$
0
0
SmartGwt Pro 4.1
FireFox 25.0.1


If screen is maximized after browser, opens, canvas (colored red) is visible behind drawpane (blue).

In method, initDrawPane, if width and height are set to 100 instead of canvas viewport size, page opens up with flickering. Maybe due to zoomSliderValueChangeHandler updating itself to make panel bigger.

Code:

import com.google.gwt.core.client.EntryPoint;

import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.types.VisibilityMode;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.ImgButton;
import com.smartgwt.client.widgets.Slider;
import com.smartgwt.client.widgets.drawing.DrawPane;
import com.smartgwt.client.widgets.events.ValueChangedEvent;
import com.smartgwt.client.widgets.events.ValueChangedHandler;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.SectionStack;
import com.smartgwt.client.widgets.layout.SectionStackSection;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.menu.Menu;
import com.smartgwt.client.widgets.menu.MenuBar;
import com.smartgwt.client.widgets.menu.MenuItem;
import com.smartgwt.client.widgets.tab.TabSet;


public class Test1 implements EntryPoint { 
   
    private static int MENU_HEIGHT = 18;
    private static int MENU_SHADOW_DEPTH = 10;

    private static int PALETTE_HEIGHT = 18;
   
    private VLayout layout;
    private MenuItem newItem, openItem, saveAs;
    private ImgButton  createLinksButton;
    private VLayout infoPanel;
    private Canvas drawCanvas;
    private DrawPane drawPane;
    private HLayout zoomSliderPanel;
    private Slider zoomSlider;
    private SectionStack sectionStack;
    private SectionStackSection componentsSection;
    private TabSet componentTabSet;

   
    public void onModuleLoad() {
        doLayout();
    }
   
    public void doLayout() {
        HLayout menuContainer = new HLayout();
        menuContainer.setHeight(MENU_HEIGHT);
        menuContainer.setWidth100();
        MenuBar menuBar = new MenuBar();
        menuBar.setBackgroundColor("pink");
        menuBar.setWidth100();
        menuContainer.addMember(menuBar);

        Menu fileMenu = new Menu();
        fileMenu.setTitle("File");
        fileMenu.setShowShadow(true);
        fileMenu.setShadowDepth(MENU_SHADOW_DEPTH);
        fileMenu.setWidth(100);
        newItem = new MenuItem("New");
       
        newItem.addClickHandler(new com.smartgwt.client.widgets.menu.events.ClickHandler() {
            public void onClick(com.smartgwt.client.widgets.menu.events.MenuItemClickEvent p1) {                               
            }
        });
       
       
        openItem = new MenuItem("Open");
        saveAs = new MenuItem("Save As");
        fileMenu.setItems(newItem, openItem, saveAs);
        Menu[] menus = new Menu[1];
        menus[0] = fileMenu;
        menuBar.addMenus(menus, 0);       

        HLayout paletteContainer = new HLayout(5);
        paletteContainer.setBackgroundColor("black");
        paletteContainer.setHeight(PALETTE_HEIGHT);
        paletteContainer.setWidth100();
       

        //        // The rest of the information takes up the remaining place
        infoPanel = new VLayout();
        infoPanel.setBackgroundColor("Yellow");
        infoPanel.setWidth100();
        infoPanel.setHeight("*");


        // 70% for the remaining height for drawing and detail
        HLayout drawDetailPanel = new HLayout();
        drawDetailPanel.setShowResizeBar(true);
        drawDetailPanel.setWidth100();
        drawDetailPanel.setHeight("70%");
        drawCanvas = new Canvas();
        drawCanvas.setShowResizeBar(true);
        drawCanvas.setBackgroundColor("red");
        drawCanvas.setWidth("70%");
        drawCanvas.setHeight100();
        drawCanvas.setOverflow(Overflow.AUTO);
       

       


        Canvas compDetail = new Canvas();
        compDetail.setWidth("30%");
        compDetail.setHeight100();
        compDetail.setBackgroundColor("green");
        drawDetailPanel.addMember(drawCanvas);
        drawDetailPanel.addMember(compDetail);

       
        // Zoom slider panel
        zoomSliderPanel = new HLayout();
        zoomSliderPanel.setBackgroundColor("grey");
        zoomSliderPanel.setWidth100();
        zoomSliderPanel.setHeight(20);
       
       
        componentsSection = new SectionStackSection();
        componentsSection.setTitle("Components Section");
        componentsSection.setExpanded(true);

        sectionStack = new SectionStack();
        sectionStack.setWidth100();
        sectionStack.setHeight("*");
        sectionStack.setVisibilityMode(VisibilityMode.MULTIPLE);
        sectionStack.setAnimateSections(true);
        sectionStack.setOverflow(Overflow.AUTO);
        sectionStack.setSections(componentsSection);
        //


        //
        infoPanel.addMember(drawDetailPanel);
        infoPanel.addMember(zoomSliderPanel);
        infoPanel.addMember(sectionStack);

        layout = new VLayout();
        layout.setWidth100();
        layout.setHeight100();
        layout.addMember(menuContainer);
        layout.addMember(paletteContainer);
        layout.addMember(infoPanel);
        layout.draw();
       
        initPanelsForNewModel();
       
       
       
       
       




    }
   
    public void initPanelsForNewModel() {
        initDrawPane();

       
       
        // Zoom handler
        ValueChangedHandler zoomSliderValueChangeHandler = new ValueChangedHandler() { 
            @Override 
            public void onValueChanged(ValueChangedEvent event) {

               
                int canvasWidth = drawCanvas.getWidth();
                int canvasHeight = drawCanvas.getHeight();
               
                Slider sliderItem = (Slider) event.getSource();
                // When we zoom, make the panel bigger - That way we can see everything. 
                double value = sliderItem.getValueAsDouble();
                if (1.0d < value) {
                    drawPane.resizeTo(new Double(value  * canvasWidth).intValue(), new Double(value * canvasHeight).intValue());
                }
                drawPane.zoom(sliderItem.getValueAsDouble()); 
            } 
        };
        if (null == zoomSlider) {
            zoomSlider = new Slider(); 
            zoomSlider.setMinValue(.10d); 
            zoomSlider.setMaxValue(3.0d); 
            zoomSlider.setNumValues(300); 
            zoomSlider.setWidth(500);
    //            zoomSlider.setHeight(20);
            zoomSlider.setValue(1.0d); 
            zoomSlider.setRoundValues(false); 
            zoomSlider.setRoundPrecision(2); 
            zoomSlider.setTitle("Zoom Shapes"); 
            zoomSlider.setVertical(false); 
            zoomSlider.addValueChangedHandler(zoomSliderValueChangeHandler);
            zoomSliderPanel.addMember(zoomSlider);
            zoomSlider.draw();
        }
       

        componentsSection.addItem(componentTabSet);
       
        // Draw with newly added grids.
        //sectionStack.draw();
    //        sectionStack.draw();
    //        infoPanel.draw();

        componentsSection.setExpanded(true);       
    }

    private void initDrawPane() {
        if (null == drawPane) {
            drawPane = new DrawPane();

            drawPane.setBackgroundColor("blue");
            drawPane.setCanDrag(true); // Enables draw items inside drawPane to drag
            drawPane.setCanAcceptDrop(true);
            drawPane.setShowEdges(true);
            drawPane.setEdgeSize(4);


            //            drawPane.setWidth100();
            //            drawPane.setHeight100();
            drawPane.setWidth(drawCanvas.getViewportWidth());
            drawPane.setHeight(drawCanvas.getViewportHeight());

            drawCanvas.addChild(drawPane);

        } else {
            drawPane.clear();
        }
        drawPane.redraw();
    }
}


Viewing all articles
Browse latest Browse all 4756