You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by yi...@apache.org on 2022/11/23 11:32:58 UTC
[royale-asjs] 01/03: Add ColorPickerView
This is an automated email from the ASF dual-hosted git repository.
yishayw pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit bfadd5d909a988f721716fb7ec57449bcbce314f
Author: Yishay Weiss <yi...@hotmail.com>
AuthorDate: Tue Aug 23 16:15:07 2022 +0300
Add ColorPickerView
---
.../royale/mx/controls/beads/ColorPickerView.as | 274 +++++++++++++++++++++
1 file changed, 274 insertions(+)
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/beads/ColorPickerView.as b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/beads/ColorPickerView.as
new file mode 100644
index 0000000000..4ba61cc499
--- /dev/null
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/beads/ColorPickerView.as
@@ -0,0 +1,274 @@
+
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package mx.controls.beads
+{
+ import org.apache.royale.core.BeadViewBase;
+ import org.apache.royale.core.IPopUpHost;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IStyleableObject;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.geom.Point;
+ import org.apache.royale.html.Group;
+ import org.apache.royale.html.TextButton;
+ COMPILE::JS
+ {
+ import org.apache.royale.utils.CSSUtils;
+ import org.apache.royale.core.IRenderedObject;
+ }
+ import org.apache.royale.utils.loadBeadFromValuesManager;
+ import org.apache.royale.utils.PointUtils;
+ import org.apache.royale.utils.UIUtils;
+ import org.apache.royale.core.IStrandWithModel;
+ import org.apache.royale.html.supportClasses.IColorPickerPopUp;
+ import org.apache.royale.core.IColorModel;
+ import org.apache.royale.core.IPopUp;
+ import org.apache.royale.html.util.getModelByType;
+
+ /**
+ * The ColorPickerView class creates the visual elements of the org.apache.royale.html.ColorPicker
+ * component. The job of the view bead is to put together the parts of the ComboBox such as the color container
+ * and org.apache.royale.html.Button to trigger the pop-up.
+ *
+ * @viewbead
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ public class ColorPickerView extends BeadViewBase implements IComboBoxView
+ {
+ public function ColorPickerView()
+ {
+ super();
+ }
+
+ protected var selectedColorDisplay:IUIBase;
+
+ /**
+ * The TextInput component of the ComboBox.
+ *
+ * @copy org.apache.royale.html.beads.IComboBoxView#text
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ public function get textInputField():Object
+ {
+ return selectedColorDisplay;
+ }
+
+ private var button:TextButton;
+
+ /**
+ * The Button component of the ComboBox.
+ *
+ * @copy org.apache.royale.html.beads.IComboBoxView#text
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ public function get popupButton():Object
+ {
+ return button;
+ }
+
+ private var list:IUIBase;
+
+ /**
+ * The pop-up component of the ComboBox.
+ *
+ * @copy org.apache.royale.html.beads.IComboBoxView#text
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ public function get popUp():Object
+ {
+ return list;
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ var host:UIBase = value as UIBase;
+
+ selectedColorDisplay = new Group();
+ (selectedColorDisplay as IStyleableObject).className = "ColorPickerDisplayedColor";
+
+ button = new TextButton();
+ button.style = {
+ "padding": 0,
+ "margin": 0
+ };
+ button.text = '\u25BC';
+
+ if (isNaN(host.width)) selectedColorDisplay.width = 25;
+
+ COMPILE::JS
+ {
+ // inner components are absolutely positioned so we want to make sure the host is the offset parent
+ if (!host.element.style.position)
+ {
+ host.element.style.position = "relative";
+ }
+ }
+ host.addElement(selectedColorDisplay);
+ host.addElement(button);
+
+ loadBeadFromValuesManager(IPopUp, "iPopUp", _strand);
+ list = _strand.getBeadByType(IColorPickerPopUp) as IUIBase;
+ list.visible = false;
+
+ var model:IEventDispatcher = (_strand as IStrandWithModel).model as IEventDispatcher;
+ (list as IColorPickerPopUp).model = model;
+ model.addEventListener("change", handleColorChange);
+
+ IEventDispatcher(_strand).addEventListener("sizeChanged", handleSizeChange);
+
+ // set initial value and positions using default sizes
+ colorChangeAction();
+ sizeChangeAction();
+ }
+
+ /**
+ * Returns whether or not the pop-up is visible.
+ *
+ * @copy org.apache.royale.html.beads.IComboBoxView#text
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ public function get popUpVisible():Boolean
+ {
+ if (list) return list.visible;
+ else return false;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IComboBoxModel
+ * @royaleignorecoercion org.apache.royale.core.IUIBase
+ */
+ public function set popUpVisible(value:Boolean):void
+ {
+ if (value && !list.visible) {
+ var model:IColorModel = getModelByType(_strand,IColorModel) as IColorModel;
+ (list as IColorPickerPopUp).model = model;
+ list.visible = true;
+
+ var origin:Point = new Point(0, button.y+button.height);
+ var relocated:Point = PointUtils.localToGlobal(origin,_strand);
+ list.x = relocated.x
+ list.y = relocated.y;
+ COMPILE::JS {
+ (list as IRenderedObject).element.style.position = "absolute";
+ }
+
+ var popupHost:IPopUpHost = UIUtils.findPopUpHost(_strand as IUIBase);
+ popupHost.popUpParent.addElement(list);
+ }
+ else if (list.visible) {
+ UIUtils.removePopUp(list);
+ list.visible = false;
+ }
+ }
+
+ /**
+ * @private
+ */
+ protected function handleSizeChange(event:Event):void
+ {
+ sizeChangeAction();
+ }
+
+ /**
+ * @private
+ */
+ protected function handleColorChange(event:Event):void
+ {
+ colorChangeAction();
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.core.IColorModel
+ */
+ protected function colorChangeAction():void
+ {
+ var model:IColorModel = getModelByType(_strand,IColorModel) as IColorModel;
+ COMPILE::JS
+ {
+ selectedColorDisplay.element.style.backgroundColor = CSSUtils.attributeFromColor(model.color);
+ }
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ protected function sizeChangeAction():void
+ {
+ var host:UIBase = UIBase(_strand);
+
+ selectedColorDisplay.x = 0;
+ selectedColorDisplay.y = 0;
+ selectedColorDisplay.height = 20;
+ if (host.isWidthSizedToContent()) {
+ selectedColorDisplay.width = 25;
+ } else {
+ selectedColorDisplay.width = host.width - 20;
+ }
+
+ button.x = selectedColorDisplay.width;
+ button.y = 0;
+ button.width = 20;
+ button.height = selectedColorDisplay.height;
+
+ COMPILE::JS {
+ selectedColorDisplay.element.style.position = "absolute";
+ button.element.style.position = "absolute";
+ }
+
+ if (host.isHeightSizedToContent()) {
+ host.height = selectedColorDisplay.height;
+ }
+ if (host.isWidthSizedToContent()) {
+ host.width = selectedColorDisplay.width + button.width;
+ }
+ }
+ }
+}
\ No newline at end of file