joint实现一个支持亮色暗色切换的流程表工作流图表效果代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：joint实现一个支持亮色暗色切换的流程表工作流图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/joint.3.7.2.css">
  
<style>
:root {
  /* JointJS Palette */
  --jj-color1: #ed2637;
  --jj-color2: #131e29;
  --jj-color3: #dde6ed;
  --jj-color4: #f6f740;
  --jj-color5: #0075f2;
  --jj-color6: #1a2938;
  --jj-color7: #cad8e3;
  /* Dark Theme */
  --step-stroke-color: var(--jj-color1);
  --step-fill-color: var(--jj-color2);
  --step-text-color: var(--jj-color3);
  --decision-stroke-color: var(--jj-color3);
  --decision-fill-color: var(--jj-color2);
  --decision-text-color: var(--jj-color3);
  --start-stroke-color: var(--jj-color1);
  --start-fill-color: var(--jj-color2);
  --start-text-color: var(--jj-color1);
  --flow-stroke-color: var(--jj-color1);
  --flow-label-stroke-color: var(--jj-color2);
  --flow-label-fill-color: var(--jj-color1);
  --flow-label-text-color: var(--jj-color3);
  --flow-selection-color: var(--jj-color6);
  --frame-color: var(--jj-color4);
  --background-color: var(--jj-color2);
  --switch-color: var(--jj-color3);
  --switch-background-color: var(--jj-color1);
  --logo-color: var(--jj-color3);
}

/* Light Theme */
.light-theme {
  --step-stroke-color: var(--jj-color1);
  --step-fill-color: var(--jj-color3);
  --step-text-color: var(--jj-color2);
  --decision-stroke-color: var(--jj-color2);
  --decision-fill-color: var(--jj-color3);
  --decision-text-color: var(--jj-color2);
  --start-stroke-color: var(--jj-color1);
  --start-fill-color: var(--jj-color3);
  --start-text-color: var(--jj-color1);
  --flow-stroke-color: var(--jj-color1);
  --flow-label-stroke-color: var(--jj-color3);
  --flow-label-fill-color: var(--jj-color1);
  --flow-label-text-color: var(--jj-color3);
  --flow-selection-color: var(--jj-color7);
  --frame-color: var(--jj-color5);
  --background-color: var(--jj-color3);
  --switch-color: var(--jj-color3);
  --switch-background-color: var(--jj-color2);
  --logo-color: var(--jj-color2);
}

/* Flowchart */
.jj-start-body {
  fill: var(--start-fill-color);
  stroke: var(--start-stroke-color);
}

.jj-start-text {
  fill: var(--start-text-color);
}

.jj-step-body {
  fill: var(--step-fill-color);
  stroke: var(--step-stroke-color);
}

.jj-step-text {
  fill: var(--step-text-color);
}

.jj-decision-body {
  fill: var(--decision-fill-color);
  stroke: var(--decision-stroke-color);
  stroke-width: 3;
}

.jj-decision-text {
  fill: var(--decision-text-color);
}

.jj-flow-line {
  stroke: var(--flow-stroke-color);
  stroke-width: 1;
}

.jj-flow-outline {
  stroke: var(--background-color);
  stroke-width: calc(calc(var(--flow-spacing) * 2) + 1px);
}

.jj-flow-label-body {
  stroke: var(--flow-label-stroke-color);
  fill: var(--flow-label-fill-color);
  stroke-width: calc(var(--flow-spacing));
}

.jj-flow-label-text {
  fill: var(--flow-label-text-color);
}

.jj-flow-arrowhead {
  stroke: var(--flow-stroke-color);
  fill: var(--flow-stroke-color);
}

.jj-frame {
  fill: var(--frame-color);
}

.jj-flow-tools circle {
  stroke: var(--frame-color);
  fill: var(--background-color);
  stroke-width: 2;
}

.jj-flow-tools rect {
  stroke: var(--frame-color);
}

.jj-flow-selection {
  stroke: var(--flow-selection-color);
  stroke-width: 20px;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: none;
}

/* Canvas */
body {
  background: var(--background-color);
}

#canvas {
  position: absolute;
  inset: 0 0 0 0;
}

#logo {
  position: absolute;
  bottom: 24px;
  right: 24px;
  fill: var(--logo-color);
}

/* Theme toggle */
.theme-switch {
  width: 70px;
  height: 30px;
  background: var(--switch-background-color);
  border-radius: 50px;
  position: absolute;
  display: inline-block;
  right: 16px;
  top: 16px;
}
.theme-switch .switch {
  width: 24px;
  height: 24px;
  background: var(--switch-color);
  border-radius: 100%;
  position: absolute;
  top: 3px;
  left: 4px;
  transition: 0.5s all ease;
}
.theme-switch .light-icon {
  position: absolute;
  top: 5px;
  left: 6px;
}
.theme-switch .dark-icon {
  position: absolute;
  top: 5px;
  right: 6px;
}

