Changeset 15862 for lang/actionscript

Timestamp:

07/15/08 23:58:44 (4 months ago)

Author:

gyuque

Message:

updated demo

Location:

lang/actionscript/ascss/src

Files:

• KyotoDemo.as (modified) (8 diffs)
• KyotoDemo.swf (modified) (previous)
• cssdom/XMLElementWrapper.as (modified) (1 diff)
• kyotodemo/Edge.as (modified) (4 diffs)
• kyotodemo/EdgeLayer.as (modified) (3 diffs)
• kyotodemo/ElementData.as (modified) (1 diff)

lang/actionscript/ascss/src/KyotoDemo.as

@@ -6 +6 @@
         import flash.text.*;
         import flash.utils.*;
+        import flash.net.*;
         import css.*;
         import cssdom.*;
@@ -35 +36 @@
                 private var mCSSErrorField:TextField;
 
+                private var mBGLayer:Sprite;
                 private var mSelectorMarkers:Array;
                 private var mMarkerLayer:Sprite;
@@ -47 +49 @@
                 private var mEntireAnimation:EntireAnimationThread;
                 private var mPrevEdgesCount:int = -1;
-
+                private var mBGDisplayList:BGDisplayList;
+
+                private var mImageLib:Dictionary = new Dictionary();
+
+                private static const PENDING:uint = 1;
+                private static const FAILED:uint  = 2;
                 function KyotoDemo()
                 {
@@ -56 +63 @@
                         logo.y = 10;
                         addChild(logo);
+
+                        mBGLayer = new Sprite();
+                        addChild(mBGLayer);
 
                         mEFormat = new TextFormat();
@@ -277 +287 @@
                 private function doMatching():void
                 {
-//                      STDOUT.cls();
                         mSelectorEdgeLayer.clear();
                         if (!mDocument || !mStyleSheet) return;
@@ -303 +312 @@
                                 if (!sel.matchedRulesIsEmpty)
                                 {
+                                        var rindex:int = 0;
+                                        mSelectorEdgeLayer.nextSet();
                                         for each(var rd:CSSRuleData in sel.matchedRulesList)
                                         {
                                                 if (rd.selector._owner) {
                                                         var mk:SelectorMarker = mSelectorMap[rd.selector._owner.selector];
-                                                        mSelectorEdgeLayer.addEdge(mk.mx, mk.my, md.mx, md.my);
+                                                        mSelectorEdgeLayer.addEdge(mk.mx, mk.my, md.mx, md.my, rindex++);
                                                 }
                                         }
                                 }
+
+                                sel.style = XMLElementWrapper(elem).newRenderStyle();
+
+                                // first pass
+                                //  normal decls
+                                sel.applyDeclarations(true,  false);
+                                //  override important decls
+                                sel.applyDeclarations(true,  true);
+        
+                                // second pass
+                                //  normal decls
+                                sel.applyDeclarations(false, false);
+                                //  override important decls
+                                sel.applyDeclarations(false, true);
                         }
 
@@ -316 +341 @@
                                 mEntireAnimation.startAnimation();
 
+                        showComputedStyles();
+
                         mPrevEdgesCount = mSelectorEdgeLayer.count;
                 }
