Best JavaScript code snippet using playwright-internal
statement-container.js
Source:statement-container.js  
...60        this._offset = _.get(this._viewOptions, 'offset');61        this._rootGroup = D3Utils.group(this._containerD3)62            .classed(_.get(this._viewOptions, 'cssClass.group'), true);63        this._statementViewFactory = new StatementViewFactory();64        this.getBoundingBox().fromTopCenter(this._topCenter, this._width,65            this._bottomCenter.absDistInYFrom(this._topCenter));66        // a flag to indicate a whole container move - so that we can avoid resizing on container move67        this.isOnWholeContainerMove = false;68    };69    StatementContainerView.prototype = Object.create(BallerinaView.prototype);70    StatementContainerView.prototype.constructor = StatementContainerView;71    StatementContainerView.prototype.translate = function (x, y) {72        this._rootGroup.attr("transform", "translate(" + x + "," + y + ")");73    };74    /**75     * Render a given statement76     * @param statement {Statement}77     * @param args {Object}78     */79    StatementContainerView.prototype.renderStatement = function (statement, args) {80        var topCenter, statementView, newDropZoneTopCenter,  dropZoneOptions = {width: 120, height: this._gap};81        if (!_.isEmpty(this._managedStatements)) {82            var hasPendingInnerDropRender = _.gte(this._selectedInnerDropZoneIndex, 0);83            if(hasPendingInnerDropRender){84                var nextStatement = _.nth(this._managedStatements, this._selectedInnerDropZoneIndex),85                    nextStatementView = this.diagramRenderingContext.getViewOfModel(nextStatement),86                    topX = nextStatementView.getBoundingBox().getTopCenterX();87                    topY = nextStatementView.getBoundingBox().getTop();88                    topCenter = new Point(topX, topY);89                _.set(args, 'topCenter', topCenter);90                statementView = this._statementViewFactory.getStatementView(args);91                // move next statementView below92                var newY = statementView.getBoundingBox().getBottom() + this._gap;93                nextStatementView.getBoundingBox().y(newY);94                // if current index is not 0, meaning we have to do some logic to swap things to fit new top neighbour95                if(!_.isEqual(this._selectedInnerDropZoneIndex, 0)){96                    var prevStatement = _.nth(this._managedStatements, this._selectedInnerDropZoneIndex - 1),97                        prevStatementView = this.diagramRenderingContext.getViewOfModel(prevStatement);98                    // nextStatementView and the prevStatementView are still the neighbours - separate them.99                   prevStatementView.getBoundingBox().off("bottom-edge-moved");100                    // make new view listen to previous view101                    prevStatementView.getBoundingBox().on("bottom-edge-moved", function(offsetY){102                        statementView.getBoundingBox().move(0, offsetY);103                    });104                    // Re bind the broken event for the current drop zone105                    this._managedInnerDropzones[this._selectedInnerDropZoneIndex].listenTo(statementView.getBoundingBox(),106                        'bottom-edge-moved', this._managedInnerDropzones[this._selectedInnerDropZoneIndex].onLastStatementBottomEdgeMoved);107                } else{108                    statementView.listenTo(this.getBoundingBox(), 'top-edge-moved', function(dy){109                        statementView.getBoundingBox().y(statementView.getBoundingBox().y() + dy);110                    });111                    nextStatementView.stopListening(this.getBoundingBox(), 'top-edge-moved');112                }113                // make next view listen to new view114                statementView.getBoundingBox().on("bottom-edge-moved", function(offsetY){115                    nextStatementView.getBoundingBox().move(0, offsetY);116                });117                statementView.render(this.diagramRenderingContext);118                // insert at specific position119                this._managedStatements.splice(this._selectedInnerDropZoneIndex, 0, statement);120                // render a new innerDropZone on top of next statement block's top121                newDropZoneTopCenter = new Point(this.getBoundingBox().getTopCenterX(),122                    nextStatementView.getBoundingBox().y() - this._gap);123                _.set(dropZoneOptions, 'topCenter', newDropZoneTopCenter);124                _.set(dropZoneOptions, 'statementId', statementView._model.id);125                var innerDropZone = this._createNextInnerDropZone(dropZoneOptions, _.findIndex(this._managedStatements, ['id', nextStatement.id]));126                innerDropZone.listenTo(statementView.getBoundingBox(), 'bottom-edge-moved', innerDropZone.onLastStatementBottomEdgeMoved);127                // reset index of activatedInnerDropZone after handling inner drop128                this._selectedInnerDropZoneIndex = -1;129            } else {130                var lastStatement = _.last(this._managedStatements),131                    lastStatementView = this.diagramRenderingContext.getViewOfModel(lastStatement),132                    lastStatementViewBBox = lastStatementView.getBoundingBox(),133                    topX, topY;134                topX = lastStatementViewBBox.getTopCenterX();135                topY = lastStatementViewBBox.y() + lastStatementViewBBox.h() + this._gap;136                topCenter = new Point(topX, topY);137                _.set(args, 'topCenter', topCenter);138                statementView = this._statementViewFactory.getStatementView(args);139                this._managedStatements.push(statement);140                this.setLastStatementView(statementView);141                statementView.render(this.diagramRenderingContext);142                // make new view listen to previous view143                lastStatementView.getBoundingBox().on("bottom-edge-moved", function(offsetY){144                    statementView.getBoundingBox().move(0, offsetY);145                });146                newDropZoneTopCenter = new Point(statementView.getBoundingBox().getTopCenterX(),147                                statementView.getBoundingBox().y() - this._gap);148                _.set(dropZoneOptions, 'topCenter', newDropZoneTopCenter);149                _.set(dropZoneOptions, 'statementId', statementView._model.id);150                var innerDropZone = this._createNextInnerDropZone(dropZoneOptions);151                innerDropZone.listenTo(lastStatementView.getBoundingBox(), 'bottom-edge-moved', innerDropZone.onLastStatementBottomEdgeMoved);152            }153        } else {154            topCenter = this._topCenter.clone().move(0, this._offset.top);155            _.set(args, 'topCenter', topCenter);156            statementView = this._statementViewFactory.getStatementView(args);157            this._managedStatements.push(statement);158            this.setLastStatementView(statementView);159            statementView.render(this.diagramRenderingContext);160            // this is the fist statement - create dropzone on top161            newDropZoneTopCenter = topCenter.clone().move(0, - this._gap);162            _.set(dropZoneOptions, 'topCenter', newDropZoneTopCenter);163            _.set(dropZoneOptions, 'statementId', statementView._model.id);164            var innerDropZone = this._createNextInnerDropZone(dropZoneOptions);165            if(this.getBoundingBox().getBottom() < statementView.getBoundingBox().getBottom()){166                this.getBoundingBox().h(statementView.getBoundingBox().h() +167                    statementView.getBoundingBox().getBottom() - this.getBoundingBox().getBottom() +168                    _.get(this._viewOptions, 'offset.bottom')169                );170            }171            // first inner drop zone should not move for resource default worker172            if(this._model.getFactory().isStatement(this._model)){173                innerDropZone.listenTo(this._parent.getBoundingBox(),174                    'top-edge-moved', innerDropZone.onLastStatementBottomEdgeMoved);175            }176            statementView.listenTo(this.getBoundingBox(), 'top-edge-moved', function(dy){177                statementView.getBoundingBox().y(statementView.getBoundingBox().y() + dy);178            });179        }180        if(this.getBoundingBox().w() < statementView.getBoundingBox().w()){181            this.getBoundingBox().w(statementView.getBoundingBox().w());182        }183        this.diagramRenderingContext.setViewOfModel(statement, statementView);184        return statementView;185    };186    StatementContainerView.prototype.setLastStatementView = function(lastStatementView){187        if(!_.isNil(this._lastStatementView)){188            this._lastStatementView.getBoundingBox().off('bottom-edge-moved');189        }190        this._lastStatementView = lastStatementView;191        if(this.getBoundingBox().getBottom() <192            (this._lastStatementView.getBoundingBox().getBottom() + _.get(this._viewOptions, 'offset.bottom'))){193            this.getBoundingBox().h((this._lastStatementView.getBoundingBox().getBottom() - this.getBoundingBox().getTop()) +194                _.get(this._viewOptions, 'offset.bottom'));195        }196        this._lastStatementView.getBoundingBox().on('bottom-edge-moved', function(dy){197            var newHeight = this.getBoundingBox().h() + dy;198                if(!this.isOnWholeContainerMove){199                    // If the new height is smaller than the minimum height we set the height of the statement container to the minimum allowed200                    if (newHeight > this._minHeight) {201                        this.getBoundingBox().h(newHeight);202                    } else {203                        this.getBoundingBox().h(this._minHeight);204                    }205                }206                this.isOnWholeContainerMove = false;207        }, this);208    };209    StatementContainerView.prototype.render = function (diagramRenderingContext) {210        this.diagramRenderingContext = diagramRenderingContext;211        var self = this;212        this._mainDropZone = D3Utils.rect(this._topCenter.x() - this._width/2, this._topCenter.y(), this._width,213                this._bottomCenter.absDistInYFrom(this._topCenter), 0, 0, this._rootGroup)214                .classed( _.get(this._viewOptions, 'cssClass.mainDropZone'), true);215        // adjust drop zone height on bottom edge moved216        this.getBoundingBox().on('height-changed', function(offset){217            self._mainDropZone.attr('height', parseFloat(self._mainDropZone.attr('height')) + offset);218        });219        // adjust drop zone height on bottom edge moved220        this.getBoundingBox().on('top-edge-moved', function(offset){221            self._mainDropZone.attr('y', parseFloat(self._mainDropZone.attr('y')) + offset);222            this._topCenter.move(0, offset);223        }, this);224        var dropZoneOptions = {225            dropZone: this._mainDropZone,226            hoverClass: _.get(this._viewOptions, 'cssClass.mainDropZoneHover')227        };228        this.initDropZone(dropZoneOptions);229        return this;230    };231    StatementContainerView.prototype._createNextInnerDropZone = function(options, index){232        var innerDZone = D3Utils.rect(options.topCenter.x() - options.width/2,233            options.topCenter.y(), options.width,234            options.height, 0, 0, this._rootGroup)235            .classed( _.get(this._viewOptions, 'cssClass.innerDropZone'), true).attr('id',options.statementId);236        var dropZoneOptions = {237            dropZone: innerDZone,238            hoverClass: _.get(this._viewOptions, 'cssClass.innerDropZoneHover')239        };240        this.initDropZone(dropZoneOptions);241        // wrap dropzone using an event channel object to use eventing on top of it242        var innerDropZoneObj = new EventChannel();243        innerDropZoneObj.d3el = innerDZone;244        innerDropZoneObj.onLastStatementBottomEdgeMoved = function(dy){245            this.d3el.attr('y', parseFloat(this.d3el.attr('y')) + dy);246        };247        if(!_.isNil(index)){248            this._managedInnerDropzones.splice(index, 0, innerDropZoneObj)249        } else {250            this._managedInnerDropzones.push(innerDropZoneObj);251        }252        return innerDropZoneObj;253    };254    StatementContainerView.prototype.initDropZone = function (options) {255        var dropZone = _.get(options, 'dropZone'),256            hoverClass = _.get(options, 'hoverClass'),257            self = this;258        var getDroppedNodeIndex = function(node){259           if(!_.gte(self._selectedInnerDropZoneIndex, 0)){260               return -1;261           }262           var neighbourStatement = _.nth(self._managedStatements, self._selectedInnerDropZoneIndex),263               newNodeIndex = self._model.getIndexOfChild(neighbourStatement);264           log.debug("Index for the dropped node is " + newNodeIndex);265           return newNodeIndex;266        };267        var mouseOverHandler = function() {268            //if someone is dragging a tool from tool-palette269            if(self.toolPalette.dragDropManager.isOnDrag()){270                self._selectedInnerDropZoneIndex = _.findIndex(self._managedInnerDropzones, ['d3el', d3.select(this)]);271                if(_.isEqual(self.toolPalette.dragDropManager.getActivatedDropTarget(), self)){272                    return;273                }274                // register this as a drop target and validate possible types of nodes to drop - second arg is a call back to validate275                // tool view will use this to provide feedback on impossible drop zones276                self.toolPalette.dragDropManager.setActivatedDropTarget(self._model, function(nodeBeingDragged){277                    var nodeFactory = self._model.getFactory();278                    // IMPORTANT: override resource definition node's default validation logic279                    // This drop zone is for statements only.280                    // Statements should only be allowed here.281                    return nodeFactory.isStatement(nodeBeingDragged);282                }, getDroppedNodeIndex);283                // indicate drop area284                dropZone.classed(hoverClass, true);285                // reset ui feed back on drop target change286                self.toolPalette.dragDropManager.once("drop-target-changed", function(){287                    dropZone.classed(hoverClass, false);288                });289            }290            d3.event.stopPropagation();291        };292        var mouseOutHandler = function() {293            // reset ui feed back on hover out294            if(self.toolPalette.dragDropManager.isOnDrag()){295                if(_.isEqual(self.toolPalette.dragDropManager.getActivatedDropTarget(), self._model)){296                    dropZone.classed(hoverClass, false);297                }298            }299            d3.event.stopPropagation();300        };301        dropZone.on("mouseover", mouseOverHandler);302        dropZone.on("mouseout", mouseOutHandler);303    };304    /**305     * Callback function for statement removing306     * @param {ASTNode} childStatement - removed child statement307     */308    StatementContainerView.prototype.childStatementRemovedCallback = function (childStatement) {309        var childStatementView = this.diagramRenderingContext.getViewModelMap()[childStatement.id];310        var childStatementIndex = _.findIndex(this._managedStatements, function (child) {311            return child.id === childStatement.id;312        });313        var previousStatementView = childStatementIndex === 0 ?314            undefined : this.diagramRenderingContext.getViewOfModel(this._managedStatements[childStatementIndex - 1]);315        var nextStatementView = childStatementIndex === this._managedStatements.length - 1 ?316            undefined : this.diagramRenderingContext.getViewOfModel(_.nth(this._managedStatements, childStatementIndex + 1));317        childStatementView.getBoundingBox().off('bottom-edge-moved');318        if (!_.isNil(nextStatementView)) {319            if (!_.isNil(previousStatementView)) {320                var nextDropZone = this._managedInnerDropzones[childStatementIndex].d3el;321                var nextDropZoneOffset = -(this.getDiagramRenderingContext().getViewOfModel(childStatement).getBoundingBox().h()) - 30;322                previousStatementView.getBoundingBox().on('bottom-edge-moved', function (offsetY) {323                    nextStatementView.getBoundingBox().move(0, offsetY);324                });325                nextDropZone.attr('y', parseFloat(nextDropZone.attr('y')) + nextDropZoneOffset);326            } else {327                // If the previous element is null then we have deleted the first element328                // then the next element becomes the top/ first element329                // Stop listening to the top-edge-moved by the deleted element330                childStatementView.stopListening(this.getBoundingBox(), 'top-edge-moved');331                // Use the listenTo since the event has to be manipulated by this view's self332                nextStatementView.listenTo(this.getBoundingBox(), 'top-edge-moved', function(dy){333                    nextStatementView.getBoundingBox().y(nextStatementView.getBoundingBox().y() + dy);334                });335            }336        } else if (_.isNil(nextStatementView) && !_.isNil(previousStatementView)) {337            // This means we have deleted the last statement and it is not the only element.338            // We have to reset the last statement339            this.setLastStatementView(previousStatementView)340        }341        this._managedStatements.splice(childStatementIndex, 1);342    };343    /**344     * Remove the inner drop zone345     * @param {ASTNode} child - child node346     */347    StatementContainerView.prototype.removeInnerDropZone = function (child) {348        var childStatementIndex = _.findIndex(this._managedStatements, function(childStatement) {349            return childStatement.id === child.id;350        });351        var innerDropZone = undefined;352        var removeIndex = -1;353        // If this is the only element354        if (this._managedStatements.length === 1 && this._managedInnerDropzones.length === 1) {355            removeIndex = 0;356        } else if ((this._managedStatements.length - 1 === childStatementIndex) || childStatementIndex === 0) {357            // If this is the first or the last element358            removeIndex = childStatementIndex;359        } else {360            removeIndex = childStatementIndex;361            var previousView = this.diagramRenderingContext.getViewOfModel(this._managedStatements[removeIndex - 1]);362            var viewToDelete = this.diagramRenderingContext.getViewOfModel(this._managedStatements[removeIndex]);363            this._managedInnerDropzones[removeIndex + 1].stopListening(viewToDelete.getBoundingBox());364            this._managedInnerDropzones[removeIndex + 1].listenTo(previousView.getBoundingBox(), 'bottom-edge-moved',365                this._managedInnerDropzones[removeIndex + 1].onLastStatementBottomEdgeMoved);366        }367        if (removeIndex > -1) {368            innerDropZone = this._managedInnerDropzones[removeIndex];369            innerDropZone.d3el.node().remove();370            this._managedInnerDropzones.splice(removeIndex, 1);371        }372    };373    return StatementContainerView;...while-statement-view.js
Source:while-statement-view.js  
...31            _.set(this._viewOptions, 'width', _.get(this._viewOptions, 'width', 140));32            _.set(this._viewOptions, 'height', _.get(this._viewOptions, 'height', 100));33            _.set(this._viewOptions, 'contentOffset', _.get(this._viewOptions, 'contentOffset', {top: 10, bottom: 10}));34            // Initialize the bounding box35            this.getBoundingBox().fromTopCenter(this.getTopCenter(),36                _.get(this._viewOptions, 'width'),  _.get(this._viewOptions, 'height'));37            this._statementContainer = undefined;38        };39        WhileStatementView.prototype = Object.create(BallerinaStatementView.prototype);40        WhileStatementView.prototype.constructor = WhileStatementView;41        WhileStatementView.prototype.canVisitWhileStatement = function(){42            return true;43        };44        /**45         * Remove View callback46         * @param {ASTNode} parent - parent node47         * @param {ASTNode} child - child node48         */49        WhileStatementView.prototype.onBeforeModelRemove = function () {50            this._statementContainer.getBoundingBox().off('bottom-edge-moved');51            d3.select("#_" +this._model.id).remove();52            this.getBoundingBox().w(0).h(0);53        };54        /**55         * Override Child remove callback56         * @param {ASTNode} child - removed child57         */58        WhileStatementView.prototype.childRemovedCallback = function (child) {59            if (BallerinaASTFactory.isStatement(child)) {60                this.getStatementContainer().childStatementRemovedCallback(child);61            }62        };63        /**64         * Render the while statement65         */66        WhileStatementView.prototype.render = function (diagramRenderingContext) {67            this._diagramRenderingContext = diagramRenderingContext;68            var whileGroup = D3Utils.group(d3.select(this._container));69            whileGroup.attr("id","_" +this._model.id);70            var self = this;71            var title_rect = D3Utils.rect(this.getBoundingBox().x(), this.getBoundingBox().y(), this.getBoundingBox().w(), 25, 0, 0, whileGroup).classed('statement-title-rect', true);72            var outer_rect = D3Utils.rect(this.getBoundingBox().x(), this.getBoundingBox().y(), this.getBoundingBox().w(),73                this.getBoundingBox().h(), 0, 0, whileGroup).classed('background-empty-rect', true);74            var points = "" + this.getBoundingBox().x() + "," + (parseInt(this.getBoundingBox().y()) + 25) + " " +75                (parseInt(this.getBoundingBox().x()) + 35) + "," + (parseInt(this.getBoundingBox().y()) + 25) + " " +76                (parseInt(this.getBoundingBox().x()) + 45) + "," + this.getBoundingBox().y();77            var title_wrapper_polyline = D3Utils.polyline(points, whileGroup).classed('statement-title-polyline', true);78            var title_text = D3Utils.textElement(this.getBoundingBox().x() + 20, this.getBoundingBox().y() + 12, 'While', whileGroup).classed('statement-text', true);79            whileGroup.outerRect = outer_rect;80            whileGroup.titleRect = title_rect;81            whileGroup.titleText = title_text;82            whileGroup.title_wrapper_polyline = title_wrapper_polyline;83            this.setStatementGroup(whileGroup);84            this.getBoundingBox().on('moved', function(offset){85                outer_rect.attr("y", parseFloat(outer_rect.attr('y')) + offset.dy);86                outer_rect.attr("x", parseFloat(outer_rect.attr('x')) + offset.dx);87                title_rect.attr("y", parseFloat(title_rect.attr('y')) + offset.dy);88                title_rect.attr("x", parseFloat(title_rect.attr('x')) + offset.dx);89                title_text.attr("y", parseFloat(title_text.attr('y')) + offset.dy);90                title_text.attr("x", parseFloat(title_text.attr('x')) + offset.dx);91                var newPolylinePoints = "" + self.getBoundingBox().x() + "," + (parseInt(self.getBoundingBox().y()) + 25) + " " +92                    (parseInt(self.getBoundingBox().x()) + 35) + "," + (parseInt(self.getBoundingBox().y()) + 25) + " " +93                    (parseInt(self.getBoundingBox().x()) + 45) + "," + self.getBoundingBox().y();94                title_wrapper_polyline.attr("points", newPolylinePoints);95            });96            this.getBoundingBox().on('width-changed', function(dw){97                outer_rect.attr("x", parseFloat(outer_rect.attr('x')) - dw/2);98                outer_rect.attr("width", parseFloat(outer_rect.attr('width')) + dw);99                title_rect.attr("x", parseFloat(title_rect.attr('x')) - dw/2);100                title_text.attr("x", parseFloat(title_text.attr('x')) - dw/2);101                var newPolylinePoints = "" + self.getBoundingBox().x() + "," + (parseInt(self.getBoundingBox().y()) + 25) + " " +102                    (parseInt(self.getBoundingBox().x()) + 35) + "," + (parseInt(self.getBoundingBox().y()) + 25) + " " +103                    (parseInt(self.getBoundingBox().x()) + 45) + "," + self.getBoundingBox().y();104                title_wrapper_polyline.attr("points", newPolylinePoints);105            });106            // Creating property pane107            var editableProperty = {108                propertyType: "text",109                key: "Condition",110                model: this._model,111                getterMethod: this._model.getCondition,112                setterMethod: this._model.setCondition113            };114            this._createPropertyPane({115                model: this._model,116                statementGroup:whileGroup,117                editableProperties: editableProperty118            });119            this.getBoundingBox().on('height-changed', function(dh){120                outer_rect.attr("height", parseFloat(outer_rect.attr('height')) + dh);121            });122            this._rootGroup = whileGroup;123            this._statementContainerGroup = D3Utils.group(whileGroup);124            this.renderStatementContainer();125            this._model.accept(this);126            //Removing all the registered 'child-added' event listeners for this model.127            //This is needed because we are not unregistering registered event while the diagram element deletion.128            //Due to that, sometimes we are having two or more view elements listening to the 'child-added' event of same model.129            this._model.off('child-added');130            this._model.on('child-added', function(child){131                this.visit(child);132            }, this);133        };134        /**135         * @param {BallerinaStatementView} statement136         */137        WhileStatementView.prototype.visit = function (statement) {138            var args = {model: statement, container: this._rootGroup.node(), viewOptions: {},139                toolPalette: this.toolPalette, messageManager: this.messageManager, parent: this};140            this._statementContainer.renderStatement(statement, args);141        };142        /**143         * Render statement container144         */145        WhileStatementView.prototype.renderStatementContainer = function(){146            var statementContainerOpts = {};147            _.set(statementContainerOpts, 'model', this._model);148            _.set(statementContainerOpts, 'topCenter', this.getTopCenter().clone().move(0, _.get(this._viewOptions, 'contentOffset.top')));149            var height = _.get(this._viewOptions, 'height') -150                _.get(this._viewOptions, 'contentOffset.top') - _.get(this._viewOptions, 'contentOffset.bottom');151            _.set(statementContainerOpts, 'bottomCenter', this.getTopCenter().clone().move(0, _.get(this._viewOptions, 'height')));152            _.set(statementContainerOpts, 'width', _.get(this._viewOptions, 'width'));153            _.set(statementContainerOpts, 'offset', {top: 40, bottom: 40});154            _.set(statementContainerOpts, 'parent', this);155            _.set(statementContainerOpts, 'container', this._statementContainerGroup.node());156            _.set(statementContainerOpts, 'toolPalette', this.toolPalette);157            var StatementContainer = require('./statement-container');158            this._statementContainer = new StatementContainer(statementContainerOpts);159            this.listenTo(this._statementContainer.getBoundingBox(), 'height-changed', function(dh){160                this.getBoundingBox().h(this.getBoundingBox().h() + dh);161            });162            this.getBoundingBox().on('top-edge-moved', function (dy) {163                this._statementContainer.isOnWholeContainerMove = true;164                this._statementContainer.getBoundingBox().y(this._statementContainer.getBoundingBox().y() + dy);165            }, this);166            this.listenTo(this._statementContainer.getBoundingBox(), 'width-changed', function(dw){167                this.getBoundingBox().w(this.getBoundingBox().w() + dw);168            });169            this._statementContainer.render(this._diagramRenderingContext);170        };171        /**172         * Set the while statement model173         * @param {WhileStatement} model174         */175        WhileStatementView.prototype.setModel = function (model) {176            if (!_.isNil(model) && model instanceof WhileStatement) {177                this._model = model;178            } else {179                log.error("While statement definition is undefined or is of different type." + model);180                throw "While statement definition is undefined or is of different type." + model;181            }...if-statement-view.js
Source:if-statement-view.js  
...31            _.set(this._viewOptions, 'width', _.get(this._viewOptions, 'width', 140));32            _.set(this._viewOptions, 'height', _.get(this._viewOptions, 'height', 100));33            _.set(this._viewOptions, 'contentOffset', _.get(this._viewOptions, 'contentOffset', {top: 10, bottom: 10}));34            // Initialize the bounding box35            this.getBoundingBox().fromTopCenter(this.getTopCenter(),36                _.get(this._viewOptions, 'width'),  _.get(this._viewOptions, 'height'));37            this._statementContainer = undefined;38        };39        IfStatementView.prototype = Object.create(BallerinaStatementView.prototype);40        IfStatementView.prototype.constructor = IfStatementView;41        IfStatementView.prototype.canVisitIfStatement = function(){42            return true;43        };44        /**45         * Render the if statement46         */47        IfStatementView.prototype.render = function (diagramRenderingContext) {48            this._diagramRenderingContext = diagramRenderingContext;49            var ifGroup = D3Utils.group(d3.select(this._container));50            ifGroup.attr("id","_" +this._model.id);51            var self = this;52            var title_rect = D3Utils.rect(this.getBoundingBox().x(), this.getBoundingBox().y(), this.getBoundingBox().w(), 25, 0, 0, ifGroup).classed('statement-title-rect', true);53            var outer_rect = D3Utils.rect(this.getBoundingBox().x(), this.getBoundingBox().y(), this.getBoundingBox().w(),54                this.getBoundingBox().h(), 0, 0, ifGroup).classed('background-empty-rect', true);55            var points = "" + this.getBoundingBox().x() + "," + (parseInt(this.getBoundingBox().y()) + 25) + " " +56                (parseInt(this.getBoundingBox().x()) + 35) + "," + (parseInt(this.getBoundingBox().y()) + 25) + " " +57                (parseInt(this.getBoundingBox().x()) + 45) + "," + this.getBoundingBox().y();58            var title_wrapper_polyline = D3Utils.polyline(points, ifGroup).classed('statement-title-polyline', true);59            var title_text = D3Utils.textElement(this.getBoundingBox().x() + 20, this.getBoundingBox().y() + 12, 'If', ifGroup).classed('statement-text', true);60            ifGroup.outerRect = outer_rect;61            ifGroup.titleRect = title_rect;62            ifGroup.titleText = title_text;63            ifGroup.title_wrapper_polyline = title_wrapper_polyline;64            this.setStatementGroup(ifGroup);65            this.getBoundingBox().on('moved', function(offset){66                outer_rect.attr("y", parseFloat(outer_rect.attr('y')) + offset.dy);67                outer_rect.attr("x", parseFloat(outer_rect.attr('x')) + offset.dx);68                title_rect.attr("y", parseFloat(title_rect.attr('y')) + offset.dy);69                title_rect.attr("x", parseFloat(title_rect.attr('x')) + offset.dx);70                title_text.attr("y", parseFloat(title_text.attr('y')) + offset.dy);71                title_text.attr("x", parseFloat(title_text.attr('x')) + offset.dx);72                var newPolylinePoints = "" + self.getBoundingBox().x() + "," + (parseInt(self.getBoundingBox().y()) + 25) + " " +73                    (parseInt(self.getBoundingBox().x()) + 35) + "," + (parseInt(self.getBoundingBox().y()) + 25) + " " +74                    (parseInt(self.getBoundingBox().x()) + 45) + "," + self.getBoundingBox().y();75                title_wrapper_polyline.attr("points", newPolylinePoints);76            });77            this.getBoundingBox().on('width-changed', function(dw){78                outer_rect.attr("x", parseFloat(outer_rect.attr('x')) - dw/2);79                outer_rect.attr("width", parseFloat(outer_rect.attr('width')) + dw);80                title_rect.attr("x", parseFloat(title_rect.attr('x')) - dw/2);81                title_text.attr("x", parseFloat(title_text.attr('x')) - dw/2);82                var newPolylinePoints = "" + self.getBoundingBox().x() + "," + (parseInt(self.getBoundingBox().y()) + 25) + " " +83                    (parseInt(self.getBoundingBox().x()) + 35) + "," + (parseInt(self.getBoundingBox().y()) + 25) + " " +84                    (parseInt(self.getBoundingBox().x()) + 45) + "," + self.getBoundingBox().y();85                title_wrapper_polyline.attr("points", newPolylinePoints);86            });87            this.getBoundingBox().on('height-changed', function(dh){88                outer_rect.attr("height", parseFloat(outer_rect.attr('height')) + dh);89                var newHeight = dh + self.getParent().getBoundingBox().h() + 20;90                self.getParent().getBoundingBox().h(newHeight);91            });92            this._rootGroup = ifGroup;93            this._statementContainerGroup = D3Utils.group(ifGroup);94            this.renderStatementContainer();95            this._model.accept(this);96            //Removing all the registered 'child-added' event listeners for this model.97            //This is needed because we are not unregistering registered event while the diagram element deletion.98            //Due to that, sometimes we are having two or more view elements listening to the 'child-added' event of same model.99            this._model.off('child-added');100            this._model.on('child-added', function(child){101                this.visit(child);102            }, this);103        };104        /**105         * @param {BallerinaStatementView} statement106         */107        IfStatementView.prototype.visit = function (statement) {108            var args = {model: statement, container: this._rootGroup.node(), viewOptions: {},109                toolPalette: this.toolPalette, messageManager: this.messageManager, parent: this};110            this._statementContainer.renderStatement(statement, args);111        };112        /**113         * Render statement container114         */115        IfStatementView.prototype.renderStatementContainer = function(){116            var statementContainerOpts = {};117            _.set(statementContainerOpts, 'model', this._model);118            _.set(statementContainerOpts, 'topCenter', this.getTopCenter().clone().move(0, _.get(this._viewOptions, 'contentOffset.top')));119            var height = _.get(this._viewOptions, 'height') -120                _.get(this._viewOptions, 'contentOffset.top') - _.get(this._viewOptions, 'contentOffset.bottom');121            _.set(statementContainerOpts, 'bottomCenter', this.getTopCenter().clone().move(0, _.get(this._viewOptions, 'height')));122            _.set(statementContainerOpts, 'width', _.get(this._viewOptions, 'width'));123            _.set(statementContainerOpts, 'offset', {top: 40, bottom: 40});124            _.set(statementContainerOpts, 'parent', this);125            _.set(statementContainerOpts, 'container', this._statementContainerGroup.node());126            _.set(statementContainerOpts, 'toolPalette', this.toolPalette);127            var StatementContainer = require('./statement-container');128            this._statementContainer = new StatementContainer(statementContainerOpts);129            this.listenTo(this._statementContainer.getBoundingBox(), 'height-changed', function(dh){130                this.getBoundingBox().h(this.getBoundingBox().h() + dh);131            });132            this.getBoundingBox().on('top-edge-moved', function (dy) {133                this._statementContainer.isOnWholeContainerMove = true;134                this._statementContainer.getBoundingBox().y(this._statementContainer.getBoundingBox().y() + dy);135            }, this);136            this.listenTo(this._statementContainer.getBoundingBox(), 'width-changed', function(dw){137                this.getBoundingBox().w(this.getBoundingBox().w() + dw);138            });139            this._statementContainer.render(this._diagramRenderingContext);140        };141        /**142         * Set the if statement model143         * @param {IfStatement} model144         */145        IfStatementView.prototype.setModel = function (model) {146            if (!_.isNil(model) && model instanceof IfStatement) {147                this._model = model;148            } else {149                log.error("If Else statement definition is undefined or is of different type." + model);150                throw "If Else statement definition is undefined or is of different type." + model;151            }...else-statement-view.js
Source:else-statement-view.js  
...31            _.set(this._viewOptions, 'width', _.get(this._viewOptions, 'width', 140));32            _.set(this._viewOptions, 'height', _.get(this._viewOptions, 'height', 100));33            _.set(this._viewOptions, 'contentOffset', _.get(this._viewOptions, 'contentOffset', {top: 10, bottom: 10}));34            // Initialize the bounding box35            this.getBoundingBox().fromTopCenter(this.getTopCenter(),36                _.get(this._viewOptions, 'width'),  _.get(this._viewOptions, 'height'));37        };38        ElseStatementView.prototype = Object.create(BallerinaStatementView.prototype);39        ElseStatementView.prototype.constructor = ElseStatementView;40        ElseStatementView.prototype.canVisitElseStatement = function(){41            return true;42        };43        /**44         * Render the else statement45         */46        ElseStatementView.prototype.render = function (diagramRenderingContext) {47            this._diagramRenderingContext = diagramRenderingContext;48            var elseGroup = D3Utils.group(d3.select(this._container));49            elseGroup.attr("id","_" + this._model.id);50            var self = this;51            var title_rect = D3Utils.rect(this.getBoundingBox().x(), this.getBoundingBox().y(), this.getBoundingBox().w(), 25, 0, 0, elseGroup).classed('statement-title-rect', true);52            var outer_rect = D3Utils.rect(this.getBoundingBox().x(), this.getBoundingBox().y(), this.getBoundingBox().w(),53                this.getBoundingBox().h(), 0, 0, elseGroup).classed('background-empty-rect', true);54            var title_text = D3Utils.textElement(this.getBoundingBox().x() + 20, this.getBoundingBox().y() + 12, 'Else', elseGroup).classed('statement-text', true);55            var points = "" + this.getBoundingBox().x() + "," + (parseInt(this.getBoundingBox().y()) + 25) + " " +56                (parseInt(this.getBoundingBox().x()) + 35) + "," + (parseInt(this.getBoundingBox().y()) + 25) + " " +57                (parseInt(this.getBoundingBox().x()) + 45) + "," + this.getBoundingBox().y();58            var title_wrapper_polyline = D3Utils.polyline(points, elseGroup).classed('statement-title-polyline', true);59            elseGroup.outerRect = outer_rect;60            elseGroup.titleRect = title_rect;61            elseGroup.titleText = title_text;62            elseGroup.title_wrapper_polyline = title_wrapper_polyline;63            this.setStatementGroup(elseGroup);64            this.getBoundingBox().on('moved', function(offset){65                outer_rect.attr("y", parseFloat(outer_rect.attr('y')) + offset.dy);66                outer_rect.attr("x", parseFloat(outer_rect.attr('x')) + offset.dx);67                title_rect.attr("y", parseFloat(title_rect.attr('y')) + offset.dy);68                title_rect.attr("x", parseFloat(title_rect.attr('x')) + offset.dx);69                title_text.attr("y", parseFloat(title_text.attr('y')) + offset.dy);70                title_text.attr("x", parseFloat(title_text.attr('x')) + offset.dx);71                var newPolylinePoints = "" + self.getBoundingBox().x() + "," + (parseInt(self.getBoundingBox().y()) + 25) + " " +72                    (parseInt(self.getBoundingBox().x()) + 35) + "," + (parseInt(self.getBoundingBox().y()) + 25) + " " +73                    (parseInt(self.getBoundingBox().x()) + 45) + "," + self.getBoundingBox().y();74                title_wrapper_polyline.attr("points", newPolylinePoints);75            });76            this.getBoundingBox().on('width-changed', function(dw){77                outer_rect.attr("x", parseFloat(outer_rect.attr('x')) - dw/2);78                outer_rect.attr("width", parseFloat(outer_rect.attr('width')) + dw);79                title_rect.attr("x", parseFloat(title_rect.attr('x')) - dw/2);80                title_text.attr("x", parseFloat(title_text.attr('x')) - dw/2);81                var newPolylinePoints = "" + self.getBoundingBox().x() + "," + (parseInt(self.getBoundingBox().y()) + 25) + " " +82                    (parseInt(self.getBoundingBox().x()) + 35) + "," + (parseInt(self.getBoundingBox().y()) + 25) + " " +83                    (parseInt(self.getBoundingBox().x()) + 45) + "," + self.getBoundingBox().y();84                title_wrapper_polyline.attr("points", newPolylinePoints);85            });86            this.getBoundingBox().on('height-changed', function(dh){87                outer_rect.attr("height", parseFloat(outer_rect.attr('height')) + dh);88                var newHeight = dh + self.getParent().getBoundingBox().h();89                self.getParent().getBoundingBox().h(newHeight);90            });91            this._rootGroup = elseGroup;92            this._statementContainerGroup = D3Utils.group(elseGroup);93            this.renderStatementContainer();94            this._model.accept(this);95            //Removing all the registered 'child-added' event listeners for this model.96            //This is needed because we are not unregistering registered event while the diagram element deletion.97            //Due to that, sometimes we are having two or more view elements listening to the 'child-added' event of same model.98            this._model.off('child-added');99            this._model.on('child-added', function(child){100                this.visit(child);101            }, this);102        };103        /**104         * @param {BallerinaStatementView} statement105         */106        ElseStatementView.prototype.visit = function (statement) {107            var args = {model: statement, container: this._rootGroup.node(), viewOptions: {},108                toolPalette: this.toolPalette, messageManager: this.messageManager, parent: this};109            this._statementContainer.renderStatement(statement, args);110        };111        /**112         * Render statement container113         */114        ElseStatementView.prototype.renderStatementContainer = function(){115            var statementContainerOpts = {};116            _.set(statementContainerOpts, 'model', this._model);117            _.set(statementContainerOpts, 'topCenter', this.getTopCenter().clone().move(0, _.get(this._viewOptions, 'contentOffset.top')));118            var height = _.get(this._viewOptions, 'height') -119                _.get(this._viewOptions, 'contentOffset.top') - _.get(this._viewOptions, 'contentOffset.bottom');120            _.set(statementContainerOpts, 'bottomCenter', this.getTopCenter().clone().move(0,  _.get(this._viewOptions, 'height')));121            _.set(statementContainerOpts, 'width', _.get(this._viewOptions, 'width'));122            _.set(statementContainerOpts, 'offset', {top: 40, bottom: 40});123            _.set(statementContainerOpts, 'parent', this);124            _.set(statementContainerOpts, 'container', this._statementContainerGroup.node());125            _.set(statementContainerOpts, 'toolPalette', this.toolPalette);126            var StatementContainer = require('./statement-container');127            this._statementContainer = new StatementContainer(statementContainerOpts);128            this.listenTo(this._statementContainer.getBoundingBox(), 'height-changed', function(dh){129                this.getBoundingBox().h(this.getBoundingBox().h() + dh);130            });131            this.getBoundingBox().on('top-edge-moved', function (dy) {132                this._statementContainer.isOnWholeContainerMove = true;133                this._statementContainer.getBoundingBox().y(this._statementContainer.getBoundingBox().y() + dy);134            }, this);135            this.listenTo(this._statementContainer.getBoundingBox(), 'width-changed', function(dw){136                if(this.getBoundingBox().w() < this._statementContainer.getBoundingBox().w()){137                    this.getBoundingBox().w(this.getBoundingBox().w() + dw);138                }139            });140            this._statementContainer.render(this._diagramRenderingContext);141        };142        /**143         * set the else statement model144         * @param {ElseStatement} model145         */146        ElseStatementView.prototype.setModel = function (model) {147            if (!_.isNil(model) && model instanceof ElseStatement) {148                this._model = model;149            } else {150                log.error("Else statement definition is undefined or is of different type." + model);151                throw "Else statement definition is undefined or is of different type." + model;...test_edge.js
Source:test_edge.js  
...22        it("shouldn't be closed", function(){23            edge.isClosed.should.equal(false);24        });25        it("should provide a bounding box", function () {26            edge.getBoundingBox().should.be.instanceOf(occ.BoundingBox);27            edge.getBoundingBox().isVoid.should.eql(true);28        });29    });30    describe("an  Edge constructed as  as a linear Segment between (10,20,30) and (-30,20,30) ",function(){31        let edge;32        before(function(){33            let v1 = new occ.Vertex(10,20,30);34            let v2 = new occ.Vertex(-30,20,30);35            edge = occ.makeLine(v1, v2);36            edge.should.be.instanceOf(occ.Edge);37        });38        it("should have a length of 40.0 ", function() {39            edge.length.should.equal(40.0);40        });41        it("should have two vertices ", function() {42            edge.numVertices.should.equal(2.0);43        });44        it("shouldn't be closed", function() {45            edge.isClosed.should.equal(false);46        });47        it("shouldn't be degenerated", function() {48            edge.isDegenerated.should.equal(false);49        });50        it("should provide a bounding box", function () {51            edge.getBoundingBox().should.be.instanceOf(occ.BoundingBox);52            edge.getBoundingBox().isVoid.should.eql(false);53            edge.getBoundingBox().nearPt.equals(new occ.Point3D(-30, 20, 30)).should.eql(true);54            edge.getBoundingBox().nearPt.equals([-30, 20, 30]).should.eql(true);55            edge.getBoundingBox().farPt.equals([10, 20, 30]).should.eql(true);56            let extra = 0.000000000001;57            edge.getBoundingBox().farPt.asArray().should.eql([10 + extra, 20 + extra, 30 + extra]);58        });59        it("should polygonize a segment with two points", function () {60            let polyline = edge.polygonize();61            polyline.length.should.eql(3 * 2);62            [polyline[0], polyline[1], polyline[2]].should.eql([10, 20, 30]);63            let l = polyline.length;64            (l % 3).should.eql(0);65            [polyline[l - 3], polyline[l - 2], polyline[l - 1]].should.eql([-30, 20, 30]);66        });67    });68    describe("an Edge constructed as  as a linear Segment between (10,20,30) and (-30,20,30)  and translated by [1,2,3]", function () {69        let edge;70        before(function () {71            let v1 = new occ.Vertex(10, 20, 30);72            let v2 = new occ.Vertex(-30, 20, 30);73            edge = occ.makeLine(v1, v2);74            edge = edge.translate([1, 2, 3]);75        });76        it("should have a length of 40.0 ", function () {77            edge.length.should.equal(40.0);78        });79        it("should provide a bounding box", function () {80            edge.getBoundingBox().nearPt.equals([-29, 22, 33]).should.eql(true);81            edge.getBoundingBox().farPt.equals([11, 22, 33]).should.eql(true);82        });83        it("should polygonize a segment with two points", function () {84            let polyline = edge.polygonize();85            polyline.length.should.eql(3 * 2);86            [polyline[0], polyline[1], polyline[2]].should.eql([11, 22, 33]);87            let l = polyline.length;88            (l % 3).should.eql(0);89            [polyline[l - 3], polyline[l - 2], polyline[l - 1]].should.eql([-29, 22, 33]);90        });91    });92    describe("an Edge constructed as a Circle on the Z+ plan with a radius of 20", function () {93        let edge;94        before(function(){95            edge = occ.makeCircle([10, 10, 10], [0, 0, 1], 20);96        });97        it("should have a length of 2*PI*20.0 ", function(){98            let epsilon = 1E-2;99            let PI = 3.1415;100            edge.length.should.be.within(2*PI*20.0-epsilon,2*PI*20.0+epsilon);101        });102        it("should have a unique vertex ", function(){103            edge.numVertices.should.equal(1);104        });105        it("should be closed", function(){106            edge.isClosed.should.equal(true);107        });108        it("shouldn't be degenerated", function(){109            edge.isDegenerated.should.equal(false);110        });111        it("should provide a bounding box", function () {112            edge.getBoundingBox().should.be.instanceOf(occ.BoundingBox);113            edge.getBoundingBox().isVoid.should.eql(false);114            //xx console.log(JSON.stringify(edge.getBoundingBox()));//.toString());115            edge.getBoundingBox().nearPt.equals([-11.647844, -11.647844, 10]);116            edge.getBoundingBox().farPt.equals([31.647844, 31.647844, 10]);117        });118        it("should polygonize a edge", function () {119            let a = edge.polygonize();120            [a[0], a[1], a[2]].should.eql([30, 10, 10]);121            let l = a.length;122            (l % 3).should.eql(0);123            [a[l - 3], a[l - 2], a[l - 1]].should.eql([30, 10, 10]);124            //xx console.log(a);125        });126    });127    describe("an  Edge constructed as  as a linear Segment between (10,20,30) and (-30,20,30) ", function () {128    });...BoundingBoxService.js
Source:BoundingBoxService.js  
1/**2 * Created by Moises Vilar on 05/11/2014.3 */4var pg = require('pg');5function BoundingBoxService(){6}7// BoundingBoxService.CONNECTION_STRING = 'postgres://postgres:1234@localhost/ai';8// BoundingBoxService.CONNECTION_STRING = 'postgres://postgres:postgres@172.16.243.183/ai';9BoundingBoxService.CONNECTION_STRING = 'postgres://postgres:Hbbtv1184@172.16.244.137/ai';10BoundingBoxService.QUERY_AREA = 'select getboundingbox_by_area($1::double precision, $2::double precision, $3:: varchar) as geojson';11BoundingBoxService.QUERY_PERIMETER = 'select getboundingbox_by_perimeter($1::double precision, $2::double precision, $3:: varchar) as geojson';12BoundingBoxService.QUERY_DISTANCE_AREA = 'select getboundingbox_by_distance_and_area($1::double precision, $2::double precision, $3:: varchar) as geojson';13BoundingBoxService.QUERY_DISTANCE_PERIMETER = 'select getboundingbox_by_distance_and_perimeter($1::double precision, $2::double precision, $3:: varchar) as geojson';14BoundingBoxService.QUERY_ASPECT_PERIMETER = 'select getboundingbox_by_aspect_and_perimeter($1::double precision, $2::double precision, $3::varchar, $4::double precision, $5::double precision) as geojson';15BoundingBoxService.QUERY_ASPECT_AREA = 'select getboundingbox_by_aspect_and_area($1::double precision, $2::double precision, $3::varchar, $4::double precision, $5::double precision) as geojson';16BoundingBoxService.prototype.get = function(lat, lon, term, options, callback) {17    pg.connect(BoundingBoxService.CONNECTION_STRING, function(err, client, done) {18        if(err) return callback('error fetching client from pool ' + err);19        var query = '';20        if (!options.getBoundingBox || !options.getBoundingBox.type) query = BoundingBoxService.QUERY_PERIMETER;21        else if (options.getBoundingBox.type == 'aspect' && !options.getBoundingBox.dimensions) return callback('dimensions is a required parameter for this getBoundingBox method');22        else if (options.getBoundingBox.type == 'aspect' && !options.getBoundingBox.dimensions.w) return callback('dimensions.w is a required parameter for this getBoundingBox method');23        else if (options.getBoundingBox.type == 'aspect' && !options.getBoundingBox.dimensions.h) return callback('dimensions.h is a required parameter for this getBoundingBox method');24        else if (options.getBoundingBox.type == 'area') query = BoundingBoxService.QUERY_AREA;25        else if (options.getBoundingBox.type == 'perimeter') query = BoundingBoxService.QUERY_PERIMETER;26        else if (options.getBoundingBox.type == 'distance_area') query = BoundingBoxService.QUERY_DISTANCE_AREA;27        else if (options.getBoundingBox.type == 'distance_perimeter') query = BoundingBoxService.QUERY_DISTANCE_PERIMETER;28        else if (options.getBoundingBox.type == 'aspect_area') query = BoundingBoxService.QUERY_ASPECT_AREA;29        else if (options.getBoundingBox.type == 'aspect_perimeter') query = BoundingBoxService.QUERY_ASPECT_PERIMETER;30        else return callback('getBoundingBox method not supported');31        var params = [lat, lon, term];32        if (options.getBoundingBox && (options.getBoundingBox.type == 'aspect_area' || options.getBoundingBox.type == 'aspect_perimeter')) {33            params.push(options.getBoundingBox.dimensions.w, options.getBoundingBox.dimensions.h);34        }35        client.query(query, params, function(err, result) {36            done();37            if(err) return callback('error running query ' + err);38            if (!result.rows[0].geojson) return callback('no bounding box (wtf!?)');39            result.rows[0].geojson = result.rows[0].geojson.split('\\"').join('"');40            result.rows[0].geojson = result.rows[0].geojson.split('"{').join('{');41            result.rows[0].geojson = result.rows[0].geojson.split('}"').join('}');42            var geojson = JSON.parse(result.rows[0].geojson);43            if (!geojson) return callback('geojson is falsy');44            return callback(null, {45                name: geojson.name,46                bbox: [geojson.bbox.coordinates[0][0].reverse(), geojson.bbox.coordinates[0][1].reverse(), geojson.bbox.coordinates[0][2].reverse(), geojson.bbox.coordinates[0][3].reverse()],47                wkbbox: [geojson.wkbbox.coordinates[0][0].reverse(), geojson.wkbbox.coordinates[0][1].reverse(), geojson.wkbbox.coordinates[0][2].reverse(), geojson.wkbbox.coordinates[0][3].reverse()]48            });49        });50    });51};...containerBBox.js
Source:containerBBox.js  
...23			surface = tu.clear(surface);24		},25		"Default state": function () {26			// surface27			var bbox = surface.getBoundingBox();28			assert.isNull(bbox, "Unexpected value for empty surface bbox.");29			// empty group -> null bbox30			bbox = g.getBoundingBox();31			assert.isNull(bbox, "Unexpected value for empty group bbox.");32		},33		"Group with children": function () {34			// child35			var r = g.createRect();36			var bbox = g.getBoundingBox();37			bboxEqual(bbox, {x: 0, y: 0, width: 100, height: 100}, "Unexpected bbox value.");38			// children39			g.createRect({x: 200, y: 300});40			bbox = g.getBoundingBox();41			bboxEqual(bbox, {x: 0, y: 0, width: 300, height: 400}, "Unexpected composite bbox value.");42			// child with null bbox43			r = g.createRect();44			r.getBoundingBox = function () {45				return null;46			};47			var err = false;48			bbox = null;49			try {50				bbox = g.getBoundingBox();51			} catch (e) {52				err = true;53			}54			assert.isFalse(err, "getBoundingBox fails with null bbox.");55			bboxEqual(bbox, {x: 0, y: 0, width: 300, height: 400}, "Unexpected composite bbox value with null bbox.");56			// surface57			bbox = surface.getBoundingBox();58			bboxEqual(bbox, {x: 0, y: 0, width: 300, height: 400}, "Unexpected surface bbox value.");59		},60		"children with transform": function () {61			// child62			var r = g.createRect();63			var bbox = g.getBoundingBox();64			bboxEqual(bbox, {x: 0, y: 0, width: 100, height: 100}, "Unexpected bbox value.");65			// child with transform66			r.transform = matrix.translate(10, 0);67			bbox = g.getBoundingBox();68			bboxEqual(bbox, {x: 10, y: 0, width: 100, height: 100}, "Unexpected bbox value with child transform.");69			// the group has a transform -> getBoundingBox should not be modified70			g.transform = matrix.translate(10, 20);71			bbox = g.getBoundingBox();72			bboxEqual(bbox, {x: 10, y: 0, width: 100, height: 100}, "Unexpected bbox value with Group transform.");73			// surface74			bbox = null;75			bbox = surface.getBoundingBox();76			bboxEqual(bbox, {x: 20, y: 20, width: 100, height: 100}, "Unexpected surface bbox value.");77		},78		"Nested container": function () {79			g.createRect();80			g.createRect({x: 200, y: 300});81			var g2 = g.createGroup();82			g2.createRect();83			g2.createRect({x: 500});84			g2.transform = matrix.translate(100, 200);85			var bbox = g.getBoundingBox();86			bboxEqual(bbox, {x: 0, y: 0, width: 700, height: 400}, "Unexpected composite bbox value.");87		}88	});...Ball.js
Source:Ball.js  
...15    m_height: 0,16    ctor: function () {17        this._super();18        this.initWithFile(s_wep1);19        this.m_width = this.getBoundingBox().width;20        this.m_height = this.getBoundingBox().height;21        this.setVisible(false);22        this.setAnchorPoint(cc.p(0.5, 0.5));23        this.m_fSpeed = cc.p(0, 0);24        return true;25    },2627    set: function (startX, startY, directionX, directionY, distance, power) {28        this.m_fSpeed.x = directionX * power;29        this.m_fSpeed.y = directionY * power;30        this.setPosition(cc.p(startX, startY));31        this.m_enabled = true;32    },3334    update: function (dt) {35        if (!this.m_enabled)36            return;3738        var x = this.getPosition().x;39        var y = this.getPosition().y;4041        if (y <= 0 - this.getBoundingBox().height) {42            this.m_enabled = false;43            return;44        }4546        this.setPosition(cc.p(x + this.m_fSpeed.x, y + this.m_fSpeed.y));47        this.m_fSpeed.y -= 0.4 ;48        this.m_fAngle = Math.atan2(this.m_fSpeed.x, this.m_fSpeed.y);49        this.m_fAngle *= 180 / 3.14;50        this.setRotation(this.m_fAngle);51    },5253    changeBall: function (type) {54        switch (type) {55            case Enum.EBall.Blue:56                m_eType = type;57                this.initWithFile(s_wep1);58                this.m_fDam = 1;59                this.m_width = this.getBoundingBox().width;60                this.m_height = this.getBoundingBox().height;61                break;62            case Enum.EBall.Green:63                m_eType = type;64                this.initWithFile(s_wep2);65                this.m_fDam = 3;66                this.m_width = this.getBoundingBox().width;67                this.m_height = this.getBoundingBox().height;68                break;69            case Enum.EBall.Red:70                m_eType = type;71                this.initWithFile(s_wep3);72                this.m_fDam = 3;73                this.m_width = this.getBoundingBox().width;74                this.m_height = this.getBoundingBox().height;75                break;76            case Enum.EBall.Yellow:77                m_eType = type;78                this.initWithFile(s_wep4);79                this.m_fDam = 4;80                this.m_width = this.getBoundingBox().width;81                this.m_height = this.getBoundingBox().height;82                break;83        }84    }
...Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.screenshot({ path: 'example.png' });7  await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11  const browser = await chromium.launch();12  const context = await browser.newContext();13  const page = await context.newPage();14  await page.screenshot({ path: 'example.png' });15  await browser.close();16})();17const { chromium } = require('playwright');18(async () => {19  const browser = await chromium.launch();20  const context = await browser.newContext();21  const page = await context.newPage();22  await page.screenshot({ path: 'example.png' });23  await browser.close();24})();25const { chromium } = require('playwright');26(async () => {27  const browser = await chromium.launch();28  const context = await browser.newContext();29  const page = await context.newPage();30  await page.screenshot({ path: 'example.png' });31  await browser.close();32})();33const { chromium } = require('playwright');34(async () => {35  const browser = await chromium.launch();36  const context = await browser.newContext();37  const page = await context.newPage();38  await page.screenshot({ path: 'example.png' });39  await browser.close();40})();41const { chromium } = require('playwright');42(async () => {43  const browser = await chromium.launch();44  const context = await browser.newContext();45  const page = await context.newPage();Using AI Code Generation
1const { webkit } = require('playwright');2(async () => {3  const browser = await webkit.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.waitForTimeout(5000);7  const element = await page.$('.gLFyf');8  const box = await element.boundingBox();9  console.log(box);10  await browser.close();11})();12{ x: 0, y: 0, width: 0, height: 0 }13I also tried using the getClientRects() method of Element butUsing AI Code Generation
1const { chromium } = require('playwright');2const path = require('path');3(async () => {4  const browser = await chromium.launch();5  const context = await browser.newContext();6  const page = await context.newPage();7  const elementHandle = await page.$('#hplogo');8  const boundingBox = await elementHandle.getBoundingBox();9  console.log(boundingBox);10  await browser.close();11})();12const { chromium } = require('playwright');13const path = require('path');14(async () => {15  const browser = await chromium.launch();16  const context = await browser.newContext();17  const page = await context.newPage();18  const elementHandle = await page.$('#hplogo');19  const boundingBox = await elementHandle.getBoundingBox();20  console.log(boundingBox);21  await browser.close();22})();23const { chromium } = require('playwright');24const path = require('path');25(async () => {26  const browser = await chromium.launch();27  const context = await browser.newContext();28  const page = await context.newPage();29  const elementHandle = await page.$('#hplogo');30  const boundingBox = await elementHandle.getBoundingBox();31  console.log(boundingBox);32  await browser.close();33})();34const { chromium } = require('playwright');35const path = require('path');36(async () => {37  const browser = await chromium.launch();38  const context = await browser.newContext();39  const page = await context.newPage();40  const elementHandle = await page.$('#hplogo');41  const boundingBox = await elementHandle.getBoundingBox();42  console.log(boundingBox);Using AI Code Generation
1const playwright = require('playwright-internal');2(async () => {3  for (const browserType of ['chromium']) {4    const browser = await playwright[browserType].launch();5    const context = await browser.newContext();6    const page = await context.newPage();7    const boundingBox = await page.getBoundingBox('img');8    console.log(boundingBox);9    await browser.close();10  }11})();12I have another question, getClientRect() method returns the bounding box of the element relative to the page. Suppose, if I have 2 frames on the page and I am using getClientRect() method on the element present in the second frame, then will it return the bounding box of the element relative to the frame or relative to the page?13I have another question, getClientRect() method returns the bounding box of the element relative to the page. Suppose, if I have 2 frames on the page and I am using getClientRect() method on the element present in the second frame, then will it return the bounding boxUsing AI Code Generation
1const { getBoundingBox } = require('playwright/lib/server/dom.js');2const { chromium } = require('playwright');3(async () => {4  const browser = await chromium.launch();5  const context = await browser.newContext();6  const page = await context.newPage();7  const elementHandle = await page.$('text=Get started');8  const boundingBox = await getBoundingBox(elementHandle);9  console.log(boundingBox);10  await browser.close();11})();12{ x: 0, y: 0, width: 145, height: 50 }13const { chromium } = require('playwright');14(async () => {15  const browser = await chromium.launch();16  const context = await browser.newContext();17  const page = await context.newPage();18  const elementHandle = await page.$('text=Get started');19  const boundingBox = await elementHandle.boundingBox();20  console.log(boundingBox);21  await browser.close();22})();23{ x: 0, y: 0, width: 145, height: 50 }24const puppeteer = require('puppeteer');25(async () => {26  const browser = await puppeteer.launch();27  const page = await browser.newPage();Using AI Code Generation
1const { getBoundingBox } = require('playwright/lib/server/frames');2const { chromium } = require('playwright');3(async () => {4  const browser = await chromium.launch();5  const context = await browser.newContext();6  const page = await context.newPage();7  const element = await page.$('text=Get Started');8  const boundingBox = await getBoundingBox(element);9  console.log(boundingBox);10  await browser.close();11})();12{ x: 20, y: 20, width: 0, height: 0 }13const { chromium } = require('playwright');14(async () => {15  const browser = await chromium.launch();16  const context = await browser.newContext();17  const page = await context.newPage();18  const element = await page.$('text=Get Started');19  const boundingBox = await element.boundingBox();20  console.log(boundingBox);21  await browser.close();22})();23{ x: 20, y: 20, width: 0, height: 0 }Using AI Code Generation
1const { chromium } = require('playwright');2const { getBoundingBox } = require('playwright/lib/server/chromium/crPage');3(async () => {4  const browser = await chromium.launch();5  const context = await browser.newContext();6  const page = await context.newPage();7  const element = await page.$('input[name="q"]');8  const boundingBox = await getBoundingBox(element);9  console.log(boundingBox);10  await browser.close();11})();12{13}Using AI Code Generation
1const {getBoundingBox} = require('playwright-core/lib/server/supplements/recorder/recorderSupplement');2const {chromium} = require('playwright-core');3(async () => {4    const browser = await chromium.launch();5    const context = await browser.newContext();6    const page = await context.newPage();7    const element = await page.$('h1');8    const box = await getBoundingBox(page, element);9    console.log(box);10    await browser.close();11})();12{13}14const {getBoundingBox} = require('playwright-core/lib/server/supplements/recorder/recorderSupplement');15const {chromium} = require('playwright-core');16(async () => {17    const browser = await chromium.launch();18    const context = await browser.newContext();19    const page = await context.newPage();20    const element = await page.$('h1');21    const box = await getBoundingBox(page, element);22    console.log(box);23    await browser.close();24})();25{26}Using AI Code Generation
1const { getBoundingBox } = require('playwright/lib/server/chromium/crPage');2(async () => {3  const page = await browser.newPage();4  const boundingBox = await getBoundingBox(page, 'h1');5  console.log(boundingBox);6})();7{ x: 0, y: 0, width: 0, height: 0 }8const { getBoundingBox } = require('playwright/lib/server/chromium/crPage');9(async () => {10  const page = await browser.newPage();11  const boundingBox = await getBoundingBox(page, 'body');12  console.log(boundingBox);13})();14{ x: 0, y: 0, width: 1920, height: 1080 }Using AI Code Generation
1const {chromium, firefox, webkit} = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  const element = await page.$('body');7  const boundingBox = await element._getBoundingBox();8  console.log(boundingBox);9  await browser.close();10})();11const {chromium, firefox, webkit} = require('playwright');12(async () => {13  const browser = await chromium.launch();14  const context = await browser.newContext();15  const page = await context.newPage();16  const element = await page.$('body');17  const boundingBox = await element._getBoundingBox();18  console.log(boundingBox);19  await browser.close();20})();21const {chromium, firefox, webkit} = require('playwright');22(async () => {23  const browser = await chromium.launch();24  const context = await browser.newContext();25  const page = await context.newPage();26  const element = await page.$('body');27  const boundingBox = await element._getBoundingBox();28  console.log(boundingBox);29  await browser.close();30})();31const {chromium, firefox, webkit} = require('playwright');32(async () => {33  const browser = await chromium.launch();34  const context = await browser.newContext();35  const page = await context.newPage();36  await page.goto('LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Get 100 minutes of automation test minutes FREE!!
