jointjs实现可拖动移动的时间轴大事记代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：jointjs实现可拖动移动的时间轴大事记代码

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

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

<head>
  <meta charset="UTF-8">
<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>
<style>
#paper-container {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: scroll;
}

#logo {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 5px;
}
</style>


  
  
</head>

<body translate="no">
  <div id="paper-container"></div>


      <script  >
const { dia, util, shapes: defaultShapes } = joint;

const chevronCount = 40;
const chevronHeight = 8;
const chevronWidth = 3;
const timelineColor = '#fff';
const backgroundColor = '#444';
const padding = 10;
const gap = 70;
const timelineY = 300;
const timelineXMin = 140;
const timelineXMax = 1100;

const timelineEventJSONMarkup = util.svg`
    <ellipse @selector="body"/>
    <text @selector="title"/>
    <text @selector="subtitle"/>
    <text @selector="description"/>
`;

class TimelineEvent extends dia.Element {

  defaults() {
    return {
      ...super.defaults,
      type: 'TimelineEvent',
      attrs: {
        root: {
          magnetSelector: 'body' },

        body: {
          stroke: 'none',
          cx: 'calc(w/2)',
          cy: 'calc(h/2)',
          rx: 'calc(w/2)',
          ry: 'calc(h/2)' },

        title: {
          text: 'Label Inside',
          fontSize: 18,
          fontFamily: 'sans-serif',
          fill: timelineColor,
          textVerticalAnchor: 'top',
          textAnchor: 'end',
          x: 'calc(w)',
          y: 'calc(h + 10)' },

        subtitle: {
          text: 'Subtitle',
          fontSize: 14,
          fontFamily: 'sans-serif',
          fontWeight: 'bold',
          fill: timelineColor,
          textVerticalAnchor: 'top',
          textAnchor: 'end',
          x: 'calc(w)',
          y: 'calc(h + 40)' },

        description: {
          text: 'Description',
          fontSize: 11,
          fontFamily: 'sans-serif',
          fill: timelineColor,
          textVerticalAnchor: 'top',
          textAnchor: 'end',
          x: 'calc(w)',
          y: 'calc(h + 60)' } } };




  }

  preinitialize() {
    this.markup = timelineEventJSONMarkup;
  }

  positionLabels() {
    if (this.position().y > timelineY) {
      if (this.attr('title/y') === 'calc(h + 10)') return;
      this.attr({
        title: {
          y: 'calc(h + 10)',
          textVerticalAnchor: 'top' },

        subtitle: {
          y: 'calc(h + 40)',
          textVerticalAnchor: 'top' },

        description: {
          y: 'calc(h + 60)',
          textVerticalAnchor: 'top' } });


    } else {
      if (this.attr('title/y') === -10) return;
      this.attr({
        title: {
          y: -10,
          textVerticalAnchor: 'bottom' },

        subtitle: {
          y: -40,
          textVerticalAnchor: 'bottom' },

        description: {
          y: -60,
          textVerticalAnchor: 'bottom' } });


    }
  }}


const shapes = { ...defaultShapes, TimelineEvent };

const graph = new dia.Graph({}, {
  cellNamespace: shapes });


const paper = new dia.Paper({
  width: "100%",
  height: "100%",
  model: graph,
  defaultConnectionPoint: {
    name: 'boundary' },

  background: {
    color: backgroundColor },

  cellViewNamespace: shapes,
  interactive: cellView => {
    return cellView.model instanceof TimelineEvent;
  },
  restrictTranslate(elementView) {
    const timelineMargin = 20;
    const bbox = elementView.model.getBBox();
    const xMin = timelineXMin;
    const xMax = timelineXMax - bbox.width;
    const yMin = timelineY - bbox.height - timelineMargin;
    const yMax = timelineY + timelineMargin;
    return function (x, y) {
      return {
        x: Math.max(xMin, Math.min(xMax, x)),
        y: y > timelineY ? Math.max(yMax, y) : Math.min(yMin, y) };

    };
  },
  gridSize: 10,
  async: true,
  sorting: dia.Paper.sorting.APPROX,
  defaultLink: () => new shapes.standard.DoubleLink(),
  defaultLinkAnchor: { name: 'connectionPerpendicular' } });


document.getElementById('paper-container').appendChild(paper.el);
// Timeline

const start = new shapes.standard.Ellipse({
  position: {
    x: timelineXMin - 120,
    y: timelineY - 60 },

  size: {
    width: 120,
    height: 120 },

  attrs: {
    root: {
      pointerEvents: 'none' },

    body: {
      stroke: timelineColor,
      fill: backgroundColor,
      strokeWidth: 3 },

    label: {
      fill: timelineColor,
      fontFamily: 'sans-serif',
      fontSize: 18 } } });



const end = new shapes.standard.Ellipse({
  position: {
    x: timelineXMax,
    y: timelineY - 30 },

  size: {
    width: 60,
    height: 60 },

  attrs: {
    root: {
      pointerEvents: 'none' },

    body: {
      stroke: timelineColor,
      fill: backgroundColor,
      strokeWidth: 3 },

    label: {
      fontSize: 13,
      fill: timelineColor,
      fontFamily: 'sans-serif',
      text: 'present' } } });




const timeline = new shapes.standard.Link({
  source: {
    id: start.id },

  target: {
    id: end.id },

  z: -2,
  attrs: {
    root: {
      pointerEvents: '.........完整代码请登录后点击上方下载按钮下载查看