-        }
+
+
+                private static const rxStartTag:RegExp = /<[-_a-zA-Z0-9]+[^>]*>/
+                private static const rxEndTag:RegExp = /<\/[-_a-zA-Z0-9]+[^>]*>/
+                private static const rxEmptyTag:RegExp = /\/[ \t]*>/
+
+                private static const rxCommentStart:RegExp = /<!--/
+                private static const rxCommentEnd:RegExp = /-->/
+
+                private function showComputedStyles():void
+                {
+                        mXMLField.setTextFormat(mEFormat);
+                        mBGLayer.graphics.clear();
+
+                        var ed:ElementData, wrapper:XMLElementWrapper
+                        STDOUT.cls();
+
+                        var list:Array = mDocument.elementMetadatas.slice();
+                        if (!list) return;
+
+                        var contextStack:Array = [];
+                        var src:String = mXMLField.text;
+                        if (!src) return;
+                        var rxr:Object;
+
+                        var curpos:int = 0;
+                        var fwd:String;
+                        for (;;) {
+                                fwd = src.substring(curpos);
+
+                                rxr = rxStartTag.exec(fwd);
+                                if (rxr)
+                                {
+                                        var tag:String = rxr[0];
+
+                                        ed = list.shift();
+                                        wrapper = ed.wrapper;
+
+                                        if (rxEmptyTag.exec(tag)) {
+                                                // closed immediately
+                                                ed.start_index = curpos + rxr.index;
+                                                ed.end_index   = curpos + rxr.index + tag.length;
+                                        }
+                                        else {
+                                                contextStack.push(ed);
+                                                ed.start_index = curpos + rxr.index;
+                                        }
+
+                                        curpos += rxr.index + tag.length;
+
+                                        continue;
+                                }
+
+                                rxr = rxCommentStart.exec(fwd);
+                                if (rxr)
+                                {
+                                        curpos += rxr.index + rxr[0].length;
+                                        rxr = rxCommentEnd.exec(fwd);
+                                        if (!rxr) break;
+                                        curpos += rxr.index + rxr[0].length;
+                                        continue;
+                                }
+
+                                rxr = rxEndTag.exec(fwd);
+                                if (rxr)
+                                {
+                                        curpos += rxr.index + rxr[0].length;
+                                        ed = contextStack.pop() as ElementData;
+                                        ed.end_index = curpos;
+                                        continue;
+                                }
+
+                                break;
+                        }
+
+                        var cssv:CSSValue;
+                        var g:Graphics = mBGLayer.graphics;
+                        list = mDocument.elementMetadatas.slice();
+                        mBGDisplayList = new BGDisplayList();
+                        mBGDisplayList.g = g;
+                        for each(ed in list)
+                        {
+                                var rs:RenderStyle = ed.wrapper.renderStyle;
+                                var color:uint = lookupColorValue(rs, 0xffffffff, CSSPropertyID.CSSPropertyColor);
+                                var bgcolor:uint = lookupColorValue(rs, 0xffffffff, CSSPropertyID.CSSPropertyBackgroundColor);
+                                var bgurl:String = null;
+                                if (color != 0xffffffff)
+                                        mXMLField.setTextFormat(createColorFormat(color), ed.start_index, ed.end_index);
+
+                                if (rs.isSetPropId(CSSPropertyID.CSSPropertyBackgroundImage))
+                                {
+                                        cssv = rs.getCSSValueByPropId(CSSPropertyID.CSSPropertyBackgroundImage);
+                                        if (cssv is CSSImageValue)
+                                                bgurl = CSSImageValue(cssv).getStringValue();
+                                }
+
+                                var di:BGDisplayItem = null;
+                                if (bgcolor != 0xffffffff || bgurl)
+                                {
+                                        di = new BGDisplayItem();
+                                        di.color = bgcolor;
+                                        di.url = bgurl;
+                                        di.y = mXMLField.y + ed.lineno * LINEHEIGHT;
+                                        di.h = (ed.end_lineno-ed.lineno+1) * LINEHEIGHT;
+                                        mBGDisplayList.list.push(di);
+                                }
+                        }
+
+                        runDisplayList();
+                }
+
+                private function runDisplayList():void
+                {
+                        if (!mBGDisplayList) return;
+
+                        var g:Graphics = mBGDisplayList.g;
+                        for each(var di:BGDisplayItem in mBGDisplayList.list)
+                        {
+                                if (di.color != 0xffffffff)
+                                {
+                                        g.beginFill(di.color);
+                                        g.drawRect(mXMLField.x, di.y, mXMLField.width, di.h);
+                                }
+
+                                if (di.url)
+                                {
+                                        var b:BitmapData = null;
+                                        if (mImageLib[di.url] != PENDING && mImageLib[di.url] != FAILED)
+                                        {
+                                                b = mImageLib[di.url];
+                                                if (!b)
+                                                {
+                                                        var ldr:ImageLoader = new ImageLoader(di.url);
+                                                        ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);
+                                                        mImageLib[di.url] = PENDING;
+
+                                                        ldr.load(new URLRequest(di.url));
+                                                }
+                                        }
+
+                                        if (b)
+                                        {
+                                                g.beginBitmapFill(b);
+                                                g.drawRect(mXMLField.x, di.y, mXMLField.width, di.h);
+                                        }
+                                }
+                        }
+                }
+
+                private function onImageLoaded(e:Event):void
+                {
+                        var ldr:ImageLoader = e.target.loader as ImageLoader;
+                        if (ldr.content is Bitmap)
+                        {
+                                mImageLib[ldr.key] = Bitmap(ldr.content).bitmapData;
+                                runDisplayList();
+                        }
+                        else
+                                mImageLib[ldr.key] = FAILED;
+                }
+
+                protected function lookupColorValue(rs:RenderStyle, defaultColor:uint, propid:int):uint
+                {
+                        if (rs)
+                        {
+                                if (rs.isSetPropId(propid))
+                                {
+                                        var cssv:CSSValue = rs.getCSSValueByPropId(propid);
+                                        if (cssv is CSSPrimitiveValue)
+                                        {
+                                                var primv:CSSPrimitiveValue = cssv as CSSPrimitiveValue;
+                                                if (primv.primitiveType == CSSPrimitiveValue.CSS_RGBCOLOR)
+                                                        return primv.getRGBColorValue() & 0xffffff;
+                                                else if (primv.primitiveType == CSSPrimitiveValue.CSS_IDENT)
+                                                {
+                                                        if (primv.getIdent() == CSSValueKeywords.CSSValueTransparent)
+                                                                return 0xffffffff;
+                                                }
+                                        }
+                                }
+                        }
+                        return defaultColor;
+                }
+
+                private function createColorFormat(c:uint):TextFormat
+                {
+                        var f:TextFormat = new TextFormat;
+                        f.color = c & 0xffffff;
+
+                        return f;
+                }
+        }
+}
+
+class ImageLoader extends flash.display.Loader
+{
+        import flash.display.*;
+        import flash.events.*;
+        public var key:String;
+        function ImageLoader(k:String) {
+                key = k;
+                contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
+        }
+
+        private function onIOError(e:IOErrorEvent):void {}
 }
 
