简道云网页助手

jdy-helper.js

// ==UserScript==
// @name         简道云网页助手
// @description  简道云网页助手
// @version      v0.0.1
// @match        https://www.jiandaoyun.com/dashboard/app/*/form/*/edit
// @grant        GM_registerMenuCommand
// @grant        GM_addStyle
// @run-at       document-start
// @require      https://unpkg.com/html-to-image@1.11.11/dist/html-to-image.js
// @require      https://unpkg.com/downloadjs@1.4.7/download.js
// @homepage     https://gist.githubusercontent.com/imyelo/3b3df6343d433794602920b3188d49a2
// @updateURL    https://gist.githubusercontent.com/imyelo/3b3df6343d433794602920b3188d49a2/raw/jdy-helper.js
// @downloadURL  https://gist.githubusercontent.com/imyelo/3b3df6343d433794602920b3188d49a2/raw/jdy-helper.js
// @supportURL   https://gist.githubusercontent.com/imyelo/3b3df6343d433794602920b3188d49a2#new_comment_field
// ==/UserScript==

/* globals htmlToImage, download */

(async () => {
  /** initialize */

  const ldrs = await import("https://unpkg.com/ldrs@1.0.1/dist/index.js");
  ldrs.zoomies.register();
  GM_addStyle(`
    .jdy-helper-loading {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 1000;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all ease 200ms;
      opacity: 1;
    }
    .jdy-helper-flow-title {
      position: absolute;
      top: 0;
      left: 0;
      padding: 12px 24px;
      font-size: 18px;
    }
  `);

  /** utils */

  const leftPad = (str, len, ch = " ") => {
    const padLen = Math.max(0, len - str.length);
    return ch.repeat(padLen) + str;
  };

  const loading = () => {
    const element = document.createElement("div");
    element.classList.add("jdy-helper-loading");
    element.innerHTML =
      '<l-zoomies size="80" stroke="5" bg-opacity="0.1" speed="1.4" color="white" />';
    document.body.append(element);
    return () => {
      element.remove();
    };
  };

  /** features */

  GM_registerMenuCommand(
    "保存当前流程图",
    async () => {
      const done = loading();

      const title = document.querySelector(".fx-title-editor input").value;
      const now = new Date();
      const date = `v${now.getFullYear()}${leftPad(
        now.getMonth() + 1 + "",
        2,
        "0"
      )}${now.getDate()}`;
      const node = document.querySelector(".fx-flow-chart-content");
      node.style.backgroundColor = "#f5f6f8";
      const titleNode = document.createElement("div");
      titleNode.classList.add("jdy-helper-flow-title");
      titleNode.innerText = `${title} - ${date}`;
      node.append(titleNode);

      const dataURL = await htmlToImage.toPng(
        document.querySelector(".fx-flow-chart-content")
      );
      download(dataURL, `${title}-${date}.png`);
      done();
    },
    {
      accessKey: "s",
      autoClose: true,
    }
  );
})();