├── .gitignore ├── README.md ├── Source ├── minimalcomps │ └── designer │ │ ├── event │ │ ├── ComponentEvent.hx │ │ └── PropertyEvent.hx │ │ ├── panel │ │ ├── property │ │ │ ├── AbstractProperty.hx │ │ │ ├── InputTextProperty.hx │ │ │ ├── ColorChooserProperty.hx │ │ │ ├── CheckBoxProperty.hx │ │ │ └── NumericStepperProperty.hx │ │ ├── AccordionPropertyPanel.hx │ │ ├── FPSMeterPropertyPanel.hx │ │ ├── ColorChooserPropertyPanel.hx │ │ ├── BarChartPropertyPanel.hx │ │ ├── PieChartPropertyPanel.hx │ │ ├── LineChartPropertyPanel.hx │ │ ├── LabelPropertyPanel.hx │ │ ├── CheckBoxPropertyPanel.hx │ │ ├── WheelMenuPropertyPanel.hx │ │ ├── KnobPropertyPanel.hx │ │ ├── MeterPropertyPanel.hx │ │ ├── IndicatorLightPropertyPanel.hx │ │ ├── UISliderPropertyPanel.hx │ │ ├── WindowPropertyPanel.hx │ │ ├── RangeSliderPropertyPanel.hx │ │ ├── PropertyPanel.hx │ │ └── ComboBoxPropertyPanel.hx │ │ ├── data │ │ └── DataProvider.hx │ │ ├── ui │ │ ├── ComponentViewer.hx │ │ ├── ComponentProperties.hx │ │ └── ComponentLibrary.hx │ │ └── Designer.hx └── Main.hx ├── project.xml ├── LICENSE ├── MinimalcompsOpenflDesigner.hxproj └── Assets └── openfl.svg /.gitignore: -------------------------------------------------------------------------------- 1 | # Haxe exports 2 | Export 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Minimal Components OpenFL Designer 2 | 3 | This is a compendium project to the [minimalcomps](https://github.com/jasonsturges/minimalcomps-openfl) haxelib enabling exploration of available components. 4 | 5 | ![screen-capture](https://user-images.githubusercontent.com/1213591/106400463-2a66b700-63e4-11eb-945a-93896d8a2d6b.png) 6 | 7 | Web demo: 8 | https://jasonsturges.github.io/minimalcomps-openfl-designer/ 9 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/event/ComponentEvent.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.event; 2 | 3 | import openfl.events.Event; 4 | 5 | 6 | class ComponentEvent extends Event { 7 | 8 | //------------------------------ 9 | // constants 10 | //------------------------------ 11 | 12 | public static inline var CHANGE:String = "minimalcomps.designer.event.ComponentEvent.CHANGE"; 13 | 14 | 15 | //------------------------------ 16 | // model 17 | //------------------------------ 18 | 19 | public var classType:Class; 20 | 21 | 22 | //------------------------------ 23 | // lifecycle 24 | //------------------------------ 25 | 26 | public function new(type:String, classType:Class) { 27 | super(type); 28 | 29 | this.classType = classType; 30 | } 31 | 32 | } -------------------------------------------------------------------------------- /Source/minimalcomps/designer/event/PropertyEvent.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.event; 2 | 3 | import openfl.events.Event; 4 | 5 | 6 | class PropertyEvent extends Event { 7 | 8 | //------------------------------ 9 | // constants 10 | //------------------------------ 11 | 12 | public static inline var CHANGE:String = "minimalcomps.designer.event.PropertyEvent.CHANGE"; 13 | 14 | 15 | //------------------------------ 16 | // model 17 | //------------------------------ 18 | 19 | public var name:String; 20 | public var value:T; 21 | 22 | 23 | //------------------------------ 24 | // lifecycle 25 | //------------------------------ 26 | 27 | public function new(type:String, name:String, value:T) { 28 | super(type, true); 29 | 30 | this.name = name; 31 | this.value = value; 32 | } 33 | 34 | } -------------------------------------------------------------------------------- /project.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/property/AbstractProperty.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel.property; 2 | 3 | import minimalcomps.components.Label; 4 | import minimalcomps.components.HBox; 5 | import openfl.display.DisplayObjectContainer; 6 | 7 | 8 | class AbstractProperty extends HBox { 9 | 10 | //------------------------------ 11 | // model 12 | //------------------------------ 13 | 14 | private var _propertyName:String; 15 | private var _label:Label; 16 | 17 | 18 | //------------------------------ 19 | // lifecycle 20 | //------------------------------ 21 | 22 | public function new(propertyName:String, parent:DisplayObjectContainer = null) { 23 | _propertyName = propertyName; 24 | 25 | super(parent); 26 | } 27 | 28 | override private function addChildren():Void { 29 | super.addChildren(); 30 | 31 | _label = new Label(this); 32 | _label.text = _propertyName; 33 | _label.autoSize = false; 34 | _label.width = 100; 35 | } 36 | 37 | public function dispose():Void { 38 | _label = null; 39 | } 40 | 41 | } 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Jason Sturges 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/AccordionPropertyPanel.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel; 2 | 3 | import minimalcomps.components.Accordion; 4 | import minimalcomps.components.Component; 5 | import openfl.display.DisplayObjectContainer; 6 | 7 | 8 | class AccordionPropertyPanel extends PropertyPanel { 9 | 10 | //------------------------------ 11 | // model 12 | //------------------------------ 13 | 14 | private var _accordion:Accordion; 15 | 16 | 17 | //------------------------------ 18 | // lifecycle 19 | //------------------------------ 20 | 21 | public function new(component:Component, parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 22 | _accordion = cast component; 23 | 24 | super(component, parent, xpos, ypos); 25 | } 26 | 27 | override private function addChildren() { 28 | super.addChildren(); 29 | } 30 | 31 | override public function initialize():Void { 32 | super.initialize(); 33 | 34 | _accordion.addWindow("Window 1"); 35 | _accordion.addWindow("Window 2"); 36 | _accordion.addWindow("Window 3"); 37 | } 38 | 39 | override public function dispose():Void { 40 | super.dispose(); 41 | } 42 | 43 | } 44 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/FPSMeterPropertyPanel.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel; 2 | 3 | import minimalcomps.components.Component; 4 | import minimalcomps.components.FPSMeter; 5 | import minimalcomps.designer.panel.property.InputTextProperty; 6 | import openfl.display.DisplayObjectContainer; 7 | 8 | 9 | class FPSMeterPropertyPanel extends PropertyPanel { 10 | 11 | //------------------------------ 12 | // model 13 | //------------------------------ 14 | 15 | private var _fpsMeter:FPSMeter; 16 | 17 | 18 | //------------------------------ 19 | // lifecycle 20 | //------------------------------ 21 | 22 | public function new(component:Component, parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 23 | _fpsMeter = cast component; 24 | 25 | super(component, parent, xpos, ypos); 26 | } 27 | 28 | override private function addChildren() { 29 | super.addChildren(); 30 | 31 | _properties.push(new InputTextProperty("prefix", _fpsMeter.prefix, _vbox)); 32 | } 33 | 34 | override public function initialize():Void { 35 | super.initialize(); 36 | } 37 | 38 | override public function dispose():Void { 39 | super.dispose(); 40 | } 41 | 42 | } 43 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/data/DataProvider.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.data; 2 | 3 | class DataProvider { 4 | 5 | /** 6 | * Random series generation for bar and line chart data. 7 | * 8 | * @param min Minimum value sof the series. 9 | * @param max Maximum value sof the series 10 | * @param length Data points in series 11 | * @return Array 12 | */ 13 | public static function randomSeries(min:Float = 0, max:Float = 10, length:Int = 10):Array { 14 | var data:Array = []; 15 | 16 | for (i in 0 ... length) { 17 | data.push(cast(Math.random() * 10, Float)); 18 | } 19 | 20 | return data; 21 | } 22 | 23 | /** 24 | * Random distribution generation for pie chart data. 25 | * 26 | * @param divisions Number of slices in the pie chart 27 | * @return Array 28 | */ 29 | public static function randomDistribution(divisions:Int = 5):Array { 30 | var data:Array = []; 31 | 32 | for (i in 0 ... divisions) { 33 | data.push({ 34 | value: Math.random() * 100, 35 | label: "Value: " + Std.string(i + 1) 36 | }); 37 | } 38 | 39 | return data; 40 | } 41 | 42 | } -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/ColorChooserPropertyPanel.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel; 2 | 3 | import minimalcomps.components.Component; 4 | import minimalcomps.components.ColorChooser; 5 | import minimalcomps.designer.panel.property.CheckBoxProperty; 6 | import openfl.display.DisplayObjectContainer; 7 | 8 | 9 | class ColorChooserPropertyPanel extends PropertyPanel { 10 | 11 | //------------------------------ 12 | // model 13 | //------------------------------ 14 | 15 | private var _colorChooser:ColorChooser; 16 | 17 | 18 | //------------------------------ 19 | // lifecycle 20 | //------------------------------ 21 | 22 | public function new(component:Component, parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 23 | _colorChooser = cast component; 24 | 25 | super(component, parent, xpos, ypos); 26 | } 27 | 28 | override private function addChildren() { 29 | super.addChildren(); 30 | 31 | _properties.push(new CheckBoxProperty("usePopup", _colorChooser.usePopup, _vbox)); 32 | } 33 | 34 | override public function initialize():Void { 35 | super.initialize(); 36 | 37 | _colorChooser.usePopup = true; 38 | } 39 | 40 | override public function dispose():Void { 41 | super.dispose(); 42 | } 43 | 44 | } 45 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/BarChartPropertyPanel.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel; 2 | 3 | import minimalcomps.charts.BarChart; 4 | import minimalcomps.components.Component; 5 | import minimalcomps.designer.data.DataProvider; 6 | import minimalcomps.designer.panel.property.InputTextProperty; 7 | import minimalcomps.designer.panel.property.NumericStepperProperty; 8 | import openfl.display.DisplayObjectContainer; 9 | 10 | 11 | class BarChartPropertyPanel extends PropertyPanel { 12 | 13 | //------------------------------ 14 | // model 15 | //------------------------------ 16 | 17 | private var _barChart:BarChart; 18 | 19 | 20 | //------------------------------ 21 | // lifecycle 22 | //------------------------------ 23 | 24 | public function new(component:Component, parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 25 | _barChart = cast component; 26 | 27 | super(component, parent, xpos, ypos); 28 | } 29 | 30 | override private function addChildren() { 31 | super.addChildren(); 32 | } 33 | 34 | override public function initialize():Void { 35 | super.initialize(); 36 | 37 | _barChart.data = DataProvider.randomSeries(); 38 | } 39 | 40 | override public function dispose():Void { 41 | super.dispose(); 42 | } 43 | 44 | } 45 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/PieChartPropertyPanel.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel; 2 | 3 | import minimalcomps.charts.PieChart; 4 | import minimalcomps.components.Component; 5 | import minimalcomps.designer.data.DataProvider; 6 | import minimalcomps.designer.panel.property.InputTextProperty; 7 | import minimalcomps.designer.panel.property.NumericStepperProperty; 8 | import openfl.display.DisplayObjectContainer; 9 | 10 | 11 | class PieChartPropertyPanel extends PropertyPanel { 12 | 13 | //------------------------------ 14 | // model 15 | //------------------------------ 16 | 17 | private var _pieChart:PieChart; 18 | 19 | 20 | //------------------------------ 21 | // lifecycle 22 | //------------------------------ 23 | 24 | public function new(component:Component, parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 25 | _pieChart = cast component; 26 | 27 | super(component, parent, xpos, ypos); 28 | } 29 | 30 | override private function addChildren() { 31 | super.addChildren(); 32 | } 33 | 34 | override public function initialize():Void { 35 | super.initialize(); 36 | 37 | _pieChart.data = DataProvider.randomDistribution(); 38 | } 39 | 40 | override public function dispose():Void { 41 | super.dispose(); 42 | } 43 | 44 | } 45 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/LineChartPropertyPanel.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel; 2 | 3 | import minimalcomps.charts.LineChart; 4 | import minimalcomps.components.Component; 5 | import minimalcomps.designer.data.DataProvider; 6 | import minimalcomps.designer.panel.property.InputTextProperty; 7 | import minimalcomps.designer.panel.property.NumericStepperProperty; 8 | import openfl.display.DisplayObjectContainer; 9 | 10 | 11 | class LineChartPropertyPanel extends PropertyPanel { 12 | 13 | //------------------------------ 14 | // model 15 | //------------------------------ 16 | 17 | private var _lineChart:LineChart; 18 | 19 | 20 | //------------------------------ 21 | // lifecycle 22 | //------------------------------ 23 | 24 | public function new(component:Component, parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 25 | _lineChart = cast component; 26 | 27 | super(component, parent, xpos, ypos); 28 | } 29 | 30 | override private function addChildren() { 31 | super.addChildren(); 32 | } 33 | 34 | override public function initialize():Void { 35 | super.initialize(); 36 | 37 | _lineChart.data = DataProvider.randomSeries(); 38 | } 39 | 40 | override public function dispose():Void { 41 | super.dispose(); 42 | } 43 | 44 | } 45 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/LabelPropertyPanel.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel; 2 | 3 | import minimalcomps.components.Component; 4 | import minimalcomps.components.Label; 5 | import minimalcomps.designer.panel.property.CheckBoxProperty; 6 | import minimalcomps.designer.panel.property.InputTextProperty; 7 | import openfl.display.DisplayObjectContainer; 8 | 9 | 10 | class LabelPropertyPanel extends PropertyPanel { 11 | 12 | //------------------------------ 13 | // model 14 | //------------------------------ 15 | 16 | private var _label:Label; 17 | 18 | 19 | //------------------------------ 20 | // lifecycle 21 | //------------------------------ 22 | 23 | public function new(component:Component, parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 24 | _label = cast component; 25 | 26 | super(component, parent, xpos, ypos); 27 | } 28 | 29 | override private function addChildren() { 30 | super.addChildren(); 31 | 32 | _properties.push(new InputTextProperty("text", _label.text, _vbox)); 33 | _properties.push(new CheckBoxProperty("autoSize", _label.autoSize, _vbox)); 34 | } 35 | 36 | override public function initialize():Void { 37 | super.initialize(); 38 | 39 | _label.text = "label text"; 40 | } 41 | 42 | override public function dispose():Void { 43 | super.dispose(); 44 | } 45 | 46 | } 47 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/property/InputTextProperty.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel.property; 2 | 3 | import minimalcomps.components.InputText; 4 | import minimalcomps.designer.event.PropertyEvent; 5 | import openfl.display.DisplayObjectContainer; 6 | import openfl.events.Event; 7 | 8 | 9 | class InputTextProperty extends AbstractProperty { 10 | 11 | //------------------------------ 12 | // model 13 | //------------------------------ 14 | 15 | private var _component:InputText; 16 | private var _text:String; 17 | 18 | 19 | //------------------------------ 20 | // lifecycle 21 | //------------------------------ 22 | 23 | public function new(propertyName:String, text:String, parent:DisplayObjectContainer = null) { 24 | _text = text; 25 | 26 | super(propertyName, parent); 27 | } 28 | 29 | override private function addChildren() { 30 | super.addChildren(); 31 | 32 | _component = new InputText(this); 33 | _component.text = _text; 34 | 35 | _component.addEventListener(Event.CHANGE, changeHandler); 36 | } 37 | 38 | private function changeHandler(event:Event):Void { 39 | dispatchEvent(new PropertyEvent(PropertyEvent.CHANGE, _propertyName, _component.text)); 40 | } 41 | 42 | override public function dispose():Void { 43 | super.dispose(); 44 | 45 | _component.removeEventListener(Event.CHANGE, changeHandler); 46 | } 47 | 48 | } 49 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/CheckBoxPropertyPanel.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel; 2 | 3 | import minimalcomps.components.CheckBox; 4 | import minimalcomps.components.Component; 5 | import minimalcomps.designer.panel.property.CheckBoxProperty; 6 | import minimalcomps.designer.panel.property.InputTextProperty; 7 | import openfl.display.DisplayObjectContainer; 8 | 9 | 10 | class CheckBoxPropertyPanel extends PropertyPanel { 11 | 12 | //------------------------------ 13 | // model 14 | //------------------------------ 15 | 16 | private var _checkBox:CheckBox; 17 | 18 | 19 | //------------------------------ 20 | // lifecycle 21 | //------------------------------ 22 | 23 | public function new(component:Component, parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 24 | _checkBox = cast component; 25 | 26 | super(component, parent, xpos, ypos); 27 | } 28 | 29 | override private function addChildren() { 30 | super.addChildren(); 31 | 32 | _properties.push(new InputTextProperty("label", _checkBox.label, _vbox)); 33 | _properties.push(new CheckBoxProperty("selected", _checkBox.selected, _vbox)); 34 | } 35 | 36 | override public function initialize():Void { 37 | super.initialize(); 38 | 39 | _checkBox.label = "Label text"; 40 | } 41 | 42 | override public function dispose():Void { 43 | super.dispose(); 44 | } 45 | 46 | } 47 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/ui/ComponentViewer.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.ui; 2 | 3 | import minimalcomps.components.Component; 4 | import minimalcomps.components.ScrollPane; 5 | import openfl.display.DisplayObjectContainer; 6 | import openfl.events.Event; 7 | 8 | 9 | class ComponentViewer extends ScrollPane { 10 | 11 | //------------------------------ 12 | // model 13 | //------------------------------ 14 | 15 | private var _component:Component; 16 | 17 | 18 | //------------------------------ 19 | // lifecycle 20 | //------------------------------ 21 | 22 | public function new(parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 23 | super(parent, xpos, ypos); 24 | 25 | color = 0x7a7a7a; 26 | showGrid = true; 27 | gridSize = 10; 28 | gridColor = 0x9a9aa0; 29 | } 30 | 31 | override private function addChildren() { 32 | super.addChildren(); 33 | } 34 | 35 | override private function onInvalidate(event:Event):Void { 36 | super.onInvalidate(event); 37 | } 38 | 39 | public function bind(component:Component):Void { 40 | if (_component != null) { 41 | removeChild(_component); 42 | } 43 | 44 | _component = component; 45 | addChild(component); 46 | 47 | component.x = (width * 0.5) - (component.width * 0.5); 48 | component.y = (height * 0.5) - (component.height * 0.5); 49 | } 50 | 51 | } 52 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/WheelMenuPropertyPanel.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel; 2 | 3 | import minimalcomps.components.Component; 4 | import minimalcomps.components.WheelMenu; 5 | import minimalcomps.designer.panel.property.InputTextProperty; 6 | import minimalcomps.designer.panel.property.NumericStepperProperty; 7 | import openfl.display.DisplayObjectContainer; 8 | 9 | 10 | class WheelMenuPropertyPanel extends PropertyPanel { 11 | 12 | //------------------------------ 13 | // model 14 | //------------------------------ 15 | 16 | private var _wheelMenu:WheelMenu; 17 | 18 | 19 | //------------------------------ 20 | // lifecycle 21 | //------------------------------ 22 | 23 | public function new(component:Component, parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 24 | _wheelMenu = cast WheelMenu; 25 | 26 | super(component, parent, xpos, ypos); 27 | } 28 | 29 | override private function addChildren() { 30 | super.addChildren(); 31 | } 32 | 33 | override public function initialize():Void { 34 | super.initialize(); 35 | 36 | _wheelMenu.setItem(1, "One", "One"); 37 | _wheelMenu.setItem(2, "Two", "Two"); 38 | _wheelMenu.setItem(3, "Three", "Three"); 39 | _wheelMenu.setItem(4, "Four", "Four"); 40 | _wheelMenu.setItem(5, "Five", "Five"); 41 | } 42 | 43 | override public function dispose():Void { 44 | super.dispose(); 45 | } 46 | 47 | } 48 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/property/ColorChooserProperty.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel.property; 2 | 3 | import minimalcomps.components.ColorChooser; 4 | import minimalcomps.designer.event.PropertyEvent; 5 | import openfl.display.DisplayObjectContainer; 6 | import openfl.events.Event; 7 | 8 | 9 | class ColorChooserProperty extends AbstractProperty { 10 | 11 | //------------------------------ 12 | // model 13 | //------------------------------ 14 | 15 | private var _component:ColorChooser; 16 | private var _value:UInt; 17 | 18 | 19 | //------------------------------ 20 | // lifecycle 21 | //------------------------------ 22 | 23 | public function new(propertyName:String, value:UInt = 0xff0000, parent:DisplayObjectContainer = null) { 24 | _value = value; 25 | 26 | super(propertyName, parent); 27 | } 28 | 29 | override private function addChildren() { 30 | super.addChildren(); 31 | 32 | _component = new ColorChooser(this); 33 | _component.value = _value; 34 | _component.usePopup = true; 35 | 36 | _component.addEventListener(Event.CHANGE, changeHandler); 37 | } 38 | 39 | private function changeHandler(event:Event):Void { 40 | dispatchEvent(new PropertyEvent(PropertyEvent.CHANGE, _propertyName, _component.value)); 41 | } 42 | 43 | override public function dispose():Void { 44 | super.dispose(); 45 | 46 | _component.removeEventListener(Event.CHANGE, changeHandler); 47 | } 48 | 49 | } 50 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/property/CheckBoxProperty.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel.property; 2 | 3 | import minimalcomps.components.CheckBox; 4 | import minimalcomps.designer.event.PropertyEvent; 5 | import openfl.display.DisplayObjectContainer; 6 | import openfl.events.Event; 7 | import openfl.events.MouseEvent; 8 | 9 | 10 | class CheckBoxProperty extends AbstractProperty { 11 | 12 | //------------------------------ 13 | // model 14 | //------------------------------ 15 | 16 | private var _component:CheckBox; 17 | private var _selected:Bool; 18 | 19 | 20 | //------------------------------ 21 | // lifecycle 22 | //------------------------------ 23 | 24 | public function new(propertyName:String, selected:Bool, parent:DisplayObjectContainer = null) { 25 | _selected = selected; 26 | 27 | super(propertyName, parent); 28 | } 29 | 30 | override private function addChildren() { 31 | super.addChildren(); 32 | 33 | _component = new CheckBox(this); 34 | _component.selected = _selected; 35 | 36 | _component.addEventListener(MouseEvent.CLICK, mouseClickHandler); 37 | } 38 | 39 | private function mouseClickHandler(event:Event):Void { 40 | dispatchEvent(new PropertyEvent(PropertyEvent.CHANGE, _propertyName, _component.selected)); 41 | } 42 | 43 | override public function dispose():Void { 44 | super.dispose(); 45 | 46 | _component.removeEventListener(MouseEvent.CLICK, mouseClickHandler); 47 | } 48 | 49 | } 50 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/KnobPropertyPanel.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel; 2 | 3 | import minimalcomps.components.Component; 4 | import minimalcomps.components.Knob; 5 | import minimalcomps.designer.panel.property.InputTextProperty; 6 | import minimalcomps.designer.panel.property.NumericStepperProperty; 7 | import openfl.display.DisplayObjectContainer; 8 | 9 | 10 | class KnobPropertyPanel extends PropertyPanel { 11 | 12 | //------------------------------ 13 | // model 14 | //------------------------------ 15 | 16 | private var _knob:Knob; 17 | 18 | 19 | //------------------------------ 20 | // lifecycle 21 | //------------------------------ 22 | 23 | public function new(component:Component, parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 24 | _knob = cast component; 25 | 26 | super(component, parent, xpos, ypos); 27 | } 28 | 29 | override private function addChildren() { 30 | super.addChildren(); 31 | 32 | _properties.push(new InputTextProperty("label", _knob.label, _vbox)); 33 | _properties.push(new NumericStepperProperty("value", _knob.value, 0, 100, _vbox)); 34 | _properties.push(new NumericStepperProperty("minimum", _knob.minimum, 0, 100, _vbox)); 35 | _properties.push(new NumericStepperProperty("maximum", _knob.maximum, 0, 100, _vbox)); 36 | } 37 | 38 | override public function initialize():Void { 39 | super.initialize(); 40 | 41 | _knob.label = "Label text"; 42 | } 43 | 44 | override public function dispose():Void { 45 | super.dispose(); 46 | } 47 | 48 | } 49 | -------------------------------------------------------------------------------- /MinimalcompsOpenflDesigner.hxproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | "$(CompilerPath)/haxelib" run lime build "$(OutputFile)" $(TargetBuild) -$(BuildConfig) -Dfdb 38 | 39 | 40 | 41 | 42 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/MeterPropertyPanel.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel; 2 | 3 | import minimalcomps.components.Component; 4 | import minimalcomps.components.Meter; 5 | import minimalcomps.designer.panel.property.InputTextProperty; 6 | import minimalcomps.designer.panel.property.NumericStepperProperty; 7 | import openfl.display.DisplayObjectContainer; 8 | 9 | 10 | class MeterPropertyPanel extends PropertyPanel { 11 | 12 | //------------------------------ 13 | // model 14 | //------------------------------ 15 | 16 | private var _meter:Meter; 17 | 18 | 19 | //------------------------------ 20 | // lifecycle 21 | //------------------------------ 22 | 23 | public function new(component:Component, parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 24 | _meter = cast component; 25 | 26 | super(component, parent, xpos, ypos); 27 | } 28 | 29 | override private function addChildren() { 30 | super.addChildren(); 31 | 32 | _properties.push(new InputTextProperty("label", _meter.label, _vbox)); 33 | _properties.push(new NumericStepperProperty("value", _meter.value, 0, 100, _vbox)); 34 | _properties.push(new NumericStepperProperty("minimum", _meter.minimum, 0, 100, _vbox)); 35 | _properties.push(new NumericStepperProperty("maximum", _meter.maximum, 0, 100, _vbox)); 36 | } 37 | 38 | override public function initialize():Void { 39 | super.initialize(); 40 | 41 | _meter.label = "label text"; 42 | } 43 | 44 | override public function dispose():Void { 45 | super.dispose(); 46 | } 47 | 48 | } 49 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/property/NumericStepperProperty.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel.property; 2 | 3 | import minimalcomps.components.NumericStepper; 4 | import minimalcomps.designer.event.PropertyEvent; 5 | import openfl.display.DisplayObjectContainer; 6 | import openfl.events.Event; 7 | 8 | 9 | class NumericStepperProperty extends AbstractProperty { 10 | 11 | //------------------------------ 12 | // model 13 | //------------------------------ 14 | 15 | private var _component:NumericStepper; 16 | private var _minimum:Float; 17 | private var _maximum:Float; 18 | private var _value:Float; 19 | 20 | 21 | //------------------------------ 22 | // lifecycle 23 | //------------------------------ 24 | 25 | public function new(propertyName:String, value:Float = 0, minimum:Float = 0, maximum:Float = 100, parent:DisplayObjectContainer = null) { 26 | _minimum = minimum; 27 | _maximum = maximum; 28 | _value = value; 29 | 30 | super(propertyName, parent); 31 | } 32 | 33 | override private function addChildren() { 34 | super.addChildren(); 35 | 36 | _component = new NumericStepper(this); 37 | _component.minimum = _minimum; 38 | _component.maximum = _maximum; 39 | _component.value = _value; 40 | 41 | _component.addEventListener(Event.CHANGE, changeHandler); 42 | } 43 | 44 | private function changeHandler(event:Event):Void { 45 | dispatchEvent(new PropertyEvent(PropertyEvent.CHANGE, _propertyName, _component.value)); 46 | } 47 | 48 | override public function dispose():Void { 49 | super.dispose(); 50 | 51 | _component.removeEventListener(Event.CHANGE, changeHandler); 52 | } 53 | 54 | } 55 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/IndicatorLightPropertyPanel.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel; 2 | 3 | import minimalcomps.components.Component; 4 | import minimalcomps.components.IndicatorLight; 5 | import minimalcomps.designer.panel.property.CheckBoxProperty; 6 | import minimalcomps.designer.panel.property.ColorChooserProperty; 7 | import minimalcomps.designer.panel.property.InputTextProperty; 8 | import openfl.display.DisplayObjectContainer; 9 | 10 | 11 | class IndicatorLightPropertyPanel extends PropertyPanel { 12 | 13 | //------------------------------ 14 | // model 15 | //------------------------------ 16 | 17 | private var _indicatorLight:IndicatorLight; 18 | 19 | 20 | //------------------------------ 21 | // lifecycle 22 | //------------------------------ 23 | 24 | public function new(component:Component, parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 25 | _indicatorLight = cast component; 26 | 27 | super(component, parent, xpos, ypos); 28 | } 29 | 30 | override private function addChildren() { 31 | super.addChildren(); 32 | 33 | _properties.push(new InputTextProperty("label", _indicatorLight.label, _vbox)); 34 | _properties.push(new CheckBoxProperty("isLit", _indicatorLight.isLit, _vbox)); 35 | _properties.push(new ColorChooserProperty("color", _indicatorLight.color, _vbox)); 36 | } 37 | 38 | override public function initialize():Void { 39 | super.initialize(); 40 | 41 | _indicatorLight.isLit = true; 42 | _indicatorLight.label = "Label text"; 43 | _indicatorLight.color = 0xff0000; 44 | } 45 | 46 | override public function dispose():Void { 47 | super.dispose(); 48 | } 49 | 50 | } 51 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/UISliderPropertyPanel.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel; 2 | 3 | import minimalcomps.components.Component; 4 | import minimalcomps.components.UISlider; 5 | import minimalcomps.designer.panel.property.InputTextProperty; 6 | import minimalcomps.designer.panel.property.NumericStepperProperty; 7 | import openfl.display.DisplayObjectContainer; 8 | 9 | 10 | class UISliderPropertyPanel extends PropertyPanel { 11 | 12 | //------------------------------ 13 | // model 14 | //------------------------------ 15 | 16 | private var _uiSlider:UISlider; 17 | 18 | 19 | //------------------------------ 20 | // lifecycle 21 | //------------------------------ 22 | 23 | public function new(component:Component, parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 24 | _uiSlider = cast component; 25 | 26 | super(component, parent, xpos, ypos); 27 | } 28 | 29 | override private function addChildren() { 30 | super.addChildren(); 31 | 32 | _properties.push(new InputTextProperty("label", _uiSlider.label, _vbox)); 33 | _properties.push(new NumericStepperProperty("value", _uiSlider.value, 0, 100, _vbox)); 34 | _properties.push(new NumericStepperProperty("minimum", _uiSlider.minimum, 0, 100, _vbox)); 35 | _properties.push(new NumericStepperProperty("maximum", _uiSlider.maximum, 0, 100, _vbox)); 36 | _properties.push(new NumericStepperProperty("labelPrecision", _uiSlider.labelPrecision, 0, 100, _vbox)); 37 | _properties.push(new NumericStepperProperty("tick", _uiSlider.tick, 0, 100, _vbox)); 38 | } 39 | 40 | override public function initialize():Void { 41 | super.initialize(); 42 | 43 | _uiSlider.label = "Label text"; 44 | } 45 | 46 | override public function dispose():Void { 47 | super.dispose(); 48 | } 49 | 50 | } 51 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/WindowPropertyPanel.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel; 2 | 3 | import minimalcomps.components.Component; 4 | import minimalcomps.components.Window; 5 | import minimalcomps.designer.panel.property.CheckBoxProperty; 6 | import minimalcomps.designer.panel.property.ColorChooserProperty; 7 | import minimalcomps.designer.panel.property.InputTextProperty; 8 | import openfl.display.DisplayObjectContainer; 9 | 10 | 11 | class WindowPropertyPanel extends PropertyPanel { 12 | 13 | //------------------------------ 14 | // model 15 | //------------------------------ 16 | 17 | private var _window:Window; 18 | 19 | 20 | //------------------------------ 21 | // lifecycle 22 | //------------------------------ 23 | 24 | public function new(component:Component, parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 25 | _window = cast component; 26 | 27 | super(component, parent, xpos, ypos); 28 | } 29 | 30 | override private function addChildren() { 31 | super.addChildren(); 32 | 33 | _properties.push(new InputTextProperty("title", _window.title, _vbox)); 34 | _properties.push(new CheckBoxProperty("hasCloseButton", _window.hasCloseButton, _vbox)); 35 | _properties.push(new CheckBoxProperty("hasMinimizeButton", _window.hasMinimizeButton, _vbox)); 36 | _properties.push(new CheckBoxProperty("draggable", _window.draggable, _vbox)); 37 | _properties.push(new CheckBoxProperty("shadow", _window.shadow, _vbox)); 38 | _properties.push(new ColorChooserProperty("color", _window.color, _vbox)); 39 | } 40 | 41 | override public function initialize():Void { 42 | super.initialize(); 43 | 44 | _window.title = "Title text"; 45 | } 46 | 47 | override public function dispose():Void { 48 | super.dispose(); 49 | } 50 | 51 | } 52 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/RangeSliderPropertyPanel.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel; 2 | 3 | import minimalcomps.components.Component; 4 | import minimalcomps.components.RangeSlider; 5 | import minimalcomps.designer.panel.property.InputTextProperty; 6 | import minimalcomps.designer.panel.property.NumericStepperProperty; 7 | import openfl.display.DisplayObjectContainer; 8 | 9 | 10 | class RangeSliderPropertyPanel extends PropertyPanel { 11 | 12 | //------------------------------ 13 | // model 14 | //------------------------------ 15 | 16 | private var _rangeSlider:RangeSlider; 17 | 18 | 19 | //------------------------------ 20 | // lifecycle 21 | //------------------------------ 22 | 23 | public function new(component:Component, parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 24 | _rangeSlider = cast component; 25 | 26 | super(component, parent, xpos, ypos); 27 | } 28 | 29 | override private function addChildren() { 30 | super.addChildren(); 31 | 32 | _properties.push(new NumericStepperProperty("minimum", _rangeSlider.minimum, 0, 100, _vbox)); 33 | _properties.push(new NumericStepperProperty("maximum", _rangeSlider.maximum, 0, 100, _vbox)); 34 | _properties.push(new NumericStepperProperty("lowValue", _rangeSlider.lowValue, 0, 100, _vbox)); 35 | _properties.push(new NumericStepperProperty("highValue", _rangeSlider.highValue, 0, 100, _vbox)); 36 | _properties.push(new NumericStepperProperty("labelPrecision", _rangeSlider.labelPrecision, 0, 100, _vbox)); 37 | _properties.push(new NumericStepperProperty("tick", _rangeSlider.tick, 0, 100, _vbox)); 38 | } 39 | 40 | override public function initialize():Void { 41 | super.initialize(); 42 | } 43 | 44 | override public function dispose():Void { 45 | super.dispose(); 46 | } 47 | 48 | } 49 | -------------------------------------------------------------------------------- /Source/Main.hx: -------------------------------------------------------------------------------- 1 | package; 2 | 3 | import minimalcomps.designer.Designer; 4 | import openfl.display.Sprite; 5 | import openfl.display.StageScaleMode; 6 | import openfl.display.StageAlign; 7 | import openfl.events.Event; 8 | 9 | 10 | class Main extends Sprite { 11 | 12 | //------------------------------ 13 | // model 14 | //------------------------------ 15 | 16 | public var designer:Designer; 17 | 18 | 19 | //------------------------------ 20 | // lifecycle 21 | //------------------------------ 22 | 23 | public function new() { 24 | super(); 25 | 26 | initialize(); 27 | } 28 | 29 | /** 30 | * initialize 31 | */ 32 | public function initialize():Void { 33 | addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); 34 | } 35 | 36 | /** 37 | * addedToStageHandler 38 | */ 39 | private function addedToStageHandler(event:Event):Void { 40 | removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); 41 | addEventListener(Event.REMOVED_FROM_STAGE, removedFromStageHandler); 42 | stage.addEventListener(Event.RESIZE, resizeHandler); 43 | 44 | stage.scaleMode = StageScaleMode.NO_SCALE; 45 | stage.align = StageAlign.TOP_LEFT; 46 | 47 | designer = new Designer(); 48 | addChild(designer); 49 | 50 | stage.dispatchEvent(new Event(Event.RESIZE)); 51 | } 52 | 53 | /** 54 | * resizeHandler 55 | */ 56 | private function resizeHandler(event:Event):Void { 57 | designer.resize(stage.stageWidth, stage.stageHeight); 58 | } 59 | 60 | /** 61 | * removedFromStageHandler 62 | */ 63 | private function removedFromStageHandler(event:Event):Void { 64 | removeEventListener(Event.REMOVED_FROM_STAGE, removedFromStageHandler); 65 | addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); 66 | stage.removeEventListener(Event.RESIZE, resizeHandler); 67 | 68 | removeChild(designer); 69 | } 70 | 71 | /** 72 | * dispose 73 | */ 74 | public function dispose():Void { 75 | removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); 76 | removeEventListener(Event.REMOVED_FROM_STAGE, removedFromStageHandler); 77 | stage.removeEventListener(Event.RESIZE, resizeHandler); 78 | 79 | designer = null; 80 | } 81 | 82 | } -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/PropertyPanel.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel; 2 | 3 | import minimalcomps.components.VBox; 4 | import minimalcomps.components.Component; 5 | import minimalcomps.components.Panel; 6 | import minimalcomps.designer.panel.property.AbstractProperty; 7 | import minimalcomps.designer.panel.property.NumericStepperProperty; 8 | import openfl.display.DisplayObjectContainer; 9 | 10 | 11 | /** 12 | * Generic property panel, adding standard `DisplayObject` properties 13 | * such as `x`, `y`, `width`, `height`, `scaleX`, and `scaleY`. 14 | * 15 | * Also used when no component-specific property panel is availble. 16 | */ 17 | class PropertyPanel extends Panel { 18 | 19 | //------------------------------ 20 | // model 21 | //------------------------------ 22 | 23 | private var _component:Component; 24 | private var _properties:Array; 25 | private var _vbox:VBox; 26 | 27 | 28 | //------------------------------ 29 | // lifecycle 30 | //------------------------------ 31 | 32 | public function new(component:Component, parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 33 | _component = component; 34 | _properties = []; 35 | 36 | initialize(); 37 | 38 | super(parent, xpos, ypos); 39 | } 40 | 41 | override private function addChildren() { 42 | super.addChildren(); 43 | 44 | _vbox = new VBox(this, 4, 4); 45 | _vbox.width = this.width - 8; 46 | _vbox.height = this.height - 8; 47 | 48 | // Common properties 49 | _properties.push(new NumericStepperProperty("x", _component.x, 0, 1000, _vbox)); 50 | _properties.push(new NumericStepperProperty("y", _component.y, 0, 1000, _vbox)); 51 | _properties.push(new NumericStepperProperty("width", _component.width, 0, 1000, _vbox)); 52 | _properties.push(new NumericStepperProperty("height", _component.height, 0, 1000, _vbox)); 53 | _properties.push(new NumericStepperProperty("scaleX", _component.scaleX, 1, 10, _vbox)); 54 | _properties.push(new NumericStepperProperty("scaleY", _component.scaleY, 1, 10, _vbox)); 55 | } 56 | 57 | public function initialize():Void { 58 | } 59 | 60 | public function dispose():Void { 61 | while(_properties.length > 0) { 62 | var p:AbstractProperty = _properties.shift(); 63 | p.dispose(); 64 | _vbox.removeChild(p); 65 | } 66 | } 67 | 68 | } 69 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/panel/ComboBoxPropertyPanel.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.panel; 2 | 3 | import minimalcomps.components.Component; 4 | import minimalcomps.components.ComboBox; 5 | import minimalcomps.designer.panel.property.CheckBoxProperty; 6 | import minimalcomps.designer.panel.property.ColorChooserProperty; 7 | import minimalcomps.designer.panel.property.InputTextProperty; 8 | import minimalcomps.designer.panel.property.NumericStepperProperty; 9 | import openfl.display.DisplayObjectContainer; 10 | 11 | 12 | class ComboBoxPropertyPanel extends PropertyPanel { 13 | 14 | //------------------------------ 15 | // model 16 | //------------------------------ 17 | 18 | private var _comboBox:ComboBox; 19 | 20 | 21 | //------------------------------ 22 | // lifecycle 23 | //------------------------------ 24 | 25 | public function new(component:Component, parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 26 | _comboBox = cast component; 27 | 28 | super(component, parent, xpos, ypos); 29 | } 30 | 31 | override private function addChildren() { 32 | super.addChildren(); 33 | 34 | _properties.push(new InputTextProperty("defaultLabel", _comboBox.defaultLabel, _vbox)); 35 | _properties.push(new NumericStepperProperty("listItemHeight", _comboBox.listItemHeight, 0, 50, _vbox)); 36 | _properties.push(new NumericStepperProperty("numVisibleItems", _comboBox.numVisibleItems, 0, 10, _vbox)); 37 | _properties.push(new CheckBoxProperty("autoHideScrollBar", _comboBox.autoHideScrollBar, _vbox)); 38 | _properties.push(new CheckBoxProperty("alternateRows", _comboBox.alternateRows, _vbox)); 39 | _properties.push(new ColorChooserProperty("defaultColor", _comboBox.defaultColor, _vbox)); 40 | _properties.push(new ColorChooserProperty("selectedColor", _comboBox.selectedColor, _vbox)); 41 | _properties.push(new ColorChooserProperty("alternateColor", _comboBox.alternateColor, _vbox)); 42 | _properties.push(new ColorChooserProperty("rolloverColor", _comboBox.rolloverColor, _vbox)); 43 | } 44 | 45 | override public function initialize():Void { 46 | super.initialize(); 47 | 48 | _comboBox.defaultLabel = "Default label"; 49 | _comboBox.addItem({label: "Item 1"}); 50 | _comboBox.addItem({label: "Item 2"}); 51 | _comboBox.addItem({label: "Item 3"}); 52 | } 53 | 54 | override public function dispose():Void { 55 | super.dispose(); 56 | } 57 | 58 | } 59 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/Designer.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer; 2 | 3 | import minimalcomps.components.Component; 4 | import minimalcomps.components.Style; 5 | import minimalcomps.designer.event.ComponentEvent; 6 | import minimalcomps.designer.event.PropertyEvent; 7 | import minimalcomps.designer.panel.PropertyPanel; 8 | import minimalcomps.designer.ui.ComponentLibrary; 9 | import minimalcomps.designer.ui.ComponentProperties; 10 | import minimalcomps.designer.ui.ComponentViewer; 11 | import openfl.display.Sprite; 12 | import openfl.events.Event; 13 | 14 | 15 | class Designer extends Sprite { 16 | 17 | //------------------------------ 18 | // model 19 | //------------------------------ 20 | 21 | public static inline var COMPONENT_LIST_WIDTH:Int = 150; 22 | public static inline var PROPERTY_PANEL_WIDTH:Int = 250; 23 | public static inline var PADDING:Int = 4; 24 | 25 | private var _component:Component; 26 | private var _componentLibrary:ComponentLibrary; 27 | private var _componentProperties:ComponentProperties; 28 | private var _componentViewer:ComponentViewer; 29 | private var _width:Float; 30 | private var _height:Float; 31 | 32 | 33 | //------------------------------ 34 | // lifecycle 35 | //------------------------------ 36 | 37 | public function new() { 38 | super(); 39 | 40 | initialize(); 41 | } 42 | 43 | /** 44 | * initialize 45 | */ 46 | public function initialize():Void { 47 | addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); 48 | 49 | Style.setStyle(Style.DARK); 50 | } 51 | 52 | /** 53 | * addedToStageHandler 54 | */ 55 | private function addedToStageHandler(event:Event):Void { 56 | removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); 57 | addEventListener(Event.REMOVED_FROM_STAGE, removedFromStageHandler); 58 | 59 | _componentLibrary = new ComponentLibrary(this); 60 | _componentLibrary.addEventListener(ComponentEvent.CHANGE, componentChangeHandler); 61 | 62 | _componentViewer = new ComponentViewer(this); 63 | 64 | _componentProperties = new ComponentProperties(this); 65 | _componentProperties.addEventListener(PropertyEvent.CHANGE, propertyChangeHandler); 66 | } 67 | 68 | public function resize(w:Float, h:Float):Void { 69 | _width = w; 70 | _height = h; 71 | 72 | _componentLibrary.x = PADDING; 73 | _componentLibrary.y = PADDING; 74 | _componentLibrary.width = COMPONENT_LIST_WIDTH; 75 | _componentLibrary.height = h - (PADDING * 2); 76 | 77 | _componentViewer.x = COMPONENT_LIST_WIDTH + (PADDING * 2); 78 | _componentViewer.y = PADDING; 79 | _componentViewer.width = w - COMPONENT_LIST_WIDTH - PROPERTY_PANEL_WIDTH - (PADDING * 4); 80 | _componentViewer.height = h - (PADDING * 2); 81 | 82 | _componentProperties.x = w - PROPERTY_PANEL_WIDTH - 4; 83 | _componentProperties.y = PADDING; 84 | _componentProperties.width = PROPERTY_PANEL_WIDTH; 85 | _componentProperties.height = h - (PADDING * 2); 86 | } 87 | 88 | private function componentChangeHandler(event:ComponentEvent):Void { 89 | displayComponent(event.classType); 90 | } 91 | 92 | private function displayComponent(type:Class):Void { 93 | _component = cast Type.createInstance(type, []); 94 | _componentViewer.bind(_component); 95 | _componentProperties.bind(_component); 96 | } 97 | 98 | private function propertyChangeHandler(event:PropertyEvent):Void { 99 | Reflect.setProperty(_component, event.name, event.value); 100 | } 101 | 102 | /** 103 | * removedFromStageHandler 104 | */ 105 | private function removedFromStageHandler(event:Event):Void { 106 | removeEventListener(Event.REMOVED_FROM_STAGE, removedFromStageHandler); 107 | addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); 108 | } 109 | 110 | /** 111 | * dispose 112 | */ 113 | public function dispose():Void { 114 | removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); 115 | removeEventListener(Event.REMOVED_FROM_STAGE, removedFromStageHandler); 116 | } 117 | } -------------------------------------------------------------------------------- /Assets/openfl.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 21 | 23 | 41 | 43 | 44 | 46 | image/svg+xml 47 | 49 | 50 | 51 | 52 | 53 | 58 | 61 | 64 | 68 | 74 | 75 | 79 | 85 | 86 | 87 | 97 | 99 | 105 | 111 | 112 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/ui/ComponentProperties.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.ui; 2 | 3 | import minimalcomps.charts.BarChart; 4 | import minimalcomps.charts.LineChart; 5 | import minimalcomps.charts.PieChart; 6 | import minimalcomps.components.Accordion; 7 | import minimalcomps.components.CheckBox; 8 | import minimalcomps.components.ColorChooser; 9 | import minimalcomps.components.ComboBox; 10 | import minimalcomps.components.Component; 11 | import minimalcomps.components.FPSMeter; 12 | import minimalcomps.components.HRangeSlider; 13 | import minimalcomps.components.HUISlider; 14 | import minimalcomps.components.IndicatorLight; 15 | import minimalcomps.components.Knob; 16 | import minimalcomps.components.Label; 17 | import minimalcomps.components.Meter; 18 | import minimalcomps.components.RangeSlider; 19 | import minimalcomps.components.ScrollPane; 20 | import minimalcomps.components.VBox; 21 | import minimalcomps.components.VRangeSlider; 22 | import minimalcomps.components.VUISlider; 23 | import minimalcomps.components.WheelMenu; 24 | import minimalcomps.components.Window; 25 | import minimalcomps.designer.panel.AccordionPropertyPanel; 26 | import minimalcomps.designer.panel.BarChartPropertyPanel; 27 | import minimalcomps.designer.panel.PropertyPanel; 28 | import minimalcomps.designer.panel.CheckBoxPropertyPanel; 29 | import minimalcomps.designer.panel.ColorChooserPropertyPanel; 30 | import minimalcomps.designer.panel.ComboBoxPropertyPanel; 31 | import minimalcomps.designer.panel.FPSMeterPropertyPanel; 32 | import minimalcomps.designer.panel.IndicatorLightPropertyPanel; 33 | import minimalcomps.designer.panel.KnobPropertyPanel; 34 | import minimalcomps.designer.panel.LabelPropertyPanel; 35 | import minimalcomps.designer.panel.LineChartPropertyPanel; 36 | import minimalcomps.designer.panel.MeterPropertyPanel; 37 | import minimalcomps.designer.panel.PieChartPropertyPanel; 38 | import minimalcomps.designer.panel.RangeSliderPropertyPanel; 39 | import minimalcomps.designer.panel.UISliderPropertyPanel; 40 | import minimalcomps.designer.panel.WheelMenuPropertyPanel; 41 | import minimalcomps.designer.panel.WindowPropertyPanel; 42 | import openfl.display.DisplayObjectContainer; 43 | 44 | 45 | class ComponentProperties extends ScrollPane { 46 | 47 | //------------------------------ 48 | // model 49 | //------------------------------ 50 | 51 | private var _component:Component; 52 | private var _panels:Array; 53 | private var _vbox:VBox; 54 | 55 | 56 | //------------------------------ 57 | // lifecycle 58 | //------------------------------ 59 | 60 | public function new(parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 61 | super(parent, xpos, ypos); 62 | 63 | _panels = []; 64 | } 65 | 66 | override private function addChildren() { 67 | super.addChildren(); 68 | 69 | _vbox = new VBox(this, 4, 4); 70 | _vbox.width = this.width - 8; 71 | _vbox.height = this.height - 8; 72 | } 73 | 74 | public function bind(component:Component):Void { 75 | _component = component; 76 | 77 | clearPanels(); 78 | 79 | var panel:PropertyPanel; 80 | 81 | switch(Type.getClass(_component)) { 82 | case Accordion: 83 | panel = new AccordionPropertyPanel(_component, _vbox); 84 | case BarChart: 85 | panel = new BarChartPropertyPanel(_component, _vbox); 86 | case CheckBox: 87 | panel = new CheckBoxPropertyPanel(_component, _vbox); 88 | case ComboBox: 89 | panel = new ComboBoxPropertyPanel(_component, _vbox); 90 | case ColorChooser: 91 | panel = new ColorChooserPropertyPanel(_component, _vbox); 92 | case FPSMeter: 93 | panel = new FPSMeterPropertyPanel(_component, _vbox); 94 | case HRangeSlider: 95 | panel = new RangeSliderPropertyPanel(_component, _vbox); 96 | case HUISlider: 97 | panel = new UISliderPropertyPanel(_component, _vbox); 98 | case IndicatorLight: 99 | panel = new IndicatorLightPropertyPanel(_component, _vbox); 100 | case Knob: 101 | panel = new KnobPropertyPanel(_component, _vbox); 102 | case Label: 103 | panel = new LabelPropertyPanel(_component, _vbox); 104 | case Meter: 105 | panel = new MeterPropertyPanel(_component, _vbox); 106 | case LineChart: 107 | panel = new LineChartPropertyPanel(_component, _vbox); 108 | case PieChart: 109 | panel = new PieChartPropertyPanel(_component, _vbox); 110 | case RangeSlider: 111 | panel = new RangeSliderPropertyPanel(_component, _vbox); 112 | case VRangeSlider: 113 | panel = new RangeSliderPropertyPanel(_component, _vbox); 114 | // case WheelMenu: 115 | // panel = new WheelMenuPropertyPanel(_component, _vbox); 116 | case VUISlider: 117 | panel = new UISliderPropertyPanel(_component, _vbox); 118 | case Window: 119 | panel = new WindowPropertyPanel(_component, _vbox); 120 | 121 | default: 122 | panel = new PropertyPanel(_component, _vbox); 123 | } 124 | 125 | if (panel != null) { 126 | _panels.push(panel); 127 | panel.width = width; 128 | panel.height = height; 129 | } 130 | } 131 | 132 | private function clearPanels():Void { 133 | while (_panels.length > 0) { 134 | var panel:PropertyPanel = _panels.shift(); 135 | panel.dispose(); 136 | _vbox.removeChild(panel); 137 | } 138 | } 139 | 140 | } 141 | -------------------------------------------------------------------------------- /Source/minimalcomps/designer/ui/ComponentLibrary.hx: -------------------------------------------------------------------------------- 1 | package minimalcomps.designer.ui; 2 | 3 | import minimalcomps.charts.BarChart; 4 | import minimalcomps.charts.LineChart; 5 | import minimalcomps.charts.PieChart; 6 | import minimalcomps.components.Accordion; 7 | import minimalcomps.components.Calendar; 8 | import minimalcomps.components.ColorChooser; 9 | import minimalcomps.components.ComboBox; 10 | import minimalcomps.components.CheckBox; 11 | import minimalcomps.components.FPSMeter; 12 | import minimalcomps.components.HBox; 13 | import minimalcomps.components.HRangeSlider; 14 | import minimalcomps.components.HScrollBar; 15 | import minimalcomps.components.HSlider; 16 | import minimalcomps.components.HUISlider; 17 | import minimalcomps.components.IndicatorLight; 18 | import minimalcomps.components.InputText; 19 | import minimalcomps.components.Knob; 20 | import minimalcomps.components.Label; 21 | import minimalcomps.components.List; 22 | import minimalcomps.components.ListItem; 23 | import minimalcomps.components.Meter; 24 | import minimalcomps.components.NumericStepper; 25 | import minimalcomps.components.Panel; 26 | import minimalcomps.components.PushButton; 27 | import minimalcomps.components.ProgressBar; 28 | import minimalcomps.components.RadioButton; 29 | import minimalcomps.components.RangeSlider; 30 | import minimalcomps.components.RotarySelector; 31 | import minimalcomps.components.ScrollBar; 32 | import minimalcomps.components.ScrollPane; 33 | import minimalcomps.components.Slider; 34 | import minimalcomps.components.Text; 35 | import minimalcomps.components.TextArea; 36 | import minimalcomps.components.VBox; 37 | import minimalcomps.components.VRangeSlider; 38 | import minimalcomps.components.VScrollBar; 39 | import minimalcomps.components.VSlider; 40 | import minimalcomps.components.VUISlider; 41 | import minimalcomps.components.WheelMenu; 42 | import minimalcomps.components.Window; 43 | 44 | import minimalcomps.designer.event.ComponentEvent; 45 | 46 | import openfl.display.DisplayObjectContainer; 47 | import openfl.events.Event; 48 | 49 | 50 | class ComponentLibrary extends Panel { 51 | 52 | //------------------------------ 53 | // model 54 | //------------------------------ 55 | 56 | private var _titleLabel:Label; 57 | private var _componentList:List; 58 | 59 | 60 | //------------------------------ 61 | // lifecycle 62 | //------------------------------ 63 | 64 | public function new(parent:DisplayObjectContainer = null, xpos:Float = 0.0, ypos:Float = 0.0) { 65 | super(parent, xpos, ypos); 66 | } 67 | 68 | override private function addChildren() { 69 | super.addChildren(); 70 | 71 | _titleLabel = new Label(this, 4, 4); 72 | _titleLabel.text = "Library"; 73 | 74 | _componentList = new List(this, 2, 30); 75 | _componentList.addItem({label: "Bar Chart", type: BarChart}); 76 | _componentList.addItem({label: "Line Chart", type: LineChart}); 77 | _componentList.addItem({label: "Pie Chart", type: PieChart}); 78 | _componentList.addItem({label: "Accordion", type: Accordion}); 79 | _componentList.addItem({label: "Calendar", type: Calendar}); 80 | _componentList.addItem({label: "Check Box", type: CheckBox}); 81 | _componentList.addItem({label: "Color Chooser", type: ColorChooser}); 82 | _componentList.addItem({label: "Combo Box", type: ComboBox}); 83 | _componentList.addItem({label: "FPS Meter", type: FPSMeter}); 84 | _componentList.addItem({label: "H Box", type: HBox}); 85 | _componentList.addItem({label: "H Range Slider", type: HRangeSlider}); 86 | _componentList.addItem({label: "H Scroll Bar", type: HScrollBar}); 87 | _componentList.addItem({label: "H Slider", type: HSlider}); 88 | _componentList.addItem({label: "H UI Slider", type: HUISlider}); 89 | _componentList.addItem({label: "Indicator Light", type: IndicatorLight}); 90 | _componentList.addItem({label: "Input Text", type: InputText}); 91 | _componentList.addItem({label: "Knob", type: Knob}); 92 | _componentList.addItem({label: "Label", type: Label}); 93 | _componentList.addItem({label: "List", type: List}); 94 | _componentList.addItem({label: "List Item", type: ListItem}); 95 | _componentList.addItem({label: "Meter", type: Meter}); 96 | _componentList.addItem({label: "Numeric Stepper", type: NumericStepper}); 97 | _componentList.addItem({label: "Panel", type: Panel}); 98 | _componentList.addItem({label: "Progress Bar", type: ProgressBar}); 99 | _componentList.addItem({label: "Push Button", type: PushButton}); 100 | _componentList.addItem({label: "Radio Button", type: RadioButton}); 101 | _componentList.addItem({label: "Range Slider", type: RangeSlider}); 102 | _componentList.addItem({label: "Rotary Selector", type: RotarySelector}); 103 | _componentList.addItem({label: "Scroll Bar", type: ScrollBar}); 104 | _componentList.addItem({label: "Scroll Pane", type: ScrollPane}); 105 | _componentList.addItem({label: "Slider", type: Slider}); 106 | _componentList.addItem({label: "Text", type: Text}); 107 | _componentList.addItem({label: "Text Area", type: TextArea}); 108 | _componentList.addItem({label: "V Box", type: VBox}); 109 | _componentList.addItem({label: "V Range Slider", type: VRangeSlider}); 110 | _componentList.addItem({label: "V Scroll Bar", type: VScrollBar}); 111 | _componentList.addItem({label: "V Slider", type: VSlider}); 112 | _componentList.addItem({label: "V UI Slider", type: VUISlider}); 113 | _componentList.addItem({label: "Wheel Menu", type: WheelMenu}); 114 | _componentList.addItem({label: "Window", type: Window}); 115 | 116 | _componentList.addEventListener(Event.SELECT, componentSelectHandler); 117 | } 118 | 119 | override private function onInvalidate(event:Event):Void { 120 | super.onInvalidate(event); 121 | 122 | _componentList.setSize(width - 4, height - 32); 123 | } 124 | 125 | private function componentSelectHandler(event:Event):Void { 126 | var selectedItem:Dynamic = _componentList.selectedItem; 127 | 128 | dispatchEvent(new ComponentEvent(ComponentEvent.CHANGE, selectedItem.type)); 129 | } 130 | 131 | } 132 | --------------------------------------------------------------------------------