How to use getBoundingBox method in Playwright Internal
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 but
Using 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 box
Using 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('
Playwright tutorial
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.
Chapters:
- What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
- How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
- Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
- What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
- Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
- Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
- Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
- Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
- Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
- Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
