cytoscape.js Cxtmenu圆形菜单篇

很久之前写过一篇cytoscape.js基础篇, 地址是https://blog.csdn.net/dahaiaixiaohai/article/details/89669526. 可以适当的参考一下其内容.

很久之前写过一篇cytoscape.js初级篇, 地址是https://blog.csdn.net/dahaiaixiaohai/article/details/108862390. 可以适当的参考一下其内容.

本篇章, 正式使用cytoscape.js实现一些简单的节点菜单显示(提示)操作.

本文对应的源代码寄托于github, cytoscape.js Cxtmenu圆形菜单篇github源代码, 在此感谢github提供的服务.

系列文章

• cytoscape.js基础篇CSDN博客
• cytoscape.js初级篇CSDN博客
• cytoscape.js初级篇github源代码
• cytoscape.js Cxtmenu圆形菜单篇
• cytoscape.js Cxtmenu圆形菜单篇github源代码
• cytoscape.js进阶篇
• cytoscape.js进阶篇github源代码
• cytoscape.js项目篇
• cytoscape.js项目篇github源代码

前言

本实例通过Vue开发测试, 其他开发方式可以参考本篇章, 适当的修改后使用.

cytoscape依赖引用

• npm : npm install cytoscape --save
• bower : bower install cytoscape
• jspm : jspm install npm:cytoscape

cytoscape扩展依赖引用

• 本篇章主要依赖cytoscape-cxtmenu组件. 所以务必保证该组件安装成功.

npm 布局及扩展依赖引用

# Cytoscape.js的圆形可滑动上下文扩展菜单
npm install cytoscape-cxtmenu --save
# Cytoscape.js的布局方式
npm install cytoscape-avsdf --save
npm install cytoscape-cola --save
npm install cytoscape-cose-bilkent --save

升级Cytoscape组件

• 本篇章是在 cytoscape.js初级篇 的基础上继续完善实现的, 没有 cytoscape.js初级篇 准备工作或后面代码看起来有些吃力的小伙伴们可以先看一下 cytoscape.js初级篇 , 甚至可以先看一下 cytoscape.js基础篇 .

扩展Cytoscape实例对象

<script>
  import cytoscape from 'cytoscape';
  import cxtmenu from 'cytoscape-cxtmenu';
  import cola from 'cytoscape-cola';
  import avsdf from 'cytoscape-avsdf';
  import coseBilkent from 'cytoscape-cose-bilkent';

  export default {
   
    // ......
    mounted() {
   
	  // Cxtmenu圆形菜单主要依赖组件
      if (!cytoscape().cxtmenu) {
   
        cytoscape.use(cxtmenu);
        cytoscape.use(cola);
        cytoscape.use(avsdf);
        cytoscape.use(coseBilkent);
      }
      this.$cy = cytoscape({
   ......});
      // Cxtmenu圆形菜单--开始
      this.$cy.cxtmenu({
   
        menuRadius: 80, // the radius of the circular menu in pixels
        selector: 'node', // elements matching this Cytoscape.js selector will trigger cxtmenus
        commands: (element) => {
   
          return [
            {
   
              fillColor: 'rgba(200, 200, 200, 0.75)', // optional: custom background color for item
              content: '<span class="fa fa-flash fa-2x">操作1</span>', // html/text content to be displayed in the menu
              contentStyle: {
   }, // css key:value pairs to set the command's css in js if you want
              select: function (ele) {
    // a function to execute when the command is selected
                alert(ele.id()); // `ele` holds the reference to the active element
              },
              enabled: true, // whether the command is selectable
            },
            {
   
              fillColor: 'rgba(200, 200, 200, 0.75)', // optional: custom background color for item
              content: '<span class="fa fa-flash fa-2x">操作2</span>', // html/text content to be displayed in the menu
              contentStyle: {
   }, // css key:value pairs to set the command's css in js if you want
              select: function (ele) {
    // a function to execute when the command is selected
                alert(ele.id()); // `ele` holds the reference to the active element
              },
              enabled: true, // whether the command is selectable
            },
            {
   
              // fillColor: 'rgba(200, 200, 200, 0.75)', // optional: custom background color for item
              content: '操作3', // html/text content to be displayed in the menu
              // contentStyle: {}, // css key:value pairs to set the command's css in js if you want
              select: (ele) => alert(ele.id()),  // a function to execute when the command is selected
              enabled: true, // whether the command is selectable
            },
            {
   
              // fillColor: 'rgba(200, 200, 200, 0.75)', // optional: custom background color for item
              content: '禁用', // html/text content to be displayed in the menu
              // contentStyle: {}, // css key:value pairs to set the command's css in js if you want
              select: (ele) => alert(ele.id()),  // a function to execute when the command is selected
              enabled: false, // whether the command is selectable
            }
          ]
        },
        fillColor: 'rgba(0, 0, 0, 0.75)', // 指令默认颜色(the background colour of the menu)
        activeFillColor: 'rgba(1, 105, 217, 0.75)', // 所选指令的颜色(the colour used to indicate the selected command)
        activePadding: 10, // additional size in pixels for the active command
        indicatorSize: 14, // the size in pixels of the pointer to the active command
        separatorWidth: 4, //连续命令之间的空白间隔(以像素为单位)
        spotlightPadding: 10, //元素和聚光灯之间的额外间距(以像素为单位)
        minSpotlightRadius: 10, // the minimum radius in pixels of the spotlight
        maxSpotlightRadius: 14, // the maximum radius in pixels of the spotlight
        openMenuEvents: 'cxttapstart taphold', // space-separated cytoscape events that will open the menu; only `cxttapstart` and/or `taphold` work here
        itemColor: 'white', // 各指令元素内字体颜色
        itemTextShadowColor: 'red', // 各指令元素内字体阴影颜色
        zIndex: 9999, // the z-index of the ui div
        atMouse: true, // draw menu at mouse position
      });
      //Cxtmenu圆形菜单--结束
      // 不同节点的样式
      this.$cy.style()......;
    },
  }
</script>

完整的Cytoscape组件代码

<style scoped>
</style>

<template>
  <div style="position: relative; height: 100%; width: 100%; z-index: 0;">
    <div id="cytoscape_id" style="height: 100%; width: 100%; z-index: 1;"></div>
  </div>
</template>

<script>
  import cytoscape from 'cytoscape';
  import cxtmenu from 'cytoscape-cxtmenu';
  import cola from 'cytoscape-cola';
  import avsdf from 'cytoscape-avsdf';
  import coseBilkent from 'cytoscape-cose-bilkent';

  export default {
   
    name: "CJS",
    beforeCreate() {
   
      this.$cy && this.$cy.destroyed() && this.$cy.destroy();
      delete this.$cy;
    },
    beforeDestroy() {
   
      this.$cy && this.$cy.