.light-theme .theme-switch .switch {
  transform: translateX(37px);
}
</style>


  
</head>

<body translate="no">
  <!-- Pre-Load Fonts -->
<div class="font-loader" style="visibility: hidden">
  <div style="font-family: PPFraktionSans, sans-serif; font-weight: 300; font-style: normal;">Regular</div>
  <div style="font-family: PPFraktionSans, sans-serif; font-weight: 300; font-style: italic;">Regular Italic</div>
  <div style="font-family: PPFraktionSans, sans-serif; font-weight: 600; font-style: normal;">Bold</div>
</div>

<div id="canvas"></div>
<div class="theme-switch" title="Switch between light and dark mode">
  <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" fill="none" stroke="#dde6ed" stroke-linecap="round" stroke-linejoin="round" class="light-icon">
    <path d="M12 18.5C15.5899 18.5 18.5 15.5899 18.5 12C18.5 8.41015 15.5899 5.5 12 5.5C8.41015 5.5 5.5 8.41015 5.5 12C5.5 15.5899 8.41015 18.5 12 18.5Z" stroke-width="1.5" />
    <path d="M19.14 19.14L19.01 19.01M19.01 4.99L19.14 4.86L19.01 4.99ZM4.86 19.14L4.99 19.01L4.86 19.14ZM12 2.08V2V2.08ZM12 22V21.92V22ZM2.08 12H2H2.08ZM22 12H21.92H22ZM4.99 4.99L4.86 4.86L4.99 4.99Z" stroke-width="2" />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" fill="#131e29" class="dark-icon">
    <path d="M12.0557 3.59974C12.2752 3.2813 12.2913 2.86484 12.0972 2.53033C11.9031 2.19582 11.5335 2.00324 11.1481 2.03579C6.02351 2.46868 2 6.76392 2 12C2 17.5228 6.47715 22 12 22C17.236 22 21.5313 17.9764 21.9642 12.8518C21.9967 12.4664 21.8041 12.0968 21.4696 11.9027C21.1351 11.7086 20.7187 11.7248 20.4002 11.9443C19.4341 12.6102 18.2641 13 17 13C13.6863 13 11 10.3137 11 6.99996C11 5.73589 11.3898 4.56587 12.0557 3.59974Z" />
  </svg>
  <div class="switch"></div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash.4.17.21.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/backbone-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/joint.3.7.2.js"></script>
      <script  >
const { dia, shapes, highlighters, linkTools } = joint;

// Styles

const unit = 4;
const bevel = 2 * unit;
const spacing = 2 * unit;
const flowSpacing = unit / 2;

const rootEl = document.querySelector(":root");
rootEl.style.setProperty("--flow-spacing", `${flowSpacing}px`);

const fontAttributes = {
  fontFamily: "PPFraktionSans, sans-serif",
  fontStyle: "normal",
  fontSize: 14,
  lineHeight: 18 };


// Paper & Graph

const paperContainer = document.getElementById("canvas");
const graph = new dia.Graph({}, { cellNamespace: shapes });
const paper = new dia.Paper({
  model: graph,
  cellViewNamespace: shapes,
  width: "100%",
  height: "100%",
  async: true,
  sorting: dia.Paper.sorting.APPROX,
  background: { color: "transparent" },
  snapLabels: true,
  clickThreshold: 10,
  interactive: {
    linkMove: false },

  gridSize: 5,
  defaultConnectionPoint: {
    name: "boundary",
    args: {
      offset: spacing,
      extrapolate: true } },


  defaultRouter: { name: "rightAngle", args: { margin: unit * 7 } },
  defaultConnector: {
    name: "straight",
    args: { cornerType: "line", cornerPreserveAspectRatio: true } }
  // bevelled path
});
paperContainer.appendChild(paper.el);

// Flowchart content

function createStart(x, y, text) {
  return new shapes.standard.Rectangle({
    position: { x: x + 10, y: y + 5 },
    size: { width: 80, height: 50 },
    z: 1,
    attrs: {
      body: {
        class: "jj-start-body",
        rx: 25,
        ry: 25 },

      label: {
        class: "jj-start-text",
        ...fontAttributes,
        fontSize: fontAttributes.fontSize * 1.4,
        fontWeight: "bold",
        text } } });



}

function createStep(x, y, text) {
  return new shapes.st.........完整代码请登录后点击上方下载按钮下载查看