How to use placeChild method in Playwright Internal
Best JavaScript code snippet using playwright-internal
react-dom.js
Source:react-dom.js 
...136 }137 prevSibling = newFiber;138 }139}140function placeChild(141 newFiber,142 lastPlacedIndex,143 newIndex,144 shouldTrackSideEffects145) {146 newFiber.index = newIndex;147 if (!shouldTrackSideEffects) {148 //å次渲æï¼è¿åä¸ä¸ä¸ªèç¹æ§è¡ä½ç½®149 return lastPlacedIndex;150 }151 //æ´æ°é¶æ®µï¼fiberå¯è½æ¯æ°å¢ï¼ä¹å¯è½æ¯ä¿®æ¹152 let base = newFiber.base;153 if (base !== null) {154 //æ´æ°155 let oldIndex = base.index;156 if (oldIndex < lastPlacedIndex) {157 return lastPlacedIndex;158 } else {159 return oldIndex;160 }161 } else {162 //æ°å¢163 newFiber.effectTag = PLACEMENT;164 return lastPlacedIndex;165 }166}167function mapRemainingChildren(returnFiber, currentFirstChild) {168 const existingChildren = new Map();169 // let exitChild = currentFirstChild;170 // while (exitChild) {171 // let key = exitChild.key || exitChild.index;172 // console.log("mapRemainingChildren", key);173 // existingChildren.set(key, exitChild);174 // exitChild = exitChild.sibling;175 // }176 // return existingChildren;177 let existingChild = currentFirstChild;178 while (existingChild) {179 if (existingChild.key !== null) {180 existingChildren.set(existingChild.key, existingChild);181 } else {182 existingChildren.set(existingChild.index, existingChild);183 }184 existingChild = existingChild.sibling;185 }186 return existingChildren;187}188function reconcileChildren(returnFiber, children) {189 if (returnFiber.type === "ul") {190 console.log("returnFiber", returnFiber);191 }192 //å å
äº193 let prevNewFiber = null;194 //oldfiber ç第ä¸ä¸ªchild195 let oldFiber = returnFiber.base && returnFiber.base.child;196 //è®°å½ä¸ä¸ä¸ªoldfiber197 let nextOldFiber = null;198 //è®°å½ä¸æ¬¡çæå
¥ä½ç½®199 let lastPlacedIndex = 0;200 //æ°èç¹çç´¢å¼201 let newIndex = 0;202 //æ¯å¦æ¯æ´æ°æ è¯203 let shouldTrackSideEffects = true;204 if (!oldFiber) {205 shouldTrackSideEffects = false;206 }207 //æ´æ°ï¼åèç¹ä½ç½®ç¸å208 for (; oldFiber !== null && newIndex < children.length; newIndex++) {209 //çé®210 if (oldFiber.index > newIndex) {211 nextOldFiber = oldFiber;212 oldFiber = null;213 } else {214 nextOldFiber = oldFiber.sibling;215 }216 let newChild = children[newIndex];217 if (!(newChild.key === oldFiber.key && newChild.type === oldFiber.type)) {218 //æ°æ§èç¹ä¸ä¸æ ·ï¼è·³åºå½ådiff219 if (oldFiber === null) {220 oldFiber = nextOldFiber;221 }222 break;223 }224 const newFiber = {225 key: newChild.key,226 type: newChild.type,227 props: newChild.props,228 node: oldFiber.node,229 base: oldFiber,230 return: returnFiber,231 effectTag: UPDATE,232 };233 lastPlacedIndex = placeChild(234 newFiber,235 lastPlacedIndex,236 newIndex,237 shouldTrackSideEffects238 );239 if (prevNewFiber === null) {240 returnFiber.child = newFiber;241 } else {242 prevNewFiber.sibling = newFiber;243 }244 prevNewFiber = newFiber;245 //çé®246 oldFiber = nextOldFiber;247 }248 //æ°childrenå
¨é¨éåå®æ,å é¤å©ä½èchildren249 if (newIndex === children.length) {250 while (oldFiber) {251 deletions.push({252 ...oldFiber,253 effectTag: DELETION,254 });255 oldFiber = oldFiber.sibling;256 }257 }258 //èèç¹éåå®æ¯ï¼æ°èç¹è¿æï¼æå
¥ï¼æè
é¦æ¬¡æ¸²æï¼æå
¥æ°èç¹259 if (oldFiber === null) {260 for (; newIndex < children.length; newIndex++) {261 let newChild = children[newIndex];262 const newFiber = {263 key: newChild.key,264 type: newChild.type,265 props: newChild.props,266 node: null,267 base: null,268 return: returnFiber,269 effectTag: PLACEMENT,270 };271 lastPlacedIndex = placeChild(272 newFiber,273 newIndex,274 lastPlacedIndex,275 shouldTrackSideEffects276 );277 if (prevNewFiber === null) {278 //æ建æ°èç¹çfiberé¾è¡¨279 returnFiber.child = newFiber;280 } else {281 prevNewFiber.sibling = newFiber;282 }283 prevNewFiber = newFiber;284 }285 return;286 }287 //æ°èèç¹é½è¿æï¼ä¹±åºæ´æ°288 const exitOldMap = mapRemainingChildren(returnFiber, oldFiber);289 for (; newIndex < children.length; newIndex++) {290 let newChild = children[newIndex];291 let newFiber = {292 key: newChild.key,293 type: newChild.type,294 props: newChild.props,295 return: returnFiber,296 base: null,297 node: null,298 effectTag: PLACEMENT,299 };300 // let key = newChild.key !== null ? newChild.key : newIndex;301 // let matchFiber = exitOldMap.get(key);302 let matchFiber = exitOldMap.get(303 newChild.key === null ? newIndex : newChild.key304 );305 if (matchFiber) {306 newFiber = {307 ...newFiber,308 node: matchFiber.node,309 base: matchFiber,310 effectTag: UPDATE,311 };312 // shouldTrackSideEffects && exitOldMap.delete(key);313 shouldTrackSideEffects &&314 exitOldMap.delete(newFiber.key === null ? newIndex : newFiber.key);315 }316 lastPlacedIndex = placeChild(317 newFiber,318 lastPlacedIndex,319 newIndex,320 shouldTrackSideEffects321 );322 if (prevNewFiber === null) {323 returnFiber.child = newFiber;324 } else {325 prevNewFiber.sibling = newFiber;326 }327 prevNewFiber = newFiber;328 }329 //æ´æ°é¶æ®µ ä¹±åºæ´æ°å oldMapè¿æå¼çè¯ï¼å
¨é¨å é¤330 if (shouldTrackSideEffects) {331 exitOldMap.forEach((child) => {332 deletions.push({333 ...child,334 effectTag: DELETION,335 });336 });337 }338}339function reconcileChildren_teacher(returnFiber, newChildren) {340 let previousNewFiber = null;341 // oldfiber ç第ä¸ä¸ªåfiber342 let oldFiber = returnFiber.base && returnFiber.base.child;343 // è®°å½ä¸æ¬¡çæå
¥ä½ç½®344 let lastPlacedIndex = 0;345 // åç´¯å ï¼éånewChildrenæ°ç»346 let newIdx = 0;347 // oldFiberçä¸è½¬ï¼è®°å½ä¸ä¸ªoldFiber348 let nextOldFiber = null;349 let shouldTrackSideEffects = true;350 if (!oldFiber) {351 // å次渲æ352 shouldTrackSideEffects = false;353 }354 // 1. çé¢æ´æ°é¶æ®µ ç¸å¯¹ä½ç½®æ²¡æåçåå è¿è¡è¿ä¸ªå¾ªç¯355 for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {356 // å¤æç¸å¯¹ä½ç½®357 // old 1 2 3_ 4358 // new 1 2 3 4 _359 if (oldFiber.index > newIdx) {360 nextOldFiber = oldFiber;361 oldFiber = null;362 } else {363 nextOldFiber = oldFiber.sibling;364 }365 let newChild = newChildren[newIdx];366 if (!(newChild.key === oldFiber.key && newChild.type === oldFiber.type)) {367 if (oldFiber === null) {368 oldFiber = nextOldFiber;369 }370 break;371 }372 const newFiber = {373 key: newChild.key,374 type: newChild.type,375 props: newChild.props,376 node: oldFiber.node,377 base: oldFiber,378 return: returnFiber,379 effectTag: UPDATE,380 };381 lastPlacedIndex = placeChild(382 newFiber,383 lastPlacedIndex,384 newIdx,385 shouldTrackSideEffects386 );387 if (previousNewFiber === null) {388 returnFiber.child = newFiber;389 } else {390 previousNewFiber.sibling = newFiber;391 }392 previousNewFiber = newFiber;393 // !394 oldFiber = nextOldFiber;395 }396 if (newIdx === newChildren.length) {397 // We've reached the end of the new children. We can delete the rest.398 // deleteRemainingChildren(returnFiber, oldFiber);399 // return resultingFirstChild;400 while (oldFiber) {401 deletions.push({402 ...oldFiber,403 effectTag: DELETION,404 });405 oldFiber = oldFiber.sibling;406 }407 }408 //2. æ°å¢fiber èé¾è¡¨å·²ç»éåå®409 if (oldFiber === null) {410 for (; newIdx < newChildren.length; newIdx++) {411 let newChild = newChildren[newIdx];412 const newFiber = {413 key: newChild.key,414 type: newChild.type,415 props: newChild.props,416 node: null,417 base: null,418 return: returnFiber,419 effectTag: PLACEMENT,420 };421 lastPlacedIndex = placeChild(422 newFiber,423 lastPlacedIndex,424 newIdx,425 shouldTrackSideEffects426 );427 if (previousNewFiber === null) {428 returnFiber.child = newFiber;429 } else {430 previousNewFiber.sibling = newFiber;431 }432 previousNewFiber = newFiber;433 }434 return;435 }436 // 3. æ°èé¾è¡¨é½æåæ°å¼437 // 1->2-ã3-ã4->5438 // [1,2,3,4]439 // çæmapå¾ï¼æ¹ä¾¿é¾è¡¨æ¥æ¾ã设置åå é¤440 const existingChildren = mapRemainingChildren(returnFiber, oldFiber);441 for (; newIdx < newChildren.length; newIdx++) {442 let newChild = newChildren[newIdx];443 let newFiber = {444 key: newChild.key,445 type: newChild.type,446 props: newChild.props,447 return: returnFiber,448 // node: null,449 // base: null,450 // effectTag: PLACEMENT451 };452 // å¤ææ°å¢è¿æ¯å¤ç¨453 let matchedFiber = existingChildren.get(454 newChild.key === null ? newIdx : newChild.key455 );456 if (matchedFiber) {457 // æ¾å°å¦458 newFiber = {459 ...newFiber,460 node: matchedFiber.node,461 base: matchedFiber,462 effectTag: UPDATE,463 };464 // æ¾å°å°±è¦å é¤é¾è¡¨ä¸çå
ç´ ï¼é²æ¢éå¤æ¥æ¾465 shouldTrackSideEffects &&466 existingChildren.delete(newFiber.key === null ? newIdx : newFiber.key);467 } else {468 newFiber = {469 ...newFiber,470 node: null,471 base: null,472 effectTag: PLACEMENT,473 };474 }475 lastPlacedIndex = placeChild(476 newFiber,477 lastPlacedIndex,478 newIdx,479 shouldTrackSideEffects480 );481 if (previousNewFiber === null) {482 returnFiber.child = newFiber;483 } else {484 previousNewFiber.sibling = newFiber;485 }486 previousNewFiber = newFiber;487 }488 if (shouldTrackSideEffects) {489 existingChildren.forEach((child) =>...
react-diff.js
Source:react-diff.js
...51 const created = createFiberFromText(textConent, returnFiber.mode);52 created.return = returnFiber;53 return created;54}55function placeChild(newFiber, lastPlacedIndex, newIdx) {56 newFiber.index = newIndex;57 if (!shouldTrackSideEffects) {58 return lastPlacedIndex;59 }60 const current = newFiber.alternate; // current== null,该èç¹ä¸ºæ°å¢èç¹61 if (current !== null) {62 // current !== null 表示æ´æ°ï¼åå¨å·²æèç¹63 const oldIndex = current.index;64 if (oldIndex < lastPlacedIndex) {65 newFiber.flags = Placement;66 return lastPlacedIndex;67 } else {68 // 该项ä¾ç¶çå¨èä½ç½®69 return oldIndex;70 }71 } else {72 newFiber.flags = Placement;73 return lastPlacedIndex;74 }75}76function updateTextNode(returnFiber, current, textContent) {77 // currentèç¹ä¸æ¯å¯å¤ç¨çææ¬èç¹78 if (current === null || current.tag !== HostText) {79 // éè¿textContentå建ææ¬èç¹Fiber80 const created = createFiberFromText(textContent, returnFiber.mode);81 created.return = returnFiber;82 return created;83 } else {84 // æ¾å°å¯å¤ç¨çææ¬èç¹äºï¼åå¤ç¨85 const existing = useFiber(current, textContent); // å¤ç¨ææ¬èç¹86 existing.return = returnFiber;87 return existing;88 }89}90function updateElement(returnFiber, current, element) {91 if (current !== null) {92 if (current.elementType === element.type) {93 const existing = useFiber(current, element.props); // å¤ç¨èç¹94 existing.ref = coerceRef(returnFiber, current, element);95 existing.return = returnFiber;96 return existing;97 }98 }99 // æ°èç¹100 const created = createFiberFromElement(element, returnFiber.mode);101 created.ref = coerceRef(returnFiber, current, element);102 created.return = returnFiber;103 return created;104}105// å°ææèèç¹æ·»å å°Map对象ä¸106function mapRemainingChildren(returnFiber, currentFirstChild) {107 const existingChildren = new Map();108 let existingChild = currentFirstChild;109 while (existingChild !== null) {110 // key ä¸ä¸ºnull å
ç´ èç¹111 if (existingChild.key !== null) {112 existingChildren.set(existingChild.key, existingChild);113 } else {114 // ä¸åå¨key å使ç¨index代æ¿115 existingChildren.set(existingChild.index, existingChild);116 }117 existingChild = existingChild.sibling;118 }119 return existingChildren;120}121function updateFromMap(existingChildren, returnFiber, newIdx, newChild) {122 // æ°èç¹æ¯ææ¬èç¹123 if (typeof newChild === 'string' || typeof newChild === 'number') {124 const matchedFiber = existingChildren.get(newIdx) || null; // æ¾indexç¸åçèç¹å¤ç¨125 return updateTextNode(returnFiber, matchedFiber, '' + newChild);126 }127 // newChildæ¯å
ç´ èç¹çæ
åµ128 if (typeof newChild === 'object' && newChild !== null) {129 if (newChild.$$typeof === REACT_ELEMENT_TYPE) {130 const matchedFiber =131 existingChildren.get(newChild.key ? newChild.key : newChild.index) ||132 null;133 // è¿åæ´æ°åçå
ç´ èç¹134 return updateElement(returnFiber, matchedFiber, newChild);135 }136 }137 return null;138}139function createChild(returnFiber, newChild) {140 // å¤çææ¬èç¹141 if (typeof newChild === 'string' || typeof newChild === 'number') {142 const created = createFiberFromText('' + newChild, returnFiber.mode);143 created.return = returnFiber;144 return created;145 }146 // å¤çå
ç´ èç¹147 if (typeof newChild === 'object' && newChild !== null) {148 if (newChild.$$typeof === REACT_ELEMENT_TYPE) {149 const created = createFiberFromElement(newChild, returnFiber.mode);150 created.ref = coerceRef(returnFiber, null, newChild);151 created.return = returnFiber;152 return created;153 }154 }155 return null;156}157function createFiberFromText(content, mode) {158 const fiber = createFiber(HostText, content, null);159 return fiber;160}161function createFiberFromElement(element, mode) {162 let owner = null;163 const type = element.type;164 const key = element.key;165 const pendingProps = element.props;166 const fiber = createFiberFromTypeAndProps(167 type,168 key,169 pendingProps,170 owner,171 mode172 );173 return fiber;174}175function coerceRef(returnFiber, current, element) {176 return element.ref;177}178// æ°èç¹æ¯å
å«å¤ä¸ªèç¹çæ°ç»179function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren) {180 let resultingFirstChild = null;181 let previousNewFiber = null;182 let oldFiber = currentFirstChild;183 let lastPlacedIndex = 0;184 let newIdx = 0;185 let nextOldFiber = null;186 // 第ä¸æ¬¡éåï¼å¯¹æ¯åä½ç½®çèç¹æ¯å¦ä¸æ ·187 for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {188 if (oldFiber.index > newIdx) {189 nextOldFiber = oldFiber;190 oldFiber = null;191 } else {192 nextOldFiber = oldFiber.sibling;193 }194 // updateSlot æ¯å¯¹æ°èèç¹ï¼è¿ånull 表示æ§èç¹ä¸å¯å¤ç¨ï¼å¦åè¿åå¯å¤ç¨çèç¹ï¼å³æ§èç¹195 const newFiber = updateSlot(returnFiber, oldFiber, newChildren[newIdx]);196 if (newFiber === null) {197 if (oldFiber === null) {198 oldFiber = nextOldFiber;199 }200 break;201 }202 if (shouldTrackSideEffects) {203 if (oldFiber && newFiber.alternate === null) {204 deleteChild(returnFiber, oldFiber);205 }206 }207 // ç»newFiberæ·»å flagsæ è¯208 lastPlaceIndex = placeChild(newFiber, lastPlacedIndex, newIdx);209 if (previousNewFiber === null) {210 resultingFirstChild = newFiber; // é¾è¡¨å¤´211 } else {212 previousNewFiber.sibling = newFiber;213 }214 previousNewFiber = newFiber;215 oldFiber = nextOldFiber;216 }217 // æ°èç¹å·²ç»å
¨é¨éåå®æ¯218 if (newIdx === newChildren.length) {219 // å é¤å©ä½çèç¹220 deleteRemainingChildren(returnFiber, oldFiber);221 return resultingFirstChild;222 }223 // èèç¹éåå®æ¯ï¼æ°èç¹ä¸å©ä¸çå为æ°å建ç224 if (oldFiber === null) {225 for (; newIdx < newChildren.length; newIdx++) {226 const newFiber = createChild(returnFiber, newChildren[newIdx], lanes);227 if (newFiber === null) {228 continue;229 }230 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);231 if (previousNewFiber === null) {232 resultingFirstChild = newFiber;233 } else {234 previousNewFiber.sibling = newFiber;235 }236 previousNewFiber = newFiber;237 }238 return resultingFirstChild;239 }240 // å¤çéè¦ç§»å¨èç¹çæ
åµï¼å³æ§èç¹ä¸åå¨å¯å¤ç¨ï¼ä½ç½®ååçèç¹241 const existingChildren = mapRemainingChildren(returnFiber, oldFiber);242 // å¤çå©ä½çæ°èç¹243 for (; newIdx < newChildren.length; newIdx++) {244 const newFiber = updateFromMap(245 existingChildren,246 returnFiber,247 newIdx,248 newChildren[newIndex]249 );250 if (newFiber !== null) {251 if (shouldTrackSideEffects) {252 if (newFiber.alternate !== null) {253 // newFiberå¤ç¨çæ§èç¹å·²ç»è¢«å¤ç¨äºï¼ä»existingChildrenå é¤æ¤èç¹254 existingChildren.delete(255 newFiber.key === null ? newIdx : newFiber.key256 );257 }258 }259 }260 // ä¿®æ¹lastPlacedIndexçå¼ï¼ç»newFiberæ·»å flagsæ è¯261 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);262 if (previousNewFiber === null) {263 resultingFirstChild = newFiber;264 } else {265 previousNewFiber.sibling = newFiber;266 }267 previousNewFiber = newFiber;268 }269 if (shouldTrackSideEffects) {270 // æ§èç¹ä¸å¯å¤ç¨çèç¹é½å·²ç»è¢«å é¤äºï¼å©ä½çæ§èç¹é½æ¯ä¸è½è¢«å¤ç¨çï¼éè¦å é¤271 existingChildren.forEach((child) => deleteChild(returnFiber, child));272 }273 return resultingFirstChild; // é¾è¡¨å¤´èç¹274}275function placeSingleChild(fiber) {...
3dfull.js
Source:3dfull.js
1var FCAPP = FCAPP || {};2FCAPP.HOUSE = FCAPP.HOUSE || {};3FCAPP.HOUSE.FULL3D = {4 CONFIG: {},5 RUNTIME: {},6 init: function() {7 var R = FULL3D.RUNTIME;8 FULL3D.initElements(R);9 FULL3D.initEvents(R);10 R.support360 = FULL3D.check360Support();11 FULL3D.loadData();12 window.shareData = window.shareData || {};13 window.shareData.linkKeep = '/Webestate/Housedata/pid/'+PID+'/wechatid/'+WECHATID;14 window.shareData.link = window.shareData.linkKeep;15 var id = '';16 if (window.gQuery && gQuery.id) {17 id = gQuery.id;18 window.shareData.link += '&id=' + id;19 window.shareData.linkKeep += '&id=' + id;20 }21 if (window.gQuery && gQuery.houseid) {22 window.shareData.link += '&houseid=' + gQuery.houseid;23 window.shareData.linkKeep += '&houseid=' + gQuery.houseid;24 }25 FCAPP.Common.loadShareData(id);26 FCAPP.Common.hideToolbar();27 },28 go3D: function(url) {29 var t = new Date();30 FCAPP.Common.jumpTo('/Webestate/Picfullshow'+url);31 },32 resizeLayout: function() {33 var R = FULL3D.RUNTIME;34 R.w = document.documentElement.clientWidth;35 R.h = document.documentElement.clientHeight;36 R.whRadio = window.innerWidth > window.innerHeight ? 2 : 1;37 R.mH = R.h - 93;38 if (R.mH < 150) {39 R.mH = 150;40 }41 R.picContainer.css({42 width: R.w + 'px',43 height: R.h + 'px'44 });45 if (R.bgImg) {46 FULL3D.renderBgImg(R.bgImg);47 }48 if (R.linkNums) {49 FULL3D.centerLinks(R);50 }51 },52 centerLinks: function(R) {53 var obj = {54 'min-height': '150px',55 'overflow-y': 'scroll',56 'max-height': R.mH + 'px'57 },58 h = 150,59 w = 20;60 FULL3D.getLW(R);61 w = Math.floor(R.sizes[0].lw / 2);62 if (!R.placeChild) {63 R.placeChild = $('#placeLink ul');64 }65 if (R.sizes.length > 1) {66 var th = 36 * R.sizes.length;67 for (var i = 0,68 il = R.sizes.length; i < il; i++) {69 th += R.sizes[i].lh * 57;70 }71 h = th + 72;72 } else {73 h = R.sizes[0].lh * 57 + 15;74 }75 if (h < 150) {76 h = 150;77 }78 if (h > R.mH) {79 obj['margin-bottom'] = '20px';80 obj['margin-top'] = '20px';81 obj['padding-top'] = '0px';82 obj['height'] = R.mH + 'px';83 } else {84 obj['height'] = h + 'px';85 obj['padding-top'] = Math.floor((R.h - h - 15) / 2) + 'px';86 obj['margin-top'] = '0px';87 }88 R.placeChild.css({89 'margin-left': w + 'px'90 });91 R.placeHold.css(obj);92 obj.h = R.h;93 },94 initElements: function(R) {95 if (!R.placeLink) {96 R.placeLink = $('#placeLink');97 R.placeHold = R.placeLink.parent();98 R.currPlace = $('#currPlace');99 R.currHold = R.currPlace.parent();100 R.frame = $('#full3d');101 R.picContainer = $('#full3dDiv');102 R.popMask = $('#popMask');103 R.closeBtn = $('#closeBtn');104 R.template = FCAPP.Common.escTpl($('#template').html());105 R.rowLinks = [];106 }107 },108 trigResize: function() {109 var R = FULL3D.RUNTIME,110 w = document.documentElement.clientWidth,111 h = document.documentElement.clientHeight;112 if (w != R.w || h != R.h) {113 FULL3D.resizeLayout();114 }115 },116 initEvents: function(R) {117 if (!R.binded) {118 R.binded = true;119 R.closeBtn.click(FULL3D.back2List);120 $(window).on("orientationchange", FULL3D.resizeLayout);121 }122 setInterval(FULL3D.trigResize, 300);123 },124 back2List: function() {125 if (/Mac OS/i.test(navigator.userAgent)) {126 history.back();127 } else {128 var url = 'house.html' + location.search.replace('&houseid=' + gQuery.houseid, '');129 location.href = url;130 WeixinJSBridge.invoke('closeWindow');131 }132 },133 showNotSupport: function() {134 FCAPP.Common.msg(true, {135 msg: 'ä½ çææºçæ¬è¿ä½ï¼å级è³4.0以ä¸å¯æ£å¸¸ä½¿ç¨'136 });137 },138 switchLinks: function() {139 var R = FULL3D.RUNTIME;140 FCAPP.Common.hideLoading();141 },142 hideLoading: function() {143 var R = FULL3D.RUNTIME;144 R.popMask.hide();145 FCAPP.Common.hideLoading();146 },147 loadData: function() {148 window.showRooms = FULL3D.showRooms;149 var datafile = window.gQuery && gQuery.id ? gQuery.id + '.': '',150 dt = new Date();151 datafile = datafile.replace(/[<>\'\"\/\\&#\?\s\r\n]+/gi, '');152 datafile += 'rooms.js?';153 $.ajax({154 //url: 'http://trade.qq.com/fangchan/static/' + datafile + dt.getDate() + dt.getHours(),155 url: '/Webestate/Housedata/pid/'+PID+'/wechatid/'+WECHATID,156 dataType: 'jsonp',157 error: function() {158 FCAPP.Common.msg(true, {159 msg: 'æ æçæ·åï¼'160 });161 }162 });163 },164 renderBgImg: function(img) {165 var R = FULL3D.RUNTIME,166 pw = R.bgImgW ? R.bgImgW: img.width,167 ph = R.bgImgH ? R.bgImgH: img.height,168 sw = R.w,169 sh = R.h,170 fw = 0,171 fh = 0,172 style = '';173 if (!R.bgImgW) {174 R.bgImgW = pw;175 R.bgImgH = ph;176 }177 if (ph / pw > sh / sw) {178 fw = sw;179 fh = Math.floor(ph * sw / pw);180 style = 'margin:' + Math.floor((sh - fh) / 2) + "px 0;";181 } else {182 fh = sh;183 fw = Math.floor(pw * sh / ph);184 style = 'margin:0 ' + Math.floor((sw - fw) / 2) + "px;";185 }186 R.OP = 0;187 img.width = fw;188 img.height = fh;189 img.style.cssText = style;190 R.bgImg = img;191 if (!R.opacity) {192 R.opacity = 0;193 R.bgInterval = setInterval(FULL3D.alphaBg, 12);194 }195 },196 alphaBg: function() {197 var R = FULL3D.RUNTIME;198 R.opacity += 2;199 if (R.opacity > 100) {200 clearInterval(R.bgInterval);201 FCAPP.Common.hideLoading();202 FULL3D.showFloat();203 delete R.bgInterval;204 R.bgImg.style.opacity = 1;205 } else {206 R.bgImg.style.opacity = R.opacity / 100;207 }208 },209 showRooms: function(data) {210 var R = FULL3D.RUNTIME,211 rooms = [],212 name = false,213 full3d = [];214 if (data.rooms) {215 rooms = data.rooms;216 for (var i = 0, il = rooms.length; i < il; i++) {217 if (rooms[i].id == gQuery.houseid && rooms[i].full3d) {218 full3d = rooms[i].full3d;219 R.currPlace.html((rooms[i].desc || '') + '-' + rooms[i].name);220 window.shareData.desc = 'æ·åã360度å
¨æ¯ã-' + rooms[i].desc + rooms[i].name;221 window.shareData.descKeep = 'æ·åã360度å
¨æ¯ã-' + rooms[i].desc + rooms[i].name;222 break;223 }224 }225 if (full3d.length > 0) {226 FCAPP.Common.loadImg(full3d[0].bimg, 'bgImg', FULL3D.renderBgImg);227 R.full3d = full3d;228 return;229 }230 }231 FCAPP.Common.hideLoading();232 FCAPP.Common.msg(true, {233 msg: 'é误æ·å'234 });235 },236 alphaList: function() {237 var R = FULL3D.RUNTIME,238 content = '';239 R.hold += 2;240 if (R.hold > 100) {241 clearInterval(R.holdInterval);242 delete R.holdInterval;243 }244 R.placeHold.css({245 opacity: R.hold / 100246 });247 R.placeLink.css({248 opacity: R.hold / 100249 });250 R.currHold.css({251 opacity: R.hold / 100252 });253 },254 showFloat: function() {255 var R = FULL3D.RUNTIME,256 full3d = R.full3d,257 content = '',258 maxLinks = 0;259 for (var i = 0,260 il = full3d.length; i < il; i++) {261 R.rowLinks[i] = full3d[i].list.length;262 if (R.rowLinks[i] > maxLinks) {263 maxLinks = R.rowLinks[i];264 }265 }266 content = $.template(R.template, {267 data: full3d,268 f3d: R.support360269 });270 R.placeLink.html(content);271 R.linkNums = maxLinks;272 FULL3D.getLW(R);273 FULL3D.resizeLayout();274 if (!R.hold) {275 R.hold = 0;276 R.holdInterval = setInterval(FULL3D.alphaList, 10);277 }278 },279 getLW: function(R) {280 R.w = document.documentElement.clientWidth;281 R.h = document.documentElement.clientHeight;282 R.sizes = [];283 var links = R.rowLinks,284 uWidth = Math.floor(R.w * 0.95) - 20,285 ln = 0,286 lw = 0,287 lh = 0,288 cnt = 0;289 lw = uWidth - Math.floor(uWidth / 90) * 90 + 30;290 for (var i = 0,291 il = links.length; i < il; i++) {292 ln = links[i];293 cnt = Math.floor(uWidth / 90);294 lh = Math.ceil(ln / cnt);295 R.sizes[i] = {296 lw: lw,297 lh: lh298 };299 }300 },301 hasWebGL: function() {302 var h;303 if (h = !!window.WebGLRenderingContext) try {304 var y = document.createElement("canvas");305 y.width = 100;306 y.height = 100;307 var k = y.getContext("webgl");308 k || (k = y.getContext("experimental-webgl"));309 h = k ? true: false310 } catch(l) {311 h = false312 }313 return h314 },315 hasHtml5Css3D: function() {316 var h = "perspective",317 y = ["Webkit", "Moz", "O", "ms", "Ms"],318 k;319 k = false;320 for (k = 0; k < y.length; k++)"undefined" !== typeof document.documentElement.style[y[k] + "Perspective"] && (h = y[k] + "Perspective");321 "undefined" !== typeof document.documentElement.style[h] ? "webkitPerspective" in document.documentElement.style ? (h = document.createElement("style"), y = document.createElement("div"), k = document.head || document.getElementsByTagName("head")[0], h.textContent = "@media (-webkit-transform-3d) {#ggswhtml5{height:5px}}", k.appendChild(h), y.id = "ggswhtml5", document.documentElement.appendChild(y), k = 5 === y.offsetHeight, h.parentNode.removeChild(h), y.parentNode.removeChild(y)) : k = true: k = false;322 return k323 },324 hasFlash: function() {325 var f = navigator.plugins && navigator.plugins['Shockwave Flash'],326 b = typeof(f) != 'undefined';327 if (b && f.description) {328 b = f.description.replace(/[^\d\.]+/gi, '');329 b = parseFloat(b) > 9.0;330 }331 return b;332 },333 check360Support: function() {334 return FULL3D.hasHtml5Css3D() || FULL3D.hasWebGL() || FULL3D.hasFlash();335 }336};337var FULL3D = FCAPP.HOUSE.FULL3D;...
grid.js
Source:grid.js
...76 e.preventDefault();77 this.delegatedTouchPlaceChild(e);78 });79 const place = gridsection.find('div');80 place.on('mousedown', e => this.placeChild(e, 's'));81 place.on('mouseup', e => this.placeChild(e, 'e'));82 return gridsection;83 },84 gridCanvasChildren(store) {85 const gridchild = $(`<section86 class="${pfx}grid ${pfx}gridchild"87 style="grid-template-columns:${store.getters.colTemplate(store.state)};grid-template-rows:${store.getters.rowTemplate(store.state)}; 88 grid-column-gap:${store.state.columngap + 'px'};grid-row-gap:${store.state.rowgap + 'px'}"89 >90 ${store.state.childarea.map((child, i) => `<div91 class="child${i}"92 style="grid-area: ${child}"93 >94 <button data-key="${i}">×</button>95 </div>`).join("")}96 </section>`);97 const del = gridchild.find('button');98 del.on('click', e => this.removeChild(e));99 return gridchild;100 },101 render(cont, store) {102 if (!this.container?.length) {103 this.el = this.gridEl(store);104 this.container = $(cont);105 this.container.append(this.el);106 editor.on('styleManager:change:height run:smoothresize run:resize', () => {107 const st = editor.getSelected()?.get('store');108 st && editor.Grid.visible && editor.Grid.update(st);109 });110 }111 this.rendered = true;112 },113 getEl() {114 return this.el.get(0);115 },116 select(selected) {117 this.selected = selected;118 },119 update(store) {120 this.el = this.gridEl(store);121 $(`#${pfx}grid-main`).replaceWith(this.el);122 },123 updateRows(store) {124 $(`.${pfx}rowunits`).replaceWith(this.gridRowUnits(store));125 },126 updateCols(store) {127 const { width, height, top } = this.dimensions();128 $(`.${pfx}colunits`).replaceWith(this.gridRowUnits(store, width, height, top));129 },130 updateCanvas(store) {131 $(`.${pfx}gridcanvas`).replaceWith(this.gridCanvas(store));132 },133 updateChildren(store) {134 $(`.${pfx}gridchild`).replaceWith(this.gridCanvasChildren(store));135 },136 child: {},137 widthfull: `${pfx}widthfull`,138 widthhalf: `${pfx}widthhalf`,139 errors: { col: [], row: [] },140 visible: false,141 rendered: false,142 dimensions() {143 return (this.selected && editor.Canvas.getElementPos(this.selected.getEl())) || {144 width: 100,145 height: 100146 }147 },148 validateunit(e) {149 const unit = e.target.value;150 const i = e.target.getAttribute('data-key');151 const direction = e.target.getAttribute('data-direction');152 const check =153 /fr$/.test(unit) ||154 /px$/.test(unit) ||155 /%$/.test(unit) ||156 /em$/.test(unit) ||157 /rem$/.test(unit) ||158 /vw$/.test(unit) ||159 /vh$/.test(unit) ||160 /vmin$/.test(unit) ||161 /q$/.test(unit) ||162 /mm$/.test(unit) ||163 /cm$/.test(unit) ||164 /in$/.test(unit) ||165 /pt$/.test(unit) ||166 /pc$/.test(unit) ||167 /ex$/.test(unit) ||168 /ch$/.test(unit) ||169 /minmax/.test(unit) || ["auto", "min-content", "max-content"].includes(unit) ||170 parseInt(unit, 10) === 0; // allow 0 as a valid value without a unit171 if (!check) {172 this.errors[direction].push(i);173 } else {174 const store = this.selected.get('store');175 this.errors[direction].splice(this.errors[direction].indexOf(i), 1);176 if (direction === 'col') {177 store.state.colArr[i].unit = unit;178 this.selected.addStyle({179 'grid-template-columns': store.getters.colTemplate(store.state)180 });181 } else {182 store.state.rowArr[i].unit = unit;183 this.selected.addStyle({184 'grid-template-rows': store.getters.rowTemplate(store.state)185 });186 }187 this.update(store);188 }189 },190 delegatedTouchPlaceChild(ev) {191 const target = document.elementFromPoint(192 ev.changedTouches[0].clientX,193 ev.changedTouches[0].clientY194 );195 const startend = ev.type === "touchstart" ? "s" : "e";196 this.placeChild(target.dataset.id, startend);197 },198 placeChild(ev, startend) {199 const store = this.selected.get('store');200 const item = parseInt(ev.target.getAttribute('data-key')) + 1;201 //built an object first because I might use this for something else202 this.child[`${startend}row`] = Math.ceil(item / store.state.columns);203 this.child[`${startend}col`] =204 item - (this.child[`${startend}row`] - 1) * store.state.columns;205 //create the children css units as a string206 if (startend === "e") {207 // flip starts and ends if dragged in the opposite direction208 let [startRow, endRow] =209 this.child.srow <= this.child.erow ? [this.child.srow, this.child.erow] : [this.child.erow, this.child.srow];210 let [startCol, endCol] =211 this.child.scol <= this.child.ecol ? [this.child.scol, this.child.ecol] : [this.child.ecol, this.child.scol];212 let childstring = `${startRow} / ${startCol} / ${endRow +...
diff.js
Source:diff.js
...48 // need to delete the existing child.49 deleteChild(returnFiber, oldFiber);50 }51 }52 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);53 if (previousNewFiber === null) {54 resultingFirstChild = newFiber;55 } else {56 previousNewFiber.sibling = newFiber;57 }58 // å移59 previousNewFiber = newFiber;60 oldFiber = nextOldFiber;61 }62 // 第ä¸è½®æ°èç¹éåç»æ63 // 第ä¸ä¸ªæ
åµï¼æ°èç¹éåå®æ¯ï¼è¯´æå®æ¯åäº`pop`è¿æ ·çæä½ã64 // é£ä¹ç´æ¥ææ§èç¹çå©ä½èç¹ç»å é¤å°±å¯ä»¥äºã65 if (newIdx === newChildren.length) {66 // å¦æ第ä¸è½®éåå®äºï¼è¯´ææ°çèç¹è·å®äºï¼67 // å¦æè¿æå©ä¸çæ§èç¹æ²¡è·çï¼ç´æ¥å é¤68 // We've reached the end of the new children. We can delete the rest.69 deleteRemainingChildren(returnFiber, oldFiber);70 return resultingFirstChild;71 }72 // å¦æoldæ¯null73 // 第äºä¸ªæ
åµï¼èèç¹éåå®äºï¼è¯´æå®æ¯åäº`push`è¿æ ·çæä½ã74 // é£ä¹ç´æ¥å¾ªç¯å建å©ä¸çæ°èç¹å°±å¯ä»¥äºã75 if (oldFiber === null) {76 for (; newIdx < newChildren.length; newIdx++) {77 var _newFiber = createChild(78 returnFiber,79 newChildren[newIdx],80 lanes81 );82 if (_newFiber === null) {83 continue;84 }85 lastPlacedIndex = placeChild(_newFiber, lastPlacedIndex, newIdx);86 if (previousNewFiber === null) {87 resultingFirstChild = _newFiber;88 } else {89 previousNewFiber.sibling = _newFiber;90 }91 previousNewFiber = _newFiber;92 }93 return resultingFirstChild;94 } // Add all children to a key map for quick lookups.95 // 第ä¸ä¸ªæ
åµï¼æ°èèç¹é½æ²¡éåå®ï¼96 // ææå®è¦ä¹åäºæ¿æ¢æä½ï¼è¦ä¹å°±æ¯ç§»å¨äºé¡ºåºï¼97 // è¦ä¹å°±æ¯`unshift`æè
`shift`ä¹ç±»çæä½ã98 // é£ä¹æ们继ç»å¾ä¸ç99 // è¿ä¸ªmapRemainingChildrençä½ç¨ï¼100 // å°±æ¯ç»å©ä¸æ²¡è·å®çoldFiberåå
¥ä¸ä¸ªMapéåä¸101 // å¦æå®ækeyï¼å°±ç¨keyåkeyå¼ï¼å¦æ没æï¼å°±ç¨indexåkeyå¼102 var existingChildren = mapRemainingChildren(returnFiber, oldFiber);103 for (; newIdx < newChildren.length; newIdx++) {104 // è¿ä¸ªupdateFromMap类似äºä¸é¢çupdateSlot105 var _newFiber2 = updateFromMap(106 existingChildren,107 returnFiber,108 newIdx,109 newChildren[newIdx],110 lanes111 );112 if (_newFiber2 !== null) {113 if (shouldTrackSideEffects) {114 if (_newFiber2.alternate !== null) {115 // The new fiber is a work in progress, but if there exists a116 // current, that means that we reused the fiber. We need to delete117 // it from the child list so that we don't add it to the deletion118 // list.119 existingChildren.delete(120 _newFiber2.key === null ? newIdx : _newFiber2.key121 );122 }123 }124 lastPlacedIndex = placeChild(_newFiber2, lastPlacedIndex, newIdx);125 if (previousNewFiber === null) {126 resultingFirstChild = _newFiber2;127 } else {128 previousNewFiber.sibling = _newFiber2;129 }130 previousNewFiber = _newFiber2;131 }132 }133 if (shouldTrackSideEffects) {134 // Any existing children that weren't consumed above were deleted. We need135 // to add them to the deletion list.136 existingChildren.forEach(function(child) {137 return deleteChild(returnFiber, child);138 });...
children.js
Source:children.js
...104 oldDom,105 parentDom,106 );107 } else {108 oldDom = placeChild(109 parentDom,110 oldVNode,111 oldChildren,112 newDom,113 oldDom,114 );115 }116 }117 }118119 // 5. å¸è½½120 for (let i = oldChildren.length - 1; i >= 0; i--) {121 if (oldChildren[i]) {122 unmount(oldChildren[i], oldChildren[i]);123 }124 }125}126127export function unmount (vnode, parentVNode, skipRemove) {128 let r;129130 let dom;131 if (!skipRemove && typeof vnode.type != 'function') {132 skipRemove = (dom = vnode._dom) != null;133 }134135 // æ§è¡vNodeçcomponentWillUnmount136 if ((r = vnode._component) != null) {137 if (r.componentWillUnmount) {138 try {139 r.componentWillUnmount();140 } catch (e) {141 options._catchError(e, parentVNode);142 }143 }144 r._parentDom = null;145 }146147 // éå½æ§è¡åç»ä»¶çcomponentWillUnmount148 if ((r = vnode._children)) {149 for (let i = 0; i < r.length; i++) {150 if (r[i]) unmount(r[i], parentVNode, skipRemove);151 }152 }153154 // å¨domæ ä¸ç§»é¤oldChildren155 if (dom != null) removeNode(dom);156}157158function reorderChildren (childVNode, oldDom, parentDom) {159 for (let i = 0; i < childVNode._children.length; i++) {160 let vnode = childVNode._children[i];161 if (vnode) {162 vnode._parent = childVNode;163 if (typeof vnode.type == 'function') {164 oldDom = reorderChildren(vnode, oldDom, parentDom);165 } else {166 oldDom = placeChild(167 parentDom,168 vnode,169 childVNode._children,170 vnode._dom,171 oldDom172 );173 }174 }175 }176}177178function placeChild (179 parentDom,180 oldVNode,
...
ReactChildFiber.js
Source:ReactChildFiber.js
...37 stateNode: oldFiber.stateNode,38 flags:Update39 })40 41 lastPlacedIndex = placeChild(42 newFiber,43 lastPlacedIndex,44 newIndex,45 shouldTrackSideEffects46 )47 if(previouseNewFiber===null){48 reutrnFiber.child = newFiber49 }else{50 previouseNewFiber.sibling = newFiber51 }52 previouseNewFiber = newFiber53 oldFiber = nextOldFiber54 }55 // æ°childrenå·²ç»éåå®ï¼ å
¶ä»å ç¹æ§èç¹å é¤56 if(newChildren.length<=newIndex){57 deleteRemainingChildren(reutrnFiber, oldFiber)58 return59 }60 // oldFiber没äºï¼ newChildrenè¿æ61 if(!oldFiber){62 // å次渲æ63 for(; newIndex<newChildren.length; newIndex++){64 const newChild = newChildren[newIndex]65 if(newChild == null){66 continue67 }68 const newFiber = createFiber(newChild, reutrnFiber)69 70 lastPlacedIndex = placeChild(71 newFiber,72 lastPlacedIndex,73 newIndex,74 shouldTrackSideEffects75 )76 if(previouseNewFiber===null){77 reutrnFiber.child = newFiber78 }else{79 previouseNewFiber.sibling = newFiber80 }81 previouseNewFiber = newFiber82 }83 return84 }85 86 // 87 const existingChildren = mapRemainingChildren(oldFiber)88 for(; newIndex<newChildren.length;newIndex++){89 const newChild = newChildren[newIndex]90 if(newChild === null){91 continue92 }93 const newFiber = createFiber(newChild, reutrnFiber)94 lastPlacedIndex = placeChild(95 newFiber,96 lastPlacedIndex,97 newIndex,98 shouldTrackSideEffects99 )100 let matchedFiber = existingChildren.get(newFiber.key||newFiber.index)101 if(matchedFiber){102 existingChildren.delete(newFiber.key||newFiber.index)103 Object.assign(newFiber,{104 alternate: matchedFiber,105 stateNode:matchedFiber.stateNode,106 flags:Update,107 })108 }109 if(previouseNewFiber === null){110 reutrnFiber = newFiber111 }else{112 previouseNewFiber.sibling = newFiber113 }114 previouseNewFiber = newFiber115 }116 if(shouldTrackSideEffects){117 existingChildren.forEach(each=>deleteChild(reutrnFiber,each))118 }119}120// å¤æåä¸ä¸ªèç¹ï¼æç¨121// è°ç¨åææ¯åä¸ä¸ªå±çº§ä¸122function sameNode(a,b) {123 return !!(a&&b&&a.key===b.key&&a.type===b.type)124}125function deleteChild(reutrnFiber, childToDelete) {126 childToDelete.flags = Deletion127 if(reutrnFiber.deletions){128 reutrnFiber.deletions.push(childToDelete)129 }else{130 reutrnFiber.deletions = [childToDelete]131 }132}133// å é¤æ个èç¹çææåç»å
å¼èç¹134function deleteRemainingChildren(reutrnFiber, currentFirstChild){135 let childToDelete = currentFirstChild;136 while(childToDelete){137 deleteChild(reutrnFiber, childToDelete)138 childToDelete = childToDelete.sibling139 }140}141function placeChild(142 newFiber,143 lastPlacedIndex,144 newIndex,145 shouldTrackSideEffects // æ¯ä¸æ¯å次渲æ146) {147 newFiber.index = newIndex148 if(!shouldTrackSideEffects){149 return lastPlacedIndex150 }151 const current = newFiber.alternate152 if(current){153 const oldIndex = current.index154 if(oldIndex < lastPlacedIndex){155 newFiber.flags = Placement...
index.js
Source:index.js
...57 setRowArr(58 rowArr.map((i, idx) => (idx === index ? { unit: event.target.value } : i))59 );60 }61 function placeChild(item, startend) {62 setStartEnd(startend);63 let row = Math.ceil(item / columns);64 let column = item - (row - 1) * columns;65 setChild({ ...child, [`${startend}row`]: row, [`${startend}col`]: column });66 }67 function deleteChild(area) {68 let newArea = childArea.filter((c) => c !== area);69 setChildArea(newArea);70 }71 useEffect(() => {72 if (Object.values(child).length && startEnd === "e") {73 let [startrow, endrow] =74 child.srow <= child.erow75 ? [child.srow, child.erow]76 : [child.erow, child.srow];77 let [startcol, endcol] =78 child.scol <= child.ecol79 ? [child.scol, child.ecol]80 : [child.ecol, child.scol];81 let area = `${startrow} / ${startcol} / ${endrow + 1}/ ${endcol + 1}`;82 setChildArea([...childArea, area]);83 }84 }, [child]);85 return (86 <AppGridMain>87 <AppGridColumnSizeSelector88 rowGap={rowGap}89 columnGap={columnGap}90 colTemplate={columnTemplate}91 widthfull={columns > 8}92 >93 {colArr.map((col, index) => (94 <div key={index}>95 <input96 defaultValue={col.unit}97 type="text"98 onBlur={(event) => colSizeChangeHandler(index, event)}99 />100 {errors.col.indexOf(index) !== -1 ? (101 <StyledError>Must use real CSS unit.</StyledError>102 ) : null}103 </div>104 ))}105 </AppGridColumnSizeSelector>106 <AppGridRowSizeSelector107 rowTemplate={rowTemplate}108 rowGap={rowGap}109 columnGap={columnGap}110 >111 {rowArr.map((row, index) => (112 <div key={index}>113 <input114 defaultValue={row.unit}115 type="text"116 onBlur={(event) => rowSizeChangeHandler(index, event)}117 />118 </div>119 ))}120 </AppGridRowSizeSelector>121 <AppGridContainer>122 <Grid123 colTemplate={columnTemplate}124 rowTemplate={rowTemplate}125 rowGap={rowGap}126 columnGap={columnGap}127 >128 {divs.map((i, idx) => (129 <div130 onMouseUp={() => placeChild(idx + 1, "e")}131 onMouseDown={() => placeChild(idx + 1, "s")}132 className={`box${idx}`}133 key={idx}134 ></div>135 ))}136 </Grid>137 <GridChildrenArea138 colTemplate={columnTemplate}139 rowTemplate={rowTemplate}140 columnGap={columnGap}141 rowGap={rowGap}142 >143 {childArea.map((i, idx) => (144 <GridChildren childArea={i} className={`child${idx}`} key={idx}>145 <button onClick={() => deleteChild(i)}>×</button>...
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 const element = await page.$('text=Get started');7 await page.placeChild(element, { x: 0, y: 0 });8 await page.screenshot({ path: `example.png` });9 await browser.close();10})();
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 const elementHandle = await page.$('input[name="q"]');7 await elementHandle.placeChild('Hello World');8 await page.screenshot({ path: 'example.png' });9 await browser.close();10})();
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 const searchBox = await page.$('input[title="Search"]');7 const searchButton = await page.$('input[value="Google Search"]');8 await page.placeChild(searchBox, searchButton);9 await page.screenshot({ path: 'google.png' });10 await browser.close();11})();12module.exports = {13 use: {14 },15};
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 const element = await page.$('input');7 await page.evaluate(element => element.focus(), element);8 await page.keyboard.press('a');9 await page.keyboard.press('b');10 await page.keyboard.press('c');11 await page.keyboard.press('d');12 await page.keyboard.press('e');13 await page.keyboard.press('f');14 await page.keyboard.press('g');15 await page.keyboard.press('h');16 await page.keyboard.press('i');17 await page.keyboard.press('j');18 await page.keyboard.press('k');19 await page.keyboard.press('l');20 await page.keyboard.press('m');21 await page.keyboard.press('n');22 await page.keyboard.press('o');23 await page.keyboard.press('p');24 await page.keyboard.press('q');25 await page.keyboard.press('r');26 await page.keyboard.press('s');27 await page.keyboard.press('t');28 await page.keyboard.press('u');29 await page.keyboard.press('v');30 await page.keyboard.press('w');31 await page.keyboard.press('x');32 await page.keyboard.press('y');33 await page.keyboard.press('z');
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 const elementHandle = await page.$('body');7 await elementHandle.evaluate(element => {8 const div = document.createElement('div');9 div.textContent = 'Hello, World!';10 element.appendChild(div);11 });12 await browser.close();13})();14const { chromium } = require('playwright');15(async () => {16 const browser = await chromium.launch();17 const context = await browser.newContext();18 const page = await context.newPage();19 const elementHandle = await page.$('body');20 await elementHandle.evaluate(element => {21 const div = document.createElement('div');22 div.textContent = 'Hello, World!';23 element.appendChild(div);24 });25 await browser.close();26})();27const { chromium } = require('playwright');28(async () => {29 const browser = await chromium.launch();30 const context = await browser.newContext();31 const page = await context.newPage();32 const elementHandle = await page.$('body');33 await elementHandle.evaluate(element => {34 const div = document.createElement('div');35 div.textContent = 'Hello, World!';36 element.appendChild(div);37 });38 await browser.close();39})();40const { chromium } = require('playwright');41(async () => {42 const browser = await chromium.launch();43 const context = await browser.newContext();44 const page = await context.newPage();45 const elementHandle = await page.$('body');46 await elementHandle.evaluate(element => {47 const div = document.createElement('div');48 div.textContent = 'Hello, World!';49 element.appendChild(div);50 });51 await browser.close();52})();53const { chromium } = require('playwright');54(async () => {55 const browser = await chromium.launch();56 const context = await browser.newContext();57 const page = await context.newPage();58 const elementHandle = await page.$('body');59 await elementHandle.evaluate(element
Using AI Code Generation
1const { chromium } = require('playwright');2const { placeChild } = require('playwright/lib/server/browserContext');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 popup = await context.newPage();9 await placeChild(page, popup, element);10 await popup.waitForSelector('text=API');11})();12import { Page } from './page';13import { ElementHandle } from './dom';14import { assert } from '../../utils/utils';15import { ChannelOwner } from './channelOwner';16export async function placeChild(17) {18 assert(parent instanceof Page || parent instanceof ElementHandle);19 assert(child instanceof Page);20 assert(target instanceof ElementHandle);21 const parentFrame = parent instanceof Page ? parent.mainFrame() : parent._frame;22 const childFrame = child.mainFrame();23 const info = await childFrame._page._delegate.placeChild(24 );25 await childFrame._initialize(info);26}27import { Frame } from './frame';28import { ElementHandle } from './dom';29import { assert } from '../../utils/utils';30import { ChannelOwner } from './channelOwner';31export async function placeChild(32) {33 assert(parent instanceof Frame);34 assert(child instanceof Frame);35 assert(target instanceof ElementHandle);36 const info = await parent._page._delegate.placeChild(37 );38 await child._initialize(info);39}40import { PageDelegate } from '../page';41import { Frame } from '../frame';42import { ElementHandle } from '../dom';43import { assert } from '../../../utils/utils';44import { ChannelOwner } from '../channelOwner';45export async function placeChild(
Using AI Code Generation
1const {chromium} = require('playwright');2const {placeChild} = require('playwright/lib/server/chromium/crBrowser');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 const child = await page.context().newPage();7 await placeChild(page, child);8})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 const elementHandle = await page.$('text=Get started');6 await elementHandle.placeChild('text=Docs', 'afterend');7 await page.screenshot({ path: 'element-placement.png' });8 await browser.close();9})();
Using AI Code Generation
1const page = await browser.newPage();2await page.setContent('<div id="container"></div>');3const elementHandle = await page.$('#container');4const { placeChild } = require('playwright/lib/internal/protocol');5await placeChild({ element: elementHandle, child: { type: 'node', node: 'hello' }, position: 'afterbegin' });6const page = await browser.newPage();7await page.setContent('<input type="file" name="fileUpload" />');8const elementHandle = await page.$('input[type="file"]');9const { setFileInputFiles } = require('playwright/lib/internal/protocol');10await setFileInputFiles({ element: elementHandle, files: ['test.png'] });11const page = await browser.newPage();12await page.setContent('<input type="file" name="fileUpload" />');13const elementHandle = await page.$('input[type="file"]');14const { setFileInputFiles } = require('playwright/lib/internal/protocol');15await setFileInputFiles({ element: elementHandle, files: ['test.png'] });16const page = await browser.newPage();17await page.setContent('<input type="file" name="fileUpload" />');18const elementHandle = await page.$('input[type="file"]');19const { setFileInputFiles } = require('playwright/lib/internal/protocol');20await setFileInputFiles({ element: elementHandle, files: ['test.png'] });21const page = await browser.newPage();22await page.setContent('<input type="file" name="fileUpload" />');23const elementHandle = await page.$('input[type="file"]');24const { setFileInputFiles } = require('playwright/lib/internal/protocol');25await setFileInputFiles({ element: elementHandle, files: ['test.png'] });26const page = await browser.newPage();27await page.setContent('<input type="file" name="fileUpload" />');28const elementHandle = await page.$('input[type="file"]');29const { setFileInputFiles } = require('playwright/lib/internal/protocol');30await setFileInputFiles({
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.evaluate(element => element.style.border = '2px solid red', elementHandle);7 await page.placeChild(elementHandle, 0, 0);8 await page.screenshot({ path: 'example.png' });9 await browser.close();10})();11const { chromium } = require('playwright');12(async () => {13 const browser = await chromium.launch();14 const context = await browser.newContext();15 const page = await context.newPage();16 await page.evaluate(element => element.style.border = '2px solid red', elementHandle);17 await page.placeChild(elementHandle, 0, 0);18 await page.screenshot({ path: 'example.png' });19 await browser.close();20})();21const { chromium } = require('playwright');22(async () => {23 const browser = await chromium.launch();24 const context = await browser.newContext();25 const page = await context.newPage();26 await page.evaluate(element => element.style.border = '2px solid red', elementHandle);27 await page.placeChild(elementHandle, 0, 0);28 await page.screenshot({ path: 'example.png' });29 await browser.close();30})();31const { chromium } = require('playwright');32(async () => {
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?
