[client] update haxework. ep4

gulpfile.js

@@ -71,7 +71,11 @@ const client = new Project(
         main: 'ru.m.tankz.Client',
         assets: ['src/client/resources'],
         //flags: ['bitmap_text'],
-        flags: ['dom'],
+        flags: [
+            'dom',
+            //'dev_layout',
+            //'bitmap_text',
+        ],
     }),
     module.exports.generate
 ).bind(module, gulp);

src/client/haxe/ru/m/tankz/frame/StartGameFrame.yaml

@@ -5,6 +5,7 @@ views:
     $type: ru.m.tankz.frame.start.PresetsView
     geometry.size.width: 100%
     geometry.margin.top: 10
+    geometry.margin.bottom: -3
     layout.hAlign: center
   - $type: haxework.gui.HGroupView
     skin: $r:skin:border

src/client/haxe/ru/m/tankz/frame/start/PlayerView.hx

@@ -51,7 +51,10 @@ import ru.m.tankz.Type;
         }
         indexLabel.fontColor = cast color;
         var controlType = state.control.get(value);
-        control.skin = [new ButtonBitmapSkin(Assets.getBitmapData('resources/image/ui/control/${controlType}.png'))];
+        var image = Assets.getBitmapData('resources/image/ui/control/${controlType}.png');
+        control.skin = [new ButtonBitmapSkin(image)];
+        // ToDo:
+        //control.geometry.size.fixed = [image.width, image.height];
         return data;
     }
 

src/client/haxe/ru/m/tankz/render/Render.hx

