solon-flow基于bpmnJs的流程设计器

什么是 Solon-Flow-Bpmn-Designer

Solon-Flow-Bpmn-Designer 是一个基于bpmn重新加工的流程设计器,主要适配于Solon-Flow使用,它基于 Web Component,因此支持 Layui、Vue、React、Angular 等几乎任何前端框架。它适配了 PC Web

端,并提供了 亮色 和 暗色 两个主题。除此之外,它还提供了灵活的配置,开发者可以方便的使用其开发流程设计的应用。


快速开始

React集成

js 复制代码
import React from "react";
import { SolonFlowBpmnDesigner } from "solon-flow-bpmn-designer";
import "solon-flow-bpmn-designer/style.css";

interface SolonFlowDesignerProps {
    value: string;
    theme?: "light" | "dark";
    lang?: "en" | "zh";
    type?: "yaml" | "json";
    height?: number;
    onChange?: (value: string) => void;
}

export interface SolonFlowDesignerRef {
    /**
     * 属性面板显隐控制
     */
    panelShow: () => boolean;
    /**
     * 清除设计器
     */
    clear: () => void;
    /**
     * 获取值
     */
    getValue: () => string | undefined;
}

const SolonFlowDesigner = React.forwardRef<SolonFlowDesignerRef, SolonFlowDesignerProps>((props, ref) => {
    const designerRef = React.useRef(null);
    const [designer, setDesigner] = React.useState<SolonFlowBpmnDesigner>();

    React.useImperativeHandle(ref, () => ({
        panelShow: () => designer?.showPanel() || false,
        clear: () => designer?.clear(),
        getValue: () => designer?.getValue(),
    }));

    React.useEffect(() => {
        if (!!designerRef.current) {
            if (designer) return;
            const solonFlowBpmnDesigner = new SolonFlowBpmnDesigner({
                container: designerRef.current,
                height: props.height || 60,
                lang: props.lang || 'zh',
                theme: props.theme || 'light',
                value: props.value,
                onChange: (callback) => {
                    props.onChange?.(callback(props.type || 'yaml'));
                },
            });
            setDesigner(solonFlowBpmnDesigner);
            return () => solonFlowBpmnDesigner.destroy();
        }
    }, []);

    React.useEffect(() => {
        if (designer) {
            designer.changeLocal(props.lang || 'cn');
        }
    }, [props.lang]);

    React.useEffect(() => {
        if (designer) {
            designer.changeTheme();
        }
    }, [props.theme]);

    return <div ref={designerRef}/>
});

export default SolonFlowDesigner;

Vue3集成

html 复制代码
<template>
    <div ref="designer"></div>
</template>
<script setup lang="ts">
import { onMounted, ref, onUnmounted, watch } from "vue";
import "solon-flow-bpmn-designer/style.css";
import { SolonFlowBpmnDesigner } from "solon-flow-bpmn-designer";

interface SolonFlowDesignerProps {
    value: string;
    theme?: "light" | "dark";
    lang?: "en" | "zh";
    type?: "yaml" | "json";
    height?: number;
}

interface SolonFlowDesignerRef {
    /** 属性面板显隐控制 */
    panelShow: () => boolean;
    /** 清除设计器 */
    clear: () => void;
    /** 获取值 */
    getValue: () => string | undefined;
}

const props = withDefaults(defineProps<SolonFlowDesignerProps>(), {
    theme: "light",
    lang: "zh",
    type: "yaml",
    height: 60,
});

watch(() => props.theme, (newTheme) => {
    solonDesigner.value?.changeTheme(newTheme);
});
watch(() => props.lang, (newLang) => {
    solonDesigner.value?.changeLocal(newLang);
});

const designer = ref();
const solonDesigner = ref<SolonFlowBpmnDesigner>();
const emit = defineEmits(["change"]);

onMounted(() => {
    solonDesigner.value = new SolonFlowBpmnDesigner({
        container: designer.value,
        height: props.height || 60,
        lang: props.lang || 'zh',
        theme: props.theme || 'light',
        value: props.value,
        onChange: (callback) => {
            emit("change", callback(props.type))
        },
    });
});

onUnmounted(() => solonDesigner.value?.destroy())

/**
 * ref可调用方法
 */
defineExpose<SolonFlowDesignerRef>({
    panelShow: () => solonDesigner.value?.showPanel() || false,
    clear: () => solonDesigner.value?.clear(),
    getValue: () => solonDesigner.value?.getValue(),
});

</script>

Vue2集成

html 复制代码
<template>
    <div id="designer"></div>
</template>
<script>
import "solon-flow-bpmn-designer/style.css";
import { SolonFlowBpmnDesigner } from "solon-flow-bpmn-designer";
export default {
    name: 'SolonFlowDesigner',
    props: {
        value: {
            type: String,
            required: true
        },
        theme: {
            type: String,
            default: "light"
        },
        lang: {
            type: String,
            default: "zh"
        },
        type: {
            type: String,
            default: "yaml"
        },
        height: {
            type: Number,
            default: 60
        },
    },
    data() {
        return {
            designer: null,
        }
    },
    mounted() {
        this.designer = new SolonFlowBpmnDesigner({
            container: '#designer',
            height: this.height,
            lang: this.lang,
            theme: this.theme,
            value: this.value,
            onChange: (callback) => {
                this.$emit("change", callback(this.type))
            },
        });
    },
    methods: {
        panelShow() {
            this.designer?.showPanel();
        },
        clear() {
            this.designer?.clear();
        },
        getValue() {
            return this.designer?.getValue();
        }
    },
    watch: {
        lang: {
            handler(val) {
                if (val && this.designer) {
                    this.designer.changeLocal(val);
                }
            },
            deep: true,
            immediate: true
        },
        theme: {
            handler(val) {
                if (val && this.designer) {
                    this.designer.changeTheme(val);
                }
            },
            deep: true,
            immediate: true
        },
    },
}
</script>
相关推荐
知识分享小能手9 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发
YH丶浩3 天前
vue自定义数字滚动插件
开发语言·前端·javascript·vue
个人看法3 天前
h5实现一个吸附在键盘上的工具栏
前端·javascript·vue
PyAIGCMaster5 天前
我的项目开发的一般流程,供交流
react·nextjs
西洼工作室5 天前
设计模式与原则精要
前端·javascript·设计模式·vue
雪山上的小灰熊5 天前
UNIAPP如何自定义全局方法?
javascript·typescript·uni-app·vue·vue3·vite·hooks
aesthetician5 天前
ReactFlow:构建交互式节点流程图的完全指南
前端·流程图·react
fcm197 天前
(6) tauri之前端框架性能对比
前端·javascript·rust·前端框架·vue·react
王者鳜錸7 天前
方言普通话识别大模型,支持中英+202种方言识别
java·vue·语音识别
瓯雅爱分享7 天前
基于Java后端与Vue前端的MES生产管理系统,涵盖生产调度、资源管控及数据分析,提供全流程可视化支持,包含完整可运行源码,助力企业提升生产效率与管理水平
java·mysql·vue·软件工程·源代码管理