How to use anchor method in wpt

Best JavaScript code snippet using wpt

Anchor.js

Source:Anchor.js

1/**2 * This is a layout that enables anchoring of contained elements relative to the container's dimensions.3 * If the container is resized, all anchored items are automatically rerendered according to their4 * `{@link #anchor}` rules.5 *6 * This class is intended to be extended or created via the {@link Ext.container.Container#layout layout}: 'anchor'7 * config, and should generally not need to be created directly via the new keyword.8 * 9 * AnchorLayout does not have any direct config options (other than inherited ones). By default,10 * AnchorLayout will calculate anchor measurements based on the size of the container itself. However, the11 * container using the AnchorLayout can supply an anchoring-specific config property of `anchorSize`.12 *13 * If anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating14 * anchor measurements based on it instead, allowing the container to be sized independently of the anchoring15 * logic if necessary.16 *17 *     @example18 *     Ext.create('Ext.Panel', {19 *         width: 500,20 *         height: 400,21 *         title: "AnchorLayout Panel",22 *         layout: 'anchor',23 *         renderTo: Ext.getBody(),24 *         items: [25 *             {26 *                 xtype: 'panel',27 *                 title: '75% Width and 20% Height',28 *                 anchor: '75% 20%'29 *             },30 *             {31 *                 xtype: 'panel',32 *                 title: 'Offset -300 Width & -200 Height',33 *                 anchor: '-300 -200'   34 *             },35 *             {36 *                 xtype: 'panel',37 *                 title: 'Mixed Offset and Percent',38 *                 anchor: '-250 20%'39 *             }40 *         ]41 *     });42 */43Ext.define('Ext.layout.container.Anchor', {44    /* Begin Definitions */45    alias: 'layout.anchor',46    extend: 'Ext.layout.container.Auto',47    alternateClassName: 'Ext.layout.AnchorLayout',48    /* End Definitions */49    type: 'anchor',50    /**51     * @cfg {String} anchor52     *53     * This configuration option is to be applied to **child `items`** of a container managed 54     * by an {@link Ext.layout.container.Anchor Anchor Layout}.55     *56     * This value is what tells the layout how an item should be anchored to the container. `items`57     * added to an AnchorLayout accept an anchoring-specific config property of **anchor** which is a string58     * containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%').59     * The following types of anchor values are supported:60     *61     * - **Percentage** : Any value between 1 and 100, expressed as a percentage.62     *63     *   The first anchor is the percentage width that the item should take up within the container, and the64     *   second is the percentage height.  For example:65     *66     *       // two values specified67     *       anchor: '100% 50%' // render item complete width of the container and68     *                          // 1/2 height of the container69     *       // one value specified70     *       anchor: '100%'     // the width value; the height will default to auto71     *72     * - **Offsets** : Any positive or negative integer value.73     *74     *   This is a raw adjustment where the first anchor is the offset from the right edge of the container,75     *   and the second is the offset from the bottom edge. For example:76     *77     *       // two values specified78     *       anchor: '-50 -100' // render item the complete width of the container79     *                          // minus 50 pixels and80     *                          // the complete height minus 100 pixels.81     *       // one value specified82     *       anchor: '-50'      // anchor value is assumed to be the right offset value83     *                          // bottom offset will default to 084     *85     * - **Sides** : Valid values are `right` (or `r`) and `bottom` (or `b`).86     *87     *   Either the container must have a fixed size or an anchorSize config value defined at render time in88     *   order for these to have any effect.89     *   90     * - **Mixed** :91     *92     *   Anchor values can also be mixed as needed.  For example, to render the width offset from the container93     *   right edge by 50 pixels and 75% of the container's height use:94     *   95     *       anchor:   '-50 75%'96     */97    /**98     * @cfg {String} defaultAnchor99     * Default anchor for all child **container** items applied if no anchor or specific width is set on the child item.100     */101    defaultAnchor: '100%',102    parseAnchorRE: /^(r|right|b|bottom)$/i,103    manageOverflow: true,104    // Anchor layout does not read the size of individual items in the shrink-wrapping105    // dimension(s) because, as a subclass of autocontainer, it measures them as a whole106    // using an outer element.  However, anchor layout may set the size of its items in107    // non-shrink-wrapping dimension(s).108    setsItemSize: true,109    beginLayoutCycle: function (ownerContext) {110        var me = this,111            dimensions = 0,112            anchorSpec, childContext, childItems, i, length;113        me.callParent(arguments);114        childItems = ownerContext.childItems; // populated by callParent115        length = childItems.length;116        for (i = 0; i < length; ++i) {117            childContext = childItems[i];118            anchorSpec = childContext.target.anchorSpec;119            if (anchorSpec) {120                if (childContext.widthModel.calculated && anchorSpec.right) {121                    dimensions |= 1; // jshint ignore:line122                }123                if (childContext.heightModel.calculated && anchorSpec.bottom) {124                    dimensions |= 2; // jshint ignore:line125                }126                if (dimensions === 3) { // if (both dimensions in play)127                    break;128                }129            }130        }131        ownerContext.anchorDimensions = dimensions;132        //<debug>133        me.sanityCheck(ownerContext);134        //</debug>135    },136    calculateItems: function (ownerContext, containerSize) {137        var me = this,138            childItems = ownerContext.childItems,139            length = childItems.length,140            gotHeight = containerSize.gotHeight,141            gotWidth = containerSize.gotWidth,142            ownerHeight = containerSize.height,143            ownerWidth = containerSize.width,144            knownDimensions = (gotWidth ? 1 : 0) | (gotHeight ? 2 : 0), // jshint ignore:line145            anchorDimensions = ownerContext.anchorDimensions,146            anchorSpec, childContext, childMargins, height, i, width;147        if (!anchorDimensions) {148            return true;149        }150        for (i = 0; i < length; i++) {151            childContext = childItems[i];152            childMargins = childContext.getMarginInfo();153            anchorSpec = childContext.target.anchorSpec;154            // Check widthModel in case "defaults" has applied an anchor to a component155            // that also has width (which must win). If we did not make this check in this156            // way, we would attempt to calculate a width where it had been configured.157            //158            if (gotWidth && childContext.widthModel.calculated) {159                width = anchorSpec.right(ownerWidth) - childMargins.width;160                width = me.adjustWidthAnchor(width, childContext);161                childContext.setWidth(width);162            }163            // Repeat for height164            if (gotHeight && childContext.heightModel.calculated) {165                height = anchorSpec.bottom(ownerHeight) - childMargins.height;166                height = me.adjustHeightAnchor(height, childContext);167                childContext.setHeight(height);168            }169        }170        // If all required dimensions are known, we're done171        return (knownDimensions & anchorDimensions) === anchorDimensions; // jshint ignore:line172    },173    //<debug>174    sanityCheck: function (ownerContext) {175        var shrinkWrapWidth = ownerContext.widthModel.shrinkWrap,176            shrinkWrapHeight = ownerContext.heightModel.shrinkWrap,177            children = ownerContext.childItems,178            anchorSpec, comp, childContext,179            i, length;180        for (i = 0, length = children.length; i < length; ++i) {181            childContext = children[i];182            comp = childContext.target;183            anchorSpec = comp.anchorSpec;184            if (anchorSpec) {185                if (childContext.widthModel.calculated && anchorSpec.right) {186                    if (shrinkWrapWidth) {187                        Ext.log({188                            level: 'warn',189                            msg: 'Right anchor on '+comp.id+' in shrinkWrap width container'190                        });191                    }192                }193                if (childContext.heightModel.calculated && anchorSpec.bottom) {194                    if (shrinkWrapHeight) {195                        Ext.log({196                            level: 'warn',197                            msg: 'Bottom anchor on '+comp.id+' in shrinkWrap height container'198                        });199                    }200                }201            }202        }203    },204    //</debug>205    /**206     * @private207     */208    anchorFactory: {209        offset: function (delta) {210            return function(v) {211                return v + delta;212            };213        },214        ratio: function (ratio) {215            return function(v) {216                return Math.floor(v * ratio);217            };218        },219        standard: function (diff) {220            return function(v) {221                return v - diff;222            };223        }224    },225    parseAnchor: function(a, start, cstart) {226        if (a && a !== 'none') {227            var factory = this.anchorFactory,228                delta;229            if (this.parseAnchorRE.test(a)) {230                return factory.standard(cstart - start);231            }    232            if (a.indexOf('%') !== -1) {233                return factory.ratio(parseFloat(a.replace('%', '')) * 0.01);234            }    235            delta = parseInt(a, 10);236            if (!isNaN(delta)) {237                return factory.offset(delta);238            }239        }240        return null;241    },242    /**243     * @private244     */245    adjustWidthAnchor: function(value, childContext) {246        return value;247    },248    /**249     * @private250     */251    adjustHeightAnchor: function(value, childContext) {252        return value;253    },254    configureItem: function(item) {255        var me = this,256            owner = me.owner,257            anchor= item.anchor,258            anchorsArray,259            anchorWidth,260            anchorHeight;261        me.callParent(arguments);262        if (!item.anchor && item.items && !Ext.isNumber(item.width)) {263            item.anchor = anchor = me.defaultAnchor;264        }265        /**266         * @cfg {Number/Object} anchorSize267         * Defines the anchoring size of container.268         * Either a number to define the width of the container or an object with `width` and `height` fields.269         * @member Ext.container.Container270         */ 271        if (owner.anchorSize) {272            if (typeof owner.anchorSize === 'number') {273                anchorWidth = owner.anchorSize;274            } else {275                anchorWidth = owner.anchorSize.width;276                anchorHeight = owner.anchorSize.height;277            }278        } else {279            anchorWidth = owner.initialConfig.width;280            anchorHeight = owner.initialConfig.height;281        }282        if (anchor) {283            // cache all anchor values284            anchorsArray = anchor.split(' ');285            item.anchorSpec = {286                right: me.parseAnchor(anchorsArray[0], item.initialConfig.width, anchorWidth),287                bottom: me.parseAnchor(anchorsArray[1], item.initialConfig.height, anchorHeight)288            };289        }290    },291    sizePolicy: {292        $: {293            readsWidth: 1,294            readsHeight: 1,295            setsWidth: 0,296            setsHeight: 0297        },298        b: {299            readsWidth: 1,300            readsHeight: 0,301            setsWidth: 0,302            setsHeight: 1303        },304        r: {305            $: {306                readsWidth: 0,307                readsHeight: 1,308                setsWidth: 1,309                setsHeight: 0310            },311            b: {312                readsWidth: 0,313                readsHeight: 0,314                setsWidth: 1,315                setsHeight: 1316            }317        }318    },319    getItemSizePolicy: function (item) {320        var anchorSpec = item.anchorSpec,321            key = '$',322            policy = this.sizePolicy,323            sizeModel;324        if (anchorSpec) {325            sizeModel = this.owner.getSizeModel();326            if (anchorSpec.right && !sizeModel.width.shrinkWrap) {327                policy = policy.r;328            }329            if (anchorSpec.bottom && !sizeModel.height.shrinkWrap) {330                key = 'b';331            }332        }333        return policy[key];334    }...

Anchors.js

Source:Anchors.js

1dojo.provide("dojox.drawing.manager.Anchors");2dojox.drawing.manager.Anchors = dojox.drawing.util.oo.declare(3	// summary:4	//		Creates and manages the anchor points that are attached to5	//		(usually) the corners of a Stencil.6	// description:7	//		Used internally, but there are some things that should be known:8	//		Anchors attach to a Stencil's 'points' (See stencil.points)9	//		To not display an anchor on a certain point, add noAnchor:true10	//		to the point.11	12	function(/* dojox.__stencilArgs */options){13		// arguments: See stencil._Base14		this.mouse = options.mouse;15		this.undo = options.undo;16		this.util = options.util;17		this.drawing = options.drawing;18		this.items = {};19	},20	{21		onAddAnchor: function(/*Anchor*/anchor){22			// summary:23			//		Event fires when anchor is created24		},25		26		27		onReset: function(/*Stencil*/stencil){28			// summary:29			//		Event fires when an anchor's reset method is called30			//31			// a desperate hack in order to get the anchor point to reset.32			// FIXME: Is this still used? I think its item.deselect();item.select();33			var st = this.util.byId("drawing").stencils;34			st.onDeselect(stencil);35			st.onSelect(stencil);36		},37		38		onRenderStencil: function(){39			// summary:40			//		Event fires when an anchor calls a Stencil's render method41			//42			for(var nm in this.items){43				dojo.forEach(this.items[nm].anchors, function(a){44					a.shape.moveToFront();45				});46			}47		},48		49		onTransformPoint: function(/*Anchor*/anchor){50			// summary:51			//		Event fired on anchor drag52			//53			//		If anchors are a "group", it's corresponding anchor54			//		is set. All anchors then moved to front.55			var anchors = this.items[anchor.stencil.id].anchors;56			var item = this.items[anchor.stencil.id].item;57			var pts = [];58			dojo.forEach(anchors, function(a, i){59				60				61				if(anchor.id == a.id || anchor.stencil.anchorType!="group"){62					// nothing 63				}else{64					if(anchor.org.y == a.org.y){65						a.setPoint({66							dx: 0,67							dy: anchor.shape.getTransform().dy - a.shape.getTransform().dy68						});69					}else if(anchor.org.x == a.org.x){70						a.setPoint({71							dx: anchor.shape.getTransform().dx - a.shape.getTransform().dx,72							dy: 073						});74					}75					a.shape.moveToFront();76				}77				78				var mx = a.shape.getTransform();79				pts.push({x:mx.dx + a.org.x, y:mx.dy+ a.org.y});80				81				if(a.point.t){82					pts[pts.length-1].t = a.point.t;83				}84				85			}, this);86			item.setPoints(pts);87			item.onTransform(anchor);88			this.onRenderStencil();89		},90		91		onAnchorUp: function(/*Anchor*/anchor){92			// summary:93			//		Event fired on anchor mouseup94		},95		96		onAnchorDown: function(/*Anchor*/anchor){97			// summary:98			//		Event fired on anchor mousedown99		},100		101		onAnchorDrag: function(/*Anchor*/anchor){102			// summary:103			//		Event fired when anchor is moved104		},105		106		onChangeStyle: function(/*Object*/stencil){107			// summary:108			// 		if the Stencil changes color while were's selected109			// 		this moves the anchors to the back. Fix it.110			111			for(var nm in this.items){112				dojo.forEach(this.items[nm].anchors, function(a){113					a.shape.moveToFront();114				});115			}116		},117		118		add: function(/*Stencil*/item){119			// summary:120			//		Creates anchor points on a Stencil, based on the121			//		Stencil's points.122			//	123			this.items[item.id] = {124				item:item,125				anchors:[]126			};127			if(item.anchorType=="none"){ return; }128			var pts = item.points;129			dojo.forEach(pts, function(p, i){130				if(p.noAnchor){ return; }131				if(i==0 || i == item.points.length-1){132					console.log("ITEM TYPE:", item.type, item.shortType);133				}134				var a = new dojox.drawing.manager.Anchor({stencil:item, point:p, pointIdx:i, mouse:this.mouse, util:this.util});135				this.items[item.id]._cons = [136					dojo.connect(a, "onRenderStencil", this, "onRenderStencil"),137					dojo.connect(a, "reset", this, "onReset"),138					dojo.connect(a, "onAnchorUp", this, "onAnchorUp"),139					dojo.connect(a, "onAnchorDown", this, "onAnchorDown"),140					dojo.connect(a, "onAnchorDrag", this, "onAnchorDrag"),141					dojo.connect(a, "onTransformPoint", this, "onTransformPoint"),142					// FIXME: this will fire for each anchor. yech.143					dojo.connect(item, "onChangeStyle", this, "onChangeStyle")144				];145				146				this.items[item.id].anchors.push(a);147				this.onAddAnchor(a);148			}, this);149			150			if(item.shortType=="path"){151				// check if we have a double-point of a closed-curve-path152				var f = pts[0], l = pts[pts.length-1], a = this.items[item.id].anchors;153				if(f.x ==l.x && f.y==l.y){154					console.warn("LINK ANVHROS", a[0], a[a.length-1]);155					a[0].linkedAnchor = a[a.length-1];156					a[a.length-1].linkedAnchor = a[0];157				}158			}159			160			if(item.anchorType=="group"){161				dojo.forEach(this.items[item.id].anchors, function(anchor){162					dojo.forEach(this.items[item.id].anchors, function(a){163						if(anchor.id != a.id){164							if(anchor.org.y == a.org.y){165								anchor.x_anchor = a;166							}else if(anchor.org.x == a.org.x){167								anchor.y_anchor = a;168							}169						}170					},this);	171				},this);172				173			}174		},175		176		remove: function(/*Stencil*/item){177			// summary:178			//		Destroys the anchor points for a Stencil.179			//180			if(!this.items[item.id]){181				return;182			}183			dojo.forEach(this.items[item.id].anchors, function(a){184				a.destroy();185			});186			dojo.forEach(this.items[item.id]._cons, dojo.disconnect, dojo);187			this.items[item.id].anchors = null;188			delete this.items[item.id];189		}190	}191);192dojox.drawing.manager.Anchor = dojox.drawing.util.oo.declare(193	// summary:194	//		An anchor point that is attached to (usually) one of the195	//		corners of a Stencil.196	//		Used internally.197	function(/* Object */options){198		// summary:199		//		constructor.200		//		arguments:201		//			dojox.__stencilArgs plus some additional202		//			data, like which point this is (pointIdx)203		//		204		this.defaults = dojox.drawing.defaults.copy();205		this.mouse = options.mouse;206		this.point = options.point;207		this.pointIdx = options.pointIdx;208		this.util = options.util;209		this.id = options.id || this.util.uid("anchor");210		this.org = dojo.mixin({}, this.point);211		this.stencil = options.stencil;212		if(this.stencil.anchorPositionCheck){213			this.anchorPositionCheck = dojo.hitch(this.stencil, this.stencil.anchorPositionCheck);214		}215		if(this.stencil.anchorConstrain){216			this.anchorConstrain = dojo.hitch(this.stencil, this.stencil.anchorConstrain);217		}218		this._zCon = dojo.connect(this.mouse, "setZoom", this, "render");219		this.render();220		this.connectMouse();221	},222	{223		y_anchor:null,224		x_anchor:null,225		render: function(){226			// summary:227			//		Creates the anchor point. Unlike most render methods228			//		in Drawing, this is only called once.229			//230			this.shape && this.shape.removeShape();231			var d = this.defaults.anchors,232				z = this.mouse.zoom,233				b = d.width * z,234				s = d.size * z,235				p = s/2,236				line = {237					width:b,238					style:d.style,239					color:d.color,240					cap:d.cap241				};242			243	244			var _r = {245				x: this.point.x-p,246				y: this.point.y-p,247				width: s,248				height: s249			};250			this.shape = this.stencil.container.createRect(_r)251				.setStroke(line)252				.setFill(d.fill);253			254			this.shape.setTransform({dx:0, dy:0});255			this.util.attr(this, "drawingType", "anchor");256			this.util.attr(this, "id", this.id);257		},258		onRenderStencil: function(/*Anchor*/anchor){259			// summary:260			//		Event fires when an anchor calls a Stencil's render method261		},262		onTransformPoint: function(/*Anchor*/anchor){263			// summary:264			//		Event fires when an anchor changes the points of a Stencil265		},266		onAnchorDown: function(/*Mouse.EventObject*/obj){267			// summary:268			//		Event fires for mousedown on anchor 269			this.selected = obj.id == this.id;270		},271		onAnchorUp: function(/*Mouse.EventObject*/obj){272			// summary:273			//		Event fires for mouseup on anchor274			this.selected = false;275			this.stencil.onTransformEnd(this);276		},277		278		onAnchorDrag: function(/*Mouse.EventObject*/obj){279			// summary:280			//		Event fires for on dragging of an anchor281			if(this.selected){282				// mx is the original transform from when the anchor283				// was created. It does not change284				var mx = this.shape.getTransform();285				286				var pmx = this.shape.getParent().getParent().getTransform();287				288				var marginZero = this.defaults.anchors.marginZero;289				290				var orgx = pmx.dx + this.org.x,291					orgy = pmx.dy + this.org.y,292					x = obj.x - orgx,293					y = obj.y - orgy,294					s = this.defaults.anchors.minSize;295				296				var conL, conR, conT, conB;297				298				var chk = this.anchorPositionCheck(x, y, this);299				if(chk.x<0){300					console.warn("X<0 Shift");301					while(this.anchorPositionCheck(x, y, this).x<0){302						this.shape.getParent().getParent().applyTransform({dx:2, dy:0});303					}304				}305				if(chk.y<0){306					console.warn("Y<0 Shift");307					while(this.anchorPositionCheck(x, y, this).y<0){308						this.shape.getParent().getParent().applyTransform({dx:0, dy:2});309					}310				}311				312				if(this.y_anchor){313					// prevent y overlap of opposite anchor314					if(this.org.y > this.y_anchor.org.y){315						// bottom anchor316						317						conT = this.y_anchor.point.y + s - this.org.y;318						conB = Infinity;319						320						if(y < conT){321							// overlapping other anchor322							y = conT;323						}324						325						326					}else{327						// top anchor328						329						conT = -orgy + marginZero;330						conB = this.y_anchor.point.y - s - this.org.y;331						332						if(y < conT){333							// less than zero334							y = conT;335						}else if(y > conB){336							// overlapping other anchor337							y = conB; 338						}339					}340				}else{341					// Lines - check for zero342					conT = -orgy + marginZero;343					if(y < conT){344						// less than zero345						y = conT;346					}347				}348				349				350				351				352				if(this.x_anchor){353					// prevent x overlap of opposite anchor354					355					if(this.org.x>this.x_anchor.org.x){356						// right anchor357						358						conL = this.x_anchor.point.x + s - this.org.x;359						conR = Infinity;360						361						if(x < conL){362							// overlapping other anchor363							x = conL;364						}							365						366					}else{367						// left anchor368						369						conL = -orgx + marginZero;370						conR = this.x_anchor.point.x - s - this.org.x;371						372						if(x < conL){373							x = conL;374						}else if(x > conR){375							// overlapping other anchor376							x = conR; 377						}378					}379				}else{380					// Lines check for zero381					conL = -orgx + marginZero;382					if(x < conL){383						x = conL;384					}385				}386				//Constrains anchor point, returns null if not overwritten by stencil387				var constrained = this.anchorConstrain(x, y);388				if(constrained != null){ 389					x=constrained.x;390					y=constrained.y; 391				}392				393				this.shape.setTransform({394					dx:x,395					dy:y396				});397				if(this.linkedAnchor){398					// first and last points of a closed-curve-path399					this.linkedAnchor.shape.setTransform({400						dx:x,401						dy:y402					});403				}404				this.onTransformPoint(this);405			}406		},407		408		anchorConstrain: function(/* Number */x,/* Number */ y){409			// summary:410			//		To be over written by tool!411			//		Add an anchorConstrain method to the tool412			//		and it will automatically overwrite this stub.413			//		Should return a constrained x & y value.414			return null;415		},416		417		anchorPositionCheck: function(/* Number */x,/* Number */ y, /* Anchor */anchor){418			// summary:419			//		To be over written by tool!420			//		Add a anchorPositionCheck method to the tool421			//		and it will automatically overwrite this stub.422			//		Should return x and y coords. Success is both423			//		being greater than zero, fail is if one or both424			//		are less than zero. 425			return {x:1, y:1};426		},427		428		setPoint: function(mx){429			// summary:430			//		Internal. Sets the Stencil's point431			this.shape.applyTransform(mx);432		},433		434		connectMouse: function(){435			// summary:436			//		Internal. Connects anchor to manager.mouse437			this._mouseHandle = this.mouse.register(this);438		},439		440		disconnectMouse: function(){441			// summary:442			//		Internal. Disconnects anchor to manager.mouse443			this.mouse.unregister(this._mouseHandle);444		},445		446		reset: function(stencil){447			// summary:448			//		Called (usually) from a Stencil when that Stencil449			//		needed to make modifications to the position of the450			//		point. Basically used when teh anchor causes a451			//		less than zero condition.452		},453		454		destroy: function(){455			// summary:456			//		Destroys anchor.457			dojo.disconnect(this._zCon);458			this.disconnectMouse();459			this.shape.removeShape();460		}461	}...

draw.js

Source:draw.js

1/**2 * Created by aiflow on 2019/7/8.3 *4 * ç»å¶éç¹5 */6import config from '../../config'7export default function (cfg, group) {8  const { anchorPoints, width, height, id } = cfg9  const shape = group.getFirst()10  // console.log('getAnchorPoints', id, shape, anchorPoints.length)11  if (anchorPoints && anchorPoints.length) {12    for (let i = 0, len = anchorPoints.length; i < len; i++) {13      let anchorX14      let anchorY15      if (shape && shape.get('type') === 'path') {16        const point = shape.getPoint(i / len)17        anchorX = point.x18        anchorY = point.y19      } else {20        const [x, y] = anchorPoints[i]21        // è®¡ç®Markerä¸å¿ç¹åæ 22        const originX = -width / 223        const originY = -height / 224        anchorX = x * width + originX25        anchorY = y * height + originY26      }27      // æ·»å éç¹èæ¯28      const anchorBgShape = group.addShape('marker', {29        id: id + '_anchor_bg_' + i,30        name: 'anchorBg',31        attrs: {32          boxName: 'anchor',33          name: 'anchorBg',34          x: anchorX,35          y: anchorY,36          // éç¹é»è®¤æ ·å¼37          ...config.anchorBg.style.default38        },39        zIndex: 10040      })41      // æ·»å éç¹Markerå½¢ç¶42      const anchorShape = group.addShape('marker', {43        id: id + '_anchor_' + i,44        name: 'anchorPoint',45        attrs: {46          boxName: 'anchor',47          name: 'anchorPoint',48          x: anchorX,49          y: anchorY,50          // éç¹é»è®¤æ ·å¼51          ...config.anchor.style.default52        }53      })54      // FIXME ãè°è¯ç¨ä»£ç ãæ·»å éç¹ææ¬55      // group.addShape('text', {56      //   id: id + '_anchor_text_' + i,57      //   name: 'anchorText',58      //   attrs: {59      //     x: anchorX,60      //     y: anchorY,61      //     fontFamily: 'PingFang SC',62      //     fontSize: 12,63      //     text: anchorPoints[i].toString(),64      //     lineDash: [10, 10],65      //     fill: 'red'66      //   }67      // })68      if (anchorShape) {69        anchorShape.on('mouseenter', function () {70          anchorBgShape.attr({71            ...config.anchorBg.style.active72          })73        })74        anchorShape.on('mouseleave', function () {75          anchorBgShape.attr({76            ...config.anchorBg.style.inactive77          })78        })79      }80    }81  }...

Using AI Code Generation

1var wpt = require('webpagetest');2var wpt = new WebPageTest('www.webpagetest.org');3  if (err) return console.error(err);4  console.log('Test submitted successfully! Check results at %s', data.data.userUrl);5});6var wpt = require('webpagetest');7var wpt = new WebPageTest('www.webpagetest.org');8  .then(function(data) {9    console.log('Test submitted successfully! Check results at %s', data.data.userUrl);10  })11  .catch(function(err) {12    console.error(err);13  });14### WebPageTest(host, port, key)15### WebPageTest#runTest(url, options, callback)16### WebPageTest#runTest(url, options)17### WebPageTest#runTest(url, callback)18### WebPageTest#runTest(url)19### WebPageTest#getLocations(callback)20### WebPageTest#getLocations()21### WebPageTest#getTesters(callback)

Using AI Code Generation

1var wpt = new WebPageTest('www.webpagetest.org');2    if (err) return console.log(err);3    console.log('Test ID: %s', data.data.testId);4    wpt.getTestResults(data.data.testId, function(err, data) {5        if (err) return console.log(err);6        console.log('Test complete');7        console.log(data);8    });9});10var wpt = new WebPageTest('www.webpagetest.org');11    if (err) return console.log(err);12    console.log('Test ID: %s', data.data.testId);13    wpt.getTestResults(data.data.testId, function(err, data) {14        if (err) return console.log(err);15        console.log('Test complete');16        console.log(data);17    });18});19var wpt = new WebPageTest('www.webpagetest.org');20    if (err) return console.log(err);21    console.log('Test ID: %s', data.data.testId);22    wpt.getTestResults(data.data.testId, function(err, data) {23        if (err) return console.log(err);24        console.log('Test complete');25        console.log(data);26    });27});

Using AI Code Generation

1var wptools = require('wptools');2var options = {3};4wptools.page(options, function(err, resp) {5  console.log(resp);6});7var wptools = require('wptools');8var options = {9};10wptools.page(options, function(err, resp) {11  console.log(resp);12});13var wptools = require('wptools');14var options = {15};16wptools.page(options, function(err, resp) {17  console.log(resp);18});19var wptools = require('wptools');20var options = {21};22wptools.page(options, function(err, resp) {23  console.log(resp);24});25var wptools = require('wptools');26var options = {27};28wptools.page(options, function(err, resp) {29  console.log(resp);30});31var wptools = require('wptools');32var options = {33};34wptools.page(options, function(err, resp) {35  console.log(resp);36});37var wptools = require('wptools');38var options = {39};40wptools.page(options, function(err, resp) {41  console.log(resp);42});43var wptools = require('wptools');44var options = {

Using AI Code Generation

1 if (err) {2 console.log(err);3 } else {4 console.log(data);5 }6});

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.