@@ -406 +637 @@
         }
 }
+
+class BGDisplayList
+{
+        import flash.display.*;
+        public var g:Graphics;
+        public var list:Array = [];
+}
+
+class BGDisplayItem
+{
+        public var color:uint;
+        public var url:String = null;
+        public var y:int, h:int;
+}

lang/actionscript/ascss/src/cssdom/XMLElementWrapper.as

@@ -30 +30 @@
                         mClassNames = new ClassNames();
                         readClassNames(x.attribute("class")[0]);
+                }
+
+                public function newRenderStyle():RenderStyle
+                {
+                        mRenderStyle = new RenderStyle();
+                        return mRenderStyle;
                 }
 

lang/actionscript/ascss/src/kyotodemo/Edge.as

@@ -7 +7 @@
                 private var mLayer2:Sprite = new Sprite;
 
-                function Edge()
+                private var mRuleIndex:int;
+
+                function Edge(ridx:int)
                 {
                         cacheAsBitmap = true;
@@ -16 +18 @@
                         addChild(mLayer2);
                         glow = 0;
+
+                        mRuleIndex = ridx;
+                }
+
+                public function get ruleIndex():int
+                {
+                        return mRuleIndex;
                 }
 
@@ -21 +30 @@
                 {
                         var g:Graphics = mLayer1.graphics;
-                        g.lineStyle(7, 0x001133);
+                        g.lineStyle(7, 0x000030);
                         drawPath(x1, y1, x2, y2, g)
 
-                        g.lineStyle(5, 0x112244);
+                        g.lineStyle(5, 0x101224);
                         drawPath(x1, y1, x2, y2, g)
 
-                        g.lineStyle(3, 0x223399);
+                        g.lineStyle(3, 0x112340);
                         drawPath(x1, y1, x2, y2, g)
 
-                        g.lineStyle(1, 0x4466ee);
+                        g.lineStyle(1, 0x112470);
                         drawPath(x1, y1, x2, y2, g)
 
 
                         g = mLayer2.graphics;
+                        g.lineStyle(17, 0x000022);
+                        drawPath(x1, y1, x2, y2, g)
+
+                        g.lineStyle(13, 0x001122);
+                        drawPath(x1, y1, x2, y2, g)
+
                         g.lineStyle(11, 0x112266);
                         drawPath(x1, y1, x2, y2, g)
 
-                        g.lineStyle(9, 0x224499);
+                        g.lineStyle(5, 0x3366aa);
                         drawPath(x1, y1, x2, y2, g)
-
-                        g.lineStyle(7, 0x4488ee);
-                        drawPath(x1, y1, x2, y2, g)
-
-                        g.lineStyle(5, 0x55bbff);
-                        drawPath(x1, y1, x2, y2, g)
-
                 }
 
