<!--
 * @Date: 2025-03-11 15:07:29
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-11 16:21:43
 * @FilePath: /logic-flow2/src/views/node-view/index.vue
 * @Description: 自定义节点model
-->
<template>
  <div class="container">
    <div ref="container" class="flow-container"></div>
  </div>
</template>

<script setup>
import LogicFlow from '@logicflow/core';
import UserTask from './userTask';
import data from './data';
import './index.less';

const SilentConfig = {
  stopScrollGraph: true,
  stopMoveGraph: true,
  stopZoomGraph: true,
};

const container = ref(null);
let lf = null;

onMounted(() => {
  lf = new LogicFlow({
    container: container.value,
    grid: true,
    ...SilentConfig,
  });

  lf.register(UserTask);
  lf.render(data);
  lf.translateCenter();

  // node 点击事件
  lf.on('node:click', ({ data }) => {
    lf.setProperties(data.id, {
      // 改变业务属性
      isClicked: !data.properties.isClicked,
      scale: 0.8, // 缩小
    });
  });
});
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.flow-container {
  flex: 1;
  width: 100%;
  height: 100%;
}
</style>