copy files moved from Graphics to HTML
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/7a65d3d7 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/7a65d3d7 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/7a65d3d7 Branch: refs/heads/develop Commit: 7a65d3d737ba648459d8a0c680045316e99e3e2b Parents: 1890b71 Author: Alex Harui <aha...@apache.org> Authored: Fri Oct 28 23:26:57 2016 -0700 Committer: Alex Harui <aha...@apache.org> Committed: Tue Nov 1 07:59:03 2016 -0700 ---------------------------------------------------------------------- .../src/main/flex/org/apache/flex/svg/Circle.as | 118 ++++ .../flex/org/apache/flex/svg/CompoundGraphic.as | 585 +++++++++++++++++++ .../main/flex/org/apache/flex/svg/Ellipse.as | 152 +++++ .../flex/org/apache/flex/svg/GraphicShape.as | 225 +++++++ .../src/main/flex/org/apache/flex/svg/Path.as | 133 +++++ .../src/main/flex/org/apache/flex/svg/Rect.as | 156 +++++ .../src/main/flex/org/apache/flex/svg/Text.as | 150 +++++ 7 files changed, 1519 insertions(+) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7a65d3d7/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Circle.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Circle.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Circle.as new file mode 100644 index 0000000..586bbfd --- /dev/null +++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Circle.as @@ -0,0 +1,118 @@ +/** + * Licensed 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.flex.svg +{ + import org.apache.flex.graphics.ICircle; + + COMPILE::SWF + { + import flash.geom.Point; + import flash.geom.Rectangle; + } + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + public class Circle extends GraphicShape implements ICircle + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.7 + */ + public function Circle(cx:Number=0, cy:Number=0, r:Number=0) + { + x = cx; + y = cy; + radius = r; + } + + private var _radius:Number; + + public function get radius():Number + { + return _radius; + } + + public function set radius(value:Number):void + { + _radius = value; + } + + COMPILE::JS + private var _circle:WrappedHTMLElement; + + /** + * Draw the circle. + * @param cx The x location of the center of the circle + * @param cy The y location of the center of the circle. + * @param radius The radius of the circle. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + * @flexjsignorecoercion SVGCircleElement + */ + public function drawCircle(cx:Number, cy:Number, radius):void + { + COMPILE::SWF + { + graphics.clear(); + applyStroke(); + beginFill(new Rectangle(cx,cy,radius*2, radius*2),new Point(cx-radius,cy-radius)); + graphics.drawCircle(cx,cy,radius); + endFill(); + } + COMPILE::JS + { + var style:String = getStyleStr(); + + if (_circle == null) { + _circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle') as WrappedHTMLElement; + _circle.flexjs_wrapper = this; + element.appendChild(_circle); + } + _circle.setAttribute('style', style); + if (stroke) + { + _circle.setAttribute('cx', radius + stroke.weight); + _circle.setAttribute('cy', radius + stroke.weight); + } + else + { + _circle.setAttribute('cx', radius); + _circle.setAttribute('cy', radius); + } + + _circle.setAttribute('r', radius); + + resize(x-radius, y-radius, (_circle as SVGCircleElement).getBBox()); + + } + } + + override protected function draw():void + { + drawCircle(0, 0, radius); + } + + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7a65d3d7/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/CompoundGraphic.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/CompoundGraphic.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/CompoundGraphic.as new file mode 100644 index 0000000..a57cb5a --- /dev/null +++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/CompoundGraphic.as @@ -0,0 +1,585 @@ +/** + * Licensed 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.flex.svg +{ + import org.apache.flex.graphics.ICompoundGraphic; + import org.apache.flex.graphics.IFill; + import org.apache.flex.graphics.IStroke; + import org.apache.flex.graphics.PathBuilder; + import org.apache.flex.graphics.SolidColor; + + COMPILE::SWF + { + import flash.display.GraphicsPath; + import flash.display.Shape; + import flash.display.Sprite; + import flash.geom.Point; + import flash.geom.Rectangle; + import flash.text.TextFieldType; + + import org.apache.flex.core.CSSTextField; + import org.apache.flex.graphics.utils.PathHelper; + } + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * CompoundGraphic is a surface on which you can + * draw various graphic elements such as Rect, Circle, + * Ellipse, Path etc. + * Use this class if you want to draw multiple graphic + * shapes on a single container. + * + */ + public class CompoundGraphic extends GraphicShape implements ICompoundGraphic + { + private var _textFill:IFill; + + public function get textFill():IFill + { + return _textFill; + } + /** + * The color of the text. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion FlexJS 0.0 + */ + public function set textFill(value:IFill):void + { + _textFill = value; + } + + private var _textStroke:IStroke; + + public function get textStroke():IStroke + { + return _textStroke; + } + /** + * The stroke color of the text. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion FlexJS 0.0 + */ + public function set textStroke(value:IStroke):void + { + _textStroke = value; + } + + /** + * Removes all of the drawn elements of the container. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0.3 + */ + public function removeAllElements():void + { + clear(); + } + + /** + * Clears all of the drawn path data. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.7.0 + */ + public function clear():void + { + COMPILE::SWF + { + graphics.clear(); + } + COMPILE::JS + { + var svg:HTMLElement = element; + while (svg.lastChild) { + svg.removeChild(svg.lastChild); + } + } + } + + /** + * Draw the rectangle. + * @param x The x position of the top-left corner of the rectangle. + * @param y The y position of the top-left corner. + * @param width The width of the rectangle. + * @param height The height of the rectangle. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0.3 + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + public function drawRect(x:Number, y:Number, width:Number, height:Number):void + { + COMPILE::SWF + { + applyStroke(); + beginFill(new Rectangle(x, y, width, height), new Point(x,y) ); + graphics.drawRect(x, y, width, height); + endFill(); + } + COMPILE::JS + { + drawRoundRect(x, y, width, height, NaN); + } + } + + /** + * Draws a rounded rectangle. + * Note: The radius values are different than the Flash API of the same name. Flash uses diameter instead of radius. + * @param x The x position of the top-left corner of the rectangle. + * @param y The y position of the top-left corner. + * @param width The width of the rectangle. + * @param height The height of the rectangle. + * @param radiusX The horizontal radius of the rounded corners (in pixels). + * @param radiusY The vertical radius of the rounded corners (in pixels). Optional; if no value is specified, the default value matches that provided for the <code>radiusX</code> parameter. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0.3 + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + public function drawRoundRect(x:Number, y:Number, width:Number, height:Number, radiusX:Number, radiusY:Number = NaN):void + { + COMPILE::SWF + { + applyStroke(); + beginFill(new Rectangle(x,y,width,height), new Point(x,y)); + radiusX *=2; + radiusY = isNaN(radiusY) ? radiusY : radiusY*2; + graphics.drawRoundRect(x,y,width,height,radiusX,radiusY); + endFill(); + } + COMPILE::JS + { + if(isNaN(radiusY)) + radiusY = radiusX; + + var style:String = getStyleStr(); + var rect:WrappedHTMLElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect') as WrappedHTMLElement; + rect.flexjs_wrapper = this; + rect.style.left = x; + rect.style.top = y; + rect.setAttribute('style', style); + rect.setAttribute('x', x); + rect.setAttribute('y', y); + rect.setAttribute('width', width); + rect.setAttribute('height', height); + if(!isNaN(radiusX)) + { + rect.setAttribute('rx', radiusX); + rect.setAttribute('ry', radiusY); + } + element.appendChild(rect); + } + + } + + /** + * Draw the ellipse. + * @param x The x position of the top-left corner of the bounding box of the ellipse. + * @param y The y position of the top-left corner of the bounding box of the ellipse. + * @param width The width of the ellipse. + * @param height The height of the ellipse. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0.3 + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + public function drawEllipse(x:Number, y:Number, width:Number, height:Number):void + { + COMPILE::SWF + { + applyStroke(); + beginFill(new Rectangle(x,y,width,height), new Point(x,y)); + graphics.drawEllipse(x,y,width,height); + endFill(); + } + COMPILE::JS + { + var style:String = getStyleStr(); + var ellipse:WrappedHTMLElement = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse') as WrappedHTMLElement; + ellipse.flexjs_wrapper = this; + ellipse.style.left = x; + ellipse.style.top = y; + ellipse.setAttribute('style', style); + ellipse.setAttribute('cx', x + width / 2); + ellipse.setAttribute('cy', y + height / 2); + ellipse.setAttribute('rx', width / 2); + ellipse.setAttribute('ry', height / 2); + element.appendChild(ellipse); + } + } + + /** + * Draw the circle. + * @param x The x location of the center of the circle + * @param y The y location of the center of the circle. + * @param radius The radius of the circle. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + public function drawCircle(x:Number, y:Number, radius:Number):void + { + COMPILE::SWF + { + applyStroke(); + beginFill(new Rectangle(x,y,radius*2, radius*2),new Point(x-radius,y-radius)); + graphics.drawCircle(x,y,radius); + endFill(); + } + COMPILE::JS + { + var style:String = getStyleStr(); + var circle:WrappedHTMLElement = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse') as WrappedHTMLElement; + circle.flexjs_wrapper = this; + circle.style.left = x; + circle.style.top = y; + circle.setAttribute('style', style); + circle.setAttribute('cx', x); + circle.setAttribute('cy', y); + circle.setAttribute('rx', radius); + circle.setAttribute('ry', radius); + element.appendChild(circle); + + } + } + + /** + * Draw the path. + * @param data A PathBuilder object containing a vector of drawing commands. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + public function drawPathCommands(data:PathBuilder):void + { + drawStringPath(data.getPathString()); + } + + /** + * Draw the path. + * @param data A string containing a compact represention of the path segments. + * The value is a space-delimited string describing each path segment. Each + * segment entry has a single character which denotes the segment type and + * two or more segment parameters. + * + * If the segment command is upper-case, the parameters are absolute values. + * If the segment command is lower-case, the parameters are relative values. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + public function drawStringPath(data:String):void + { + COMPILE::SWF + { + applyStroke(); + var bounds:Rectangle = PathHelper.getBounds(data); + beginFill(bounds,bounds.topLeft); + var graphicsPath:GraphicsPath = PathHelper.getSegments(data); + graphics.drawPath(graphicsPath.commands, graphicsPath.data); + endFill(); + } + COMPILE::JS + { + var style:String = getStyleStr(); + var path:WrappedHTMLElement = document.createElementNS('http://www.w3.org/2000/svg', 'path') as WrappedHTMLElement; + path.flexjs_wrapper = this; + path.style.left = 0; + path.style.top = 0; + path.setAttribute('style', style); + path.setAttribute('d', data); + element.appendChild(path); + } + } + + public function drawLine():void + { + + } + + public function drawPolygon():void + { + + } + + + /** + * Draws a rounded rectangle using the size of a radius to draw the rounded corners. + * You must set the line style, fill, or both + * on the Graphics object before + * you call the <code>drawRoundRectComplex()</code> method + * by calling the <code>linestyle()</code>, + * <code>lineGradientStyle()</code>, <code>beginFill()</code>, + * <code>beginGradientFill()</code>, or + * <code>beginBitmapFill()</code> method. + * + * @param graphics The Graphics object that draws the rounded rectangle. + * + * @param x The horizontal position relative to the + * registration point of the parent display object, in pixels. + * + * @param y The vertical position relative to the + * registration point of the parent display object, in pixels. + * + * @param width The width of the round rectangle, in pixels. + * + * @param height The height of the round rectangle, in pixels. + * + * @param topLeftRadius The radius of the upper-left corner, in pixels. + * + * @param topRightRadius The radius of the upper-right corner, in pixels. + * + * @param bottomLeftRadius The radius of the bottom-left corner, in pixels. + * + * @param bottomRightRadius The radius of the bottom-right corner, in pixels. + * + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public function drawRoundRectComplex(x:Number, y:Number, + width:Number, height:Number, + topLeftRadius:Number, topRightRadius:Number, + bottomLeftRadius:Number, bottomRightRadius:Number):void + { + COMPILE::SWF + { + applyStroke(); + beginFill(new Rectangle(x,y,width,height), new Point(x,y)); + graphics.drawRoundRectComplex(x,y,width,height,topLeftRadius,topRightRadius,bottomLeftRadius,bottomRightRadius); + endFill(); + } + COMPILE::JS + { + var builder:PathBuilder = new PathBuilder(); + builder.drawRoundRectComplex(x, y, width, height, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius); + drawStringPath(builder.getPathString()); + } + + + } + + /** + * Draws a rounded rectangle using the size of individual x and y radii to + * draw the rounded corners. + * You must set the line style, fill, or both + * on the Graphics object before + * you call the <code>drawRoundRectComplex2()</code> method + * by calling the <code>linestyle()</code>, + * <code>lineGradientStyle()</code>, <code>beginFill()</code>, + * <code>beginGradientFill()</code>, or + * <code>beginBitmapFill()</code> method. + * + * @param graphics The Graphics object that draws the rounded rectangle. + * + * @param x The horizontal position relative to the + * registration point of the parent display object, in pixels. + * + * @param y The vertical position relative to the + * registration point of the parent display object, in pixels. + * + * @param width The width of the round rectangle, in pixels. + * + * @param height The height of the round rectangle, in pixels. + * + * @param radiusX The default radiusX to use, if corner-specific values are not specified. + * This value must be specified. + * + * @param radiusY The default radiusY to use, if corner-specific values are not specified. + * If 0, the value of radiusX is used. + * + * @param topLeftRadiusX The x radius of the upper-left corner, in pixels. If NaN, + * the value of radiusX is used. + * + * @param topLeftRadiusY The y radius of the upper-left corner, in pixels. If NaN, + * the value of topLeftRadiusX is used. + * + * @param topRightRadiusX The x radius of the upper-right corner, in pixels. If NaN, + * the value of radiusX is used. + * + * @param topRightRadiusY The y radius of the upper-right corner, in pixels. If NaN, + * the value of topRightRadiusX is used. + * + * @param bottomLeftRadiusX The x radius of the bottom-left corner, in pixels. If NaN, + * the value of radiusX is used. + * + * @param bottomLeftRadiusY The y radius of the bottom-left corner, in pixels. If NaN, + * the value of bottomLeftRadiusX is used. + * + * @param bottomRightRadiusX The x radius of the bottom-right corner, in pixels. If NaN, + * the value of radiusX is used. + * + * @param bottomRightRadiusY The y radius of the bottom-right corner, in pixels. If NaN, + * the value of bottomRightRadiusX is used. + * + * + * @langversion 3.0 + * @playerversion Flash 10 + * @playerversion AIR 1.5 + * @productversion Flex 4 + */ + public function drawRoundRectComplex2(x:Number, y:Number, + width:Number, height:Number, + radiusX:Number, radiusY:Number, + topLeftRadiusX:Number, topLeftRadiusY:Number, + topRightRadiusX:Number, topRightRadiusY:Number, + bottomLeftRadiusX:Number, bottomLeftRadiusY:Number, + bottomRightRadiusX:Number, bottomRightRadiusY:Number):void + { + var builder:PathBuilder = new PathBuilder(); + builder.drawRoundRectComplex2(x, y, width, height, radiusX, radiusY,topLeftRadiusX, topLeftRadiusY,topRightRadiusX, topRightRadiusY,bottomLeftRadiusX, bottomLeftRadiusY,bottomRightRadiusX, bottomRightRadiusY); + + COMPILE::SWF + { + applyStroke(); + beginFill(new Rectangle(x,y,width,height), new Point(x,y)); + builder.draw(graphics); + endFill(); + } + COMPILE::JS + { + drawStringPath(builder.getPathString()); + } + } + + /* + What about these? + beginBitmapFill + beginFill + beginGradientFill + beginShaderFill + drawGraphicsData + drawRoundRect + drawTriangles + */ + + /** + * Draw a string of characters. + * @param value The string to draw. + * @param x The x location of the center of the circle + * @param y The y location of the center of the circle. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + * @flexjsignorecoercion Text + * @flexjsignorecoercion Node + */ + public function drawText(value:String, x:Number, y:Number):Object + { + COMPILE::SWF + { + var textField:CSSTextField = new CSSTextField(); + addChild(textField); + + textField.selectable = false; + textField.type = TextFieldType.DYNAMIC; + textField.mouseEnabled = false; + textField.autoSize = "left"; + textField.text = value; + + var color:SolidColor = textFill as SolidColor; + if (color) { + textField.textColor = color.color; + textField.alpha = color.alpha; + } + + textField.x = x; + textField.y = y + textField.textHeight/4; + + return textField; + + } + COMPILE::JS + { + var style:String = getTxtStyleStr(); + var text:WrappedHTMLElement = document.createElementNS('http://www.w3.org/2000/svg', 'text') as WrappedHTMLElement; + text.flexjs_wrapper = this; + text.style.left = x; + text.style.top = y; + text.setAttribute('style', style); + text.setAttribute('x', x); + text.setAttribute('y', y + 15); + var textNode:Text = document.createTextNode(value) as Text; + text.appendChild(textNode as Node); + element.appendChild(text); + return text; + } + } + + /** + * @return {string} The style attribute. + */ + COMPILE::JS + public function getTxtStyleStr():String + { + var fillStr:String; + if (textFill) + { + fillStr = textFill.addFillAttrib(this); + } + else + { + fillStr = 'fill:none'; + } + + var strokeStr:String; + if (textStroke) + { + strokeStr = textStroke.addStrokeAttrib(this); + } + else + { + strokeStr = 'stroke:none'; + } + return fillStr + ';' + strokeStr; + + + } + + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7a65d3d7/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Ellipse.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Ellipse.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Ellipse.as new file mode 100644 index 0000000..c2fbabc --- /dev/null +++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Ellipse.as @@ -0,0 +1,152 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.flex.svg +{ + import org.apache.flex.graphics.IEllipse; + + COMPILE::SWF + { + import flash.geom.Point; + import flash.geom.Rectangle; + } + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + public class Ellipse extends GraphicShape implements IEllipse + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.7 + */ + public function Ellipse(cx:Number=0, cy:Number=0, rx:Number=0, ry:Number=0) + { + x = cx; + y = cy; + this.rx = rx; + this.ry = ry; + } + + private var _rx:Number; + + /** + * The horizontal radius of the ellipse. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion FlexJS 0.7 + */ + public function get rx():Number + { + return _rx; + } + + public function set rx(value:Number):void + { + _rx = value; + } + + private var _ry:Number; + + /** + * The vertical radius of the ellipse. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion FlexJS 0.7 + */ + public function get ry():Number + { + return _ry; + } + + public function set ry(value:Number):void + { + _ry = value; + } + + + COMPILE::JS + private var _ellipse:WrappedHTMLElement; + + /** + * Draw the ellipse. + * @param xp The x position of the top-left corner of the bounding box of the ellipse. + * @param yp The y position of the top-left corner of the bounding box of the ellipse. + * @param width The width of the ellipse. + * @param height The height of the ellipse. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + * @flexjsignorecoercion SVGEllipseElement + */ + public function drawEllipse(xp:Number, yp:Number):void + { + COMPILE::SWF + { + graphics.clear(); + applyStroke(); + beginFill(new Rectangle(xp, yp, width, height), new Point(xp,yp)); + graphics.drawEllipse(xp,yp,width,height); + endFill(); + } + COMPILE::JS + { + var style:String = getStyleStr(); + if (_ellipse == null) { + _ellipse = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse') as WrappedHTMLElement; + _ellipse.flexjs_wrapper = this; + element.appendChild(_ellipse); + } + _ellipse.setAttribute('style', style); + if (stroke) + { + _ellipse.setAttribute('cx', width / 2 + stroke.weight); + _ellipse.setAttribute('cy', height / 2 + stroke.weight); + } + else + { + _ellipse.setAttribute('cx', width / 2); + _ellipse.setAttribute('cy', height / 2); + } + _ellipse.setAttribute('rx', width / 2); + _ellipse.setAttribute('ry', height / 2); + + resize(x, y, (_ellipse as SVGEllipseElement).getBBox()); + + } + } + + override protected function draw():void + { + drawEllipse(0, 0); + } + + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7a65d3d7/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/GraphicShape.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/GraphicShape.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/GraphicShape.as new file mode 100644 index 0000000..c2baa41 --- /dev/null +++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/GraphicShape.as @@ -0,0 +1,225 @@ +/** + * Licensed 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.flex.svg +{ + COMPILE::SWF + { + import flash.geom.Point; + import flash.geom.Rectangle; + } + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + import org.apache.flex.core.UIBase; + import org.apache.flex.graphics.IFill; + import org.apache.flex.graphics.IStroke; + import org.apache.flex.graphics.IGraphicShape; + + public class GraphicShape extends UIBase implements IGraphicShape + { + private var _fill:IFill; + private var _stroke:IStroke; + + public function get stroke():IStroke + { + return _stroke; + } + + /** + * A solid color fill. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion FlexJS 0.0 + */ + public function set stroke(value:IStroke):void + { + _stroke = value; + } + + public function get fill():IFill + { + return _fill; + } + /** + * A solid color fill. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion FlexJS 0.0 + */ + public function set fill(value:IFill):void + { + _fill = value; + } + + /** + * Constructor + * + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + public function GraphicShape() + { + super(); + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + element = document.createElementNS('http://www.w3.org/2000/svg', 'svg') as WrappedHTMLElement; + element.flexjs_wrapper = this; + element.style.left = 0; + element.style.top = 0; + //element.offsetParent = null; + positioner = element; + positioner.style.position = 'relative'; + + return element; + } + + + COMPILE::SWF + protected function applyStroke():void + { + if(stroke) + { + stroke.apply(this); + } + } + + COMPILE::SWF + protected function beginFill(targetBounds:Rectangle,targetOrigin:Point):void + { + if(fill) + { + fill.begin(this, targetBounds,targetOrigin); + } + } + + COMPILE::SWF + protected function endFill():void + { + if(fill) + { + fill.end(this); + } + } + + /** + * This is where the drawing methods get called from + */ + protected function draw():void + { + //Overwrite in subclass + } + + override public function addedToParent():void + { + COMPILE::SWF + { + super.addedToParent(); + } + draw(); + COMPILE::JS + { + element.style.overflow = 'visible'; + } + } + + /** + * @return {string} The style attribute. + */ + COMPILE::JS + public function getStyleStr():String + { + var fillStr:String; + if (fill) + { + fillStr = fill.addFillAttrib(this); + } + else + { + fillStr = 'fill:none'; + } + + var strokeStr:String; + if (stroke) + { + strokeStr = stroke.addStrokeAttrib(this); + } + else + { + strokeStr = 'stroke:none'; + } + + + return fillStr + ';' + strokeStr; + } + + + /** + * @param x X position. + * @param y Y position. + * @param bbox The bounding box of the svg element. + */ + COMPILE::JS + public function resize(x:Number, y:Number, bbox:SVGRect):void + { + var useWidth:Number = Math.max(this.width, bbox.width); + var useHeight:Number = Math.max(this.height, bbox.height); + + element.style.position = 'absolute'; + if (!isNaN(x)) element.style.top = x; + if (!isNaN(y)) element.style.left = y; + element.style.width = useWidth; + element.style.height = useHeight; + element.style.left = x; + element.style.top = y; + } + + COMPILE::JS + private var _x:Number; + COMPILE::JS + private var _y:Number; + COMPILE::JS + private var _xOffset:Number; + COMPILE::JS + private var _yOffset:Number; + + /** + * @param x X position. + * @param y Y position. + * @param xOffset offset from x position. + * @param yOffset offset from y position. + */ + COMPILE::JS + public function setPosition(x:Number, y:Number, xOffset:Number, yOffset:Number):void + { + _x = x; + _y = y; + _xOffset = xOffset; + _yOffset = yOffset; + element.style.left = xOffset; + element.style.top = yOffset; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7a65d3d7/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Path.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Path.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Path.as new file mode 100644 index 0000000..fe6b74a --- /dev/null +++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Path.as @@ -0,0 +1,133 @@ +/** + * Licensed 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.flex.svg +{ + import org.apache.flex.graphics.IPath; + import org.apache.flex.graphics.PathBuilder; + + COMPILE::SWF + { + import flash.display.GraphicsPath; + import flash.geom.Point; + import flash.geom.Rectangle; + import org.apache.flex.graphics.utils.PathHelper; + } + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + + public class Path extends GraphicShape implements IPath + { + + private var _data:String; + + public function get data():String + { + return _data; + } + + public function set data(value:String):void + { + _data = value; + _pathCommands = null; + } + + private var _pathCommands:PathBuilder; + + public function get pathCommands():PathBuilder + { + return _pathCommands; + } + + public function set pathCommands(value:PathBuilder):void + { + _pathCommands = value; + _data = _pathCommands.getPathString(); + } + + + COMPILE::JS + private var _path:WrappedHTMLElement; + + /** + * Draw the path. + * @param data A PathBuilder object containing a vector of drawing commands. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + public function drawPathCommands(xp:Number,yp:Number,data:PathBuilder):void + { + drawStringPath(xp,yp,data.getPathString()); + } + + /** + * Draw the path. + * @param data A string containing a compact represention of the path segments. + * The value is a space-delimited string describing each path segment. Each + * segment entry has a single character which denotes the segment type and + * two or more segment parameters. + * + * If the segment command is upper-case, the parameters are absolute values. + * If the segment command is lower-case, the parameters are relative values. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + public function drawStringPath(xp:Number,yp:Number,data:String):void + { + COMPILE::SWF + { + graphics.clear(); + applyStroke(); + var bounds:Rectangle = PathHelper.getBounds(data); + this.width = bounds.width; + this.height = bounds.height; + beginFill(bounds,new Point(bounds.left + xp, bounds.top + yp) ); + var graphicsPath:GraphicsPath = PathHelper.getSegments(data,xp,yp); + graphics.drawPath(graphicsPath.commands, graphicsPath.data); + endFill(); + } + COMPILE::JS + { + if (data == null || data.length === 0) return; + var style:String = getStyleStr(); + if (_path == null) { + _path = document.createElementNS('http://www.w3.org/2000/svg', 'path') as WrappedHTMLElement; + _path.flexjs_wrapper = this; + element.appendChild(_path); + } + _path.setAttribute('style', style); + _path.setAttribute('d', data); + + resize(x, y, _path['getBBox']()); + + } + } + + override protected function draw():void + { + drawStringPath(0, 0, data); + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7a65d3d7/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Rect.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Rect.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Rect.as new file mode 100644 index 0000000..64f888d --- /dev/null +++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Rect.as @@ -0,0 +1,156 @@ +/** + * Licensed 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.flex.svg +{ + import org.apache.flex.graphics.IRect; + + COMPILE::SWF + { + import flash.geom.Point; + import flash.geom.Rectangle; + } + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + public class Rect extends GraphicShape implements IRect + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.7 + */ + public function Rect(x:Number=0, y:Number=0, width:Number=0, height:Number=0,rx:Number=NaN,ry:Number=NaN) + { + this.x = x; + this.y = y; + this.width = width; + this.height = height; + this.rx = rx; + this.ry = ry; + } + + COMPILE::JS + private var _rect:WrappedHTMLElement; + + private var _rx:Number; + + /** + * The x axis radius for rounded corners + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.7 + */ + public function get rx():Number + { + return _rx; + } + + public function set rx(value:Number):void + { + _rx = value; + } + + private var _ry:Number; + + /** + * The y axis radius for rounded corners + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.7 + * + */ + public function get ry():Number + { + return _ry; + } + + public function set ry(value:Number):void + { + _ry = value; + } + + /** + * Draw the rectangle. + * @param xp The x position of the top-left corner of the rectangle. + * @param yp The y position of the top-left corner. + * @param width The width of the rectangle. + * @param height The height of the rectangle. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + public function drawRect(xp:Number, yp:Number, width:Number, height:Number):void + { + COMPILE::SWF + { + graphics.clear(); + applyStroke(); + beginFill(new Rectangle(xp, yp, width, height), new Point(xp,yp)); + if(isNaN(rx)) + graphics.drawRect(x, y, width, height); + else + { + var dx:Number = rx*2; + var dy:Number = isNaN(ry) ? ry : ry*2; + graphics.drawRoundRect(x, y, width, height,dx ,dy); + } + endFill(); + } + COMPILE::JS + { + var style:String = this.getStyleStr(); + + if (_rect == null) { + _rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect') as WrappedHTMLElement; + _rect.flexjs_wrapper = this; + element.appendChild(_rect); + } + _rect.setAttribute('style', style); + if (stroke) + { + _rect.setAttribute('x', stroke.weight / 2); + _rect.setAttribute('y', stroke.weight / 2); + } + else + { + _rect.setAttribute('x', 0); + _rect.setAttribute('y', 0); + } + _rect.setAttribute('width', width); + _rect.setAttribute('height', height); + + resize(x, y, _rect['getBBox']()); + } + } + + override protected function draw():void + { + drawRect(0,0,width,height); + } + + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7a65d3d7/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Text.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Text.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Text.as new file mode 100644 index 0000000..767de41 --- /dev/null +++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/svg/Text.as @@ -0,0 +1,150 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.flex.svg +{ + import org.apache.flex.graphics.IText; + import org.apache.flex.graphics.SolidColor; + + COMPILE::SWF + { + import flash.text.TextFieldType; + import org.apache.flex.core.CSSTextField; + } + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * Draws a string of characters at a specific location using the stroke + * value of color and alpha. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + * // TODO (aharui) ignore imports of external linkage interfaces? + * @flexjsignoreimport SVGLocatable + */ + public class Text extends GraphicShape implements IText + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function Text() + { + super(); + + COMPILE::SWF + { + _textField = new CSSTextField(); + addChild(_textField); + } + } + + + COMPILE::SWF + private var _textField:CSSTextField; + + COMPILE::JS + private var _text:WrappedHTMLElement; + + /** + * @copy org.apache.flex.core.ITextModel#textField + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + COMPILE::SWF + public function get textField() : CSSTextField + { + return _textField; + } + + /** + * Draws text at the given point. + * @param value The string to draw. + * @param xt The x position of the top-left corner of the rectangle. + * @param yt The y position of the top-left corner. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + * @flexjsignorecoercion Text + * @flexjsignorecoercion Node + * @flexjsignorecoercion SVGLocatable + */ + public function drawText(value:String, xt:Number, yt:Number):void + { + COMPILE::SWF + { + textField.selectable = false; + textField.type = TextFieldType.DYNAMIC; + textField.mouseEnabled = false; + textField.autoSize = "left"; + textField.text = value; + + var color:SolidColor = fill as SolidColor; + if (color) { + textField.textColor = color.color; + textField.alpha = color.alpha; + } + + textField.x = xt; + textField.y = yt; + } + COMPILE::JS + { + var style:String = this.getStyleStr(); + if (_text == null) { + _text = document.createElementNS('http://www.w3.org/2000/svg', 'text') as WrappedHTMLElement; + _text.flexjs_wrapper = this; + element.appendChild(_text); + } + else { + _text.removeChild(_text.childNodes[0]); + } + _text.setAttribute('style', style); + _text.setAttribute('x', xt); + _text.setAttribute('y', yt); + var textNode:Text = document.createTextNode(value) as Text; + _text.appendChild(textNode as Node); + + resize(x, y, (_text as SVGLocatable).getBBox()); + + } + } + + COMPILE::JS + override protected function draw():void + { + + } + + } +}