Someone who’s using Spark DropDownListButton: Please check that I didn’t break this…
Thanks, Harbs > On Dec 12, 2021, at 3:46 PM, ha...@apache.org wrote: > > This is an automated email from the ASF dual-hosted git repository. > > harbs pushed a commit to branch develop > in repository https://gitbox.apache.org/repos/asf/royale-asjs.git > > > The following commit(s) were added to refs/heads/develop by this push: > new 39b4dcf Removed innerHTML from DropDownListButton > 39b4dcf is described below > > commit 39b4dcf092c451675db4d7e762ea6747574be6f3 > Author: Harbs <ha...@in-tools.com> > AuthorDate: Sun Dec 12 15:46:42 2021 +0200 > > Removed innerHTML from DropDownListButton > --- > .../supportClasses/DropDownListButton.as | 161 +++++++++++++++------ > 1 file changed, 118 insertions(+), 43 deletions(-) > > diff --git > a/frameworks/projects/SparkRoyale/src/main/royale/spark/components/supportClasses/DropDownListButton.as > > b/frameworks/projects/SparkRoyale/src/main/royale/spark/components/supportClasses/DropDownListButton.as > index 420e1df..de5c2cc 100644 > --- > a/frameworks/projects/SparkRoyale/src/main/royale/spark/components/supportClasses/DropDownListButton.as > +++ > b/frameworks/projects/SparkRoyale/src/main/royale/spark/components/supportClasses/DropDownListButton.as > @@ -20,8 +20,21 @@ > package spark.components.supportClasses > { > import spark.components.Button; > + COMPILE::JS > + { > + import org.apache.royale.svg.elements.Svg; > + import org.apache.royale.svg.elements.ClipPath; > + import org.apache.royale.svg.elements.Text; > + import org.apache.royale.svg.elements.Rect; > + import org.apache.royale.svg.elements.Path; > + import org.apache.royale.core.WrappedHTMLElement; > + import org.apache.royale.core.WrappedHTMLElement; > + import org.apache.royale.svg.elements.Svg; > + import org.apache.royale.svg.elements.ClipPath; > + import org.apache.royale.svg.GraphicShape; > + } > > - /** > + /** > */ > public class DropDownListButton extends Button > { > @@ -30,7 +43,7 @@ package spark.components.supportClasses > > /** > * Constructor. > - * > + * > * @langversion 3.0 > * @playerversion Flash 10 > * @playerversion AIR 1.5 > @@ -38,57 +51,119 @@ package spark.components.supportClasses > */ > public function DropDownListButton() > { > - super(); > instanceId = instanceCounter.toString(); > instanceCounter++; > + super(); > } > > private var instanceId:String; > > - override public function setActualSize(w:Number, h:Number):void > - { > - super.setActualSize(w, h); > - COMPILE::JS > - { > - updateSkin(w, h); > - } > - } > + override public function setActualSize(w:Number, h:Number):void > + { > + super.setActualSize(w, h); > + COMPILE::JS > + { > + updateSkin(w, h); > + } > + } > > - COMPILE::JS > - override public function set label(value:String):void > - { > - super.label = value; > - updateSkin(width, height); > - } > + COMPILE::JS > + override public function set label(value:String):void > + { > + super.label = value; > + updateSkin(width, height); > + } > > - COMPILE::JS > - private function updateSkin(w:Number, h:Number):void > - { > - var clipid:String = "txtClip" + instanceId; > + COMPILE::JS > + private function updateSkin(w:Number, h:Number):void > + { > if (h < 4) return; > - element.innerHTML = '<svg width="' + w + 'px" height="' + > - h + 'px" xmlns="http://www.w3.org/2000/svg";><clipPath id="' > + clipid + '"><rect x="0" y="0" height="' + h + > - 'px" width="' + (w - 29) + > 'px"/></clipPath><text y="3px" clip-path="url(#' + clipid + ')">' + > - label + '</text><style><![CDATA[' + > - 'text{ dominant-baseline: hanging;' + > - /* font: 12px Verdana, Helvetica, Arial, sans-serif;*/ > - '}]]></style><rect x="' + > - (w - 26) + 'px" width="1px" height="' + (h - 4) + > 'px"/><path d="M' + > - (w - 21) + ',5 L ' + (w - 13) + ',5 L ' + > - (w - 17) + ',12 L ' + (w - 21) + ',5"</path></svg>'; > - > - } > + text.element.textContent = label; > + svg.width = w; > + svg.element.style.width = w + "px"; > + svg.height = h; > + svg.element.style.height = h + "px"; > + rect.x = w - 26; > + rect.height = h - 4; > + var d:String = 'M' + (w - 21) + ',5 L ' + (w - 13) + > ',5 L ' + > + (w - 17) + ',12 L ' + (w - 21) + ',5'; > + path.element.setAttribute("d",d); > + // element.innerHTML = '<svg width="' + w + 'px" > height="' + > + // h + 'px" > xmlns="http://www.w3.org/2000/svg";><clipPath id="' + clipid + '"><rect x="0" > y="0" height="' + h + > + // 'px" width="' + (w - 29) + > 'px"/></clipPath><text y="3px" clip-path="url(#' + clipid + ')">' + > + // label + '</text><style><![CDATA[' + > + // 'text{ dominant-baseline: hanging;' + > + // /* font: 12px Verdana, Helvetica, Arial, > sans-serif;*/ > + // '}]]></style><rect x="' + > + // (w - 26) + 'px" width="1px" height="' + (h - 4) > + 'px"/><path d="M' + > + // (w - 21) + ',5 L ' + (w - 13) + ',5 L ' + > + // (w - 17) + ',12 L ' + (w - 21) + > ',5"</path></svg>'; > + > + } > > - > //-------------------------------------------------------------------------- > - // > - // Overridden methods > - // > - > //-------------------------------------------------------------------------- > - > - override public function get measuredHeight():Number > - { > - return 21; // maybe measure font someday if fontSize is large > - } > + override protected function createElement():WrappedHTMLElement > + { > + var elem:WrappedHTMLElement = super.createElement(); > + svg = new Svg(); > + clipPath = new ClipPath(); > + var clipid:String = "txtClip" + instanceId; > + clipPath.id = clipid; > + clipRect = new Rect(); > + clipRect.x = 0; > + clipRect.y = 0; > + clipPath.addElement(clipRect); > + svg.addElement(clipPath); > + text = new Text(); > + text.y = 3; > + text.element.setAttribute("clip-path",'url(#' + clipid > + ')'); > + svg.addElement(text) > + var style:SVGStyleElement = new SVGStyleElement(); > + style.innerHTML = '<![CDATA[' + > + 'text{ dominant-baseline: hanging;' + > + /* font: 12px Verdana, Helvetica, Arial, > sans-serif;*/ > + '}]]>'; > + svg.element.appendChild(style); > + rect = new Rect(); > + rect.width = 1; > + svg.addElement(rect); > + path = new Path(); > + svg.addElement(path); > + return elem; > + } > + COMPILE::JS > + private var svg:Svg; > + COMPILE::JS > + private var clipPath:ClipPath; > + COMPILE::JS > + private var clipRect:Rect; > + COMPILE::JS > + private var text:Text; > + COMPILE::JS > + private var rect:Rect; > + COMPILE::JS > + private var path:Path; > + //style > + > + /** > + * svg > + * clipPath > + * rect > + * text > + * style > + * rect > + * path > + */ > + > + > //-------------------------------------------------------------------------- > + // > + // Overridden methods > + // > + > //-------------------------------------------------------------------------- > + > + override public function get measuredHeight():Number > + { > + return 21; // maybe measure font someday if fontSize is > large > + } > > } > } > \ No newline at end of file
