☰

Colors!graph_editor

Add colors support to https://csacademy.com/app/graph_editor/. The edge's color is defined by it's cost. The color is defined by a index or name.

// ==UserScript==
// @name Colors!graph_editor
// @description Add colors support to https://csacademy.com/app/graph_editor/. The edge's color is defined by it's cost. The color is defined by a index or name.
// @namespace Violentmonkey Scripts
// @match https://csacademy.com/app/graph_editor/
// @grant VictorKoehler
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// @version 0.0.1.20200518181455
// ==/UserScript==

// Modified version of:
// https://gist.github.com/VictorKoehler/5d528b3c3965e56aea69231801ddd70a
// This one cleans the jQuery injection present on gist, making use of @require instead.

/*
.default-36 > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
  width: 95% !important;
}

.default-36 > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(2), .default-36 > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) {
  width: 800px !important;
}

.default-36 > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) > svg:nth-child(1) {
    width: 100% !important;
}
*/

// Immediately-invoked function expression
(function() {
  const getColorByString = (strColor) => {
    
    const isColor = (strColor) => {
      const s = new Option().style;
      s.color = strColor;
      return s.color !== '';
    };
    const colorlist = ['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];
    
    r = isColor(strColor) ? strColor : colorlist[parseInt(strColor)];
    return r === undefined ? 'black' : r;
  };

  const getRoot = () => jQuery('.default-36 > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div > div > svg');
  const getEdges = () => getRoot().find('g g g path').parent();
  
  const updateEdges = () => {
    getEdges().each((_, t) => {
        const txt = jQuery(t).text();
        jQuery(t).children().each((_, t1) => {
            jQuery(t1).attr('stroke', getColorByString(txt));
        });
    });
  };
  
  const scriptInitialize = () => {
        setTimeout(() => {
          getRoot().click(() => updateEdges());
          getRoot().next().keypress(() => {
            if (event.keyCode === 13)
              setTimeout(() => updateEdges(), 100);
          });
        }, 5000);
  };
  
  if (typeof jQuery !== 'undefined') {
    console.log("Using jQuery");
    scriptInitialize();
  } else {
    console.log("jQuery not present!");
  }
})();