How to use @brainly/html-sketchapp - 10 common examples

function getNativeLayer(failingLayers, layer) {
  // debug
  // console.log('Processing ' + layer.name + ' (' + layer._class + ')');

  if (layer._class === 'text') {
    fixTextLayer(layer);
  } else if (layer._class === 'svg') {
    fixSVGLayer(layer);
  } else if (layer._class === 'bitmap') {
    fixBitmap(layer);
  } else {
    fixImageFillsInLayer(layer);
  }

  // Create native object for the current layer, ignore the children for now
  // this alows us to catch and ignore failing layers and finish the import
  const children = layer.layers;
  let nativeObj = null;

  layer.layers = [];

  try {
    nativeObj = fromSJSONDictionary(layer);
  } catch (e) {
    failingLayers.push(layer.name);

function getNativeLayer(failingLayers, layer) {
  // debug
  // console.log('Processing ' + layer.name + ' (' + layer._class + ')');

  if (layer._class === 'text') {
    fixTextLayer(layer);
  } else if (layer._class === 'svg') {
    fixSVGLayer(layer);
  } else if (layer._class === 'bitmap') {
    fixBitmap(layer);
  } else {
    fixImageFillsInLayer(layer);
  }

  // Create native object for the current layer, ignore the children for now
  // this alows us to catch and ignore failing layers and finish the import
  const children = layer.layers;
  let nativeObj = null;

  layer.layers = [];

  try {

function getNativeLayer(failingLayers, layer) {
  // debug
  // console.log('Processing ' + layer.name + ' (' + layer._class + ')');

  if (layer._class === 'text') {
    fixTextLayer(layer);
  } else if (layer._class === 'svg') {
    fixSVGLayer(layer);
  } else if (layer._class === 'bitmap') {
    fixBitmap(layer);
  } else {
    fixImageFillsInLayer(layer);
  }

  // Create native object for the current layer, ignore the children for now
  // this alows us to catch and ignore failing layers and finish the import
  const children = layer.layers;
  let nativeObj = null;

  layer.layers = [];

  try {
    nativeObj = fromSJSONDictionary(layer);
  } catch (e) {
    failingLayers.push(layer.name);

    console.log('Layer failed to import: ' + layer.name);
    return null;

function getNativeLayer(failingLayers, layer) {
  // debug
  // console.log('Processing ' + layer.name + ' (' + layer._class + ')');

  if (layer._class === 'text') {
    fixTextLayer(layer);
  } else if (layer._class === 'svg') {
    fixSVGLayer(layer);
  } else if (layer._class === 'bitmap') {
    fixBitmap(layer);
  } else {
    fixImageFillsInLayer(layer);
  }

  // Create native object for the current layer, ignore the children for now
  // this alows us to catch and ignore failing layers and finish the import
  const children = layer.layers;
  let nativeObj = null;

  layer.layers = [];

  try {
    nativeObj = fromSJSONDictionary(layer);
  } catch (e) {

console.log(`no no no ${type}/${color}/${size}`);
              }
              /* eslint-enable no-console */
            }

            // CONSTRAINTS FOR TEXT IN BUBBLE
            if (layer instanceof Text && node.parentElement.classList.contains('sg-bubble')) {
              layer.setResizingConstraint(RESIZING_CONSTRAINTS.LEFT);
            }

            // CONSTRAINTS FOR SVG IN SEARCH
            if (node.parentElement.classList.contains('sg-search__icon') ||
            layer instanceof SVG && node.parentElement.parentElement.classList.contains('sg-round-button__hole') ||
            layer instanceof SVG && node.parentElement.parentElement.classList.contains('custom-select__icon')) {
              layer.setResizingConstraint(
                RESIZING_CONSTRAINTS.RIGHT,
                RESIZING_CONSTRAINTS.WIDTH,
                RESIZING_CONSTRAINTS.HEIGHT
              );
            }

            // CONSTRAINTS FOR SVG IN SELECT AND COUNTER
            if (node.parentElement.classList.contains('sg-counter')) {
              layer.setResizingConstraint(
                RESIZING_CONSTRAINTS.WIDTH,
                RESIZING_CONSTRAINTS.HEIGHT
              );
            }

            // CONSTRAINTS FOR TEXT IN INPUT
            if (layer instanceof Text && node.parentElement.classList.contains('sg-input')) {
              layer.setResizingConstraint(RESIZING_CONSTRAINTS.LEFT);

// generate better layer name from node classes
            layer.setName(buildLayerNameFromBEM(node.classList));
            return layer;
          });
        })
        .reduce((prev, current) => prev.concat(current), [])
        .filter(layer => layer !== null)
        .forEach(layer => symbol.addLayer(layer));

      if (symbol._name.startsWith('ColorMask/')) {
        maskColors.push(symbol);
      }

      if (symbol._name.startsWith('Button/')) {
        symbol.setGroupLayout(SMART_LAYOUT.HORIZONTALLY_CENTER);
      }

      if (symbol._name.startsWith('Counter/')) {
        symbol.setGroupLayout(SMART_LAYOUT.HORIZONTALLY_CENTER);
      }

      if (symbol._name.startsWith('Icon/')) {
        /* eslint-disable no-unused-vars */
        const [, type, size] = symbol._name.split('/');
        /* eslint-enable no-unused-vars */
        const layerSize = parseInt(size, 10);

        const mask = maskColors[0];
        const maskSymbolInstance = mask.getSymbolInstance(
          {x: symbol._x, y: symbol._y, width: layerSize, height: layerSize}
        );

export function getASketchPage() {
  const stylesheet = document.querySelector('head > link');
  let styleGuideVersion = '';

  if (stylesheet) {
    styleGuideVersion = stylesheet.href.match(/\/([0-9]+\.[0-9]+\.[0-9]+)\//)[1];
  }

  const page = new Page({
    width: document.body.offsetWidth,
    // eslint-disable-next-line comma-dangle
    height: document.body.offsetHeight
  });

  page.setName(`Brainly Pencil - Style Guide ${styleGuideVersion}`);

  const icons = [];
  const maskColors = [];

  // SYMBOLS
  Array.from(document.querySelectorAll('section > .item, section > .inline-item'))
    .map(metaNode => {
      const symbolNode = metaNode.firstChild;
      const name = metaNode.title;

.map(metaNode => {
      const symbolNode = metaNode.firstChild;
      const name = metaNode.title;

      const {left: x, top: y, width, height} = symbolNode.getBoundingClientRect();
      const symbol = new SymbolMaster({x, y, width, height});

      symbol.setId(name);
      symbol.setName(name);

      //symbol.setUserInfo('code', node.innerHTML);

      const parentAndChildren = [symbolNode, ...symbolNode.querySelectorAll('*')];

      Array.from(parentAndChildren)
        .map(node => {
          const layers = nodeToSketchLayers(node);

          return layers.map(layer => {

            // fix font name so the name matches locally installed font
            if (layer instanceof Text && layer._style._fontFamily === 'ProximaNova') {

function convertNodeToSketchLayers(node: Element): any[] {
    const layers: Base[] = nodeToSketchLayers(node);

    return layers.map((layer: Base) => {
        if (!(layer instanceof Text) && node.classList && node.classList.length) {
            const classes: string = Array.from(node.classList).join(" ");

            // Trim unique class ids created by JSS
            const trimmed: string = classes.replace(/[-0-9]+/g, "");
            layer.setName(trimmed.replace(/[^A-Za-z0-9_]/g, " "));
        }

        return layer;
    });
}

.map(node => {
          const layers = nodeToSketchLayers(node);

          return layers.map(layer => {

            // fix font name so the name matches locally installed font
            if (layer instanceof Text && layer._style._fontFamily === 'ProximaNova') {
              layer._style._fontFamily = 'Proxima Nova';
            }

            if (layer instanceof SVG && node.classList.contains('sg-icon__svg') && symbol._name.startsWith('Icon/')) {
              layer.setHasClippingMask(true);
            }

            // eslint-disable-next-line max-len
            if (symbol._name.startsWith('Button/') && layer instanceof SVG || symbol._name.startsWith('Label/') && layer instanceof SVG) {
              const type = node.children[0].id;
              const size = node.clientHeight;