|
|
|
|
@ -18,19 +18,26 @@
|
|
|
|
|
import { defineComponent, ref, inject } from 'vue' |
|
|
|
|
import { useI18n } from 'vue-i18n' |
|
|
|
|
import Styles from './dag.module.scss' |
|
|
|
|
import { NTooltip, NIcon, NButton, NSelect } from 'naive-ui'; |
|
|
|
|
import { SearchOutlined, DownloadOutlined, FullscreenOutlined, FullscreenExitOutlined, InfoCircleOutlined, FormatPainterOutlined } from '@vicons/antd'; |
|
|
|
|
import { useNodeSearch } from './dag-hooks'; |
|
|
|
|
import { NTooltip, NIcon, NButton, NSelect } from 'naive-ui' |
|
|
|
|
import { |
|
|
|
|
SearchOutlined, |
|
|
|
|
DownloadOutlined, |
|
|
|
|
FullscreenOutlined, |
|
|
|
|
FullscreenExitOutlined, |
|
|
|
|
InfoCircleOutlined, |
|
|
|
|
FormatPainterOutlined |
|
|
|
|
} from '@vicons/antd' |
|
|
|
|
import { useNodeSearch } from './dag-hooks' |
|
|
|
|
import { DataUri } from '@antv/x6' |
|
|
|
|
import { useFullscreen } from '@vueuse/core'; |
|
|
|
|
import { useRouter } from 'vue-router'; |
|
|
|
|
import { useFullscreen } from '@vueuse/core' |
|
|
|
|
import { useRouter } from 'vue-router' |
|
|
|
|
|
|
|
|
|
export default defineComponent({ |
|
|
|
|
name: "workflow-dag-toolbar", |
|
|
|
|
name: 'workflow-dag-toolbar', |
|
|
|
|
setup(props, context) { |
|
|
|
|
const { t } = useI18n(); |
|
|
|
|
const graph = inject('graph', ref()); |
|
|
|
|
const router = useRouter(); |
|
|
|
|
const { t } = useI18n() |
|
|
|
|
const graph = inject('graph', ref()) |
|
|
|
|
const router = useRouter() |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Node search and navigate |
|
|
|
|
@ -41,15 +48,15 @@ export default defineComponent({
|
|
|
|
|
allNodes, |
|
|
|
|
toggleSearchInput, |
|
|
|
|
searchInputVisible |
|
|
|
|
} = useNodeSearch({ graph }); |
|
|
|
|
} = useNodeSearch({ graph }) |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Download Workflow Image |
|
|
|
|
* @param {string} fileName |
|
|
|
|
* @param {string} bgColor
|
|
|
|
|
* @param {string} bgColor |
|
|
|
|
*/ |
|
|
|
|
const downloadPNG = (options = { fileName: 'dag', bgColor: '#f2f3f7' }) => { |
|
|
|
|
const { fileName, bgColor } = options; |
|
|
|
|
const { fileName, bgColor } = options |
|
|
|
|
graph.value?.toPNG( |
|
|
|
|
(dataUri: string) => { |
|
|
|
|
DataUri.downloadDataUri(dataUri, `${fileName}.png`) |
|
|
|
|
@ -69,8 +76,7 @@ export default defineComponent({
|
|
|
|
|
/** |
|
|
|
|
* Toggle fullscreen |
|
|
|
|
*/ |
|
|
|
|
const { isFullscreen, toggle } = useFullscreen(); |
|
|
|
|
|
|
|
|
|
const { isFullscreen, toggle } = useFullscreen() |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Open workflow version modal |
|
|
|
|
@ -82,9 +88,7 @@ export default defineComponent({
|
|
|
|
|
/** |
|
|
|
|
* Open DAG format modal |
|
|
|
|
*/ |
|
|
|
|
const openDagFormatModal = () => { |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
const openDagFormatModal = () => {} |
|
|
|
|
|
|
|
|
|
const onClose = () => { |
|
|
|
|
router.go(-1) |
|
|
|
|
@ -92,89 +96,160 @@ export default defineComponent({
|
|
|
|
|
|
|
|
|
|
return () => ( |
|
|
|
|
<div class={Styles.toolbar}> |
|
|
|
|
<span class={Styles['workflow-name']}>{t("project.dag.createWorkflow")}</span> |
|
|
|
|
<span class={Styles['workflow-name']}> |
|
|
|
|
{t('project.dag.createWorkflow')} |
|
|
|
|
</span> |
|
|
|
|
<div class={Styles['toolbar-right-part']}> |
|
|
|
|
{/* Search node */} |
|
|
|
|
<NTooltip v-slots={{ |
|
|
|
|
trigger: () => ( |
|
|
|
|
<NButton class={Styles['toolbar-right-item']} strong secondary circle type="info" onClick={toggleSearchInput} v-slots={{ |
|
|
|
|
icon: () => ( |
|
|
|
|
<NIcon> |
|
|
|
|
<SearchOutlined /> |
|
|
|
|
</NIcon> |
|
|
|
|
) |
|
|
|
|
}} /> |
|
|
|
|
), |
|
|
|
|
default: () => t('project.dag.search') |
|
|
|
|
}}> |
|
|
|
|
</NTooltip> |
|
|
|
|
<NTooltip |
|
|
|
|
v-slots={{ |
|
|
|
|
trigger: () => ( |
|
|
|
|
<NButton |
|
|
|
|
class={Styles['toolbar-right-item']} |
|
|
|
|
strong |
|
|
|
|
secondary |
|
|
|
|
circle |
|
|
|
|
type='info' |
|
|
|
|
onClick={toggleSearchInput} |
|
|
|
|
v-slots={{ |
|
|
|
|
icon: () => ( |
|
|
|
|
<NIcon> |
|
|
|
|
<SearchOutlined /> |
|
|
|
|
</NIcon> |
|
|
|
|
) |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
), |
|
|
|
|
default: () => t('project.dag.search') |
|
|
|
|
}} |
|
|
|
|
></NTooltip> |
|
|
|
|
<div |
|
|
|
|
class={`${Styles['toolbar-right-item']} ${Styles['node-selector']} ${searchInputVisible.value ? Styles['visible'] : ''}`} |
|
|
|
|
class={`${Styles['toolbar-right-item']} ${ |
|
|
|
|
Styles['node-selector'] |
|
|
|
|
} ${searchInputVisible.value ? Styles['visible'] : ''}`}
|
|
|
|
|
> |
|
|
|
|
<NSelect size="small" options={allNodes.value} onFocus={getAllNodes} onUpdateValue={searchNode} filterable /> |
|
|
|
|
<NSelect |
|
|
|
|
size='small' |
|
|
|
|
options={allNodes.value} |
|
|
|
|
onFocus={getAllNodes} |
|
|
|
|
onUpdateValue={searchNode} |
|
|
|
|
filterable |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
{/* Download workflow PNG */} |
|
|
|
|
<NTooltip v-slots={{ |
|
|
|
|
trigger: () => ( |
|
|
|
|
<NButton class={Styles['toolbar-right-item']} strong secondary circle type="info" onClick={() => downloadPNG()} v-slots={{ |
|
|
|
|
icon: () => ( |
|
|
|
|
<NIcon> |
|
|
|
|
<DownloadOutlined /> |
|
|
|
|
</NIcon> |
|
|
|
|
) |
|
|
|
|
}} /> |
|
|
|
|
), |
|
|
|
|
default: () => t('project.dag.download_png') |
|
|
|
|
}}> |
|
|
|
|
</NTooltip> |
|
|
|
|
<NTooltip |
|
|
|
|
v-slots={{ |
|
|
|
|
trigger: () => ( |
|
|
|
|
<NButton |
|
|
|
|
class={Styles['toolbar-right-item']} |
|
|
|
|
strong |
|
|
|
|
secondary |
|
|
|
|
circle |
|
|
|
|
type='info' |
|
|
|
|
onClick={() => downloadPNG()} |
|
|
|
|
v-slots={{ |
|
|
|
|
icon: () => ( |
|
|
|
|
<NIcon> |
|
|
|
|
<DownloadOutlined /> |
|
|
|
|
</NIcon> |
|
|
|
|
) |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
), |
|
|
|
|
default: () => t('project.dag.download_png') |
|
|
|
|
}} |
|
|
|
|
></NTooltip> |
|
|
|
|
{/* Toggle fullscreen */} |
|
|
|
|
<NTooltip v-slots={{ |
|
|
|
|
trigger: () => ( |
|
|
|
|
<NButton class={Styles['toolbar-right-item']} strong secondary circle type="info" onClick={toggle} v-slots={{ |
|
|
|
|
icon: () => ( |
|
|
|
|
<NIcon> |
|
|
|
|
{isFullscreen.value ? <FullscreenExitOutlined /> : <FullscreenOutlined />} |
|
|
|
|
</NIcon> |
|
|
|
|
) |
|
|
|
|
}} /> |
|
|
|
|
), |
|
|
|
|
default: () => isFullscreen.value ? t('project.dag.fullscreen_close') : t('project.dag.fullscreen_open') |
|
|
|
|
}}> |
|
|
|
|
</NTooltip> |
|
|
|
|
<NTooltip |
|
|
|
|
v-slots={{ |
|
|
|
|
trigger: () => ( |
|
|
|
|
<NButton |
|
|
|
|
class={Styles['toolbar-right-item']} |
|
|
|
|
strong |
|
|
|
|
secondary |
|
|
|
|
circle |
|
|
|
|
type='info' |
|
|
|
|
onClick={toggle} |
|
|
|
|
v-slots={{ |
|
|
|
|
icon: () => ( |
|
|
|
|
<NIcon> |
|
|
|
|
{isFullscreen.value ? ( |
|
|
|
|
<FullscreenExitOutlined /> |
|
|
|
|
) : ( |
|
|
|
|
<FullscreenOutlined /> |
|
|
|
|
)} |
|
|
|
|
</NIcon> |
|
|
|
|
) |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
), |
|
|
|
|
default: () => |
|
|
|
|
isFullscreen.value |
|
|
|
|
? t('project.dag.fullscreen_close') |
|
|
|
|
: t('project.dag.fullscreen_open') |
|
|
|
|
}} |
|
|
|
|
></NTooltip> |
|
|
|
|
{/* DAG Format */} |
|
|
|
|
<NTooltip v-slots={{ |
|
|
|
|
trigger: () => ( |
|
|
|
|
<NButton class={Styles['toolbar-right-item']} strong secondary circle type="info" onClick={openDagFormatModal} v-slots={{ |
|
|
|
|
icon: () => ( |
|
|
|
|
<NIcon> |
|
|
|
|
<FormatPainterOutlined /> |
|
|
|
|
</NIcon> |
|
|
|
|
) |
|
|
|
|
}} /> |
|
|
|
|
), |
|
|
|
|
default: () => t('project.dag.format') |
|
|
|
|
}}> |
|
|
|
|
</NTooltip> |
|
|
|
|
<NTooltip |
|
|
|
|
v-slots={{ |
|
|
|
|
trigger: () => ( |
|
|
|
|
<NButton |
|
|
|
|
class={Styles['toolbar-right-item']} |
|
|
|
|
strong |
|
|
|
|
secondary |
|
|
|
|
circle |
|
|
|
|
type='info' |
|
|
|
|
onClick={openDagFormatModal} |
|
|
|
|
v-slots={{ |
|
|
|
|
icon: () => ( |
|
|
|
|
<NIcon> |
|
|
|
|
<FormatPainterOutlined /> |
|
|
|
|
</NIcon> |
|
|
|
|
) |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
), |
|
|
|
|
default: () => t('project.dag.format') |
|
|
|
|
}} |
|
|
|
|
></NTooltip> |
|
|
|
|
{/* Version info */} |
|
|
|
|
<NTooltip v-slots={{ |
|
|
|
|
trigger: () => ( |
|
|
|
|
<NButton class={Styles['toolbar-right-item']} strong secondary circle type="info" onClick={openVersionModal} v-slots={{ |
|
|
|
|
icon: () => ( |
|
|
|
|
<NIcon> |
|
|
|
|
<InfoCircleOutlined /> |
|
|
|
|
</NIcon> |
|
|
|
|
) |
|
|
|
|
}} /> |
|
|
|
|
), |
|
|
|
|
default: () => t('project.dag.workflow_version') |
|
|
|
|
}}> |
|
|
|
|
</NTooltip> |
|
|
|
|
<NTooltip |
|
|
|
|
v-slots={{ |
|
|
|
|
trigger: () => ( |
|
|
|
|
<NButton |
|
|
|
|
class={Styles['toolbar-right-item']} |
|
|
|
|
strong |
|
|
|
|
secondary |
|
|
|
|
circle |
|
|
|
|
type='info' |
|
|
|
|
onClick={openVersionModal} |
|
|
|
|
v-slots={{ |
|
|
|
|
icon: () => ( |
|
|
|
|
<NIcon> |
|
|
|
|
<InfoCircleOutlined /> |
|
|
|
|
</NIcon> |
|
|
|
|
) |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
), |
|
|
|
|
default: () => t('project.dag.workflow_version') |
|
|
|
|
}} |
|
|
|
|
></NTooltip> |
|
|
|
|
{/* Save workflow */} |
|
|
|
|
<NButton class={Styles['toolbar-right-item']} type="info" secondary round>{t('project.dag.save')}</NButton> |
|
|
|
|
<NButton |
|
|
|
|
class={Styles['toolbar-right-item']} |
|
|
|
|
type='info' |
|
|
|
|
secondary |
|
|
|
|
round |
|
|
|
|
> |
|
|
|
|
{t('project.dag.save')} |
|
|
|
|
</NButton> |
|
|
|
|
{/* Return to previous page */} |
|
|
|
|
<NButton secondary round onClick={onClose}>{t('project.dag.close')}</NButton> |
|
|
|
|
<NButton secondary round onClick={onClose}> |
|
|
|
|
{t('project.dag.close')} |
|
|
|
|
</NButton> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
|
songjianet
3 years ago
committed by
GitHub