@@ -53 +61 @@
                         if (t<0) t=0;
                         if (t>1) t=1;
+                        if (Math.abs(mLayer2.alpha - t) < 0.01)
+                                return;
                         mLayer2.alpha = t;
                 }

lang/actionscript/ascss/src/kyotodemo/EdgeLayer.as

@@ -2 +2 @@
 {
         import flash.display.*;
+        import org.libspark.thread.*;
+
         public class EdgeLayer extends Sprite
         {
+                private var mSetIndex:uint = 0;
                 private var mCount:uint = 0;
+                private var mMaxIndex:uint;
+                private var mOrderAnimation:OrderAnimationThread;
+
+                private var mOrderSets:Array;
+
                 function EdgeLayer()
                 {
+                        mOrderAnimation = new OrderAnimationThread(this);
+                        mOrderAnimation.start();
 
+                        mOrderSets = [];
                 }
 
@@ -15 +26 @@
                 }
 
-                public function addEdge(x1:int, y1:int, x2:int, y2:int):Edge
+                public function get maxIndex():uint
+                {
+                        return mMaxIndex;
+                }
+
+                public function addEdge(x1:int, y1:int, x2:int, y2:int, ridx:int):Edge
                 {
                         mCount++;
-                        var eg:Edge = new Edge();
+                        var eg:Edge = new Edge(ridx);
                         eg.drawEdge(x1, y1, x2, y2);
                         addChild(eg);
+                        mOrderSets[ mOrderSets.length-1 ].push( eg );
+
+                        if (ridx > mMaxIndex)
+                                mMaxIndex = ridx;
 
                         return eg;
                 }
 
+                public function get count_sets():int
+                {
+                        return mOrderSets ? mOrderSets.length : 0;
+                }
+
+                public function setAt(i:int):Array
+                {
+                        return mOrderSets[i];
+                }
+
+                public function nextSet():void
+                {
+                        mOrderSets.push([]);
+                }
+
                 public function clear():void
                 {
+                        mOrderAnimation.reset();
+                        mOrderSets = [];
                         mCount = 0;
+                        mSetIndex = 0;
                         var len:uint = numChildren;
                         for (var i:uint = 0;i < len;i++)
@@ -34 +72 @@
         }
 }
+
+class OrderAnimationThread extends org.libspark.thread.Thread
+{
+        public static const STEP:int = 9;
+
+        import flash.display.*;
+        import kyotodemo.*;
+        private var mEdgeLayer:EdgeLayer;
+        private var mCount:int = -20;
+        private var mFadeout:Number = 0;
+        function OrderAnimationThread(el:EdgeLayer)
+        {
+                mEdgeLayer = el;
+        }
+
+        public function reset():void
+        {
+                mFadeout = 0;
+                mCount = -20;
+        }
+
+        protected override function run():void
+        {
+                next(animate);
+        }
+
+        protected function animate():void
+        {
+                if (++mCount > (STEP*(mEdgeLayer.maxIndex+2)))
+                        reset();
+
+                if (mCount > (STEP*(mEdgeLayer.maxIndex+1)))
+                {
+                        mFadeout += 0.1;
+                        if (mFadeout > 1)
+                                mFadeout = 1;
+                }
+
+                var len:int = mEdgeLayer.count_sets;
+                for (var i:int = 0;i < len;i++)
+                {
+                        var eset:Array = mEdgeLayer.setAt(i);
+                        setGlows(eset);
+                }
+        
+                next(animate);
+        }
+
+        private function setGlows(list:Array):void
+        {
+                var len:int = list.length;
+                var total_frames:int = STEP*(mEdgeLayer.maxIndex+1);
+
+                var step:Number = Number(total_frames) / Number(len);
+
+                for (var i:int = 0;i < len;i++)
+                {
+                        var t:Number = (Number(mCount) - (step*Number(i)*0.5)) / step;
+                        if (t < 0) t = 0;
+                        else if (t > 1) t = 1;
+
+                        list[i].glow = t - mFadeout;
+                }
+        }
+}

lang/actionscript/ascss/src/kyotodemo/ElementData.as

@@ -7 +7 @@
                 public var wrapper:XMLElementWrapper;
                 public var nest:int, lineno:int, end_lineno:int, mx:int, my:int;
+
+                public var start_index:int, end_index:int;
         }
 }