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
commit 34334803c1aa84ab946e86c80f2139ecfebc6424 Author: DESKTOP-RH4S838\Yishay <[email protected]> AuthorDate: Mon Jul 2 13:37:18 2018 +0300 Refactored DropShadow to be more PAYG. Still some refactoring due in terms of renaming and creating a factory bead. --- .../Graphics/src/main/resources/svg-manifest.xml | 3 + .../Graphics/src/main/royale/GraphicsClasses.as | 4 + .../graphics/utils/addSvgElementToElement.as | 38 +++++++ .../royale/org/apache/royale/svg/BlendFilter.as | 89 ++++++++++++++++ .../royale/org/apache/royale/svg/BlurFilter.as | 100 ++++++++++++++++++ .../royale/org/apache/royale/svg/DropShadowBead.as | 85 +++++----------- .../royale/org/apache/royale/svg/OffsetBead.as | 113 +++++++++++++++++++++ 7 files changed, 373 insertions(+), 59 deletions(-) diff --git a/frameworks/projects/Graphics/src/main/resources/svg-manifest.xml b/frameworks/projects/Graphics/src/main/resources/svg-manifest.xml index ee91123..ca8b045 100644 --- a/frameworks/projects/Graphics/src/main/resources/svg-manifest.xml +++ b/frameworks/projects/Graphics/src/main/resources/svg-manifest.xml @@ -23,6 +23,9 @@ <component id="TransformBead" class="org.apache.royale.svg.TransformBead" /> <component id="ClipBead" class="org.apache.royale.svg.ClipBead" /> <component id="DropShadowBead" class="org.apache.royale.svg.DropShadowBead" /> + <component id="OffsetBead" class="org.apache.royale.svg.OffsetBead" /> + <component id="BlurFilter" class="org.apache.royale.svg.BlurFilter" /> + <component id="BlendFilter" class="org.apache.royale.svg.BlendFilter" /> <component id="MaskBead" class="org.apache.royale.svg.MaskBead" /> <component id="DisableClipBead" class="org.apache.royale.svg.DisableClipBead" /> <component id="LinearGradient" class="org.apache.royale.svg.LinearGradient" /> diff --git a/frameworks/projects/Graphics/src/main/royale/GraphicsClasses.as b/frameworks/projects/Graphics/src/main/royale/GraphicsClasses.as index b2c23e3..bf91968 100644 --- a/frameworks/projects/Graphics/src/main/royale/GraphicsClasses.as +++ b/frameworks/projects/Graphics/src/main/royale/GraphicsClasses.as @@ -41,6 +41,10 @@ internal class GraphicsClasses { import org.apache.royale.graphics.utils.PathHelper; PathHelper; } + COMPILE::JS + { + import org.apache.royale.graphics.utils.addSvgElementToElement; addSvgElementToElement; + } import org.apache.royale.graphics.QuadraticCurve; QuadraticCurve; import org.apache.royale.graphics.ICircle; ICircle; import org.apache.royale.graphics.IDrawable; IDrawable; diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/graphics/utils/addSvgElementToElement.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/graphics/utils/addSvgElementToElement.as new file mode 100644 index 0000000..57acda0 --- /dev/null +++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/graphics/utils/addSvgElementToElement.as @@ -0,0 +1,38 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 org.apache.royale.graphics.utils +{ + COMPILE::JS + { + import org.apache.royale.core.UIBase; + import org.apache.royale.core.WrappedHTMLElement; + } + + /** + * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement + */ + COMPILE::JS + public function addSvgElementToElement(element:Element,type:String):WrappedHTMLElement + { + var svgNs:String = "http://www.w3.org/2000/svg";; + var elem:WrappedHTMLElement = document.createElementNS(svgNs, type) as WrappedHTMLElement; + element.appendChild(elem); + return elem; + } +} diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/BlendFilter.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/BlendFilter.as new file mode 100644 index 0000000..112dba2 --- /dev/null +++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/BlendFilter.as @@ -0,0 +1,89 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 org.apache.royale.svg +{ + + import org.apache.royale.core.IBead; + import org.apache.royale.core.IStrand; + import org.apache.royale.events.IEventDispatcher; + import org.apache.royale.events.Event; + COMPILE::JS + { + import org.apache.royale.graphics.utils.addSvgElementToElement; + } + + /** + * The BlendFilter blends several filter elements + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9.3 + */ + public class BlendFilter implements IBead + { + private var _strand:IStrand; + private var _in2:String; + + public function BlendFilter() + { + } + + /** + * @copy org.apache.royale.core.IBead#strand + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9.3 + */ + public function set strand(value:IStrand):void + { + _strand = value; + (_strand as IEventDispatcher).addEventListener('beadsAdded', onInitComplete); + } + + /** + * @royaleignorecoercion Element + */ + protected function onInitComplete(e:Event):void + { + COMPILE::JS + { + var filter:Element = (_strand.getBeadByType(DropShadowBead) as DropShadowBead).filterElement; + var blend:Element = addSvgElementToElement(filter, "feBlend") as Element; + blend.setAttribute("in", "SourceGraphic"); + blend.setAttribute("in2", in2); + blend.setAttribute("mode", "normal"); + } + } + + public function get in2():String + { + return _in2; + } + + public function set in2(value:String):void + { + _in2 = value; + } + + } +} + diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/BlurFilter.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/BlurFilter.as new file mode 100644 index 0000000..00de473 --- /dev/null +++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/BlurFilter.as @@ -0,0 +1,100 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 org.apache.royale.svg +{ + + import org.apache.royale.core.IBead; + import org.apache.royale.core.IRenderedObject; + import org.apache.royale.core.IStrand; + import org.apache.royale.events.IEventDispatcher; + import org.apache.royale.events.Event; + COMPILE::JS + { + import org.apache.royale.graphics.utils.addSvgElementToElement; + } + + /** + * The BlurFilter bead adds a blur to a filtered SVG element + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9.3 + */ + public class BlurFilter implements IBead + { + private var _strand:IStrand; + private var _stdDeviation:Number = 3; + private var _blurResult:String = "blurResult"; + + public function BlurFilter() + { + } + + /** + * @copy org.apache.royale.core.IBead#strand + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9.3 + */ + public function set strand(value:IStrand):void + { + _strand = value; + (_strand as IEventDispatcher).addEventListener('beadsAdded', onInitComplete); + } + + /** + * @royaleignorecoercion Element + */ + protected function onInitComplete(e:Event):void + { + COMPILE::JS + { + var filter:Element = (_strand.getBeadByType(DropShadowBead) as DropShadowBead).filterElement; + var offset:Element = addSvgElementToElement(filter, "feGaussianBlur") as Element; + offset.setAttribute("stdDeviation", stdDeviation); + offset.setAttribute("result", blurResult); + } + } + + public function get stdDeviation():Number + { + return _stdDeviation; + } + + public function set stdDeviation(value:Number):void + { + _stdDeviation = value; + } + + public function get blurResult():String + { + return _blurResult; + } + + public function set blurResult(value:String):void + { + _blurResult = value; + } + + } +} + diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/DropShadowBead.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/DropShadowBead.as index ef43f4f..3c5038b 100644 --- a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/DropShadowBead.as +++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/DropShadowBead.as @@ -32,6 +32,8 @@ package org.apache.royale.svg COMPILE::JS { import org.apache.royale.utils.UIDUtil; + import org.apache.royale.graphics.utils.addSvgElementToElement; + import org.apache.royale.events.IEventDispatcher; } /** * The DropShadowBead bead allows you to filter @@ -44,11 +46,13 @@ package org.apache.royale.svg public class DropShadowBead implements IBead { private var _strand:IStrand; - private var _dx:Number = 0; - private var _dy:Number = 0; - private var _stdDeviation:Number = 0; private var _width:String = "200%"; private var _height:String = "200%"; +// private var floodColor:uint; + COMPILE::JS + { + private var _filterElement:Element; + } public function DropShadowBead() { @@ -105,36 +109,25 @@ package org.apache.royale.svg { var svgElement:Node = host.element as Element; var defs:Element = getChildNode(svgElement, "defs") as Element; - var filter:Element = getChildNode(defs, "filter") as Element; - filter.id = "myDropShadow" + UIDUtil.createUID(); - filter.setAttribute("width", _width); - filter.setAttribute("height", _height); + filterElement = getChildNode(defs, "filter") as Element; + filterElement.id = "myDropShadow" + UIDUtil.createUID(); + filterElement.setAttribute("width", _width); + filterElement.setAttribute("height", _height); // clean up existing filter - if (filter.hasChildNodes()) + if (filterElement.hasChildNodes()) { - var childNodes:Object = filter.childNodes; + var childNodes:Object = filterElement.childNodes; for (var i:int = 0; i < childNodes.length; i++) { - filter.removeChild(childNodes[i]); + filterElement.removeChild(childNodes[i]); } } - // create offset - var offset:Element = createChildNode(filter, "feOffset") as Element; - offset.setAttribute("dx", dx); - offset.setAttribute("dy", dy); - offset.setAttribute("in", "SourceAlpha"); - offset.setAttribute("result", "offsetResult"); - // create blur - var blur:Element = createChildNode(filter, "feGaussianBlur") as Element; - blur.setAttribute("stdDeviation", stdDeviation); - blur.setAttribute("result", "blurResult"); +// var flood:Element = addSvgElementToWrapper(filterElement, "feFlood") as Element; +// flood.setAttribute("flood-color", floodColor); +// flood.setAttribute("flood-alpha", floodAlpha); // create blend - var blend:Element = createChildNode(filter, "feBlend") as Element; - blend.setAttribute("in", "SourceGraphic"); - blend.setAttribute("in2", "blurResult"); - blend.setAttribute("mode", "normal"); // apply filter - host.element.style["filter"] = "url(#" + filter.id + ")"; + host.element.style["filter"] = "url(#" + filterElement.id + ")"; } COMPILE::JS @@ -142,7 +135,7 @@ package org.apache.royale.svg { if (!node.hasChildNodes()) { - return createChildNode(node, tagName); + return addSvgElementToElement(node as Element, tagName); } var childNodes:Object = node.childNodes; for (var i:int = 0; i < childNodes.length; i++) @@ -153,51 +146,25 @@ package org.apache.royale.svg } } - return createChildNode(node, tagName); + return addSvgElementToElement(node as Element, tagName); } - COMPILE::JS - private function createChildNode(parent:Node, tagName:String):Node - { - var svgNs:String = "http://www.w3.org/2000/svg";; - var element:Node = window.document.createElementNS(svgNs, tagName); - parent.appendChild(element); - return element; - } public function get host():IRenderedObject { return _strand as IRenderedObject; } - public function get stdDeviation():Number - { - return _stdDeviation; - } - - public function set stdDeviation(value:Number):void - { - _stdDeviation = value; - } - - public function get dx():Number - { - return _dx; - } - - public function set dx(value:Number):void - { - _dx = value; - } - - public function get dy():Number + COMPILE::JS + public function get filterElement():Element { - return _dy; + return _filterElement; } - public function set dy(value:Number):void + COMPILE::JS + public function set filterElement(value:Element):void { - _dy = value; + _filterElement = value; } } diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/OffsetBead.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/OffsetBead.as new file mode 100644 index 0000000..d572109 --- /dev/null +++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/OffsetBead.as @@ -0,0 +1,113 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 org.apache.royale.svg +{ + + import org.apache.royale.core.IBead; + import org.apache.royale.core.IRenderedObject; + import org.apache.royale.core.IStrand; + import org.apache.royale.events.IEventDispatcher; + import org.apache.royale.events.Event; + COMPILE::JS + { + import org.apache.royale.graphics.utils.addSvgElementToElement; + } + + /** + * The OffsetBead bead adds an offset to a filtered SVG element + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9.3 + */ + public class OffsetBead implements IBead + { + private var _strand:IStrand; + private var _dx:Number = 0; + private var _dy:Number = 0; + private var _offsetResult:String = "offsetResult"; + + public function OffsetBead() + { + } + + /** + * @copy org.apache.royale.core.IBead#strand + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9.3 + */ + public function set strand(value:IStrand):void + { + _strand = value; + (_strand as IEventDispatcher).addEventListener('beadsAdded', onInitComplete); + } + + /** + * @royaleignorecoercion Element + */ + protected function onInitComplete(e:Event):void + { + COMPILE::JS + { + var filter:Element = (_strand.getBeadByType(DropShadowBead) as DropShadowBead).filterElement; + var offset:Element = addSvgElementToElement(filter, "feOffset") as Element; + offset.setAttribute("dx", dx); + offset.setAttribute("dy", dy); + offset.setAttribute("in", "SourceAlpha"); + offset.setAttribute("result", offsetResult); + } + } + + public function get dx():Number + { + return _dx; + } + + public function set dx(value:Number):void + { + _dx = value; + } + + public function get dy():Number + { + return _dy; + } + + public function set dy(value:Number):void + { + _dy = value; + } + + public function get offsetResult():String + { + return _offsetResult; + } + + public function set offsetResult(value:String):void + { + _offsetResult = value; + } + + } +} +
