feat(editor): update editor ui

gulpfile.js

@@ -112,6 +112,7 @@ const editor = new Project(
     [
         Project.Platform.FLASH,
         Project.Platform.HTML5,
+        Project.Platform.LINUX,
     ],
     config.branch({
         name: 'editor',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tankz",
-  "version": "0.17.6",
+  "version": "0.18.0",
   "private": true,
   "devDependencies": {
     "dateformat": "^3.0.3",

src/client/haxe/ru/m/tankz/AppTheme.hx

@@ -97,6 +97,11 @@ class AppTheme extends Theme {
             "layout.vAlign" => VAlign.MIDDLE,
         ], ["light"]));
 
+        register(new Style("panel_button", [
+            "font.size" => fontSize.big,
+            "geometry.height" => SizeValue.fromString("100%"),
+        ], ["button"]));
+
         register(new Style("window", [
             "geometry.padding" => Box.fromFloat(2),
         ], ["dark", "border"]));
@@ -141,10 +146,21 @@ class AppTheme extends Theme {
             "skin.background.color" => red,
         ]));
 
-        register(new Style("button.menu", [
+        register(new Style("button.pack", [
+            "geometry.width" => SizeValue.fromString("35h"),
+            "geometry.height" => SizeValue.fromString("20h"),
+            "geometry.padding" => Box.fromFloat(5),
+            "layout.hAlign" => HAlign.CENTER,
+            "layout.vAlign" => VAlign.MIDDLE,
+            "content.buttonMode" => true,
+            "content.mouseChildren" => false,
             "skin.round" => 15,
         ], ["border", "light"]));
 
+        register(new Style("button.menu", [
+            "geometry.padding" => Box.fromArray([20, 10]),
+        ]));
+
         registerButton("settings", "cog-solid.svg");
         registerButton("close", "times-circle-solid.svg");
         registerButton("next", "arrow-alt-circle-right-solid.svg");

src/client/haxe/ru/m/tankz/view/MenuFrame.yaml

@@ -29,7 +29,6 @@ views:
             geometry.margin: [0, 10]
             visible: false
           - $type: hw.view.form.ButtonView
-            style: button.menu
             +onPress: ~switcher.change('record')
             text: Records
             visible: false

src/client/haxe/ru/m/tankz/view/ResultFrame.yaml

@@ -24,17 +24,18 @@ views:
     views:
       - $type: hw.view.SpriteView
         geometry.width: 50%
-      - id: levels
-        $type: hw.view.form.ButtonView
-        text: Levels
-        +onPress: ~levels()
       - id: restart
         $type: hw.view.form.ButtonView
+        style: panel_button
         text: Restart
         +onPress: ~restart()
       - id: next
         $type: hw.view.form.ButtonView
+        style: panel_button
         text: Next
         +onPress: ~next()
       - $type: hw.view.SpriteView
         geometry.width: 50%
+      - $type: hw.view.form.ButtonView
+        style: button.prev
+        +onPress: ~levels()

src/client/haxe/ru/m/tankz/view/StartFrame.hx

@@ -114,7 +114,8 @@ using ru.m.tankz.view.ViewUtil;
     private function presetViewFactory(index:Int, value:GamePreset):ButtonView {
         var result = new ButtonView();
         result.style = 'button${!progress.isPresetCompleted(start.level.id, value.id) ? ".active" : ""}';
-        result.text = value.name;
+        result.geometry.height = "100%";
+        result.text = value.name == "default" ? "start" : value.name;
         result.disabled = !progress.isPresetAvailable(start.level.id, value.id);
         return result;
     }

src/client/haxe/ru/m/tankz/view/StartFrame.yaml

@@ -28,6 +28,7 @@ views:
         $type: hw.view.data.DataView
         factory: ~presetViewFactory
         +onDataSelect: ~onPresetSelect
+        geometry.height: 100%
         layout:
           $type: hw.view.layout.HorizontalLayout
           hAlign: center

src/client/haxe/ru/m/tankz/view/common/PackView.yaml

@@ -1,12 +1,5 @@
 ---
-style: button.menu
+style: button.pack
-geometry.width: 35h
-geometry.height: 20h
-geometry.padding: 5
-layout.hAlign: center
-layout.vAlign: middle
-content.buttonMode: true
-content.mouseChildren: false
 views:
   - id: label
     $type: hw.view.form.LabelView

src/editor/haxe/ru/m/tankz/editor/Editor.hx

@@ -45,7 +45,7 @@ class Editor {
         L.i(TAG, 'Build: ${Const.BUILD}');
         resources.text.put("version", '${Const.VERSION}');
 
-        theme = new AppTheme();
+        theme = new EditorTheme();
         configBundle = new ConfigBundle();
         levelBundle = new CachedLevelBundle(new ClientLevelSource());
 

src/editor/haxe/ru/m/tankz/editor/EditorTheme.hx

@@ -0,0 +1,16 @@
+package ru.m.tankz.editor;
+
+import hw.view.utils.DrawUtil;
+import hw.view.theme.Theme;
+import hw.view.geometry.SizeValue;
+
+class EditorTheme extends AppTheme {
+  override private function reload():Void {
+    super.reload();
+    register(new Style("brush", [
+      "geometry.width" => SizeValue.fromString("6h"),
+      "geometry.height" => SizeValue.fromString("6h"),
+      "fillType" => FillType.CONTAIN,
+    ]));
+  }
+}

src/editor/haxe/ru/m/tankz/editor/view/PackFrame.yaml

@@ -8,7 +8,7 @@ views:
         views:
           - id: levels
             $type: hw.view.list.VListView
-            geometry.width: 200
+            geometry.width: 30h
             geometry.height: 100%
             factory: ~levelViewFactory
             +onItemSelect: ~onLevelSelect
@@ -24,22 +24,25 @@ views:
                 text: "Name:"
               - id: levelName
                 $type: hw.view.form.InputView
-                geometry.width: 300
+                layout.vAlign: middle
-                geometry.height: 26
+                geometry.width: "60%"
+                geometry.height: 100%
                 text: ""
               - $type: hw.view.form.LabelView
                 text: "Size:"
                 geometry.margin.left: 20
               - id: width
                 $type: hw.view.form.InputView
-                geometry.width: 50
+                layout.vAlign: middle
-                geometry.height: 26
+                geometry.width: "15%"
+                geometry.height: 100%
               - $type: hw.view.form.LabelView
                 text: "x"
               - id: height
                 $type: hw.view.form.InputView
-                geometry.width: 50
+                layout.vAlign: middle
-                geometry.height: 26
+                geometry.width: "15%"
+                geometry.height: 100%
               - $type: hw.view.form.ButtonView
                 style: button.start.small
                 +onPress: ~applySize()
@@ -73,26 +76,26 @@ views:
                 +onDataSelect: ~selectBrick
               - $type: hw.view.group.GroupView
                 geometry.stretch: true
-                overflow.x: crop
-                overflow.y: crop
                 views:
-                  - $type: ru.m.tankz.view.game.GameViewContainer
+                  - id: mapView
-                    views:
+                    $type: ru.m.tankz.editor.view.map.MapEditView
-                      - id: mapView
+                    geometry.stretch: true
-                        $type: ru.m.tankz.editor.view.map.MapEditView
   - $type: hw.view.group.HGroupView
     style: panel
     layout.margin: 10
     views:
       - $type: hw.view.form.ButtonView
+        style: panel_button
         text: Add
         +onPress: ~addLevel()
       - $type: hw.view.form.ButtonView
+        style: panel_button
         text: Remove
         +onPress: ~removeLevel()
       - $type: hw.view.SpriteView
         geometry.width: 100%
       - $type: hw.view.form.ButtonView
+        style: panel_button
         text: Save
         +onPress: ~save()
       - $type: hw.view.form.ButtonView

src/editor/haxe/ru/m/tankz/editor/view/PackListFrame.yaml

@@ -5,6 +5,7 @@ views:
     layout.margin: 10
     views:
       - $type: hw.view.form.ButtonView
+        style: button.menu
         text: New
         +onPress: ~create()
       - id: packs
@@ -15,6 +16,7 @@ views:
         factory: ~ru.m.tankz.editor.view.PackView.factory
         +onDataAction: ~onPackAction
       - $type: hw.view.form.ButtonView
+        style: button.menu
         text: Open
         +onPress: ~open()
   - $type: hw.view.group.HGroupView

src/editor/haxe/ru/m/tankz/editor/view/PackView.yaml

@@ -6,7 +6,8 @@ views:
     +onPress: ~export()
   - id: label
     $type: hw.view.form.ButtonView
-    geometry.width: 250
+    geometry.width: 50w
+    geometry.height: 100%
     +onPress: ~edit()
   - $type: hw.view.form.ButtonView
     style: button.close

src/editor/haxe/ru/m/tankz/editor/view/map/BrushView.hx

@@ -1,11 +1,12 @@
 package ru.m.tankz.editor.view.map;
 
+import hw.view.utils.DrawUtil.FillType;
 import flash.display.BitmapData;
 import flash.display.Shape;
 import hw.color.Color;
 import hw.view.ImageView;
 
-class BrushView<D> extends ImageView  {
+class BrushView<D> extends ImageView {
 
     public var data(default, set):D;
     public var selected(default, set):Bool;
@@ -20,6 +21,9 @@ class BrushView<D> extends ImageView  {
         if (data != null) {
             this.data = data;
         }
+        style = "brush";
+        // TODO: fillType in style
+        fillType = FillType.CONTAIN;
     }
 
     override public function update():Void {

src/editor/haxe/ru/m/tankz/editor/view/map/MapEditView.hx

@@ -81,7 +81,12 @@ enum Brush {
     }
 
     private function onMouseMove(event:MouseEvent):Void {
-        var b = map.getPointBrick(new Point(event.localX, event.localY));
+        var p = new Point(event.localX, event.localY);
+        p.x -= container.x;
+        p.y -= container.y;
+        p.x *= (1 / container.scaleX);
+        p.y *= (1 / container.scaleY);
+        var b = map.getPointBrick(p);
         if (b != null) {
             switch (brush) {
                 case Brush.POINT(point):

src/editor/haxe/ru/m/tankz/editor/view/popup/PackPopup.yaml

@@ -4,9 +4,7 @@ layout.vAlign: middle
 view:
   $type: hw.view.group.VGroupView
   layout.hAlign: center
-  geometry.width: 400
+  geometry.width: 60h
-  #geometry.stretch: true
-  #geometry.margin: 10
   style: window
   views:
     - $type: hw.view.group.HGroupView

tankz.code-workspace

@@ -11,7 +11,12 @@
         "HAXE_STD_PATH": "/home/shmyga/sdk/haxe/4.2.5/std"
       }
     },
-    "haxe.configurations": [["build/client/flash/haxe/debug.hxml"]],
+    "haxe.configurations": [
+      [
+        //"build/client/flash/haxe/debug.hxml",
+        "build/editor/flash/haxe/debug.hxml"
+      ]
+    ],
     "haxe.displayServer": {
       "arguments": [
         //"-v"
@@ -38,7 +43,12 @@
       {
         "id": "task",
         "description": "Please enter task name",
-        "options": ["client:flash:test", "server:cpp:test", "generate"],
+        "options": [
+          "client:flash:test",
+          "editor:flash:test",
+          "server:cpp:test",
+          "generate"
+        ],
         "type": "pickString"
       }
     ]