[Bug Report]: 插件换成 BpmnXmlAdapter bpmn:parallelGateway 组件没有了 about logicflow

[boyongjiong]

没看懂什么意思

[csx-bill]

没看懂什么意思

我上面有案例，我使用的html 页面引入的js 实现的，浏览器可直接打开index.html 拖拽并行网关组件，其他组件是正常的

[DymoneLewis]

看了一下，目前1.x版本的cdn里没有导出BPMNElements相关的内容，可以升到我们最新的2.0.beta.4这里导出了完整的内容，不过我们在2.0版本优化了CDN包的打包逻辑，在引入的时候写法上需要调整一下，具体可以参考下面这段根据你的demo改写的逻辑
（Tip: 在写法上一个不同点是引入CDN时只能整体引入，取方法/插件时需要增加前缀（如下文中new LogicFlow需要写成new Core.LogicFlow, plugins传入的插件需要写成Extension.插件名

<title>flow-ui</title>

<!-- 引入 core包 -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/[email protected]/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/[email protected]/dist/index.css" />

<!-- 引入 extension包样式 -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/[email protected]/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/[email protected]/dist/index.css" />

<style>
  #container {
    width: 1000px;
    height: 500px
  }
</style>
<style>
.drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100%;
  background-color: #f1f1f1;
  transition: right 0.3s ease-in-out;
  padding: 20px;
  box-sizing: border-box;
  z-index: 1000;
}

.drawer.open {
  right: 0;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}

.overlay.show {
  display: block;
}

.drawer-button {
  margin: 10px;
}

</style>

<div>
    <div class="overlay" onclick="closeDrawer()"></div>

    <div class="drawer" id="bpmn:startEvent">
        <div>
          start-event-drawer
        </div>
        <div>
          <div>节点编码 <input type="" name="" /> </div>
          <div>节点名称 <input type="" name="" /> </div>
          <div>监听器类型 <select> <option>任务创建</option></select> </div>
          <div>监听器路径 <textarea name=""></textarea> </div>
        </div>
    </div>
    <div class="drawer" id="bpmn:userTask">
        <div>
          user-task-drawer
        </div>
        <div>
          <div>节点编码 <input type="" name="" /> </div>
          <div>节点名称 <input type="" name="" /> </div>
          <div>协作方式 
            <input type="radio" name=""/>或签
            <input type="radio" name=""/>票签
            <input type="radio" name=""/>会签
          </div>
          <div>权限标识 <select> <option>任务创建</option></select> </div>
          <div>是否可以跳转任意节点
            <input type="radio" name=""/>否
            <input type="radio" name=""/>是
          </div>
          <div>监听器类型 <select> <option>任务创建</option></select> </div>
          <div>监听器路径 <textarea name=""></textarea> </div>
        </div>
    </div>
    <div class="drawer" id="bpmn:exclusiveGateway">
        <div>
          exclusive-gateway-drawer
        </div>
        <div>
          <div>节点编码 <input type="" name="" /> </div>
          <div>节点名称 <input type="" name="" /> </div>
        </div>
    </div>
    <div class="drawer" id="bpmn:parallelGateway">
        <div>
          parallel-gateway-drawer
        </div>
        <div>
          <div>节点编码 <input type="" name="" /> </div>
          <div>节点名称 <input type="" name="" /> </div>
        </div>
    </div>
    <div class="drawer" id="bpmn:endEvent">
        <div>
          end-event-drawer
        </div>
        <div>
          <div>节点编码 <input type="" name="" /> </div>
          <div>节点名称 <input type="" name="" /> </div>
        </div>
    </div>
    <div class="drawer" id="bpmn:sequenceFlow">
        <div>
          sequence-flow-drawer
        </div>
        <div>
          <div>跳转类型 <select> <option>审批通过</option> <option>退回</option></select> </div>
        </div>
    </div>
</div>


