moon-studio / vite-vue-bpmn-process Goto Github PK

你好，我点击左面第一流程SequenceFlow是属性面板没有条件设置的，右边三个SequenceFlow是有条件设置的
1、当我点击左面第一个SequenceFlow元素是，右面属性面板没有条件设置是正确的，然后我点击右面三个带分支条件的SequenceFlow的元素，结果属性面板不显示条件条件设置，只有全部取消元素选中状态，再点击右面三个SequenceFlow就会重新出现
2、相反，先点击右面三个SequenceFlow的任意一个SequenceFlow元素，属性面板出现条件设置是正确的，但是里面的值更新后切换其他SequenceFlow会出现值不更新情况，之后再点击左面第一个SequenceFlow的元素，发现属性面板带有条件设置，这是错误的

截图里面的这个Details我在系统的界面里面没找到在哪里回显 是不是缺少这部分配置?

自定义panel中如何添加任务节点的input和output功能

I cannot build the project I got an error with vite build which is::

SyntaxError: Unexpected token 'export'
at wrapSafe (internal/modules/cjs/loader.js:1001:16)
at Module._compile (internal/modules/cjs/loader.js:1049:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
at internal/main/run_main_module.js:17:47

the built .js file is::

(node:14860) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use node --trace-warnings ... to show where the warning was created)
.......
Qu.use(Wkt);Qu.component("LucideIcon",da);Qu.component("EditItem",zkt);Qu.component("CollapseTitle",Ukt);Qu.mount("#app")});export default Kkt();

what should I do?

请描述您的需求或者改进建议：

仿照官方网点背景，为自定义网格添加了自动对齐、拖拽功能。

示例代码：

/*
 * CustomGrid.js
 */
import {
  append as svgAppend,
  attr as svgAttr,
  create as svgCreate,
  clear as svgClear
} from 'tiny-svg'
import { query } from 'min-dom'
import { quantize } from 'diagram-js/lib/features/grid-snapping/GridUtil'
import { getMid } from 'diagram-js/lib/layout/LayoutUtil'

const GRID_COLOR = '#ccc'
const LAYER_NAME = 'djs-grid'
const SPACING = 40
const GRID_DIMENSIONS = {
  width: 100000,
  height: 100000
}

const randomNumber = () => Math.trunc(Math.random() * 1000000)

class CustomGrid {
  _canvas
  _visible
  _gfx

  constructor(canvas, eventBus) {
    this._canvas = canvas
    this._visible = false

    eventBus.on('diagram.init', () => this._init())
    eventBus.on('gridSnapping.toggle', ({ active }) => {
      this.toggle(active)
      this._centerGridAroundViewbox()
    })
    eventBus.on('canvas.viewbox.changed', ({ viewbox }) => {
      return this._centerGridAroundViewbox(viewbox)
    })
  }

  _init() {
    let defs = query('defs', this._canvas._svg)
    if (!defs) {
      defs = svgCreate('defs')
      svgAppend(this._canvas._svg, defs)
    }

    const patternId = 'djs-grid-pattern-' + randomNumber()

    /** Create Pattern */
    const pattern = svgCreate('pattern', {
      id: patternId,
      width: SPACING,
      height: SPACING,
      patternUnits: 'userSpaceOnUse'
    })
    const path1 = svgCreate('path', {
      d: 'M0 10h40M10 0v40M0 20h40M20 0v40M0 30h40M30 0v40',
      stroke: GRID_COLOR,
      fill: 'none',
      opacity: 0.2
    })
    const path2 = svgCreate('path', {
      d: 'M40 0H0v40',
      stroke: GRID_COLOR,
      fill: 'none'
    })
    svgAppend(pattern, path1)
    svgAppend(pattern, path2)
    svgAppend(defs, pattern)

    /** Create Gfx */
    this._gfx = svgCreate('rect', {
      x: -(GRID_DIMENSIONS.width / 2),
      y: -(GRID_DIMENSIONS.height / 2),
      width: GRID_DIMENSIONS.width,
      height: GRID_DIMENSIONS.height,
      fill: `url(#${patternId})`
    })
  }

  _centerGridAroundViewbox(viewbox) {
    if (!viewbox) {
      viewbox = this._canvas.viewbox()
    }

    const mid = getMid(viewbox)

    svgAttr(this._gfx, {
      x: -(GRID_DIMENSIONS.width / 2) + quantize(mid.x, SPACING),
      y: -(GRID_DIMENSIONS.height / 2) + quantize(mid.y, SPACING)
    })
  }

  isVisible() {
    return this._visible
  }

  toggle(visible) {
    if (typeof visible === 'undefined') {
      visible = !this._visible
    }

    if (visible === this._visible) {
      return
    }

    const parent = this._getParent()

    if (visible) {
      svgAppend(parent, this._gfx)
    } else {
      svgClear(parent)
    }

    this._visible = visible
  }

  _getParent() {
    return this._canvas.getLayer(LAYER_NAME, -2)
  }
}

CustomGrid.$inject = ['canvas', 'eventBus']

export default {
  __init__: ['grid'],
  grid: ['type', CustomGrid]
}

Hi there I saw your latest update for the color picker and it's amazing thanks for your attention and updating.
the last thing I'm involved with is this::

Can we add some custom elements we are designing with the draw ability?

猜测是因为这两个对象不相等没有移除属性导致的

我是直接导入一个带有扩展属性的bpmn文件,本地和线上的demo都试了点击移除无效

Hi I have created a custom component and Util for showing on the panel...
I can save and load entered value for each property completely.
but I can not show saved and loaded data on the table
I mean this:

solving this issue will be my end step
I really need this issue complete
please help me

I'm wondering if you can provide advice here.

I am trying to listen to CTRL-click / CMD-click when you click on an element, such as a task.

I tried

  modeler.on('element.click', (event) => {
    const element = event.element;

    if (event.originalEvent.metaKey || event.originalEvent.ctrlKey) {
      // do something
    } else {
      // do something else
    }
  });

But it appears that for whatever reason, when you CMD/CTRL click on an element, it does not trigger the 'element.click' event at all.

I tried disabling the keyboard bindings but that did not help.

I also tried with

  modeler.on('element.mousedown', (event) => {
    console.log('element.mousedown.event', event);
    console.log('element.mousedown.event.originalEvent', event.originalEvent);

    const element = event.element;

    if (event.originalEvent.metaKey || event.originalEvent.ctrlKey) {
      console.log('element.cmd-mousedown.element', element);
      console.log('element.cmd-mousedown.element.incoming', element.incoming);
      console.log('element.cmd-mousedown.element.outgoing', element.outgoing);
    }
  });

But it's a similar issue, when I click on an element, such as a task, it does not trigger the 'element.mousedown'
event at all, with or without modifier keys pressed down

I was able to achieve a workaround by listening for the ALT key instead:

  modeler.on('element.click', (event) => {
    const element = event.element;

    if (event.originalEvent.altKey) {
      // do something
    } else {
      // do something else
    }
  });

The above works.. but I was really hoping to use the CMD/CTRL key instead of the ALT key.

Do you know why the above is not working with the CMD/CTRL key? I believe this should work..

Many thanks!!

still have #43 issue :) I'm going crazy with myself I can't handle it
this is my repo:
https://github.com/TaheriSohrab/SeenTa-BPMN
can you give me and example in code please galaxy

I'm trying to modify the behaviour of your CustomRules here

Currently it seems like this code is being executed, not only when you attempt to delete an element but every time you select any element.. which is problematic because I want to intercept the deletion of an element at the moment someone tries to delete it but currently I cannot seem to differentiate between when a user actually tries to delete something, and when they have just clicked on it (selected it).

Can you explain this behaviour, and possibly tell me how I can "do something" only when a user is actually attempting to delete something?

Many thanks!

如题
NaiveUI 怎么好换成element-plus？作者有思路吗？麻烦指导下。

Hi there, I'm using your source and project, which is a matter of pride.
But I want to add some new custom elements in the change type, like adding some flow beside default flow and conditional flow between elements and drawing the custom shape I wanna add it
Is it possible?
I've been involved with that for a month but couldn't find any solution

with regards

左击元素 也没有删除图标, 键盘delete 也无法删除

hi there I wanna add a color picker to the context pad and change the color of the connectors by clicking on the color which is selected from the color palette popup

但是你的演示址不会报错。

目前全局把naive-ui相关的组件替换成了element-plus，但里面好多语法是不能兼容的

运行时报了一大堆错，无法运行
Vite Error, /node_modules/.vite/deps/vue.js?v=b3a7f31e optimized info should be defined
Vite Error, /node_modules/.vite/deps/lucide-vue-next.js?v=7cef59f1 optimized info should be defined
Vite Error, /node_modules/.vite/deps/vue.js?v=b3a7f31e optimized info should be defined
Vite Error, /node_modules/.vite/deps/vue.js?v=b3a7f31e optimized info should be defined (x2)
Vite Error, /node_modules/.vite/deps/vue.js?v=b3a7f31e optimized info should be defined (x3)
Vite Error, /node_modules/.vite/deps/vue.js?v=b3a7f31e optimized info should be defined (x4)
Vite Error, /node_modules/.vite/deps/vue.js?v=b3a7f31e optimized info should be defined (x5)

https://github.com/miyuesc/bpmn-process-designer

是bpmn-process-designer的vue3.0版本吗？我看2.0那边写着不开源，但是这边又开源了。

还是非常的佩服作者的。

Short of manually renaming all the Chinese text to English, is there a better/easier way to have everything in English?

Many thanks

I really need to add a color picker to the context pad at the moment and if is it possible to add some custom shapes in ' change type '
I'm open-armed to pay for it if you can do it for me
is it possible for to you, please
the company put so much pressure on me for this

作者你为**开源事业做了极大地贡献！
太感谢了！
打赏一点小钱，不成敬意！

请问怎么让事件节点可以删除

我需要用户任务中添加指定用户，任务监听等操作，该参考哪些文档呢？

@miyuesc
create-anything麻烦看下,我看了半天没有找出处理的点。

例如taskListenter的属性就读不出来

 <activiti:taskListener event="create" class="com....."></activiti:taskListener>

Uncaught Error: property already defined; override of activiti:ScriptTask#activiti:resultVariable by activiti:ServiceTaskLike#activiti:resultVariable not allowed without redefines

为什么我下载下来不能运行呢？
yarn install
yarn dev
各种报错
类似这种
No matching export in "node_modules/@bpmn-io/properties-panel/dist/index.esm.js" for import "FeelTextAreaEntry"

node_modules/bpmn-js-properties-panel/dist/index.esm.js:3:415:
  3 │ ...psibleEntry, useLayoutState, HeaderButton, ArrowIcon, CreateIcon, DropdownButton, FeelTextAreaEntry } from '@bpmn-io/properties-panel';
    ╵