How to use instanceEl method in ng-mocks

Best JavaScript code snippet using ng-mocks

Canvas.ts

Source:Canvas.ts Github

copy

Full Screen

1import * as AFRAME from 'aframe';2import * as $ from 'jquery';3import { objects, VECTOR } from '../../Objects';4import { Vector3, Math as THREEMath, Euler } from 'three';5import { resize, recenter } from '../../utils/SizeConstraints';6import { scene, Node, ObjNode } from 'frp-backend';7import { googlePoly } from '../../utils/GooglePoly';8import { containerID } from '../controllers/absorb-controller';9import { savedContainerId, instantiateContainer, ctnWidth, ctnDepth, savedInPorts, savedOutPorts } from '../frp/operators/container';10import { createOnePlug } from '../utils/operator-model';11import { getColorsByType } from '../../utils/TypeVis';12export let canvasSize = {13 width: 1.6, 14 height: 1,15 depth: 0.0216};17export const menuSize = {18 width: 0.7,19 height: 1,20 depth: 0.0221}22export const buttonSize = {23 width: 0.1,24 height: 0.125}26export const itemSize = {27 width: 0.2,28 height: 0.229}30export let canvasConstraint = {31 negx: -canvasSize.width/2,32 posx: canvasSize.width/2,33 negy: -canvasSize.height/2,34 posy: canvasSize.height/2,35 constz: itemSize.width/236}37export const canvasColor = {38 background: '#ececec',39 unselected: '#ffffff',40 hovered: '#19b5fe',41 selected: '#0078d4'42}43export const itemColor = {44 unselected: '#3CBCFC',45 hovered: '#8C2C0D',46 selected: '#EC5C2D'47}48export const objColor = {49 unselected: '#3CBCFC',50 hovered: '#0078F8'51}52export interface Item {53 name: string,54 type: string,55 itemUrl: string,56 inputs?: {name: string, type: string, behavior: string}[],57 outputs?: {name: string, type: string, behavior: string}[]58}59export const itemLimit: number = 12;60export const itemOffset: Vector3 = new Vector3(-menuSize.width/2 + buttonSize.width + itemSize.width/2, menuSize.height/2 - buttonSize.height - itemSize.height/2, itemSize.width/2);61const toolBox = ['Operators', 'Data', 'Avatars', 'Canvas'];62let canvases = ['Canvas#1'];63let pageIdx: number = 0;64let currentCanvas: string = 'canvas-world';65export const canvasGenerator = AFRAME.registerComponent('canvas-generator', {66 init: function(): void {67 this.mainCam = document.querySelector('#head');68 const canvasEl: any = document.createElement('a-entity');69 const menuEl: any = document.createElement('a-entity');70 const desEl: any = document.createElement('a-entity');71 canvasEl.setAttribute('id', 'canvas-world');72 menuEl.setAttribute('id', 'menu-world');73 desEl.setAttribute('id', 'description-world');74 initCanvasBg(canvasEl, this.el);75 canvasEl.addEventListener('clicked', (event) => {76 const canvas2El: any = document.getElementById('canvas-world-2');77 canvas2El.object3D.position.set(canvas2El.object3D.position.x, canvas2El.object3D.position.y, canvasEl.object3D.position.z);78 canvasEl.object3D.position.set(canvasEl.object3D.position.x, canvasEl.object3D.position.y, canvasEl.object3D.position.z + 0.2);79 currentCanvas = 'canvas-world';80 });81 initMenu(menuEl, this.el);82 initDes(desEl, menuEl);83 loadItems(menuEl, 'button-0');84 // Event Listener to open and close menu.85 this.el.object3D.visible = false;86 this.el.addEventListener('showcanvas', (event) => {87 this.el.object3D.visible = !this.el.object3D.visible;88 const edges: any = document.querySelector('#edges');89 edges.object3D.visible = this.el.object3D.visible;90 if (this.el.object3D.visible) {91 this.mainCam.object3D.updateMatrix();92 this.mainCam.object3D.updateWorldMatrix();93 const position = this.mainCam.object3D.localToWorld(new Vector3(0.8, 0, -1.5));94 const camPosition = this.mainCam.object3D.localToWorld(new Vector3(0, 0, 0));95 const rotation = this.mainCam.object3D.rotation.y;96 97 this.el.object3D.position.copy(position);98 this.el.object3D.setRotationFromEuler(new Euler(0, rotation, 0));99 this.el.object3D.position.set(position.x, camPosition.y - 0.5, position.z);100 // Show all the attributes101 const els = document.querySelectorAll('.attribute');102 els.forEach((el: any) => {103 el.object3D.visible = true;104 });105 const el2s = document.querySelectorAll('.assist-obj');106 el2s.forEach((el2: any) => {107 el2.object3D.visible = true;108 });109 }110 else {111 // Hide all the attributes112 const els = document.querySelectorAll('.attribute');113 els.forEach((el: any) => {114 el.object3D.visible = false;115 });116 const el2s = document.querySelectorAll('.assist-obj');117 el2s.forEach((el2: any) => {118 el2.object3D.visible = false;119 });120 }121 });122 }123});124/**125 * Initiate a plane and specify parameters126 */127function initCanvasBg(canvasEl: any, parentEl: any): void { 128 canvasEl.setAttribute('geometry', {129 primitive: 'box',130 width: canvasSize.width,131 height: canvasSize.height,132 depth: canvasSize.depth133 });134 canvasEl.setAttribute('material', {135 color: canvasColor.background,136 transparent: true,137 opacity: 0.3138 });139 canvasEl.classList.add('ui');140 parentEl.appendChild(canvasEl);141 const expandEl: any = document.createElement('a-entity');142 expandEl.setAttribute('id', `canvas-expand`);143 expandEl.setAttribute('geometry', {144 primitive: 'plane',145 width: buttonSize.width * 0.9,146 height: buttonSize.height * 0.9147 });148 expandEl.setAttribute('material', {149 src: `#expand_icon`,150 color: canvasColor.unselected,151 side: 'double',152 transparent: true153 });154 // Place the button155 canvasEl.appendChild(expandEl);156 expandEl.object3D.position.set(canvasSize.width / 2 - buttonSize.width / 2, canvasSize.height / 2 - buttonSize.height / 2, canvasSize.depth / 2 + 0.001);157 // Add reactions to the button158 expandEl.classList.add('ui');159 expandEl.addEventListener('raycaster-intersected', (event) => {160 expandEl.setAttribute('material', 'color', canvasColor.hovered);161 setDescription('expand canvas');162 });163 expandEl.addEventListener('raycaster-intersected-cleared', (event) => {164 expandEl.setAttribute('material', 'color', canvasColor.unselected);165 });166 expandEl.addEventListener('clicked', (event) => {167 expandEl.setAttribute('material', 'color', canvasColor.selected);168 canvasEl.object3D.position.set(canvasEl.object3D.position.x + canvasSize.width / 2, 0, 0);169 canvasSize.width *= 2;170 canvasSize.height *= 2;171 canvasEl.setAttribute('geometry', {172 primitive: 'box',173 width: canvasSize.width,174 height: canvasSize.height,175 depth: canvasSize.depth176 });177 canvasConstraint = {178 negx: -canvasSize.width/2,179 posx: canvasSize.width/2,180 negy: -canvasSize.height/2,181 posy: canvasSize.height/2,182 constz: itemSize.width/2183 };184 expandEl.object3D.position.set(canvasSize.width / 2 - buttonSize.width / 2, canvasSize.height / 2 - buttonSize.height / 2, canvasSize.depth / 2 + 0.001);185 });186 expandEl.addEventListener('clicked-cleared', (event) => {187 expandEl.setAttribute('material', 'color', canvasColor.unselected);188 }); 189}190/**191 * Initiate a menu panel for selecting items192 * @param parentEl The parent entity193 */194function initMenu(menuEl: any, parentEl: any): void {195 menuEl.setAttribute('geometry', {196 primitive: 'box',197 width: menuSize.width,198 height: menuSize.height,199 depth: menuSize.depth200 });201 menuEl.setAttribute('material', {202 color: canvasColor.background,203 transparent: true,204 opacity: 0.3205 });206 const offset: number = canvasSize.width/2 + menuSize.width/2 + 0.1;207 menuEl.object3D.position.set(-offset, 0, 0);208 parentEl.appendChild(menuEl);209 initButtons(menuEl);210}211/**212 * Initiate submenu buttons for switching objects213 * @param menuEl The menu entity214 */215function initButtons(menuEl: any): void {216 const offset: Vector3 = new Vector3(-menuSize.width/2 + buttonSize.width/2, menuSize.height/2 - buttonSize.height/2, menuSize.depth + 0.001);217 toolBox.forEach((key: string, i: number) => {218 const bnEl: any = document.createElement('a-entity');219 bnEl.setAttribute('id', `button-${i}`);220 bnEl.setAttribute('geometry', {221 primitive: 'plane',222 width: buttonSize.width * 0.9,223 height: buttonSize.height * 0.9224 });225 bnEl.setAttribute('material', {226 src: `#${key}_icon`,227 color: canvasColor.unselected,228 side: 'double',229 transparent: true230 });231 console.log(`#${key}_icon`);232 // Place the button233 menuEl.appendChild(bnEl);234 bnEl.object3D.position.set(offset.x, offset.y - buttonSize.height * i, offset.z);235 // Add reactions to the button236 bnEl.classList.add('ui');237 bnEl.addEventListener('raycaster-intersected', (event) => {238 bnEl.setAttribute('material', 'color', canvasColor.hovered);239 setDescription(key);240 });241 bnEl.addEventListener('raycaster-intersected-cleared', (event) => {242 bnEl.setAttribute('material', 'color', canvasColor.unselected);243 });244 bnEl.addEventListener('clicked', (event) => {245 bnEl.setAttribute('material', 'color', canvasColor.selected);246 loadItems(menuEl, bnEl.getAttribute('id'));247 });248 bnEl.addEventListener('clicked-cleared', (event) => {249 bnEl.setAttribute('material', 'color', canvasColor.unselected);250 });251 });252 const prevEl: any = document.createElement('a-entity');253 prevEl.setAttribute('id', `canvas-prev`);254 prevEl.setAttribute('geometry', {255 primitive: 'plane',256 width: buttonSize.width * 0.9,257 height: buttonSize.height * 0.9258 });259 prevEl.setAttribute('material', {260 src: `#prev_icon`,261 color: canvasColor.unselected,262 side: 'double',263 transparent: true264 });265 // Place the button266 menuEl.appendChild(prevEl);267 prevEl.object3D.position.set(offset.x + buttonSize.width, offset.y, offset.z);268 // Add reactions to the button269 prevEl.classList.add('ui');270 prevEl.addEventListener('raycaster-intersected', (event) => {271 prevEl.setAttribute('material', 'color', canvasColor.hovered);272 setDescription('last page');273 });274 prevEl.addEventListener('raycaster-intersected-cleared', (event) => {275 prevEl.setAttribute('material', 'color', canvasColor.unselected);276 });277 prevEl.addEventListener('clicked', (event) => {278 prevEl.setAttribute('material', 'color', canvasColor.selected);279 if (pageIdx == 0)280 loadItems(menuEl, 'button-0', pageIdx);281 else282 loadItems(menuEl, 'button-0', (--pageIdx) * 12);283 });284 prevEl.addEventListener('clicked-cleared', (event) => {285 prevEl.setAttribute('material', 'color', canvasColor.unselected);286 });287 const nextEl: any = document.createElement('a-entity');288 nextEl.setAttribute('id', `canvas-next`);289 nextEl.setAttribute('geometry', {290 primitive: 'plane',291 width: buttonSize.width * 0.9,292 height: buttonSize.height * 0.9293 });294 nextEl.setAttribute('material', {295 src: `#next_icon`,296 color: canvasColor.unselected,297 side: 'double',298 transparent: true299 });300 // Place the button301 menuEl.appendChild(nextEl);302 nextEl.object3D.position.set(menuSize.width / 2 - buttonSize.width, offset.y, offset.z);303 // Add reactions to the button304 nextEl.classList.add('ui');305 nextEl.addEventListener('raycaster-intersected', (event) => {306 nextEl.setAttribute('material', 'color', canvasColor.hovered);307 setDescription('next page');308 });309 nextEl.addEventListener('raycaster-intersected-cleared', (event) => {310 nextEl.setAttribute('material', 'color', canvasColor.unselected);311 });312 nextEl.addEventListener('clicked', (event) => {313 nextEl.setAttribute('material', 'color', canvasColor.selected);314 loadItems(menuEl, 'button-0', (++pageIdx) * 12);315 });316 nextEl.addEventListener('clicked-cleared', (event) => {317 nextEl.setAttribute('material', 'color', canvasColor.unselected);318 });319}320/**321 * Initiate menu description322 * @param desEl Text entity323 * @param parentEl Parent entity to attach to324 */325function initDes(desEl: any, parentEl: any): void {326 parentEl.appendChild(desEl);327 desEl.setAttribute('text', {328 align: 'center',329 wrapCount: 25,330 });331 desEl.object3D.position.set(0, menuSize.height/2 - buttonSize.height/2, menuSize.depth);332}333/**334 * Load items based on selected submenu335 * @param menuEl The menu entity as parent entity to attach items336 * @param buttonID The ID of submenu button337 * @param itemIndex Starting intem index since each page can only display 9 items338 */339export function loadItems(menuEl: any, buttonID: string, itemIndex: number = 0, pageToken: string = ''): void {340 // Clear items on the current page if there are any.341 const oldItemList: any = document.querySelector('#item-list');342 if (oldItemList) oldItemList.parentNode.removeChild(oldItemList);343 // Extract submenu's name based on buttonID344 const submenuID: number = Number(buttonID.split('-')[1]);345 const submenuName: string = toolBox[submenuID];346 const itemList: any = document.createElement('a-entity');347 itemList.setAttribute('id', 'item-list');348 menuEl.appendChild(itemList);349 let i = 0;350 for (; i < itemLimit; i++) {351 if (itemIndex + i >= objects[submenuName].length) break;352 // Fetch the Item from objects353 const item: Item = objects[submenuName][itemIndex + i];354 const itemEl: any = document.createElement('a-entity');355 itemEl.setAttribute('id', item.name);356 if (item.type === 'primitive') {357 // Set up item geometry and material358 itemEl.setAttribute('geometry', 'primitive', item.name);359 itemEl.setAttribute('material', {360 color: itemColor.unselected,361 transparent: true,362 opacity: 0.8363 });364 // Resize the model into item size365 itemEl.addEventListener('loaded', () => {366 resize(itemEl, itemSize.width);367 });368 }369 else if (item.type === 'img') {370 // Set up item geometry and material371 itemEl.setAttribute('geometry', 'primitive', 'plane');372 itemEl.setAttribute('material', {373 src: `#Plus_icon`,374 color: canvasColor.unselected,375 side: 'double',376 transparent: true377 });378 // Resize the model into item size379 itemEl.addEventListener('loaded', () => {380 resize(itemEl, itemSize.width);381 });382 }383 else if (item.type === 'data') {384 itemEl.setAttribute('geometry', {385 primitive: 'cone',386 height: 0.06,387 radiusTop: 0.02,388 radiusBottom: 0.04389 });390 itemEl.setAttribute('material', {391 color: itemColor.unselected,392 transparent: true,393 opacity: 0.8394 });395 396 // Resize the model into item size397 itemEl.addEventListener('loaded', () => {398 resize(itemEl, itemSize.width);399 });400 }401 else {402 // Set up item geometry and material403 itemEl.setAttribute('obj-model', {404 obj: item.itemUrl405 });406 itemEl.setAttribute('material', {407 color: itemColor.unselected,408 transparent: true,409 opacity: 0.8410 });411 // Resize the model into item size412 itemEl.addEventListener('model-loaded', () => {413 resize(itemEl, itemSize.width);414 });415 }416 // Place the item417 itemList.appendChild(itemEl);418 itemEl.object3D.position.set(itemOffset.x + (i%3) * itemSize.width, itemOffset.y - Math.floor(i/3) * itemSize.height, itemOffset.z);419 // Add reaction to the item.420 itemEl.classList.add('ui');421 itemEl.addEventListener('raycaster-intersected', (event) => {422 itemEl.setAttribute('material', 'color', itemColor.hovered);423 setDescription(item.name);424 });425 itemEl.addEventListener('raycaster-intersected-cleared', (event) => {426 itemEl.setAttribute('material', 'color', itemColor.unselected);427 });428 itemEl.addEventListener('clicked', (event) => {429 itemEl.setAttribute('material', 'color', itemColor.selected);430 // Use different methods of visualization when the item is an operator431 // 0: Operators; 1: Data; 2: Avatars;432 if (submenuID == 0) // 0: Operators433 instantiateOp(item);434 else if (submenuID == 1) // 1: Data435 instantiateData(item);436 else if (submenuID == 2) // 2: Avatars437 instantiateObj(item, submenuID);438 else if (submenuID == 3 && item.type === 'img') {439 const canvas2El: any = document.createElement('a-entity');440 canvas2El.setAttribute('id', 'canvas-world-2');441 const canvas1El: any = document.getElementById('canvas-world');442 const parent: any = document.getElementById('canvas');443 initCanvasBg(canvas2El, parent);444 canvas2El.object3D.position.set(canvas1El.object3D.position.x + canvasSize.width + 0.1, canvas1El.object3D.position.y, canvas1El.object3D.position.z);445 canvas2El.addEventListener('clicked', (event) => {446 canvas1El.object3D.position.set(canvas1El.object3D.position.x, canvas1El.object3D.position.y, canvas2El.object3D.position.z);447 canvas2El.object3D.position.set(canvas2El.object3D.position.x, canvas2El.object3D.position.y, canvas2El.object3D.position.z + 0.2);448 currentCanvas = 'canvas-world-2';449 });450 }451 });452 itemEl.addEventListener('clicked-cleared', (event) => {453 itemEl.setAttribute('material', 'color', itemColor.unselected);454 });455 }456 if (submenuID == 3) {457 }458 if (submenuID == 4) {459 if (savedContainerId > 0) {460 const itemEl: any = document.createElement('a-entity');461 itemEl.setAttribute('id', 'op-container-0');462 // Place the item463 itemList.appendChild(itemEl);464 465 itemEl.setAttribute('obj-model', {466 obj: "#processor-obj"467 });468 itemEl.setAttribute('material', {469 color: itemColor.unselected,470 transparent: true,471 opacity: 0.8472 });473 474 // Resize the model into item size475 itemEl.addEventListener('model-loaded', () => {476 resize(itemEl, itemSize.width);477 });478 479 // Place the model.480 itemEl.object3D.position.set(itemOffset.x + (i%3) * itemSize.width, itemOffset.y - Math.floor(i/3) * itemSize.height, itemOffset.z);481 // Add reaction to the item.482 itemEl.classList.add('ui');483 itemEl.addEventListener('raycaster-intersected', (event) => {484 itemEl.setAttribute('material', 'color', itemColor.hovered);485 setDescription('op-container-0');486 });487 itemEl.addEventListener('raycaster-intersected-cleared', (event) => {488 itemEl.setAttribute('material', 'color', itemColor.unselected);489 });490 itemEl.addEventListener('clicked', (event) => {491 itemEl.setAttribute('material', 'color', itemColor.selected);492 instantiateCtn();493 });494 itemEl.addEventListener('clicked-cleared', (event) => {495 itemEl.setAttribute('material', 'color', itemColor.unselected);496 });497 }498 }499}500/**501 * Set the text of description panel on the menu502 * @param des Text value503 */504function setDescription(des: string): void {505 const desEl: any = document.querySelector('#description-world');506 desEl.setAttribute('text', 'value', des);507}508function instantiateCtn(): void {509 const opEl: any = document.createElement('a-entity');510 const canvas: any = document.querySelector('#canvas-world');511 canvas.appendChild(opEl);512 // Add a new node into the scene and assign the id to the entity513 // opEl.setAttribute('op-node-update', {514 // name: item.name,515 // inputs: item.inputs,516 // outputs: item.outputs517 // });518 // Initiate `operator-model` component519 opEl.setAttribute('geometry', {520 primitive: 'box',521 width: ctnWidth,522 height: 0.3,523 depth: ctnDepth524 });525 opEl.setAttribute('material', {526 color: '#FCA044',527 transparent: true,528 opacity: 0.5529 });530 // Place the model531 opEl.object3D.position.set(canvasConstraint.negx + itemSize.width/2, canvasConstraint.posy - itemSize.height/2, itemSize.width/2);532 // Initiate inputs.533 const lineHeight: number = 0.1;534 const ctnHeight: number = lineHeight * Math.max(savedInPorts.length, savedOutPorts.length);535 let i: number = 0;536 for (const inPort of savedInPorts) {537 const name: string = inPort.name;538 const type: string = inPort.type;539 const behavior: string = inPort.behavior;540 // Create a plug and then save it into the array.541 const plug: any = createOnePlug(name, type, behavior, -ctnWidth/2, ctnHeight/2 - lineHeight*(i+0.5), true, opEl);542 i++;543 }544 // Initiate output.545 let j: number = 0;546 for (const outPort of savedOutPorts) {547 const name: string = outPort.name;548 const type: string = outPort.type;549 const behavior: string = outPort.behavior;550 // Create a plug and then save it tinto the array.551 const plug: any = createOnePlug(name, type, behavior, ctnWidth/2, ctnHeight/2 - lineHeight*(j+0.5), false, opEl);552 j++;553 }554 // Add reactions when gripping555 opEl.classList.add('canvasObj');556 opEl.classList.add('movable');557 // Add class for identifying operators558 opEl.classList.add('operator');559}560/**561 * Create an instance operator on the canvas after clicking on the item562 * @param item The item563 */564function instantiateOp(item: Item): void {565 const opEl: any = document.createElement('a-entity');566 const canvas: any = document.querySelector('#'+currentCanvas);567 canvas.appendChild(opEl);568 // Add a new node into the scene and assign the id to the entity569 opEl.setAttribute('op-node-update', {570 name: item.name,571 inputs: item.inputs,572 outputs: item.outputs573 });574 // Initiate `operator-model` component575 const functionInputs: Array<string> = new Array<string>();576 const behaviorInputs: Array<string> = new Array<string>();577 const typeInputs: Array<string> = new Array<string>();578 const functionOutputs: Array<string> = new Array<string>();579 const behaviorOutputs: Array<string> = new Array<string>();580 const typeOutputs: Array<string> = new Array<string>();581 item.inputs.forEach((input: {name: string, type: string, behavior: string}) => {582 functionInputs.push(input.name);583 behaviorInputs.push(input.behavior);584 typeInputs.push(input.type);585 });586 item.outputs.forEach((output: {name: string, type: string, behavior: string}) => {587 functionOutputs.push(output.name);588 behaviorOutputs.push(output.behavior);589 typeOutputs.push(output.type);590 });591 opEl.setAttribute('operator-model', {592 functionName: item.name,593 functionInputs: functionInputs,594 functionOutputs: functionOutputs,595 behaviorInputs: behaviorInputs,596 behaviorOutputs: behaviorOutputs,597 typeInputs: typeInputs,598 typeOutputs: typeOutputs599 });600 // Resize the model into item size601 opEl.addEventListener('model-loaded', () => {602 resize(opEl, itemSize.width);603 });604 // Place the model605 opEl.object3D.position.set(canvasConstraint.negx + itemSize.width/2, canvasConstraint.posy - itemSize.height/2, itemSize.width/2);606 // Add reactions when gripping607 opEl.classList.add('canvasObj');608 opEl.classList.add('movable');609 // Add class for identifying operators610 opEl.classList.add('operator');611}612/**613 * Instantiate primitive data types on the panel614 * @param item The itme to initiate615 */616function instantiateData(item: Item): void {617 const instanceEl: any = document.createElement('a-entity');618 const canvas: any = document.querySelector('#canvas-world');619 canvas.appendChild(instanceEl);620 // Set up item geometry and material621 instanceEl.setAttribute('geometry', {622 primitive: 'plane',623 width: 0.2,624 height: 0.08625 });626 instanceEl.setAttribute('material', {627 color: 'white',628 transparent: true,629 roughness: 1,630 opacity: 0.8631 });632 instanceEl.setAttribute('text', {633 align: 'center',634 width: 0.6,635 wrapCount: 12,636 value: '0'637 });638 instanceEl.setAttribute('pmt-val', 'name', item.name);639 640 // Place the model641 instanceEl.object3D.position.set(canvasConstraint.negx + itemSize.width/2, canvasConstraint.posy - itemSize.height/2, itemSize.width/2);642 // Add reactions when gripping643 instanceEl.classList.add('canvasObj');644 instanceEl.classList.add('movable');645 // Add class for identifying objects646 instanceEl.classList.add('data-receiver');647 instanceEl.addEventListener('raycaster-intersected', (event) => {648 // instanceEl.setAttribute('material', 'color', objColor.hovered);649 // setDescription(item.name);650 });651 instanceEl.addEventListener('raycaster-intersected-cleared', (event) => {652 // instanceEl.setAttribute('material', 'color', objColor.unselected);653 });654}655/**656 * Create an instance object on the canvas after clicking on the item657 * @param item The item658 * @param submenuID Current submenuID659 */660function instantiateObj(item: Item, submenuID: number): void {661 const instanceEl: any = document.createElement('a-entity');662 const canvas: any = document.querySelector('#canvas-world');663 canvas.appendChild(instanceEl);664 // Set up item geometry and material665 if (item.type != 'primitive') {666 instanceEl.setAttribute('obj-model', {667 obj: item.itemUrl668 });669 instanceEl.setAttribute('material', {670 color: itemColor.unselected,671 transparent: true,672 opacity: 0.8673 });674 // Resize the model into item size675 instanceEl.addEventListener('model-loaded', () => {676 resize(instanceEl, itemSize.width);677 });678 } else {679 instanceEl.setAttribute('geometry', 'primitive', item.name);680 instanceEl.setAttribute('material', {681 color: objColor.unselected,682 transparent: true,683 opacity: 0.8684 });685 instanceEl.addEventListener('loaded', () => {686 resize(instanceEl, itemSize.width);687 });688 }689 690 // 0: Operators; 1: Data; 2: Avatars691 if ( submenuID === 2 ) {692 instanceEl.setAttribute('avatar-node-update', 'name', item.name);693 // Visualize attributes for objects as well as connectors694 const attrHeight: number = itemSize.height / item.outputs.length;695 const attrWidth: number = 0.08;696 item.outputs.forEach((output: {name: string, type: string, behavior: string}, i: number) => {697 createAttr(instanceEl, output.name, output.behavior, output.type, attrHeight, attrWidth, itemSize.height/2 - attrHeight/2 - (i*attrHeight));698 });699 }700 // Place the model701 instanceEl.object3D.position.set(canvasConstraint.negx + itemSize.width/2, canvasConstraint.posy - itemSize.height/2, itemSize.width/2);702 // Add reactions when gripping703 instanceEl.classList.add('canvasObj');704 instanceEl.classList.add('movable');705 // Add class for identifying objects706 instanceEl.classList.add('data-receiver');707 instanceEl.addEventListener('raycaster-intersected', (event) => {708 instanceEl.setAttribute('material', 'color', objColor.hovered);709 setDescription(item.name);710 });711 instanceEl.addEventListener('raycaster-intersected-cleared', (event) => {712 instanceEl.setAttribute('material', 'color', objColor.unselected);713 });714}715/**716 * Create an attribute for the selected node (Generic Models/Data/Avatars)717 * @param instanceEl The instance entity718 * @param name The label of the attribute719 * @param behavior Whether it's a signal or an event720 * @param attrHeight The geometry height721 * @param attrWidth The geometry width722 * @param posY The position Y of the attribute723 */724function createAttr(instanceEl: any, name: string, behavior: string, type: string, attrHeight: number, attrWidth: number, posY: number = 0): void {725 const attrEl: any = document.createElement('a-entity');726 instanceEl.appendChild(attrEl);727 728 // Set up geometry and material of the attribute729 attrEl.setAttribute('geometry', {730 primitive: 'plane', 731 width: attrWidth,732 height: attrHeight * 0.95733 });734 attrEl.setAttribute('material', {735 color: 'grey',736 side: 'double',737 transparent: true,738 opacity: 0.5739 });740 attrEl.setAttribute('text', {741 value: name,742 side: 'double',743 wrapCount: 9,744 align: 'center'745 });746 // Place the attribute747 attrEl.object3D.position.set(itemSize.width - attrWidth/2, posY, 0);748 // Create only one connector along with their geometries and materials749 const outCon: any = document.createElement('a-entity');750 outCon.setAttribute('geometry', {751 primitive: 'sphere', 752 radius: 0.085 * itemSize.width753 });754 755 // Set connectors' positions and add reactions.756 attrEl.appendChild(outCon);757 outCon.object3D.position.set(0.8 * attrWidth, 0, 0);758 outCon.object3D.rotation.set(0, 0, THREEMath.degToRad(-90));759 outCon.classList.add('connectable');760 if (behavior === 'signal') {761 outCon.setAttribute('geometry', {762 primitive: 'cone',763 height: 0.04,764 radiusTop: 0.01,765 radiusBottom: 0.02766 });767 outCon.object3D.rotation.set(0, 0, THREEMath.degToRad(-90));768 }769 770 if (behavior === 'event') {771 outCon.setAttribute('geometry', {772 primitive: 'sphere', 773 radius: 0.085 * itemSize.width774 });775 }776 let unselectedColor: string = getColorsByType(type)[0];777 let hoveredColor: string = getColorsByType(type)[1];778 outCon.setAttribute('material', 'color', unselectedColor);779 outCon.addEventListener('raycaster-intersected', (event) => {780 event.stopPropagation();781 outCon.setAttribute('material', 'color', hoveredColor);782 });783 outCon.addEventListener('raycaster-intersected-cleared', (event) => {784 event.stopPropagation();785 outCon.setAttribute('material', 'color', unselectedColor);786 });787}788/**789 * Load Google Poly Items based on selected submenu790 * @param itemList The item list entity791 * @param pageToken pageToken defines the which page to load792 */793export function loadPoly(itemList: any, pageToken: string): void {794 const param: object = {795 keywords: '',796 format: 'GLTF',797 pageSize: 9,798 pageToken: pageToken799 }800 $.get(googlePoly.getUrl(), param, function (data,status,xhr) {801 if (status == 'success') {802 const assets = data.assets;803 googlePoly.lastPageToken = googlePoly.nextPageToken;804 googlePoly.nextPageToken = data.nextPageToken;805 console.log(assets);806 assets.forEach((asset, i: number)=>{807 const itemEl: any = document.createElement('a-entity');808 itemEl.setAttribute('id', 'poly'+i);809 itemList.appendChild(itemEl);810 itemEl.setAttribute('geometry', {811 primitive: 'plane',812 width: itemSize.width,813 height: itemSize.height814 });815 itemEl.setAttribute('material', {816 src: asset.thumbnail.url817 });818 // Place the item819 itemEl.object3D.position.set(itemOffset.x + (i%3) * itemSize.width, itemOffset.y - Math.floor(i/3) * itemSize.height, 0.001);820 // Add reaction to the item.821 itemEl.classList.add('ui');822 itemEl.addEventListener('raycaster-intersected', (event) => {823 itemEl.setAttribute('material', 'color', itemColor.hovered);824 setDescription(asset.displayName);825 });826 itemEl.addEventListener('raycaster-intersected-cleared', (event) => {827 itemEl.setAttribute('material', 'color', itemColor.unselected);828 });829 itemEl.addEventListener('clicked', (event) => {830 itemEl.setAttribute('material', 'color', itemColor.selected);831 // Use different methods of visualization when the item is an operator832 // 0: Models; 1: Data; 2: Operators; 3: Avatars; 4: Poly833 834 const formats = asset.formats;835 for (let i = 0; i < formats.length; i++) {836 if (formats[i].formatType == 'GLTF2' ) {837 const polyEl: any = document.createElement('a-entity');838 polyEl.setAttribute('id', asset.displayName);839 const redux: any = document.querySelector('#redux');840 redux.appendChild(polyEl);841 polyEl.setAttribute('gltf-model', 'url(' + formats[i].root.url + ')');842 polyEl.addEventListener('model-loaded', () => {843 resize(polyEl, 1.0);844 recenter(polyEl);845 // resize(polyEl, 1.0);846 });847 const rightHand: any = document.querySelector('#rightHand');848 rightHand.object3D.updateMatrix();849 rightHand.object3D.updateMatrixWorld();850 const position = rightHand.object3D.localToWorld(new Vector3(0, -0.4, -0.5));851 polyEl.object3D.position.copy(position.clone());852 polyEl.classList.add('movable');853 polyEl.setAttribute('attribute-list', {854 attrList: ['position', 'rotation'],855 behaviorList: ['signal', 'signal'],856 typeList: ['vector3', 'vector3']857 });858 // Create a object node in frp-backend, attribute updates are front-end driven. Also extract all properties from object file859 const props: any = [{ name: 'object', default: `node-${Node.getNodeCount()}` }, { name: 'position', default: position }];860 // Using JSON does not seem efficient861 const objNode = scene.addObj(asset.displayName, props);862 polyEl.setAttribute('id', objNode.getID()); // Set up node ID863 polyEl.setAttribute('obj-node-update', 'name', asset.displayName); // Set up node update for frp864 polyEl.classList.add('data-receiver');865 break;866 }867 }868 });869 itemEl.addEventListener('clicked-cleared', (event) => {870 itemEl.setAttribute('material', 'color', itemColor.unselected);871 });872 });873 }874 });875 return;...

Full Screen

Full Screen

rocketbelt.uploaders.js

Source:rocketbelt.uploaders.js Github

copy

Full Screen

1'use strict';2((rb, document, $) => {3 const activeClass = 'uploader-dragged-on';4 const maxFilesClass = 'uploader-max-files';5 // Prevent default drag behaviors6 ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {7 document.body.addEventListener(eventName, preventDefaults);8 });9 rb.uploaders = rb.uploaders || {};10 rb.uploaders.addUploader = (uploaderConfig) => {11 let uploader;12 if (uploaderConfig &&13 uploaderConfig.selector) {14 uploader = document.querySelector(uploaderConfig.selector);15 uploader.id = uploader.id || `rb_${rb.getShortId()}`;16 uploaderConfig.id = uploader.id;17 uploaderConfig.isMobile =18 uploaderConfig.isMobile ||19 (uploader && uploader.classList && uploader.classList.contains('uploader-mobile')) ||20 document.querySelectorAll('.mobile .uploader, .tablet .uploader').length > 0;21 if (uploader && uploader.classList) {22 if (uploaderConfig.isMobile) {23 uploader.classList.add('uploader-mobile');24 uploader.addEventListener('click', mobileOpenPhotos);25 }26 if (!uploader.classList.contains('uploader-expanded')) {27 uploader.setAttribute(rb.aria.role, 'button');28 uploader.setAttribute('tabindex', 0);29 }30 }31 if (!uploaderConfig.isMobile) {32 uploader.addEventListener('click', expandClickHandler);33 ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {34 uploader.addEventListener(eventName, preventDefaults);35 });36 ['dragenter', 'dragover'].forEach(eventName => {37 uploader.addEventListener(eventName, draggedOn);38 });39 ['dragleave', 'drop'].forEach(eventName => {40 uploader.addEventListener(eventName, draggedOff);41 });42 uploader.addEventListener('drop', handleDrop);43 // Add scrim elements44 const scrim = document.createElement('div');45 scrim.classList.add('scrim');46 uploader.insertAdjacentElement('afterbegin', scrim);47 // Register drag-related listeners48 const scrimIcon = document.createElement('div');49 scrimIcon.classList.add('scrim_icon');50 scrim.insertAdjacentElement('afterend', scrimIcon);51 }52 rb.uploaders.instances = rb.uploaders.instances || [];53 rb.uploaders.instances.push({54 config: uploaderConfig,55 files: []56 });57 // Register listener for keyboard input58 $(uploader).find('.uploader_file-label').keydown((e) => {59 // Since the browser's file input UI is hidden, we need to60 // allow the label it's replaced with to be triggered via61 // keyboard.62 if ((e.which === 13 || e.which === 32)) {63 $(e.target).click();64 }65 });66 const $input = $(uploader).find('input[type="file"]');67 const inputId = $input[0].id || `rb_${rb.getShortId()}`;68 $input.attr('id', inputId);69 $(uploader).find('.uploader_file-label')70 .attr('for', inputId)71 .attr('aria-role', 'button')72 .attr('tabindex', 0);73 $input.change(fileInputOnchange);74 }75 return uploader.id;76 };77 function getClosestUploader(el) {78 let actualUploader;79 if (el.classList) {80 actualUploader =81 el.classList.contains('uploader') ? el : el.closest('.uploader');82 }83 return actualUploader;84 }85 function mobileOpenPhotos(e) {86 if(getClosestUploader(e.target)) {87 $(`#${getClosestUploader(e.target).id} input[type="file"]`).click();88 }89 }90 function expandClickHandler(e) {91 expandUploader(getClosestUploader(e.target));92 }93 function expandUploader(uploader) {94 if (uploader && uploader.classList) {95 if (uploader.classList) {96 uploader.classList.add('uploader-expanded');97 }98 uploader.removeAttribute(rb.aria.role);99 uploader.removeAttribute('tabindex');100 uploader.removeEventListener('click', mobileOpenPhotos);101 uploader.removeEventListener('click', expandClickHandler);102 }103 }104 function getInstanceForId(id) {105 return rb.uploaders.instances.filter((i) => {106 return i.config.id === id;107 })[0];108 }109 rb.uploaders.getInstanceForId = getInstanceForId;110 function fileInputOnchange(e) {111 const id = getClosestUploader(e.target).id;112 const instance = getInstanceForId(id);113 const config = instance.config;114 if (config.isMobile) {115 expandClickHandler(e);116 }117 rb.uploaders.handleFiles(this.files, config.id);118 }119 function preventDefaults(e) {120 e.preventDefault();121 e.stopPropagation();122 }123 function draggedOn(e) {124 const $target = $(e.target);125 const $dropArea =126 $target.hasClass(activeClass) ? $target : $target.closest('.uploader');127 if (!$dropArea.hasClass(activeClass)) {128 $dropArea.find('.scrim, .scrim_icon').css('z-index', '1');129 $dropArea.addClass(activeClass);130 }131 }132 function draggedOff(e) {133 const $target = $(e.target);134 const $dropArea =135 $target.hasClass(activeClass) ? $target : $target.closest('.uploader');136 if ($dropArea.hasClass(activeClass)) {137 $dropArea.removeClass(activeClass);138 $dropArea.find('.scrim, .scrim_icon').css('z-index', '-1');139 }140 }141 rb.uploaders.numCanAdd = (id) => {142 const uploaderInstance = getInstanceForId(id);143 const numFiles = uploaderInstance.files ? uploaderInstance.files.length : 0;144 const maxFiles = uploaderInstance.config.maxFiles || Number.POSITIVE_INFINITY;145 return maxFiles - numFiles;146 };147 function handleDrop(e) {148 const uploader = getClosestUploader(e.target);149 if (rb.uploaders.numCanAdd(uploader.id) > 0) {150 const dt = e.dataTransfer;151 const files = dt.files;152 rb.uploaders.handleFiles(files, uploader.id);153 }154 }155 rb.uploaders.handleFiles = function handleFiles(files, uploaderId) {156 const numCanAdd = rb.uploaders.numCanAdd(uploaderId);157 const filesToAdd = [...files].slice(0, numCanAdd);158 filesToAdd.forEach(file => { processFile(file, uploaderId); });159 };160 function getNewDimensions(oldDimensions) {161 const width = oldDimensions.width;162 const height = oldDimensions.height;163 const maxWidth = 1500;164 const maxHeight = 1500;165 let newWidth;166 let newHeight;167 if (width <= maxWidth && height <= maxHeight) {168 return { 'width': width, 'height': height };169 }170 if (height > width) {171 if (height > maxHeight) {172 newHeight = maxHeight;173 newWidth = Math.floor((width / height) * newHeight);174 } else {175 return { 'width': width, 'height': height };176 }177 } else {178 if (width > maxWidth) {179 newWidth = maxWidth;180 newHeight = Math.floor((height / width) * newWidth);181 } else {182 return { 'width': width, 'height': height };183 }184 }185 return { 'width': newWidth, 'height': newHeight };186 }187 function downscaleImage(data) {188 return new Promise((resolve, reject) => {189 // Provide default values190 const imageType = 'image/png';191 const encoderOptions = 0.9;192 // Create a temporary image so that we can compute the height of the downscaled image.193 let image = new Image();194 image.src = data;195 image.onload = () => {196 let srcOrientation = 1;197 jQuery.ajax({198 url: 'https://cdn.jsdelivr.net/npm/exif-js',199 dataType: 'script',200 cache: true201 }).done(function () {202 EXIF.getData(image, function () {203 srcOrientation = EXIF.getTag(this, 'Orientation');204 const newDimensions = getNewDimensions({ 'width': image.width, 'height': image.height });205 const newWidth = newDimensions.width;206 const newHeight = newDimensions.height;207 // Create a temporary canvas to draw the downscaled image on.208 let canvas = document.createElement('canvas');209 if (srcOrientation > 4 && srcOrientation < 9) {210 canvas.width = newHeight;211 canvas.height = newWidth;212 } else {213 canvas.width = newWidth;214 canvas.height = newHeight;215 }216 // Draw the downscaled image on the canvas and return the new data URL.217 // Have to use 'let' instead of 'const' so it can be mutable218 let ctx = canvas.getContext('2d');219 switch (srcOrientation) {220 case 2: ctx.transform(-1, 0, 0, 1, newWidth, 0); break;221 case 3: ctx.transform(-1, 0, 0, -1, newWidth, newHeight); break;222 case 4: ctx.transform(1, 0, 0, -1, 0, newHeight); break;223 case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;224 case 6: ctx.transform(0, 1, -1, 0, newHeight, 0); break;225 case 7: ctx.transform(0, -1, -1, 0, newHeight, newWidth); break;226 case 8: ctx.transform(0, -1, 1, 0, 0, newWidth); break;227 default: break;228 }229 ctx.drawImage(image, 0, 0, newWidth, newHeight);230 const newDataUrl = canvas.toDataURL(imageType, encoderOptions);231 const newFileSize = Math.ceil(newDataUrl.split(',')[1].length * 0.75);232 resolve({ 'file': newDataUrl, 'size': newFileSize });233 });234 });235 };236 image.onerror = reject;237 });238 }239 function createPreview(filesAsBinary, instance, instanceEl, reader, scaledImageObj) {240 const img = document.createElement('img');241 img.src = filesAsBinary ? reader.result : scaledImageObj.file;242 img.id = `rb_${rb.getShortId()}`;243 img.classList.add('uploader_thumb');244 const f = {245 id: img.id,246 file: filesAsBinary ? rb.dataURItoBlob(reader.result) : scaledImageObj.file,247 size: filesAsBinary ? reader.size : scaledImageObj.size248 };249 instance.files.push(f);250 instanceEl251 .dispatchEvent(new CustomEvent('rb.uploaders.fileAdded', { detail: f }));252 const button = document.createElement('button');253 button.dataset.targetId = img.id;254 button.classList.add('uploader_thumbs_remove-button');255 button.innerHTML = '&times;';256 button.setAttribute(rb.aria.label, 'Remove this image');257 rb.once(button, 'click', (e) => {258 const id = e.target.dataset.targetId;259 const imgToRemove = document.querySelector(`#${id}`);260 const container = e.target.closest('.uploader');261 const uploader = document.querySelector(instance.config.selector);262 imgToRemove.parentNode.removeChild(imgToRemove);263 e.target.parentNode.removeChild(e.target);264 $(uploader).find('input[type="file"]').val('');265 if (container && container.querySelectorAll('.uploader_thumb').length === 0) {266 container.classList.remove('uploader-has-thumbs');267 if (instance.config.isMobile) {268 container.classList.remove('uploader-expanded');269 uploader.addEventListener('click', mobileOpenPhotos);270 }271 }272 instance.files = instance.files.filter((el) => {273 return el.id !== id;274 });275 if (rb.uploaders.numCanAdd(instanceEl.id) > 0) {276 const $dropArea = $(`#${instanceEl.id}`);277 $(`#${instanceEl.id} .uploader_file-input, #${instanceEl.id} .uploader_file-label`)278 .removeAttr('disabled');279 $dropArea.removeClass(maxFilesClass);280 }281 const i = { removedId: id };282 document.getElementById(instanceEl.id)283 .dispatchEvent(new CustomEvent('rb.uploaders.fileRemoved', { detail: i }));284 });285 document.querySelector(`#${instanceEl.id} .uploader_thumbs`).appendChild(img);286 document.querySelector(`#${img.id}`).insertAdjacentElement('afterend', button);287 const u = document.querySelector(`#${instanceEl.id}`);288 if (u) {289 u.classList.add('uploader-has-thumbs');290 }291 if (!rb.uploaders.numCanAdd(instanceEl.id)) {292 const $dropArea = $(`#${instanceEl.id}`);293 $(`#${instanceEl.id} .uploader_file-input, #${instanceEl.id} .uploader_file-label`)294 .attr('disabled', '');295 $dropArea.addClass(maxFilesClass);296 }297 }298 function processFile(file, uploaderId) {299 const instance = getInstanceForId(uploaderId);300 const instanceEl = document.getElementById(uploaderId);301 const reader = new FileReader();302 reader.size = file.size;303 instanceEl304 .dispatchEvent(new CustomEvent('rb.uploaders.addingFile'));305 reader.readAsDataURL(file);306 reader.onloadend = () => {307 const fileContents =308 instance.config.filesAsBinary ?309 rb.dataURItoBlob(reader.result) :310 reader.result311 ;312 if (instance.config.filesAsBinary) {313 createPreview(true, instance, instanceEl, reader);314 } else {315 downscaleImage(fileContents).then(scaledImageObj => {316 createPreview(false, instance, instanceEl, reader, scaledImageObj);317 });318 }319 };320 }...

Full Screen

Full Screen

Instances.js

Source:Instances.js Github

copy

Full Screen

1import d3 from 'd3/d3';2import volumes from './Volumes';3import layout from './../Layout';4export default function (clickHandler) {5 return function () {6 var instances = this.selectAll('.instance')7 .data(d => d.instances)8 ;9 // Enter10 instances.enter().append('g')11 .attr('transform', instance => `translate(${ instance.box.center.x }, ${ instance.box.center.y })`)12 .attr('class', 'instance')13 .style('opacity', 0)14 .each(function (instance) {15 var instanceEl = d3.select(this);16 var icon = instanceEl.append('rect')17 .attr('class', 'instance__wrapper')18 .attr({ width: 1, height: 1 })19 .attr({ rx: layout.instance.borderRadius, ry: layout.instance.borderRadius })20 ;21 icon.on('click', function (instance) {22 clickHandler('instance', instance);23 });24 instanceEl.append('circle')25 .attr('class', `instance__state instance__state--${ instance.state }`)26 .attr('r', layout.instance.stateSize / 2)27 .attr('cx', 12)28 .attr('cy', 15)29 ;30 instanceEl.append('text')31 .attr('class', 'instance__name')32 .attr('x', 24)33 .attr('y', 20)34 .text(instance.tags.name ? instance.tags.name : instance.id)35 ;36 })37 ;38 // Update39 instances40 .attr('class', instance => `instance${ instance.active ? ' _is-active' : '' }`)41 .each(function (instance, i) {42 var instanceEl = d3.select(this);43 instanceEl.select('.instance__wrapper')44 .transition()45 .delay(i * 60 + 400)46 .duration(900)47 .ease('elastic')48 .attr({ width: instance.box.width, height: instance.box.height })49 ;50 })51 .transition()52 .delay((d, i) => i * 60 + 400)53 .duration(900)54 .ease('elastic')55 .style('opacity', 1)56 .attr('transform', instance => `translate(${ instance.box.origin.x }, ${ instance.box.origin.y })`)57 ;58 // Exit59 instances.exit()60 .remove()61 ;62 instances.call(volumes(clickHandler));63 };...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { instanceEl } from 'ng-mocks';2describe('TestComponent', () => {3 let component: TestComponent;4 let fixture: ComponentFixture<TestComponent>;5 beforeEach(async(() => {6 TestBed.configureTestingModule({7 })8 .compileComponents();9 }));10 beforeEach(() => {11 fixture = TestBed.createComponent(TestComponent);12 component = fixture.componentInstance;13 fixture.detectChanges();14 });15 it('should create', () => {16 expect(component).toBeTruthy();17 });18 it('should have an h1 tag with text "Test"', () => {19 const h1 = instanceEl(fixture, 'h1');20 expect(h1.nativeElement.textContent).toEqual('Test');21 });22});23import { Component, OnInit } from '@angular/core';24@Component({25})26export class TestComponent implements OnInit {27 constructor() { }28 ngOnInit(): void {29 }30}31import { async, ComponentFixture, TestBed } from '@angular/core/testing';32import { TestComponent } from './test.component';33describe('TestComponent', () => {34 let component: TestComponent;35 let fixture: ComponentFixture<TestComponent>;36 beforeEach(async(() => {37 TestBed.configureTestingModule({38 })39 .compileComponents();40 }));41 beforeEach(() => {42 fixture = TestBed.createComponent(TestComponent);43 component = fixture.componentInstance;44 fixture.detectChanges();45 });46 it('should create', () => {47 expect(component).toBeTruthy();48 });49});50import { Component, OnInit } from '@angular/core';51@Component({52})53export class TestComponent implements OnInit {54 constructor() { }55 ngOnInit(): void {56 }57}58import { async, ComponentFixture, TestBed } from '@angular/core/testing';59import { TestComponent } from './test.component';60describe('TestComponent', () => {61 let component: TestComponent;

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { instanceEl } from 'ng-mocks';2import { createComponent } from 'ng-mocks';3import { mockProvider } from 'ng-mocks';4import { TestBed } from '@angular/core/testing';5import { Component } from '@angular/core';6import { TestComponentBuilder } from '@angular/compiler/testing';7import { By } from '@angular/platform-browser';8import { DebugElement } from '@angular/core';9import { Observable } from 'rxjs';10import 'rxjs/add/observable/of';11import 'rxjs/add/operator/async';12import 'rxjs/add/operator/map';13import 'rxjs/add/operator/take';14import { TestScheduler } from 'rxjs/testing';15import { fakeAsync } from '@angular/core/testing';16import { tick } from '@angular/core/testing';17import { flush } from '@angular/core/testing';18import { flushMicrotasks } from '@angular/core/testing';19import { async } from '@angular/core/testing';20import { ComponentFixture } from '@angular/core/testing';21import { ComponentFixtureAutoDetect } from '@angular/core/testing';22import { inject } from '@angular/core/testing';23import { injectAsync } from '@angular/core/testing';

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { instanceEl } from 'ng-mocks';2import { MyComponent } from './my.component';3describe('MyComponent', () => {4 it('should render', () => {5 const fixture = TestBed.createComponent(MyComponent);6 fixture.detectChanges();7 const instance = instanceEl(fixture.debugElement, MyComponent);8 expect(instance).toBeDefined();9 });10});11import { Component } from '@angular/core';12@Component({13})14export class MyComponent {}15import { TestBed } from '@angular/core/testing';16import { MyComponent } from './my.component';17describe('MyComponent', () => {18 beforeEach(() => {19 TestBed.configureTestingModule({20 }).compileComponents();21 });22 it('should create the app', () => {23 const fixture = TestBed.createComponent(MyComponent);24 const app = fixture.debugElement.componentInstance;25 expect(app).toBeTruthy();26 });27});28div {29 color: red;30}31div {32 color: red;33}34div {35 color: red;36}37import { Component } from '@angular/core';38@Component({39})40export class MyComponent {}41import { TestBed } from '@angular/core/testing';42import { MyComponent } from './my.component';43describe('MyComponent', () => {44 beforeEach(() => {45 TestBed.configureTestingModule({46 }).compileComponents();47 });48 it('should create the app', () => {49 const fixture = TestBed.createComponent(MyComponent);50 const app = fixture.debugElement.componentInstance;51 expect(app).toBeTruthy();52 });53});54div {55 color: red;56}57div {58 color: red;59}

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import {instanceEl} from 'ng-mocks';2import {Component} from '@angular/core';3import {TestBed} from '@angular/core/testing';4@Component({5})6export class TestComponent {}7describe('TestComponent', () => {8 beforeEach(() => {9 TestBed.configureTestingModule({10 }).compileComponents();11 });12 it('should create the app', () => {13 const fixture = TestBed.createComponent(TestComponent);14 const app = instanceEl(fixture.debugElement);15 expect(app).toBeTruthy();16 });17});18import {instanceEl} from 'ng-mocks';19import {Component} from '@angular/core';20import {TestBed} from '@angular/core/testing';21@Component({22})23export class TestComponent {}24describe('TestComponent', () => {25 beforeEach(() => {26 TestBed.configureTestingModule({27 }).compileComponents();28 });29 it('should create the app', () => {30 const fixture = TestBed.createComponent(TestComponent);31 const app = instanceEl(fixture.debugElement);32 expect(app).toBeTruthy();33 });34});35import {instanceEl} from 'ng-mocks';36import {Component} from '@angular/core';37import {TestBed} from '@angular/core/testing';38@Component({39})40export class TestComponent {}41describe('TestComponent', () => {42 beforeEach(() => {43 TestBed.configureTestingModule({44 }).compileComponents();45 });46 it('should create the app', () => {47 const fixture = TestBed.createComponent(TestComponent);48 const app = instanceEl(fixture.debugElement);49 expect(app).toBeTruthy();50 });51});52import {instanceEl} from 'ng-mocks';53import {Component} from '@angular/core';54import {TestBed} from '@angular/core/testing';55@Component({56})57export class TestComponent {}58describe('TestComponent', () => {59 beforeEach(() =>

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import {instanceEl} from 'ng-mocks';2const component = instanceEl(TestComponent);3const component = instanceEl(TestComponent, {name: 'John'});4const component = instanceEl(TestComponent, {name: 'John'}, true);5import {mockComponent} from 'ng-mocks';6const component = mockComponent(TestComponent);7const component = mockComponent(TestComponent, {name: 'John'});8const component = mockComponent(TestComponent, {name: 'John'}, true);9import {mockDirective} from 'ng-mocks';10const directive = mockDirective(TestDirective);11const directive = mockDirective(TestDirective, {name: 'John'});12const directive = mockDirective(TestDirective, {name: 'John'}, true);13import {mockPipe} from 'ng-mocks';14const pipe = mockPipe(TestPipe);15const pipe = mockPipe(TestPipe, {name: 'John'});16const pipe = mockPipe(TestPipe, {name: 'John'}, true);17import {mockProvider} from 'ng-mocks';18const service = mockProvider(TestService);19const service = mockProvider(TestService, {name: 'John'});20const service = mockProvider(TestService, {name: 'John'}, true);21import {mockModule} from 'ng-mocks';22const module = mockModule(TestModule);23const module = mockModule(TestModule, {name: 'John'});24const module = mockModule(TestModule, {name: 'John'}, true);25import {mockModule} from 'ng-mocks';

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var instanceEl = ngMocks.instanceEl(El);2var instanceEl = ngMocks.instanceEl(El, {mocks: {mock1: 'mock1'}});3var instanceEl = ngMocks.instanceEl(El, {mocks: {mock1: 'mock1'}, inject: {inject1: 'inject1'}});4var instanceEl = ngMocks.instanceEl(El, {mocks: {mock1: 'mock1'}, inject: {inject1: 'inject1'}, providers: [Provider]});5var instanceEl = ngMocks.instanceEl(El, {mocks: {mock1: 'mock1'}, inject: {inject1: 'inject1'}, providers: [Provider]}, {mocks: {mock2: 'mock2'}});6var instanceEl = ngMocks.instanceEl(El, {mocks: {mock1: 'mock1'}, inject: {inject1: 'inject1'}, providers: [Provider]}, {mocks: {mock2: 'mock2'}, inject: {inject2: 'inject2'}});7var instanceEl = ngMocks.instanceEl(El, {mocks: {mock1: 'mock1'}, inject: {inject1: 'inject1'}, providers: [Provider]}, {mocks: {mock2: 'mock2'}, inject: {inject2: 'inject2'}, providers: [Provider]});8var instanceEl = ngMocks.instanceEl(El, {mocks: {mock1: 'mock1'}, inject: {inject1: 'inject1'}, providers: [Provider]}, {mocks: {mock2: 'mock2'}, inject: {inject2: 'inject2'}, providers: [Provider]}, {mocks: {mock3: 'mock3'}});9var instanceEl = ngMocks.instanceEl(El, {mocks: {mock1: 'mock1'}, inject: {inject

Full Screen

Full Screen

Automation Testing Tutorials

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

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run ng-mocks automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful