From 62ddbb683e06904d838c2cb30cce8819f5042f84 Mon Sep 17 00:00:00 2001 From: shmyga Date: Mon, 11 Mar 2019 17:02:34 +0300 Subject: [PATCH] add Color abstract --- demo/project.xml | 6 +-- demo/src/demo/DemoView.yaml | 24 ++++----- demo/src/demo/Theme.hx | 42 +++++---------- demo/src/demo/form/DataForm.yaml | 3 +- demo/src/demo/form/ListForm.yaml | 4 +- demo/src/demo/form/TailForm.yaml | 2 +- src/main/haxework/color/Color.hx | 53 ++++++++++++++++++ src/main/haxework/color/ColorUtil.hx | 26 +++++++++ src/main/haxework/gui/ScrollView.hx | 4 +- src/main/haxework/gui/list/ScrollBarSkin.hx | 54 ------------------- src/main/haxework/gui/skin/ButtonColorSkin.hx | 12 ++--- src/main/haxework/gui/skin/HScrollBarSkin.hx | 29 ++++++++++ src/main/haxework/gui/skin/Skin.hx | 24 ++++++--- src/main/haxework/gui/skin/TabColorSkin.hx | 6 +-- src/main/haxework/gui/skin/VScrollBarSkin.hx | 29 ++++++++++ src/main/haxework/gui/utils/ColorUtils.hx | 31 ----------- 16 files changed, 196 insertions(+), 153 deletions(-) create mode 100644 src/main/haxework/color/Color.hx create mode 100644 src/main/haxework/color/ColorUtil.hx delete mode 100644 src/main/haxework/gui/list/ScrollBarSkin.hx create mode 100644 src/main/haxework/gui/skin/HScrollBarSkin.hx create mode 100644 src/main/haxework/gui/skin/VScrollBarSkin.hx delete mode 100755 src/main/haxework/gui/utils/ColorUtils.hx diff --git a/demo/project.xml b/demo/project.xml index e43fc5a..3cb66a2 100644 --- a/demo/project.xml +++ b/demo/project.xml @@ -2,8 +2,8 @@ - - + + @@ -15,7 +15,7 @@ - + diff --git a/demo/src/demo/DemoView.yaml b/demo/src/demo/DemoView.yaml index ca93021..a555714 100644 --- a/demo/src/demo/DemoView.yaml +++ b/demo/src/demo/DemoView.yaml @@ -1,5 +1,5 @@ --- -skin: $r:skin:background +skinId: background geometry.size.stretch: true views: - $type: haxework.gui.ImageView @@ -15,25 +15,25 @@ views: views: - id: list_form $type: haxework.gui.ToggleButtonView - skin: $r:skin:tab + skinId: tab geometry.padding: [25, 8] text: List +onPress: "$code:switcher.change('list_form')" - id: tail_form $type: haxework.gui.ToggleButtonView - skin: $r:skin:tab + skinId: tab geometry.padding: [25, 8] text: Tail +onPress: "$code:switcher.change('tail_form')" - id: data_form $type: haxework.gui.ToggleButtonView - skin: $r:skin:tab + skinId: tab geometry.padding: [25, 8] text: Data +onPress: "$code:switcher.change('data_form')" - id: switcher $type: haxework.gui.frame.FrameSwitcher - skin: $r:skin:panel + skinId: panel animateFactory: { $class: haxework.animate.SlideAnimate } +onSwitch: $this:onFrameSwitch geometry.size.stretch: true @@ -41,15 +41,15 @@ views: views: - id: list_form $type: demo.form.ListForm - skin: $r:skin:background + skinId: background geometry.size.stretch: true - id: tail_form $type: demo.form.TailForm - skin: $r:skin:background + skinId: background geometry.size.stretch: true - id: data_form $type: demo.form.DataForm - skin: $r:skin:background + skinId: background geometry.size.stretch: true - $type: haxework.gui.HGroupView geometry.size.percent.width: 100 @@ -58,7 +58,7 @@ views: views: - $type: haxework.gui.ButtonView geometry.padding: [25, 8] - skin: $r:skin:button + skinId: button text: Color +onPress: "$code:choiceColor()" # separator @@ -66,14 +66,14 @@ views: geometry.size.stretch: true - $type: haxework.gui.ButtonView geometry.padding: [25, 8] - skin: $r:skin:button + skinId: button text: OK - $type: haxework.gui.ButtonView geometry.padding: [25, 8] - skin: $r:skin:button + skinId: button text: Apply - $type: haxework.gui.ButtonView geometry.padding: [25, 8] - skin: $r:skin:button + skinId: button text: Cancel +onPress: "$code:flash.system.System.exit(0)" diff --git a/demo/src/demo/Theme.hx b/demo/src/demo/Theme.hx index 7afe0ae..9bc205a 100644 --- a/demo/src/demo/Theme.hx +++ b/demo/src/demo/Theme.hx @@ -1,9 +1,7 @@ package demo; -import haxework.gui.utils.ColorUtils; -import haxework.gui.list.ScrollBarSkin; +import haxework.color.ColorUtil; import haxework.resources.IResources; -import haxework.gui.skin.ISkin; import haxework.gui.skin.Skin; import haxework.gui.skin.TextSkin; @@ -12,39 +10,23 @@ class Theme { @:provide static var resources:IResources; public static function setColor(color:Int, textColor:Int = 0xffffff):Void { - var text:ISkin = new TextSkin(textColor, 16, "Courirer"); - var background = Skin.color(0x00000); - var button:SkinSet = [ - Skin.buttonColor(color), - text, - ]; - var tab:SkinSet = [ - Skin.tabColor(color), - text, - ]; - var view:SkinSet = [ - Skin.color(color), - Skin.border(textColor), - text, - ]; - var scroll:SkinSet = [ - ScrollBarSkin.vertical(color, ColorUtils.diff(color, 128)), - ]; - var border = Skin.border(ColorUtils.multiply(color, 1.5), 1, 2); + var text = new TextSkin(textColor, 16, "Courirer"); + var background = Skin.color(0x000000); + var border = Skin.border(ColorUtil.multiply(color, 1.5), 1, 2); resources.skin.put("text0", [ - Skin.color(ColorUtils.diff(color, 128)), - new TextSkin(ColorUtils.diff(color, -128), 16, "Courirer"), + Skin.color(ColorUtil.diff(color, 128)), + new TextSkin(ColorUtil.diff(color, -128), 16, "Courirer"), ]); resources.skin.put("text1", [ - Skin.color(ColorUtils.diff(color, 64)), - new TextSkin(ColorUtils.diff(color, -128), 16, "Courirer"), + Skin.color(ColorUtil.diff(color, 64)), + new TextSkin(ColorUtil.diff(color, -128), 16, "Courirer"), ]); resources.skin.put("text", resources.skin.get("text0")); resources.skin.put("background", [background]); - resources.skin.put("button", button); - resources.skin.put("tab", tab); - resources.skin.put("view", view); - resources.skin.put("scroll", scroll); + resources.skin.put("button", [Skin.buttonColor(color), text]); + resources.skin.put("tab", [Skin.tabColor(color), text]); + resources.skin.put("view", [Skin.color(color), border, text]); + resources.skin.put("scroll", [Skin.scrollVertical(color, ColorUtil.diff(color, 128))]); resources.skin.put("border", [border]); resources.skin.put("panel", [background, border]); } diff --git a/demo/src/demo/form/DataForm.yaml b/demo/src/demo/form/DataForm.yaml index 11fa7ed..e9a10a1 100644 --- a/demo/src/demo/form/DataForm.yaml +++ b/demo/src/demo/form/DataForm.yaml @@ -1,5 +1,4 @@ --- -skin: $r:skin:background views: - $type: haxework.gui.ScrollView geometry.size.stretch: true @@ -13,4 +12,4 @@ views: data: $r:any:data scroll: $type: haxework.gui.list.VScrollBarView - skin: $r:skin:scroll + skinId: scroll diff --git a/demo/src/demo/form/ListForm.yaml b/demo/src/demo/form/ListForm.yaml index 50c2640..139426d 100644 --- a/demo/src/demo/form/ListForm.yaml +++ b/demo/src/demo/form/ListForm.yaml @@ -7,7 +7,5 @@ views: geometry.size.stretch: true scroll: $type: haxework.gui.list.VScrollBarView - skin: $r:skin:scroll - geometry.size.height: 100% - geometry.size.width: 10 + skinId: scroll data: $r:any:data50 diff --git a/demo/src/demo/form/TailForm.yaml b/demo/src/demo/form/TailForm.yaml index 4e4a2fb..7cd0b95 100644 --- a/demo/src/demo/form/TailForm.yaml +++ b/demo/src/demo/form/TailForm.yaml @@ -13,4 +13,4 @@ views: data: $r:any:data scroll: $type: haxework.gui.list.VScrollBarView - skin: $r:skin:scroll + skinId: scroll diff --git a/src/main/haxework/color/Color.hx b/src/main/haxework/color/Color.hx new file mode 100644 index 0000000..931f43e --- /dev/null +++ b/src/main/haxework/color/Color.hx @@ -0,0 +1,53 @@ +package haxework.color; + +abstract Color(Int) { + public var alpha(get, never):Int; + public var red(get, never):Int; + public var green(get, never):Int; + public var blue(get, never):Int; + public var zero(get, never):Bool; + + public inline function new(value:Int) { + this = value; + } + + private inline function get_alpha():Int { + return (this >> 24) & 255; + } + + private inline function get_red():Int { + return (this >> 16) & 255; + } + + private inline function get_green():Int { + return (this >> 8) & 255; + } + + private inline function get_blue():Int { + return this & 255; + } + + private inline function get_zero():Bool { + return green == 0 && red == 0 && blue == 0; + } + + @:from static public inline function fromArray(value:Array):Color { + return new Color((value[0] << 24) + (value[1] << 16) + (value[2] << 8) + value[3]); + } + + @:from static public inline function fromInt(value:Int):Color { + return new Color(value); + } + + @:to public inline function toInt():Int { + return this; + } + + @:from static public inline function fromString(value:String):Color { + return new Color(Std.parseInt('0x${value.split('#').pop()}')); + } + + @:to public inline function toString():String { + return StringTools.hex(this); + } +} diff --git a/src/main/haxework/color/ColorUtil.hx b/src/main/haxework/color/ColorUtil.hx new file mode 100644 index 0000000..02db37f --- /dev/null +++ b/src/main/haxework/color/ColorUtil.hx @@ -0,0 +1,26 @@ +package haxework.color; + +class ColorUtil { + + public static function floor(colorPart:Float):Int { + return Std.int(Math.max(0, Math.min(255, colorPart))); + } + + public static function multiply(color:Color, m:Float):Color { + return [ + color.alpha, + floor(color.red * m), + floor(color.green * m), + floor(color.blue * m), + ]; + } + + public static function diff(color:Color, d:Int):Color { + return [ + color.alpha, + floor(color.red + d), + floor(color.green + d), + floor(color.blue + d), + ]; + } +} diff --git a/src/main/haxework/gui/ScrollView.hx b/src/main/haxework/gui/ScrollView.hx index b804d27..5337506 100644 --- a/src/main/haxework/gui/ScrollView.hx +++ b/src/main/haxework/gui/ScrollView.hx @@ -1,9 +1,9 @@ package haxework.gui; -import haxework.gui.core.Geometry.Position; import flash.display.DisplayObject; import flash.display.Sprite; import flash.events.MouseEvent; +import haxework.gui.core.Geometry.Position; import haxework.gui.list.ScrollBarView; import haxework.gui.skin.Skin; import haxework.signal.Signal; @@ -28,7 +28,7 @@ class ScrollView extends HGroupView { private function onMouseWheelEvent(event:MouseEvent):Void { #if flash event.preventDefault(); #end - position -= event.delta / 50; + position -= event.delta * scroll.ratio / 3; } private function set_view(value:IView):IView { diff --git a/src/main/haxework/gui/list/ScrollBarSkin.hx b/src/main/haxework/gui/list/ScrollBarSkin.hx deleted file mode 100644 index 1498c77..0000000 --- a/src/main/haxework/gui/list/ScrollBarSkin.hx +++ /dev/null @@ -1,54 +0,0 @@ -package haxework.gui.list; - -import haxework.gui.skin.ISkin; - -class HScrollBarSkin implements ISkin { - public var foreColor(default, default):Int; - public var backColor(default, default):Int; - - public function new(foreColor:Int = 0, backColor:Int = 0) { - this.foreColor = foreColor; - this.backColor = backColor; - } - - public function draw(view:ScrollBarView):Void { - if (view.ratio < 1) { - view.content.graphics.beginFill(backColor); - view.content.graphics.drawRect(0, 0, view.width, view.height); - view.content.graphics.beginFill(foreColor); - view.content.graphics.drawRect(view.width * view.position, 0, view.width * view.ratio, view.height); - view.content.graphics.endFill(); - } - } -} - -class VScrollBarSkin implements ISkin { - public var foreColor(default, default):Int; - public var backColor(default, default):Int; - - public function new(foreColor:Int = 0, backColor:Int = 0) { - this.foreColor = foreColor; - this.backColor = backColor; - } - - public function draw(view:ScrollBarView):Void { - if (view.ratio < 1) { - view.content.graphics.beginFill(backColor); - view.content.graphics.drawRect(0, 0, view.width, view.height); - view.content.graphics.beginFill(foreColor); - view.content.graphics.drawRect(0, view.height * view.position, view.width, view.height * view.ratio); - view.content.graphics.endFill(); - } - } -} - -class ScrollBarSkin { - - public static function horizontal(foreColor:Int = 0xffffff, backColor:Int = 0x707070) { - return new HScrollBarSkin(foreColor, backColor); - } - - public static function vertical(foreColor:Int = 0xffffff, backColor:Int = 0x707070) { - return new VScrollBarSkin(foreColor, backColor); - } -} diff --git a/src/main/haxework/gui/skin/ButtonColorSkin.hx b/src/main/haxework/gui/skin/ButtonColorSkin.hx index 811511e..116f9ab 100644 --- a/src/main/haxework/gui/skin/ButtonColorSkin.hx +++ b/src/main/haxework/gui/skin/ButtonColorSkin.hx @@ -1,7 +1,7 @@ package haxework.gui.skin; import flash.display.Graphics; -import haxework.gui.utils.ColorUtils; +import haxework.color.ColorUtil; import haxework.gui.ButtonView.ButtonState; class ButtonColorSkin implements ISkin { @@ -19,9 +19,9 @@ class ButtonColorSkin implements ISkin { private function set_color(value:Int):Int { colors = new Map(); colors.set(ButtonState.UP, value); - colors.set(ButtonState.DOWN, ColorUtils.diff(value, -32)); - colors.set(ButtonState.OVER, ColorUtils.diff(value, 32)); - //disable = ColorUtils.multiply(value, 0.6); + colors.set(ButtonState.DOWN, ColorUtil.diff(value, -32)); + colors.set(ButtonState.OVER, ColorUtil.diff(value, 32)); + //disable = ColorUtil.multiply(value, 0.6); return value; } @@ -29,12 +29,12 @@ class ButtonColorSkin implements ISkin { var color:Int = selectColor(view); if (Std.is(view, ToggleButtonView)) { if (!cast(view, ToggleButtonView).on) { - color = ColorUtils.multiply(color, 0.5); + color = ColorUtil.multiply(color, 0.5); } } var graphics:Graphics = view.content.graphics; graphics.beginFill(color, alpha); - graphics.lineStyle(2, ColorUtils.multiply(color, 1.5)); + graphics.lineStyle(2, ColorUtil.multiply(color, 1.5)); graphics.drawRoundRect(1, 1, view.width - 2, view.height - 2, 5, 5); } diff --git a/src/main/haxework/gui/skin/HScrollBarSkin.hx b/src/main/haxework/gui/skin/HScrollBarSkin.hx new file mode 100644 index 0000000..0839dd0 --- /dev/null +++ b/src/main/haxework/gui/skin/HScrollBarSkin.hx @@ -0,0 +1,29 @@ +package haxework.gui.skin; + +import haxework.color.ColorUtil; +import haxework.gui.list.ScrollBarView; + +class HScrollBarSkin implements ISkin { + public var foreColor(default, default):Int; + public var backColor(default, default):Int; + + public function new(foreColor:Int = 0, backColor:Int = 0) { + this.foreColor = foreColor; + this.backColor = backColor; + } + + public function draw(view:ScrollBarView):Void { + if (view.ratio < 1) { + var graphics = view.content.graphics; + var size = Math.max(view.width * view.ratio, 15); + var position = Math.min(view.width * view.position, view.width - size); + graphics.beginFill(backColor); + graphics.lineStyle(2, ColorUtil.multiply(foreColor, 1.5)); + graphics.drawRect(0, 0, view.width, view.height); + graphics.beginFill(foreColor); + graphics.lineStyle(); + graphics.drawRect(position, 0, size, view.height); + graphics.endFill(); + } + } +} diff --git a/src/main/haxework/gui/skin/Skin.hx b/src/main/haxework/gui/skin/Skin.hx index b30d8b2..596db6a 100644 --- a/src/main/haxework/gui/skin/Skin.hx +++ b/src/main/haxework/gui/skin/Skin.hx @@ -4,19 +4,19 @@ import flash.display.BitmapData; class Skin { - public static function size(width:Float, height:Float): ISkin { + public static function size(width:Float, height:Float):ISkin { return new SizeSkin(width, height); } - public static function bitmap(image:BitmapData): ISkin { + public static function bitmap(image:BitmapData):ISkin { return new BitmapSkin(image); } - public static function color(color: Int, alpha: Float = 1.0): ISkin { + public static function color(color:Int, alpha:Float = 1.0):ISkin { return new ColorSkin(color, alpha); } - public static function border(color: Int, alpha: Float = 1.0, tickness: Float = 1.0): ISkin { + public static function border(color:Int, alpha:Float = 1.0, tickness:Float = 1.0):ISkin { return new BorderSkin(color, alpha, tickness); } @@ -24,11 +24,23 @@ class Skin { return new TextSkin(fontColor, fontSize, fontFamily); } - public static function buttonColor(color: Int, alpha: Float = 1.0): ISkin { + public static function buttonColor(color:Int, alpha:Float = 1.0):ISkin { return new ButtonColorSkin(color, alpha); } - public static function tabColor(color: Int, alpha: Float = 1.0): ISkin { + public static function buttonBitmap(image:BitmapData):ISkin { + return new ButtonBitmapSkin(image); + } + + public static function tabColor(color:Int, alpha:Float = 1.0):ISkin { return new TabColorSkin(color, alpha); } + + public static function scrollHorizontal(foreColor:Int, backColor:Int) { + return new HScrollBarSkin(foreColor, backColor); + } + + public static function scrollVertical(foreColor:Int, backColor:Int) { + return new VScrollBarSkin(foreColor, backColor); + } } diff --git a/src/main/haxework/gui/skin/TabColorSkin.hx b/src/main/haxework/gui/skin/TabColorSkin.hx index 482e669..bd7c01d 100644 --- a/src/main/haxework/gui/skin/TabColorSkin.hx +++ b/src/main/haxework/gui/skin/TabColorSkin.hx @@ -1,7 +1,7 @@ package haxework.gui.skin; import flash.display.Graphics; -import haxework.gui.utils.ColorUtils; +import haxework.color.ColorUtil; class TabColorSkin extends ButtonColorSkin { @@ -9,12 +9,12 @@ class TabColorSkin extends ButtonColorSkin { var color:Int = selectColor(view); if (Std.is(view, ToggleButtonView)) { if (!cast(view, ToggleButtonView).on) { - color = ColorUtils.multiply(color, 0.5); + color = ColorUtil.multiply(color, 0.5); } } var graphics:Graphics = view.content.graphics; graphics.beginFill(color, alpha); - graphics.lineStyle(2, ColorUtils.multiply(color, 1.5)); + graphics.lineStyle(2, ColorUtil.multiply(color, 1.5)); graphics.drawRoundRectComplex(1, 1, view.width - 2, view.height - 2, 5, 5, 0, 0); } } diff --git a/src/main/haxework/gui/skin/VScrollBarSkin.hx b/src/main/haxework/gui/skin/VScrollBarSkin.hx new file mode 100644 index 0000000..5aa591a --- /dev/null +++ b/src/main/haxework/gui/skin/VScrollBarSkin.hx @@ -0,0 +1,29 @@ +package haxework.gui.skin; + +import haxework.color.ColorUtil; +import haxework.gui.list.ScrollBarView; + +class VScrollBarSkin implements ISkin { + public var foreColor(default, default):Int; + public var backColor(default, default):Int; + + public function new(foreColor:Int = 0, backColor:Int = 0) { + this.foreColor = foreColor; + this.backColor = backColor; + } + + public function draw(view:ScrollBarView):Void { + if (view.ratio < 1) { + var graphics = view.content.graphics; + var size = Math.max(view.height * view.ratio, 15); + var position = Math.min(view.height * view.position, view.height - size); + graphics.beginFill(backColor); + graphics.lineStyle(2, ColorUtil.multiply(foreColor, 1.5)); + graphics.drawRect(0, 0, view.width, view.height); + graphics.beginFill(foreColor); + graphics.lineStyle(); + graphics.drawRect(0, position, view.width, size); + graphics.endFill(); + } + } +} diff --git a/src/main/haxework/gui/utils/ColorUtils.hx b/src/main/haxework/gui/utils/ColorUtils.hx deleted file mode 100755 index e01a9a6..0000000 --- a/src/main/haxework/gui/utils/ColorUtils.hx +++ /dev/null @@ -1,31 +0,0 @@ -package haxework.gui.utils; - -class ColorUtils { - - public static function multiply(color:Int, m:Float):Int { - var rgb:Array = color2rgb(color); - var red:Int = cast Math.min(255, Math.round(rgb[0] * m)); - var green:Int = cast Math.min(255, Math.round(rgb[1] * m)); - var blue:Int = cast Math.min(255, Math.round(rgb[2] * m)); - return rgb2color(red, green, blue); - } - - public static function diff(color:Int, d:Int):Int { - var rgb:Array = color2rgb(color); - var red:Int = cast Math.max(0, Math.min(255, rgb[0] + d)); - var green:Int = cast Math.max(0, Math.min(255, rgb[1] + d)); - var blue:Int = cast Math.max(0, Math.min(255, rgb[2] + d)); - return rgb2color(red, green, blue); - } - - public static function rgb2color(red:Int, green:Int, blue:Int):Int { - return (red << 16) + (green << 8) + blue; - } - - public static function color2rgb(color:Int):Array { - var red:Int = ((color & 0xFF0000) >>> 16); - var green:Int = ((color & 0x00FF00) >> 8); - var blue:Int = (color & 0x0000FF); - return [red, green, blue]; - } -}