Usage

import the component through vue:

<RuleGoEditor
ref="ruleGoEditorRef"
        :data="data"
        :options="options"/>

<script setup>
import RuleGoEditor from './components/RuleGoEditor.vue'
import {ref} from "vue";

//reference to ruleGoEditor, which exposes methods that can be called visually
const ruleGoEditorRef = ref();
// Optional parameters
const options = ref()
// Rule chain data
const data = ref()
</script>

data attribute

RuleGo rule chain configuration, format reference: Rule Chain (opens new window) used for rendering flowcharts, If not provided, the workspace is in the initialization state.

options attribute

Field	Type	Required	Default Value	Description
url	string	No	-	Root path of RuleGo service interaction API
ruleChain.id	string	No	Automatically generated UUID	Rule chain ID
ruleChain.name	string	No	-	Rule chain name
startX	number	No	280	X coordinate of the first INPUT node
startY	number	No	280	Y coordinate of the first INPUT node
toolbar	toolbar	No	-	Used to display tool bar buttons
components	array	No	Rule Chain Node Components

Allows setting logicFlow configuration, refer to: Documentation (opens new window)

toolbar

Field	Type	Required	Default	Description
showTile	Boolean	No	true	Whether to display the rule chain title
showSelection	Boolean	No	true	Whether to display the [Select] button
showUndo	Boolean	No	true	Whether to display the [Undo] button
showRedo	Boolean	No	true	Whether to display the [Redo/Create] button
showMinMap	Boolean	No	true	Whether to display the [Mini Map] button
showTest	Boolean	No	true	Whether to display the [Run] button
showMinMap	Boolean	No	true	Whether to display the [Mini Map] button
showSetting	Boolean	No	true	Whether to display the [Settings] button
showFullScreen	Boolean	No	true	Whether to display the [Full Screen] button
showNew	Boolean	No	true	Whether to display the [Settings - New] button
showOpen	Boolean	No	true	Whether to display the [Settings - Open] button
showEdit	Boolean	No	true	Whether to display the [Settings - Edit] button
showIntegration	Boolean	No	true	Whether to display the [Settings - Integration] button
showExport	Boolean	No	true	Whether to display the [Settings - Export] button
showImport	Boolean	No	true	Whether to display the [Settings - Import] button
showNodeMgt	Boolean	No	true	Whether to display the [Settings - Component Management] button
showUserSetting	Boolean	No	true	Whether to display the [Settings - User Settings] button
showAbout	Boolean	No	true	Whether to display the [Settings - About] button
showDelete	Boolean	No	true	Whether to display the [Delete Selected] button
showSave	Boolean	No	true	Whether to display the [Save] button
showReset	Boolean	No	true	Whether to display the [Reset] button

Events

Event name	Description	Callback parameter
saveOk	saved successfully	rule chain data
saveError	Save failed	rule chain data,e
reset	Reset	rule chain data

Methods

Event name	Description	Calling parameter	Return parameter
render	Render rule chain	Rule chain data	-
save	Trigger save	-	-
getData	Gets the rule chain data	-	Rule chain data
setLocales	Set Locales	Locales file	-
lf	Get a logicFlow instance	-	logicFlow instance (opens new window)

To use it, add a reference to the RuleGoEditor component, and then call the component method through the reference, for example:

<RuleGoEditor ref="ruleGoEditorRef"/>

<script setup>
import RuleGoEditor from './components/RuleGoEditor.vue'
import {ref,onMounted} from "vue";

//reference to ruleGoEditor, which exposes methods that can be called visually
const ruleGoEditorRef = ref();

onMounted(() => {
// Test calling component methods
  const data1=ruleGoEditorRef.value.getData()
})
</script>