Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! Join TestMu Conference

How to use highlightedElement method in storybook-root

Best JavaScript code snippet using storybook-root

erase.service.ts

Source:erase.service.ts

1import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';2import { ToolPropRect } from 'src/app/classes/tool-prop-rect';3import { RECT } from '../enum';4@Injectable({5  providedIn: 'root'6})7export class EraseService {8  private renderer: Renderer2;9  private parent: HTMLElement;10  eraserSize: number;11  private squareSVGCreated: boolean;12  private root: SVGSVGElement | null;13  private mouseDownBool: boolean;14  private highlightedElement: SVGElement;15  private previousColor: string;16  private previousStrokeWidth: string;17  private firstItemHighlighted: boolean;18  // tslint:disable-next-line: no-any19  private nodes: any;20  private intersectionFound: boolean;21  private node: number;22  // All attibutes of the svg path23  prop: ToolPropRect;24  constructor(renderFactory: RendererFactory2) {25    this.renderer = renderFactory.createRenderer(null, null);26    this.prop = new ToolPropRect();27    this.squareSVGCreated = false;28    this.mouseDownBool = false;29    this.previousStrokeWidth = '2';30    this.firstItemHighlighted = false;31   }32  mouseDown(event: MouseEvent): void {33    this.mouseDownBool = true;34    this.detectAndDeleteIntersection();35  }36  setParent(event: MouseEvent): void {37    if (String((event.target as HTMLElement).nodeName) !== 'svg') {38      this.parent = (event.target as HTMLElement).parentNode as HTMLElement;39    } else {40      this.parent = event.target as HTMLElement;41    }42  }43  mouseMove(event: MouseEvent): void {44  this.updateSquare(event);45  this.detectAndHighlight();46  if (this.mouseDownBool) {47    this.detectAndDeleteIntersection();48  }49  }50  mouseLeave(): void {51    this.renderer.removeChild(this.parent, this.prop.element);52    this.squareSVGCreated = false;53  }54  mouseClick(event: MouseEvent): void {55    this.detectAndDeleteIntersection();56  }57  mouseUp(event: MouseEvent): void {58    this.mouseDownBool = false;59  }60  updateSquare(event: MouseEvent): void {61    this.setParent(event);62    this.prop.xTop = event.offsetX - this.eraserSize / 2;63    this.prop.yTop = event.offsetY - this.eraserSize / 2;64    if (!this.squareSVGCreated) {65      this.prop.element = this.renderer.createElement(RECT.ELEMENT, RECT.LINK);66      this.renderer.appendChild(this.parent, this.prop.element);67      this.squareSVGCreated = true;68    }69    this.renderer.setAttribute(this.prop.element, RECT.X, this.prop.xTop.toString());70    this.renderer.setAttribute(this.prop.element, RECT.Y, this.prop.yTop.toString());71    this.prop.height = this.eraserSize;72    this.prop.width = this.eraserSize;73    this.renderer.setAttribute(this.prop.element, RECT.HEIGHT, (this.eraserSize).toString());74    this.renderer.setAttribute(this.prop.element, RECT.WIDTH, (this.eraserSize).toString());75    this.renderer.setAttribute(this.prop.element, RECT.FILL, 'white');76    this.renderer.setAttribute(this.prop.element, RECT.STROKE_WIDTH, '3');77    this.renderer.setAttribute(this.prop.element, RECT.STROKE, 'rgb(0,0,0)');78  }79  DoBoxesIntersect(a: DOMRect , b: DOMRect): boolean {80    return (Math.abs(a.x - b.x) * 2 < (a.width + b.width)) &&81           (Math.abs(a.y - b.y) * 2 < (a.height + b.height));82  }83  detectAndHighlight(): void {84    // trouve intersection de l'efface et un element svg85    this.intersectionFound = false;86    this.root = this.returnOwnerSVGElement();87    if (this.root) {88      this.nodes = this.root.getIntersectionList(this.root.getBBox(), this.root);89      this.node  = this.nodes.length + 1;90      this.findIntersectionElement();91      // Enelve la mise en evidence si le node n'est plus en intersection avec l'efface92      this.removeHighlight();93      this.highlightElement();94    }95    }96  removeHighlight(): void {97    if (((this.node === this.nodes.length) && this.firstItemHighlighted)  || ((this.highlightedElement !== this.nodes[this.node])98      && this.firstItemHighlighted)) {99        if (this.highlightedElement.parentNode) {100          if (this.highlightedElement.parentNode.nodeName === 'g') {101            if (this.highlightedElement.localName === 'circle') {102              this.renderer.setAttribute(this.highlightedElement.parentNode, 'fill', this.previousColor);103            }104            if (this.highlightedElement.localName === 'path') {105              console.log(this.highlightedElement.parentNode);106              this.renderer.setAttribute(this.highlightedElement.parentNode, 'stroke', this.previousColor);107            }108          } else {109            // tslint:disable-next-line: prefer-switch110            if ( this.highlightedElement.localName === 'circle' ) {111              this.renderer.setAttribute(this.highlightedElement, 'fill', this.previousColor);112            } else if (this.highlightedElement.localName === 'polyline') {113              this.renderer.setAttribute(this.highlightedElement, 'stroke', this.previousColor);114            // tslint:disable-next-line: prefer-switch115            } else if (this.highlightedElement.localName === 'path') {116              this.renderer.setAttribute(this.highlightedElement, 'stroke', this.previousColor);117            } else if (this.highlightedElement.localName === 'ellipse') {118              this.renderer.setAttribute(this.highlightedElement, 'stroke', this.previousColor);119              this.renderer.setAttribute(this.highlightedElement, RECT.STROKE_WIDTH, this.previousStrokeWidth);120            } else if (this.highlightedElement.localName === 'polygon') {121              this.renderer.setAttribute(this.highlightedElement, 'stroke', this.previousColor);122              this.renderer.setAttribute(this.highlightedElement, RECT.STROKE_WIDTH, this.previousStrokeWidth);123            } else if (this.highlightedElement.localName === 'rect') {124              this.renderer.setAttribute(this.highlightedElement, 'stroke', this.previousColor);125              this.renderer.setAttribute(this.highlightedElement, RECT.STROKE_WIDTH, this.previousStrokeWidth);126            }127          }128        }129      }130  }131  highlightElement(): void {132    if (this.parent && this.nodes[this.node]) {133      if (this.getColor(this.nodes[this.node]) !== 'red') {134        this.highlightedElement = this.nodes[this.node];135        this.previousColor = this.getColor(this.nodes[this.node]);136        if (this.nodes[this.node].parentNode) {137          if (this.nodes[this.node].parentNode.localName === 'g' && this.nodes[this.node].localName === 'circle') {138            this.renderer.setAttribute((this.nodes[this.node].parentNode as SVGAElement), 'fill', 'red');139          } else if (this.nodes[this.node].parentNode.localName === 'g' && this.nodes[this.node].localName === 'path') {140            this.renderer.setAttribute((this.nodes[this.node].parentNode as SVGAElement), 'stroke', 'red');141          }  else if (this.nodes[this.node].localName === 'polyline') {142            this.renderer.setAttribute(this.nodes[this.node], RECT.STROKE_WIDTH, this.previousStrokeWidth);143            this.renderer.setAttribute(this.nodes[this.node], RECT.STROKE, 'red');144          } else if (this.nodes[this.node].parentNode.localName === 'svg') {145            this.renderer.setAttribute(this.nodes[this.node], RECT.STROKE_WIDTH, this.previousStrokeWidth);146            this.renderer.setAttribute(this.nodes[this.node], RECT.STROKE, 'red');147          }148        }149        if (!this.firstItemHighlighted) {150          this.firstItemHighlighted = true;151        }152      }153    }154  }155  findIntersectionElement(): void {156    for (let i = 0; i < this.nodes.length; i ++) {157      if (this.nodes[i] !== this.prop.element) {158        const eraserRect = this.prop.element.getBoundingClientRect() as DOMRect;159        const nodeRect = this.nodes[i].getBoundingClientRect() as DOMRect;160        this.intersectionFound = this.DoBoxesIntersect(eraserRect, nodeRect);161        if (this.intersectionFound) {162          this.node = i;163        }164      }165    }166  }167  getColor(element: SVGElement): string {168    let color = '';169    if (element.localName === 'rect') {170      color = element.getAttribute('stroke') as string;171      this.previousStrokeWidth = element.getAttribute('stroke-width') as string;172    }173    if (element.localName === 'path') {174      color = element.getAttribute('stroke') as string;175      this.previousStrokeWidth = element.getAttribute('stroke-width') as string;176    }177    if ((element.localName === 'circle') && (element.parentNode as HTMLElement).nodeName === 'g') {178      color = element.getAttribute('fill') as string;179      this.previousStrokeWidth = element.getAttribute('r') as string;180    }181    if (element.localName === 'ellipse') {182      color = element.getAttribute('stroke') as string;183      this.previousStrokeWidth = element.getAttribute('stroke-width') as string;184    }185    if (element.localName === 'polyline') {186      color = element.getAttribute('stroke') as string;187      this.previousStrokeWidth = element.getAttribute('stroke-width') as string;188    }189    if (element.localName === 'polygon') {190      color = element.getAttribute('stroke') as string;191      this.previousStrokeWidth = element.getAttribute('stroke-width') as string;192    }193    return color;194  }195  returnOwnerSVGElement(): SVGSVGElement | null {196    if (this.prop.element.ownerSVGElement) {197    return this.prop.element.ownerSVGElement as SVGSVGElement;198    } else {199      return null;200    }201  }202  deleteElement(): void {203    if (this.parent && this.nodes[this.node]) {204      if (this.nodes[this.node].localName === 'circle' && this.nodes[this.node].parentNode.localName === 'g') {205        this.renderer.removeChild(this.parent, this.nodes[this.node].parentNode);206      } else if (this.nodes[this.node].localName === 'path' && this.nodes[this.node].parentNode.localName === 'g') {207        this.renderer.removeChild(this.parent, this.nodes[this.node].parentNode);208      } else {209        this.renderer.removeChild(this.parent, this.nodes[this.node]);210      }211    }212  }213  detectAndDeleteIntersection(): void {214    this.root = this.returnOwnerSVGElement();215    if (this.root) {216    this.nodes = this.root.getIntersectionList(this.root.getBBox(), this.root);217    this.node = this.nodes.length;218    this.intersectionFound = false;219    this.findIntersectionElement();220    this.deleteElement();221    }222  }...

paperAnnotation.js

Source:paperAnnotation.js

1let menu = null;2let highlightMenu = null;3let menuVisible = false;4let highlightMenuVisible = false;5let selectedHighlighedId = null;6let sText = null;7let sElement = null;8let eText = null;9let eElement = null;10let highlighted = [];11let highlightedId = 1;12const toggleMenu = (command, target) => {13    console.log(command);14    menu.style.display = command === "show" ? "block" : "none";15    if (target == "menu") {16        document.querySelector("#highlight").style.display = "block";17        document.querySelector("#remove").style.display = "none";18    }19    else if (target == "highlightMenu") {20        document.querySelector("#highlight").style.display = "none";21        document.querySelector("#remove").style.display = "block";        22    }23    menuVisible = !menuVisible;24};25const setPosition = ({ top, left }, target) => {26    menu.style.left = `${left}px`;27    menu.style.top = `${top}px`;28    toggleMenu("show", target);29};30let selectionEndTimeout = null;31window.onload = function() {32    const pageContainer = document.querySelector("#page-container");33    const pageContainerWidth = pageContainer.getBoundingClientRect().width;34    pageContainer.scrollTo(pageContainerWidth/9, 0);35    menu = document.querySelector(".menu");36    highlightMenu = document.querySelector(".highlight-menu");37    document.onmousedown = function(e) {38        if(menuVisible) {39            toggleMenu("hide", "menu");40        }41    };42    $("#highlight").on('mousedown', function(e) {43        e.preventDefault();44        window.getSelection().empty();45        let nElement = sElement;46        const currentHighlightedId = highlightedId;47        while (nElement != eElement) {48            nElement.setAttribute('group', highlightedId);49            nElement.style.backgroundColor = "yellow";50            nElement.style.color = "black";51            nElement.oncontextmenu = function(e) {52                e.preventDefault();53                window.getSelection().empty();54    55                const origin = {56                    left: e.pageX,57                    top: e.pageY58                };59    60                setPosition(origin, "highlightMenu");61                selectedHighlighedId = currentHighlightedId;62            }63            nElement = nElement.nextElementSibling;64        }65        nElement.setAttribute('group', highlightedId);66        nElement.style.backgroundColor = "yellow";67        nElement.style.color = "black";68        69        nElement.oncontextmenu = function(e) {70            e.preventDefault();71            window.getSelection().empty();72            const origin = {73                left: e.pageX,74                top: e.pageY75            };76            setPosition(origin, "highlightMenu");77            selectedHighlighedId = currentHighlightedId;78        }79        let highlightedElements = document.querySelectorAll('div[group="' + currentHighlightedId + '"]');80        highlighted[currentHighlightedId] = highlightedElements;81        for (highlightedElement of highlightedElements) {82            highlightedElement.onmouseover = function(e) {83                for (tmp of highlightedElements) {84                    tmp.style.backgroundColor = "red";85                    tmp.style.color = "white";86                }87            }88            highlightedElement.onmouseout = function(e) {89                for (tmp of highlightedElements) {90                    tmp.style.backgroundColor = "yellow";91                    tmp.style.color = "black";92                }                93            }94        }95        highlightedId += 1;96        toggleMenu("hide", "menu");97    });98    $("#cancel").on('mousedown', function(e) {99        e.preventDefault();100        window.getSelection().empty();101        toggleMenu("hide", "menu");102    });103    $("#remove").on('mousedown', function(e) {104        e.preventDefault();105        window.getSelection().empty();106        let highlightedElements = document.querySelectorAll('div[group="' + selectedHighlighedId + '"]');107        console.log(highlightedElements);108        for (highlightedElement of highlightedElements) {109            let arr = highlightedElement.className.split(" ");110            arr.splice(arr.length-1, 1);111            highlightedElement.className = arr.join(" ");112            highlightedElement.style.backgroundColor = "white";113            highlightedElement.style.color = "black";114            highlightedElement.onmouseover = null;115            highlightedElement.onmouseout = null;116        }117        toggleMenu("hide", "highlightMenu");118    });119    document.onselectionchange = selectionChanged;120}121function selectionChanged(e) {122    console.log('sel changed');123    if (selectionEndTimeout) {124        clearTimeout(selectionEndTimeout);125    }126    selectionEndTimeout = setTimeout(function () {127        document.onmouseup = function(e) {128            if (document.getSelection().anchorNode) {129                range = document.getSelection().getRangeAt(0);130                sText = document.getSelection().anchorNode.data;131                sElement = document.getSelection().anchorNode.parentElement;132        133                eText = document.getSelection().extentNode.data;134                eElement = document.getSelection().extentNode.parentElement;135                if (range.toString().trim() != "") {136                    const origin = {137                        left: e.pageX,138                        top: e.pageY139                    };140                    141                    setPosition(origin, "menu");142                }143            }144        };145    }, 500);...

script.js

Source:script.js

1/*2 * Emoji cheat sheet3 */4$(document).ready(function() {5  try {6    if(document.flashtest && document.flashtest.PercentLoaded()>=0){7      // Flash was able to load the test swf and is working8      initZeroClipboard();9    } else {10      initJsClipboard();11    }12  } catch (e) {13    initJsClipboard();14  }15  function initZeroClipboard(){16    ZeroClipboard.config({17      forceHandCursor: true,18      hoverClass: "hover"19    });20    var clipboardclient = new ZeroClipboard();21    clipboardclient.on('ready', function( readyEvent ) {22      $('ul').on('mouseover', 'div', function() {23        try {24          clipboardclient.clip(this);25        } catch(e) { }26      });27      clipboardclient.on('copy', function(evt) {28        var clipboard = evt.clipboardData;29        clipboard.setData("text/plain", $(evt.target).text().trim());30      });31      clipboardclient.on('aftercopy', function(evt) {32        var highlightedElement = evt.target;33        $(highlightedElement).addClass('copied');34        setTimeout(function(){35          $(highlightedElement).removeClass('copied');36        },800);37        _gaq.push(['_trackEvent', 'Emojis', 'Copy', text]);38      });39    });40    clipboardclient.on( 'error', function(event) {41      ZeroClipboard.destroy();42      initJsClipboard();43    });44  }45  var jsClipboardSupported = true; // we can't check if this is true unless the user tries once46  function initJsClipboard() {47    $('ul').on('click', 'div', function() {48      try {49        if(jsClipboardSupported) {50          var selection = getSelection();51          selection.removeAllRanges();52          var range = document.createRange();53          range.selectNodeContents(this);54          selection.addRange(range);55          var highlightedElement = $(this);56          if(document.execCommand('copy')==true) { // this will silently fail on IE11 when access is denied57            $(highlightedElement).addClass('copied');58            _gaq.push(['_trackEvent', 'Emojis', 'Copy', $(this).text().trim()]);59            setTimeout(function(){60              $(highlightedElement).removeClass('copied');61            },800);62          } else {63            // copying was not successfull or denied by the user or browser preferences64            // see Firefox about:config "dom.allow_cut_copy"65            $(highlightedElement).addClass('clipboardError');66            setTimeout(function(){67              $(highlightedElement).removeClass('clipboardError');68            },6000);69            jsClipboardSupported = false;70          }71          selection.removeAllRanges();72        }73      } catch(e) { }74    });75  }76  function isElementMatching(element, needle) {77    var alternative = element.attr("data-alternative-name");78    return ($(element).text().toLowerCase().indexOf(needle) >= 0) ||79      (alternative != null && alternative.toLowerCase().indexOf(needle) >= 0);80  }81  function highlightElements(needle) {82    if (needle.length == 0) {83      highlightAll();84      return;85    }86    needle = needle.toLowerCase();87    $(".emojis li").each(function (index, el) {88      if (isElementMatching($('.name', el), needle)) {89        $(el).show();90      } else {91        $(el).hide();92      }93    });94  }95  function highlightAll() {96    $(".emojis li").show();97  }98  $("#header .search").keyup(function(e) {99    if (e.keyCode == 27) { // ESC100      $(this).val('').blur();101      highlightAll();102    }103  });104  $("#header .search").on("change paste keyup", function() {105    highlightElements($("#header .search").val());106  });107  $("#header .search").focus();108  var po = document.createElement('script');109  po.type = 'text/javascript';110  po.async = true;111  po.src = 'https://apis.google.com/js/plusone.js';112  var s = document.getElementsByTagName('script')[0];113  s.parentNode.insertBefore(po, s);114  var curAudio;115  var curAudioContainer;116  function play(e) {117    e.preventDefault();118    if (curAudio) {119      curAudio.pause();120      playStopped();121    }122    if ($(curAudioContainer).is(this)) {123      curAudioContainer = null;124    } else {125      curAudioContainer = this;126      soundContainer = $(curAudioContainer).find("~ div").first();127      soundName = $(soundContainer).data("sound");128      $(curAudioContainer).html('&#x275A;&#x275A; ');129      curAudio = new Audio("https://emoji-cheat-sheet.campfirenow.com/sounds/" + soundName + ".mp3");130      $(curAudio).on('ended', playStopped);131      curAudio.play();132    }133  }134  function playStopped() {135    $(curAudioContainer).html('&#9658; ');136  }137  function canPlayMp3() {138    var audio = new Audio(),139      result = audio.canPlayType("audio/mpeg");140    if(result != "") {141      return true;142    }143  }144  if (canPlayMp3() == true) {145    $("#campfire-sounds li").prepend('<a href="#" class="play">&#9658; </a>');146    $("#campfire-sounds .play").on("click", play);147  }148  $("#description a").on("click", function() {149    _gaq.push(["_trackEvent", "Services", "Click", $(this).text()]);150  });...

Using AI Code Generation

1import { highlightedElement } from '@storybook/addon-storyshots-puppeteer/dist/api';2import initStoryshots from '@storybook/addon-storyshots-puppeteer';3initStoryshots({4  test: async ({ page, context, done }) => {5    const storybook = await context.newPage();6    await storybook.waitForSelector('#storybook-preview-iframe');7    const frame = await storybook.frames().find(f => f.name() === 'storybook-preview-iframe');8    await frame.waitForSelector('button');9    const button = await frame.$('button');10    await button.click();11    const highlightedEl = await highlightedElement({ page: storybook });12    expect(highlightedEl).not.toBe(null);13    await storybook.close();14    done();15  },16});17const puppeteer = require('puppeteer');18module.exports = async () => {19  const browser = await puppeteer.launch({20  });21  return browser;22};23module.exports = {24  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',25};26"scripts": {27  },28  "devDependencies": {

Using AI Code Generation

1import { highlightedElement } from '@storybook/addon-ondevice-knobs';2const storybookUI = getStorybookUI({ port: 7007, onDeviceUI: true });3const HighlightedApp = () => {4  const HighlightedView = highlightedElement(View);5  return (6  );7};8export default HighlightedApp;9import { AppRegistry } from 'react-native';10AppRegistry.registerComponent('storybook', () => HighlightedApp);

Using AI Code Generation

1const { highlightedElement } = require('./storybook-root-vc');2console.log(highlightedElement());3const { getStorybook } = require('@storybook/react-native');4const { getSelectedKind, getSelectedStory } = require('@storybook/addon-ondevice-knobs');5const highlightedElement = () => {6  const story = getStorybook().find((story) => story.kind === getSelectedKind() && story.name === getSelectedStory());7  return story ? story.render() : null;8};9module.exports = { highlightedElement };10import { AppRegistry } from 'react-native';11import { getStorybookUI, configure } from '@storybook/react-native';12import { name as appName } from '../app.json';13import './storybook-root-vc';14configure(() => {15  require('./stories');16}, module);

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.