zoukankan      html  css  js  c++  java
  • jointjs +vue +vite 引起的本地流程图可正常画出,放到测试环境就报错的问题

    问题:之前项目未使用vite,使用的时webpack模式,所以joint画的模块在本地和线上是可以正常使用,项目更新未使用vite之后,就出现了问题

    原因:由于项目中的流程节点需要自定义,所以在joint.shapes上自定义一个类型,如 joint.shapes.flow = {},接着在flow中增加我们的节点类型,本地是可以将flow属性增加到shapes上的,但是vite打包之后是无法添加上去,这个就是根本原因

    原始代码

    import * as joint from 'jointjs';
    
    joint.shapes.flow = {};
    
    export const fGeneral = (type, data) => {
      return joint.shapes.basic.Generic.extend({
        markup:
          '<g class="rotatable">
      <g class="inPorts"/><g class="outPorts"/>
      <g class="scalable"></g>
      <rect class="background"/>
      <rect class="color-band"/>
      <g class="icon"><image/></g>
      <text class="title"/>
     <text class="message"/>
       <g class="error"><image/></g>
      <g class="btn btn-code"><image/></g>
    </g>
    ',
        defaults: joint.util.defaultsDeep(
          {
            id: type,
            type: 'flow.Start',
            size: {  80, height: 54 },
            attrs: {自已的定义},
            ports: {自己的定义},
            position: { x: data.posX, y: data.posY }
          },
          joint.shapes.basic.Rect.prototype.defaults
        ),
        initialize: function() {
          joint.shapes.basic.Rect.prototype.initialize.apply(this, arguments);
        }
      });
    };
    joint.shapes.flow.Start= fGeneral();
    export const createStart=(data)=>{
       return new joint.shapes.flow.Start({});
    };
     
    在需要的位置,调用createStart方法

    解决问题 - 根本是不挂载在shapes上

    import * as joint from 'jointjs';
    
    joint.shapes.flow = {};
    
    export const fGeneral = (type, data) => {
      const result = joint.shapes.basic.Generic.extend({
        markup:
          '<g class="rotatable">
      <g class="inPorts"/><g class="outPorts"/>
      <g class="scalable"></g>
      <rect class="background"/>
      <rect class="color-band"/>
      <g class="icon"><image/></g>
      <text class="title"/>
     <text class="message"/>
       <g class="error"><image/></g>
      <g class="btn btn-code"><image/></g>
    </g>
    ',
        defaults: joint.util.defaultsDeep(
          {
            id: type,
            type: 'flow.Start',
            size: {  80, height: 54 },
            attrs: {自已的定义},
            ports: {自己的定义},
            position: { x: data.posX, y: data.posY }
          },
          joint.shapes.basic.Rect.prototype.defaults
        ),
        initialize: function() {
          joint.shapes.basic.Rect.prototype.initialize.apply(this, arguments);
        }
      });
      return new result();
    };
    
    export const createStart=(data)=>{
       return fGeneral("Start",data,"");
    };
    
    在需要的位置,调用createStart方法
  • 相关阅读:
    如何在ASP.NET 5和XUnit.NET中进行LocalDB集成测试
    如何在单元测试过程中模拟日期和时间
    Azure Blob Storage从入门到精通
    免费电子书:使用VS Online敏捷管理开源项目
    使用ASP.NET 5开发AngularJS应用
    Syncfusion的社区许可及免费电子书和白皮书
    理解ASP.NET 5的中间件
    惊鸿一瞥(Glimpse)——开发之时即可掌控ASP.NET应用的性能
    用于Simple.Data的ASP.NET Identity Provider
    大数据技术之_19_Spark学习_01_Spark 基础解析小结(无图片)
  • 原文地址:https://www.cnblogs.com/fyjz/p/15219510.html
Copyright © 2011-2022 走看看