<script>
  window.onload = function () {
    console.log('Extension', Extension)
    InitLogicFlow();
  }

  function InitLogicFlow() {
    // LogicFlow配置选项
    const lf = new Core.LogicFlow({
      container: document.querySelector("#container"),
      grid: {
        visible: true,
        type: 'mesh',
        size: 10,
        config: {
          color: '#eeeeee'
        }
      },
      height: 500,
      hoverOutline: false,
      edgeSelectedOutline: false,
      keyboard: {
        enabled: true
      },
      plugins: [Extension.BpmnElement, Extension.BPMNElements, Extension.BpmnXmlAdapter, Extension.SelectionSelect, Extension.DndPanel, Extension.Control]
    })
    console.log('lf', lf)
    // 拖拽面板
    lf.extension.dndPanel.setPatternItems([
      {
        label: '选区',
        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAOVJREFUOBGtVMENwzAIjKP++2026ETdpv10iy7WFbqFyyW6GBywLCv5gI+Dw2Bluj1znuSjhb99Gkn6QILDY2imo60p8nsnc9bEo3+QJ+AKHfMdZHnl78wyTnyHZD53Zzx73MRSgYvnqgCUHj6gwdck7Zsp1VOrz0Uz8NbKunzAW+Gu4fYW28bUYutYlzSa7B84Fh7d1kjLwhcSdYAYrdkMQVpsBr5XgDGuXwQfQr0y9zwLda+DUYXLaGKdd2ZTtvbolaO87pdo24hP7ov16N0zArH1ur3iwJpXxm+v7oAJNR4JEP8DoAuSFEkYH7cAAAAASUVORK5CYII=',
        callback: () => {
          // lf.current!.extension.selectionSelect.openSelectionSelect()
          // lf.current!.once('selection:selected', () => {
          //   lf.current!.extension.selectionSelect.closeSelectionSelect()
          // })
        }
      },
      {
        type: 'bpmn:startEvent',
        text: '开始',
        label: '开始节点',
        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAnBJREFUOBGdVL1rU1EcPfdGBddmaZLiEhdx1MHZQXApraCzQ7GKLgoRBxMfcRELuihWKcXFRcEWF8HBf0DdDCKYRZpnl7p0svLe9Zzbd29eQhTbC8nv+9zf130AT63jvooOGS8Vf9Nt5zxba7sXQwODfkWpkbjTQfCGUd9gIp3uuPP8bZ946g56dYQvnBg+b1HB8VIQmMFrazKcKSvFW2dQTxJnJdQ77urmXWOMBCmXM2Rke4S7UAW+/8ywwFoewmBps2tu7mbTdp8VMOkIRAkKfrVawalJTtIliclFbaOBqa0M2xImHeVIfd/nKAfVq/LGnPss5Kh00VEdSzfwnBXPUpmykNss4lUI9C1ga+8PNrBD5YeqRY2Zz8PhjooIbfJXjowvQJBqkmEkVnktWhwu2SM7SMx7Cj0N9IC0oQXRo8xwAGzQms+xrB/nNSUWVveI48ayrFGyC2+E2C+aWrZHXvOuz+CiV6iycWe1Rd1Q6+QUG07nb5SbPrL4426d+9E1axKjY3AoRrlEeSQo2Eu0T6BWAAr6COhTcWjRaYfKG5csnvytvUr/WY4rrPMB53Uo7jZRjXaG6/CFfNMaXEu75nG47X+oepU7PKJvvzGDY1YLSKHJrK7vFUwXKkaxwhCW3u+sDFMVrIju54RYYbFKpALZAo7sB6wcKyyrd+aBMryMT2gPyD6GsQoRFkGHr14TthZni9ck0z+Pnmee460mHXbRAypKNy3nuMdrWgVKj8YVV8E7PSzp1BZ9SJnJAsXdryw/h5ctboUVi4AFiCd+lQaYMw5z3LGTBKjLQOeUF35k89f58Vv/tGh+l+PE/wG0rgfIUbZK5AAAAABJRU5ErkJggg=='
      },
      {
        type: 'bpmn:userTask',
        text: '用户任务',
        label: '用户任务',
        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg=='
      },
      {
        type: 'bpmn:exclusiveGateway',
        text: '排他网关',
        label: '排他网关',
        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAAHeEJUAAAAABGdBTUEAALGPC/xhBQAAAvVJREFUOBGNVEFrE0EU/mY3bQoiFlOkaUJrQUQoWMGePLX24EH0IIoHKQiCV0G8iE1covgLiqA/QTzVm1JPogc9tIJYFaQtlhQxqYjSpunu+L7JvmUTU3AgmTfvffPNN++9WSA1DO182f6xwILzD5btfAoQmwL5KJEwiQyVbSVZ0IgRyV6PTpIJ81E5ZvqfHQR0HUOBHW4L5Et2kQ6Zf7iAOhTFAA8s0pEP7AXO1uAA52SbqGk6h/6J45LaLhO64ByfcUzM39V7ZiAdS2yCePPEIQYvTUHqM/n7dgQNfBKWPjpF4ISk8q3J4nB11qw6X8l+FsF3EhlkEMfrjIer3wJTLwS2aCNcj4DbGxXTw00JmAuO+Ni6bBxVUCvS5d9aa04+so4pHW5jLTywuXAL7jJ+D06sl82Sgl2JuVBQn498zkc2bGKxULHjCnSMadBKYDYYHAtsby1EQ5lNGrQd4Y3v4Zo0XdGEmDno46yCM9Tk+RiJmUYHS/aXHPNTcjxcbTFna000PFJHIVZ5lFRqRpJWk9/+QtlOUYJj9HG5pVFEU7zqIYDVsw2s+AJaD8wTd2umgSCCyUxgGsS1Y6TBwXQQTFuZaHcd8gAGioE90hlsY+wMcs30RduYtxanjMGal8H5dMW67dmT1JFtYUEe8LiQLRsPZ6IIc7A4J5tqco3T0pnv/4u0kyzrYUq7gASuEyI8VXKvB9Odytv6jS/PNaZBln0nioJG/AVQRZvApOdhjj3Jt8QC8Im09SafwdBdvIpztpxWxpeKCC+EsFdS8DCyuCn2munFpL7ctHKp+Xc5cMybeIyMAN33SPL3ZR9QV1XVwLyzHm6Iv0/yeUuUb7PPlZC4D4HZkeu6dpF4v9j9MreGtMbxMMRLIcjJic9yHi7WQ3yVKzZVWUr5UrViJvn1FfUlwe/KYVfYyWRLSGNu16hR01U9IacajXPei0wx/5BqgInvJN+MMNtNme7ReU9SBbgntovn0kKHpFg7UogZvaZiOue/q1SBo9ktHzQAAAAASUVORK5CYII='
      },
      {
        type: 'bpmn:parallelGateway',
        text: '并行网关',
        label: '并行网关',
        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAACXBIWXMAAC4jAAAuIwF4pT92AAAB3klEQVQ4jaXUO2hUURAG4G9lRVFEW4OKYBAMIoiIvRDxEZ8odmLhA+JmTSxTSix9QNTC2AQFOx/RGB/pLBS1sbT2ga0SUbGIxZnrHq+72UWnmTlz7/z3PzP/3Er3yKwObBBnMY6Bdi/P6wBwGBexBDVc+1/QQZyL+Eb447jyr6AFQ6jjCHrj3G8Oxq1Ac4Z1jEY8jb52jJuBDmUMzwTgZnzEIUziQMZ4tAxQBh3GhYxJAd6F5VgZ5zvYFnENY61AhzSuPITr2bNv4Wey3FPsi/gYLpdBc4Z1XCrd4F34T6X8PY0enyoYVzUfyhYszYo3hd+K71n+h9TjvbgVjL9Wukdmi5Uax9GIO1qzsBX4IA31fMH0qjTFHdgVXz6MZVlhD07jJp5l+Z8BuB4nIzdRid0fC+qwB/dLbNbiLXbjQelZD15isaTj3mJQuZAnpB7ltjp8Vym/AW8C8KHYuFxSNQ0Z3dVYSVgQfmGWW4fnUgunpdYpgxaMC709wf6IP0vD+xLnjXiNRVI7cgKq/raB+Fg/bks6nMQqvNfoYRVTUp//sFY/lN9CDiZ9AbgGrwLwMXY2K57r13dCkhtJDcN4IV15CttbFTa7fpnxfKnXxda1ZNgpKInxTPhHONiu4BfEpWWaWt6MSgAAAABJRU5ErkJggg=='
      },
      {
        type: 'bpmn:endEvent',
        text: '结束',
        label: '结束节点',
        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAA1BJREFUOBFtVE1IVUEYPXOf+tq40Y3vPcmFIdSjIorWoRG0ERWUgnb5FwVhYQSl72oUoZAboxKNFtWiwKRN0M+jpfSzqJAQclHo001tKkjl3emc8V69igP3znzfnO/M9zcDcKT67azmjYWTwl9Vn7Vumeqzj1DVb6cleQY4oAVnIOPb+mKAGxQmKI5CWNJ2aLPatxWa3aB9K7/fB+/Z0jUF6TmMlFLQqrkECWQzOZxYGjTlOl8eeKaIY5yHnFn486xBustDjWT6dG7pmjHOJd+33t0iitTPkK6tEvjxq4h2MozQ6WFSX/LkDUGfFwfhEZj1Auz/U4pyAi5Sznd7uKzznXeVHlI/Aywmk6j7fsUsEuCGADrWARXXwjxWQsUbIupDHJI7kF5dRktg0eN81IbiZXiTESic50iwS+t1oJgL83jAiBupLDCQqwziaWSoAFSeIR3P5Xv5az00wyIn35QRYTwdSYbz8pH8fxUUAtxnFvYmEmgI0wYXUXcCCSpeEVpXlsRhBnCEATxWylL9+EKCAYhe1NGstUa6356kS9NVvt3DU2fd+Wtbm/+lSbylJqsqkSm9CRhvoJVlvKPvF1RKY/FcPn5j4UfIMLn8D4UYb54BNsilTDXKnF4CfTobA0FpoW/LSp306wkXM+XaOJhZaFkcNM82ASNAWMrhrUbRfmyeI1FvRBTpN06WKxa9BK0o2E4Pd3zfBBEwPsv9sQBnmLVbLEIZ/Xe9LYwJu/Er17W6HYVBc7vmuk0xUQ+pqxdom5Fnp55SiytXLPYoMXNM4u4SNSCFWnrVIzKG3EGyMXo6n/BQOe+bX3FClY4PwydVhthOZ9NnS+ntiLh0fxtlUJHAuGaFoVmttpVMeum0p3WEXbcll94l1wM/gZ0Ccczop77VvN2I7TlsZCsuXf1WHvWEhjO8DPtyOVg2/mvK9QqboEth+7pD6NUQC1HN/TwvydGBARi9MZSzLE4b8Ru3XhX2PBxf8E1er2A6516o0w4sIA+lwURhAON82Kwe2iDAC1Watq4XHaGQ7skLcFOtI5lDxuM2gZe6WFIotPAhbaeYlU4to5cuarF1QrcZ/lwrLaCJl66JBocYZnrNlvm2+MBCTmUymPrYZVbjdlr/BxlMjmNmNI3SAAAAAElFTkSuQmCC'
      }
    ])

  // 控制面板
  lf.extension.control.addItem({
    //iconClass: 'lf-control-save',
    title: '',
    text: '保存',
    onClick: (lf, ev) => {
      console.log('getGraphData', lf.getGraphData())
    }
  })

    // 监听被点击节点
    lf.on('node:click', data => {
      console.log('data.type', data)

      openDrawer(data.data.type)

    })

    // 监听被点击节点
    lf.on('edge:click', data => {
      console.log('data.type', data)
      openDrawer(data.data.type)
    })

    lf.render({})
    // 方便调试
    window.lf = lf;


  }
</script>

<script type="text/javascript"> function openDrawer(drawerId) { const drawer = document.getElementById(drawerId); drawer.classList.add('open'); document.querySelector('.overlay').classList.add('show'); } function closeDrawer() { const drawers = document.querySelectorAll('.drawer'); drawers.forEach(drawer => { drawer.classList.remove('open'); }); document.querySelector('.overlay').classList.remove('show'); } </script>

[csx-bill]

新版本已解决