Full zoom+pan in tech tree and campaign

core/src/io/anuke/mindustry/ui/dialogs/DeployDialog.java

@@ -5,9 +5,11 @@ import io.anuke.arc.collection.*;
 import io.anuke.arc.function.*;
 import io.anuke.arc.graphics.*;
 import io.anuke.arc.graphics.g2d.*;
+import io.anuke.arc.input.*;
 import io.anuke.arc.math.*;
 import io.anuke.arc.math.geom.*;
 import io.anuke.arc.scene.*;
+import io.anuke.arc.scene.event.*;
 import io.anuke.arc.scene.style.*;
 import io.anuke.arc.scene.ui.*;
 import io.anuke.arc.scene.ui.layout.*;
@@ -30,6 +32,7 @@ public class DeployDialog extends FloatingDialog{
     private ObjectSet<ZoneNode> nodes = new ObjectSet<>();
     private ZoneInfoDialog info = new ZoneInfoDialog();
     private Rectangle bounds = new Rectangle();
+    private View view = new View();
 
     public DeployDialog(){
         super("", Styles.fullDialog);
@@ -47,6 +50,51 @@ public class DeployDialog extends FloatingDialog{
         buttons.addImageTextButton("$techtree", Icon.tree, () -> ui.tech.show()).size(230f, 64f);
 
         shown(this::setup);
+
+        //view input.
+
+        addListener(new InputListener(){
+            @Override
+            public boolean scrolled(InputEvent event, float x, float y, float amountX, float amountY){
+                view.setScale(Mathf.clamp(view.getScaleX() - amountY / 40f, 0.25f, 1f));
+                view.setOrigin(Align.center);
+                view.setTransform(true);
+                return true;
+            }
+
+            @Override
+            public boolean mouseMoved(InputEvent event, float x, float y){
+                view.requestScroll();
+                return super.mouseMoved(event, x, y);
+            }
+        });
+
+        addListener(new ElementGestureListener(){
+            @Override
+            public void zoom(InputEvent event, float initialDistance, float distance){
+                if(view.lastZoom < 0){
+                    view.lastZoom = view.getScaleX();
+                }
+
+                view.setScale(Mathf.clamp(distance / initialDistance * view.lastZoom, 0.25f, 1f));
+                view.setOrigin(Align.center);
+                view.setTransform(true);
+            }
+
+            @Override
+            public void touchUp(InputEvent event, float x, float y, int pointer, KeyCode button){
+                view.lastZoom = view.getScaleX();
+            }
+
+            @Override
+            public void pan(InputEvent event, float x, float y, float deltaX, float deltaY){
+                view.panX += deltaX / view.getScaleX();
+                view.panY += deltaY / view.getScaleY();
+                view.moved = true;
+                view.clamp();
+            }
+        });
+
     }
 
     public void setup(){
@@ -71,7 +119,7 @@ public class DeployDialog extends FloatingDialog{
             update(() -> {
                 setOrigin(Align.center);
                 time[0] += Core.graphics.getDeltaTime() * 10f;
-                setTranslation(Mathf.sin(time[0], 60f, 70f) + panX / 30f, Mathf.cos(time[0], 140f, 80f) + (panY + 200) / 30f);
+                setTranslation(Mathf.sin(time[0], 60f, 70f) + view.panX / 30f, Mathf.cos(time[0], 140f, 80f) + (view.panY + 200) / 30f);
             });
         }}.setScaling(Scaling.fit));
 
@@ -141,7 +189,7 @@ public class DeployDialog extends FloatingDialog{
                 }).width(size).height(50f).padTop(3);
             }));
         }else{
-            stack.add(new View());
+            stack.add(view = new View());
         }
 
         stack.add(new ItemsDisplay());
@@ -158,6 +206,9 @@ public class DeployDialog extends FloatingDialog{
                 }
             }
         }