@@ -53,8 +53,7 @@ class Render extends SpriteView {
         g.beginFill(0x000000);
         g.drawRect(0, 0, mapWidth, mapHeight);
         g.endFill();
-        geometry.size.content.width = mapWidth;
+        setContentSize(mapWidth, mapHeight);
-        geometry.size.content.height = mapHeight;
     }
 
     public function draw(game:Engine):Void {

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

@@ -1,5 +1,9 @@
 package ru.m.tankz.editor;
 
+import haxework.gui.IGroupView;
+import haxework.gui.ToggleButtonView;
+import haxework.gui.IView;
+import ru.m.tankz.editor.frame.LevelFrame;
 import ru.m.tankz.bundle.LevelBundle;
 import ru.m.tankz.bundle.ILevelBundle;
 import ru.m.tankz.bundle.ConfigBundle;
@@ -13,16 +17,21 @@ import haxework.log.TraceLogger;
 import haxework.provider.Provider;
 import haxework.resources.IResources;
 import haxework.resources.Resources;
-import ru.m.tankz.frame.StartGameFrame;
 #if flash import haxework.log.JSLogger; #end
 #if debug import haxework.log.SocketLogger; #end
 
 
-@:template('ru/m/tankz/editor/Editor.yaml', 'ru/m/tankz/editor/Style.yaml')
+@:template class EditorView extends VGroupView {
-class EditorView extends VGroupView {
     @:view public var switcher(default, null):FrameSwitcher;
-    @:view public var btn_level(default, null):ButtonView;
+    @:view public var tabs(default, null):IGroupView;
-    @:view public var btn_tank(default, null):ButtonView;
+
+    public function onPress(v:ButtonView):Void {
+        switcher.change(v.id);
+    }
+
+    private function onFrameSwitch(frame:IView<Dynamic>):Void {
+        for (view in tabs.views) cast(view, ToggleButtonView).on = view.id == frame.id;
+    }
 }
 
 class Editor {
@@ -45,27 +54,23 @@ class Editor {
     }
 
     private var view:EditorView;
+    @:provide private var resources:IResources;
 
     public function new() {
-        Provider.setFactory(IResources, Resources);
+        resources = new Resources();
 
         var font:Font = Font.enumerateFonts()[0];
-        Provider.get(IResources).text.put('font', 'Bookman Old Style');
+        resources.text.put('font', 'Bookman Old Style');
-        Provider.get(IResources).text.put('version', 'v${Const.VERSION} b${Const.BUILD}');
+        resources.text.put('version', 'v${Const.VERSION} b${Const.BUILD}');
+
+        Style.register();
 
         view = new EditorView();
         Root.bind(view);
-        view.content.stage.stageFocusRect = false;
 
         Provider.setFactory(IConfigBundle, ConfigBundle);
         Provider.setFactory(ILevelBundle, LevelBundle);
 
-        view.btn_level.onPress = this;
+        view.switcher.change(LevelFrame.ID);
-        view.btn_tank.onPress = this;
-        view.switcher.change(StartGameFrame.ID);
-    }
-
-    public function onPress(v:ButtonView):Void {
-        view.switcher.change(v.id.split('btn_').pop());
     }
 }

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

@@ -1,46 +0,0 @@
----
-$type: haxework.gui.VGroupView
-pWidth: 100
-pHeight: 100
-skin:
-  $type: haxework.gui.skin.BitmapSkin
-  image: "@asset:image:resources/image/ui/background.png"
-  fillType: REPEAT
-views:
-  # Tabs
-  - $type: haxework.gui.HGroupView
-    contentSize: true
-    views:
-      - id: btn_level
-        $type: haxework.gui.ButtonView
-        $style: button
-        text: Level
-      - id: btn_tank
-        $type: haxework.gui.ButtonView
-        $style: button
-        text: Tank
-  - $type: haxework.gui.SpriteView
-    height: 3
-    pWidth: 100
-    skin:
-      $type: haxework.gui.skin.ColorSkin
-      color: "#aaaaaa"
-  # Switcher
-  - id: switcher
-    $type: haxework.gui.frame.FrameSwitcher
-    pWidth: 100
-    pHeight: 100
-    paddings: 5
-    views:
-      - id: level
-        $type: ru.m.tankz.editor.frame.LevelFrame
-      - id: tank
-        $type: ru.m.tankz.editor.frame.TankFrame
-  # Version
-  - $type: haxework.gui.LabelView
-    $style: label
-    inLayout: false
-    contentSize: true
-    vAlign: BOTTOM
-    hAlign: RIGHT
-    text: "@res:text:version"

src/editor/haxe/ru/m/tankz/editor/EditorView.yaml

@@ -0,0 +1,41 @@
+---
+$type: haxework.gui.VGroupView
+skin: $r:skin:dark
+geometry.size.stretch: true
+layout.hAlign: center
+views:
+  # Tabs
+  - id: tabs
+    $type: haxework.gui.HGroupView
+    geometry.margin.bottom: -3
+    views:
+      - id: level
+        $type: haxework.gui.ToggleButtonView
+        skin: $r:skin:button.toggle
+        text: Level
+        +onPress: $this:onPress
+      - id: tank
+        $type: haxework.gui.ToggleButtonView
+        skin: $r:skin:button.toggle
+        text: Tank
+        +onPress: $this:onPress
+  # Switcher
+  - id: switcher
+    $type: haxework.gui.frame.FrameSwitcher
+    skin: $r:skin:border
+    +onSwitch: $this:onFrameSwitch
+    geometry.size.stretch: true
+    geometry.padding: 5
+    views:
+      - id: level
+        $type: ru.m.tankz.editor.frame.LevelFrame
+      - id: tank
+        $type: ru.m.tankz.editor.frame.TankFrame
+  # Version
+  - $type: haxework.gui.LabelView
+    skin: $r:skin:text
+    geometry.position: absolute
+    geometry.vAlign: bottom
+    geometry.hAlign: right
+    geometry.margin: 10
+    text: $r:text:version

src/editor/haxe/ru/m/tankz/editor/Style.yaml

@@ -1,15 +0,0 @@
----
-button:
-  height: 20
-  width: 150
-  margins: 2
-  skin:
-    $type: haxework.gui.skin.ButtonColorSkin
-    color: 0xaaff00
-    
-label: 
-  fontColor: 0xffffff
-  fontEmbed: false
-  fontFamily: '@res:text:fontName'
-  fontSize: 16
-  shadowColor: 0x000000

src/editor/haxe/ru/m/tankz/editor/frame/LevelFrame.hx

@@ -17,9 +17,7 @@ import ru.m.tankz.editor.level.MapEditView;
 import ru.m.tankz.editor.level.SpawnPointView;
 import ru.m.tankz.Type;
 
-
+@:template class LevelFrame extends VGroupView {
-@:template('ru/m/tankz/editor/frame/LevelFrame.yaml', 'ru/m/tankz/editor/Style.yaml')
-class LevelFrame extends VGroupView {
     public static inline var ID = 'level';
     public static inline var TAG = 'level';
 
@@ -35,11 +33,6 @@ class LevelFrame extends VGroupView {
     private var config:Config;
 
     public function init():Void {
-        gameClassicButton.onPress = this;
-        gameDotaButton.onPress = this;
-        openButton.onPress = this;
-        saveButton.onPress = this;
-
         var resetSelected = function() {
             for (v in brickList.items) {
                 cast(v, BrickView).selected = false;
@@ -49,19 +42,16 @@ class LevelFrame extends VGroupView {
             }
         };
 
-        brickList.dispatcher.addListener({
+        brickList.onItemSelect.connect(function(item:IListItemView<BrickConfig>) {
-            onListItemClick: function(item:IListItemView<BrickConfig>) {
             mapView.brush = Brush.BRICK(item.data);
             resetSelected();
-                cast(item, BrickView).selected = true;            }
+            cast(item, BrickView).selected = true;
         });
 
-        spawnPointList.dispatcher.addListener({
+        spawnPointList.onItemSelect.connect(function(item:IListItemView<SpawnPoint>) {
-            onListItemClick: function(item:IListItemView<SpawnPoint>) {
             mapView.brush = Brush.POINT(item.data);
             resetSelected();
             cast(item, SpawnPointView).selected = true;
-            }
         });
     }
 

src/editor/haxe/ru/m/tankz/editor/frame/LevelFrame.yaml

@@ -1,68 +1,47 @@
 ---
 $type: haxework.gui.VGroupView
-pWidth: 100
+geometry.size.stretch: true
-pHeight: 100
+layout.margin: 2
-layoutMargin: 2
+layout.vAlign: top
-layoutVAlign: TOP
+layout.hAlign: center
 views:
   - $type: haxework.gui.HGroupView
-    contentSize: true
     views:
       - id: gameClassicButton
         $type: haxework.gui.ButtonView
-        $style: button
+        skin: $r:skin:button.simple
         text: Classic
+        +onPress: $this:onPress
       - id: gameDotaButton
         $type: haxework.gui.ButtonView
-        $style: button
+        skin: $r:skin:button.simple
         text: DotA
+        +onPress: $this:onPress
   - $type: haxework.gui.HGroupView
-    contentSize: true
     views:
       - id: openButton
         $type: haxework.gui.ButtonView
-        $style: button
+        skin: $r:skin:button.simple
         text: Open
+        +onPress: $this:onPress
       - id: saveButton
         $type: haxework.gui.ButtonView
-        $style: button
+        skin: $r:skin:button.simple
         text: Save
+        +onPress: $this:onPress
   - id: fileNameLabel
     $type: haxework.gui.LabelView
-    contentSize: true
   - $type: haxework.gui.HGroupView
-    contentSize: true
     views:
       - id: spawnPointList
         $type: haxework.gui.list.VListView<SpawnPoint>
-        factory: "@class:ru.m.tankz.editor.level.SpawnPointView"
+        factory: { $class: ru.m.tankz.editor.level.SpawnPointView }
-        width: 56
+        geometry.size.width: 56
-        pHeight: 100
+        geometry.size.height: 100%
-        scroll:
-          $type: haxework.gui.list.VScrollView
-          width: 0
-          pHeight: 100
-          skin:
-            $type: haxework.gui.list.VScrollSkin
-        skin:
-          $type: haxework.gui.skin.ColorSkin
-          color: 0x000000
-          alpha: 0.0
       - id: mapView
         $type: ru.m.tankz.editor.level.MapEditView
-        contentSize: true
       - id: brickList
         $type: haxework.gui.list.VListView<BrickConfig>
-        factory: "@class:ru.m.tankz.editor.level.BrickView"
+        factory: { $class: ru.m.tankz.editor.level.BrickView }
-        width: 30
+        geometry.size.width: 30
-        pHeight: 100
+        geometry.size.height: 100%
-        scroll:
-          $type: haxework.gui.list.VScrollView
-          width: 0
-          pHeight: 100
-          skin:
-            $type: haxework.gui.list.VScrollSkin
-        skin:
-          $type: haxework.gui.skin.ColorSkin
-          color: 0x000000
-          alpha: 0.0

src/editor/haxe/ru/m/tankz/editor/frame/TankFrame.hx

@@ -5,9 +5,7 @@ import ru.m.tankz.editor.tank.TankView;
 import haxework.gui.InputView;
 import haxework.gui.HGroupView;
 
-
+@:template class TankFrame extends HGroupView {
-@:template('ru/m/tankz/editor/frame/TankFrame.yaml', 'ru/m/tankz/editor/Style.yaml')
-class TankFrame extends HGroupView {
     public static inline var ID = 'tank';
 
     @:view var tank(default, null):TankView;
@@ -15,17 +13,11 @@ class TankFrame extends HGroupView {
     @:view var colorG(default, null):InputView;
     @:view var colorB(default, null):InputView;
 
-    public function init():Void {
-        colorR.onKeyUp = this;
-        colorG.onKeyUp = this;
-        colorB.onKeyUp = this;
-    }
-
     public function onShow():Void {
-        onKeyUp(null);
+        onChange();
     }
 
-    public function onKeyUp(text:String):Void {
+    public function onChange(?_):Void {
         tank.color = Color.fromString('#${colorR.text}${colorG.text}${colorB.text}');
     }
 }

src/editor/haxe/ru/m/tankz/editor/frame/TankFrame.yaml

@@ -1,49 +1,45 @@
 ---
 $type: haxework.gui.HGroupView
-pWidth: 100
+geometry.size.stretch: true
-pHeight: 100
+layout.hAlign: center
 views:
   - $type: ru.m.tankz.editor.tank.TankView
-    contentSize: true
+    geometry.margin.right: 20
-    rightMargin: 20
+    image: "$asset:image:resources/image/tank/bc-0.png"
-    image: "@asset:image:resources/image/tank/bc-0.png"
+    color: 0xff4422
-    color: "#ff4422"
   - $type: ru.m.tankz.editor.tank.TankView
-    contentSize: true
+    geometry.margin.right: 20
-    rightMargin: 20
+    image: "$asset:image:resources/image/tank/bc-0.png"
-    image: "@asset:image:resources/image/tank/bc-0.png"
+    color: 0xf055a0
-    color: "#f055a0"
   - $type: ru.m.tankz.editor.tank.TankView
-    contentSize: true
+    geometry.margin.right: 20
-    rightMargin: 20
+    image: "$asset:image:resources/image/tank/bc-0.png"
-    image: "@asset:image:resources/image/tank/bc-0.png"
+    color: 0x2244ff
-    color: "#2244ff"
   - id: tank
     $type: ru.m.tankz.editor.tank.TankView
-    contentSize: true
+    geometry.margin.right: 20
-    rightMargin: 20
+    image: "$asset:image:resources/image/tank/bc-0.png"
-    image: "@asset:image:resources/image/tank/bc-0.png"
   - id: colorR
     $type: haxework.gui.InputView
-    width: 30
+    +onChange: $this:onChange
-    height: 20
+    geometry.size.fixed: [30, 20]
     text: "a0"
     skin:
-      $type: haxework.gui.skin.ColorSkin
+      - $type: haxework.gui.skin.ColorSkin
         color: 0xffffff
   - id: colorG
     $type: haxework.gui.InputView
-    width: 30
+    +onChange: $this:onChange
-    height: 20
+    geometry.size.fixed: [30, 20]
     text: "55"
     skin:
-      $type: haxework.gui.skin.ColorSkin
+      - $type: haxework.gui.skin.ColorSkin
         color: 0xffffff
   - id: colorB
     $type: haxework.gui.InputView
-    width: 30
+    +onChange: $this:onChange
-    height: 20
+    geometry.size.fixed: [30, 20]
     text: "f0"
     skin:
-      $type: haxework.gui.skin.ColorSkin
+      - $type: haxework.gui.skin.ColorSkin
         color: 0xffffff

src/editor/haxe/ru/m/tankz/editor/level/BrickView.hx

@@ -19,13 +19,12 @@ class BrickView extends SpriteView implements IListItemView<BrickConfig>  {
 
     public function new() {
         super();
-        width = 26;
+        setContentSize(26, 26);
-        height = 26;
+        selectView = createSelectView(geometry.size.content.width, geometry.size.content.height);
-        selectView = createSelectView(width, height);
         selectView.visible = false;
-        contentAsSprite.addChild(selectView);
+        content.addChild(selectView);
         imageView = new Bitmap();
-        contentAsSprite.addChild(imageView);
+        content.addChild(imageView);
     }
 
     private static function createSelectView(width:Float, height:Float):Shape {

src/editor/haxe/ru/m/tankz/editor/level/MapEditView.hx

@@ -107,23 +107,23 @@ class MapEditView extends SpriteView {
         upLayer = new Sprite();
         groundLayer = new Sprite();
         spawnLayer = new Sprite();
-        contentAsSprite.addChild(backgroundLayer);
+        content.addChild(backgroundLayer);
-        contentAsSprite.addChild(groundLayer);
+        content.addChild(groundLayer);
-        contentAsSprite.addChild(upLayer);
+        content.addChild(upLayer);
-        contentAsSprite.addChild(spawnLayer);
+        content.addChild(spawnLayer);
-        contentAsSprite.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
+        content.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
         reset();
     }
 
     private function onMouseDown(event:MouseEvent):Void {
-        contentAsSprite.stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
+        content.stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
-        contentAsSprite.stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
+        content.stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
         onMouseMove(event);
     }
 
     private function onMouseUp(event:MouseEvent):Void {
-        contentAsSprite.stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
+        content.stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
-        contentAsSprite.stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
+        content.stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
     }
 
     private function onMouseMove(event:MouseEvent):Void {
@@ -168,10 +168,6 @@ class MapEditView extends SpriteView {
         g.beginFill(0x000000);
         g.drawRect(0, 0, mapWidth, mapHeight);
         g.endFill();
-        if (contentSize) {
-            width = mapWidth;
-            height = mapHeight;
-        }
         g.lineStyle(1, 0x007700);
         for (x in 0...map.gridWidth) {
             g.moveTo(x * map.cellWidth, 0);
@@ -217,7 +213,11 @@ class MapEditView extends SpriteView {
     private function set_config(value:Config):Config {
         config = value;
         map = new LevelMap(config.map);
-        invalidate();
+        setContentSize(map.gridWidth * map.cellWidth, map.gridHeight * map.cellHeight);
+        //ToDo:
+        if (parent != null) {
+            parent.toUpdateParent();
+        }
         return config;
     }
 
@@ -240,7 +240,7 @@ class MapEditView extends SpriteView {
                 }
             }
         }
-        invalidate();
+        toUpdate();
         return value;
     }
 }

src/editor/haxe/ru/m/tankz/editor/level/SpawnPointView.hx

@@ -21,13 +21,12 @@ class SpawnPointView extends SpriteView implements IListItemView<SpawnPoint>  {
 
     public function new() {
         super();
-        width = 52;
+        setContentSize(52, 52);
-        height = 52;
+        selectView = createSelectView(geometry.size.content.width, geometry.size.content.height);
-        selectView = createSelectView(width, height);
         selectView.visible = false;
-        contentAsSprite.addChild(selectView);
+        content.addChild(selectView);
         imageView = new Bitmap();
-        contentAsSprite.addChild(imageView);
+        content.addChild(imageView);
     }
 
     private static function createSelectView(width:Float, height:Float):Shape {

src/editor/haxe/ru/m/tankz/editor/tank/TankView.hx

@@ -6,10 +6,8 @@ import flash.display.BitmapData;
 import flash.display.Bitmap;
 import haxework.gui.View;
 
+class TankView extends View<Bitmap> {
 
-class TankView extends View {
-
-    public var contentAsBitmap(get, null):Bitmap;
     public var image(default, set):BitmapData;
     public var color(default, set):Color;
 
@@ -17,28 +15,21 @@ class TankView extends View {
         super(new Bitmap());
     }
 
-    inline private function get_contentAsBitmap():Bitmap {
-        return cast content;
-    }
-
     inline private function get_image():BitmapData {
-        return contentAsBitmap.bitmapData;
+        return content.bitmapData;
     }
 
     inline private function set_image(value:BitmapData):BitmapData {
         image = value;
-        contentAsBitmap.bitmapData = BitmapUtil.colorize(image, color);
+        content.bitmapData = BitmapUtil.colorize(image, color);
-        if (contentSize) {
+        setContentSize(image.width, image.height);
-            width = image.width;
-            height = image.height;
-        }
         return image;
     }
 
     inline private function set_color(value:Color):Color {
         color = value;
         if (image != null) {
-            contentAsBitmap.bitmapData = BitmapUtil.colorize(image, color);
+            content.bitmapData = BitmapUtil.colorize(image, color);
         }
         return color;
     }