+
+        view.setOrigin(Align.center);
+        view.setTransform(true);
     }
 
     boolean hidden(Zone zone){
@@ -166,7 +217,11 @@ public class DeployDialog extends FloatingDialog{
 
     void buildButton(Zone zone, Button button){
         button.setDisabled(() -> hidden(zone));
-        button.clicked(() -> info.show(zone));
+        button.clicked(() -> {
+            if(!view.moved){
+                info.show(zone);
+            }
+        });
 
         if(zone.unlocked() && !hidden(zone)){
             button.labelWrap(zone.localizedName()).style(Styles.outlineLabel).width(140).growX().get().setAlignment(Align.center);
@@ -178,10 +233,9 @@ public class DeployDialog extends FloatingDialog{
         }
     }
 
-    //should be static variables of View, but that's impossible
-    static float panX = 0, panY = -200;
-
     class View extends Group{
+        float panX = 0, panY = -200, lastZoom = -1;
+        boolean moved = false;
 
         {
             for(ZoneNode node : nodes){
@@ -201,11 +255,7 @@ public class DeployDialog extends FloatingDialog{
                 addChild(stack);
             }
 
-            dragged((x, y) -> {
+            released(() -> moved = false);
-                panX += x;
-                panY += y;
-                clamp();
-            });
         }
 
         void clamp(){
@@ -221,9 +271,9 @@ public class DeployDialog extends FloatingDialog{
         }
 
         @Override
-        public void draw(){
+        public void drawChildren(){
             clamp();
-            float offsetX = panX + width / 2f + x, offsetY = panY + height / 2f + y;
+            float offsetX = panX + width / 2f, offsetY = panY + height / 2f;
 
             for(ZoneNode node : nodes){
                 for(ZoneNode child : node.allChildren){
@@ -234,7 +284,7 @@ public class DeployDialog extends FloatingDialog{
             }
 
             Draw.reset();
-            super.draw();
+            super.drawChildren();
         }
     }
 

core/src/io/anuke/mindustry/ui/dialogs/TechTreeDialog.java

@@ -32,13 +32,14 @@ public class TechTreeDialog extends FloatingDialog{
     private TechTreeNode root = new TechTreeNode(TechTree.root, null);
     private Rectangle bounds = new Rectangle();
     private ItemsDisplay items;
+    private View view;
 
     public TechTreeDialog(){
         super("");
 
         titleTable.remove();
         margin(0f).marginBottom(8);
-        cont.stack(new View(), items = new ItemsDisplay()).grow();
+        cont.stack(view = new View(), items = new ItemsDisplay()).grow();
 
         shown(() -> {
             checkNodes(root);
@@ -53,6 +54,50 @@ public class TechTreeDialog extends FloatingDialog{
             hide();
             ui.database.show();
         }).size(210f, 64f);
+
+        //scaling/drag input
+
+        addListener(new InputListener(){
+            @Override
+            public boolean scrolled(InputEvent event, float x, float y, float amountX, float amountY){
+                view.setScale(Mathf.clamp(view.getScaleX() - amountY / 40f, 0.25f, 1f));
+                view.setOrigin(Align.center);
+                view.setTransform(true);
+                return true;
+            }
+
+            @Override
+            public boolean mouseMoved(InputEvent event, float x, float y){
+                view.requestScroll();
+                return super.mouseMoved(event, x, y);
+            }
+        });
+
+        addListener(new ElementGestureListener(){
+            @Override
+            public void zoom(InputEvent event, float initialDistance, float distance){
+                if(view.lastZoom < 0){
+                    view.lastZoom = view.getScaleX();
+                }
+
+                view.setScale(Mathf.clamp(distance / initialDistance * view.lastZoom, 0.25f, 1f));
+                view.setOrigin(Align.center);
+                view.setTransform(true);
+            }
+
+            @Override
+            public void touchUp(InputEvent event, float x, float y, int pointer, KeyCode button){
+                view.lastZoom = view.getScaleX();
+            }
+
+            @Override
+            public void pan(InputEvent event, float x, float y, float deltaX, float deltaY){
+                view.panX += deltaX / view.getScaleX();
+                view.panY += deltaY / view.getScaleY();
+                view.moved = true;
+                view.clamp();
+            }
+        });
     }
 
     void treeLayout(){
@@ -147,6 +192,8 @@ public class TechTreeDialog extends FloatingDialog{
                 ImageButton button = new ImageButton(node.node.block.icon(Cicon.medium), Styles.nodei);
                 button.visible(() -> node.visible);
                 button.clicked(() -> {
+                    if(moved) return;
+
                     if(mobile){
                         hoverNode = button;
                         rebuild();
@@ -183,7 +230,6 @@ public class TechTreeDialog extends FloatingDialog{
                 });
                 button.touchable(() -> !node.visible ? Touchable.disabled : Touchable.enabled);
                 button.setUserObject(node.node);
-                button.tapped(() -> moved = false);
                 button.setSize(nodeSize);
                 button.update(() -> {
                     float offset = (Core.graphics.getHeight() % 2) / 2f;
@@ -206,47 +252,9 @@ public class TechTreeDialog extends FloatingDialog{
                 });
             }
 
-            TechTreeDialog.this.dragged((x, y) -> {
-                moved = true;
-                panX += x / getScaleX();
-                panY += y / getScaleY();
-                clamp();
-            });
-
-            addListener(new InputListener(){
-                @Override
-                public boolean scrolled(InputEvent event, float x, float y, float amountX, float amountY){
-                    setScale(Mathf.clamp(getScaleX() - amountY / 40f, 0.2f, 1f));
-                    setOrigin(Align.center);
-                    setTransform(true);
-                    return true;
-                }
-
-                @Override
-                public boolean mouseMoved(InputEvent event, float x, float y){
-                    requestScroll();
-                    return super.mouseMoved(event, x, y);
-                }
-            });
-
-            addListener(new ElementGestureListener(){
-                @Override
-                public void zoom(InputEvent event, float initialDistance, float distance){
-                    if(lastZoom < 0){
-                        lastZoom = getScaleX();
-                    }
-
-                    setScale(Mathf.clamp(distance / initialDistance * lastZoom, 0.2f, 1f));
-                }
-
-                @Override
-                public void touchUp(InputEvent event, float x, float y, int pointer, KeyCode button){
-                    lastZoom = getScaleX();
-                }
-            });
-
             setOrigin(Align.center);
             setTransform(true);
+            released(() -> moved = false);
         }
 
         void clamp(){