取消拖拽的实现

src/App.vue

@@ -13,8 +13,6 @@ import { setDefaultCss } from './hook/css';
 import { useI18n } from 'vue-i18n';
 const { t } = useI18n();
 
-import { AvoidLib } from '@/lib/avoid';
-
 import { globalLookup, globalSetting } from './hook/global';
 import { ElLoading } from 'element-plus';
 
@@ -41,37 +39,6 @@ onMounted(async () => {
     // 初始化载入 netlist 的 json 文件
     const [ netJson, skinBinary ] = await window.readNetFile();
 
-    // 载入 avoid lib
-    const wasmBinaryResponse = await fetch(window.avoidWasm);
-    const wasmBinary = await wasmBinaryResponse.arrayBuffer();
-    await AvoidLib.load({ wasmBinary });
-    const Avoid = AvoidLib.getInstance();
-    globalLookup.Avoid = Avoid;
-
-    
-    const router = new Avoid.Router(Avoid.PolyLineRouting);
-    const srcPt = new Avoid.Point(1.2, 0.5);
-    const dstPt = new Avoid.Point(1.5, 4);
-    const srcConnEnd = new Avoid.ConnEnd(srcPt);
-    const dstConnEnd = new Avoid.ConnEnd(dstPt);
-    const connRef = new Avoid.ConnRef(router);
-
-    
-    function connCallback(connRefPtr) {
-        const connRef = Avoid.wrapPointer(connRefPtr, Avoid.ConnRef);
-        console.log(`Connector ${connRef.id()} needs rerouting!`);
-        const route = connRef.displayRoute();
-        console.log('New path: ');
-        for (let i = 0; i < route.size(); i++) {
-            console.log(`(${route.get_ps(i).x}, ${route.get_ps(i).y})`);
-        }
-    }
-
-    connRef.setCallback(connCallback, connRef);
-    // Force inital callback:
-    router.processTransaction();
-    
-
     const render = globalLookup.netlistRender;
     const skinManager = globalLookup.skinManager;
 

src/hook/render/cell.js

@@ -1,5 +1,5 @@
 import * as d3 from 'd3';
-import { globalSetting } from '../global';
+import { globalLookup, globalSetting } from '../global';
 import { NetlistRender } from '.';
 import { LAYOUT_CONSTANT, makeEdgeId } from './layout';
 
@@ -63,7 +63,9 @@ export class CellRender {
             .each(function (data) {
                 const cellSelection = d3.select(this);
                 const manager = _this.createDataManager(cellSelection, data);
-                registerDragEvent(manager, rootRender);
+                
+                // TODO: 实现拖拽
+                // registerDragEvent(manager, rootRender);
             });        
         
         if (globalSetting.renderAnimation) {
@@ -149,11 +151,15 @@ async function dragStart(event, manager, rootRender) {
     const nodes = [];
     const edges = [];
 
+    const Avoid = globalLookup.Avoid;
+
     const layoutOptions = {
         // node 固定不动
-        'org.eclipse.elk.stress.fixed': true,
+        'elk.stress.fixed': true,
         // node 的 port 固定不动
-        'org.eclipse.elk.portConstraints': 'FIXED_POS'
+        'elk.portConstraints': 'FIXED_POS',
+        // 从左到右
+        'elk.direction': 'RIGHT'
     };
 
     // 添加自己的节点
@@ -237,6 +243,7 @@ async function dragStart(event, manager, rootRender) {
 
     nodes.push(cellNode);
 
+    context.cellNode = cellNode;
     context.elkGraph.children = nodes;
     context.elkGraph.edges = edges;
     context.elkGraph.layoutOptions = {
@@ -266,8 +273,11 @@ async function dragged(event, manager, rootRender) {
     // 根据最小拓扑图，提取出关键点，重新计算布局
     const context = manager.dragContext;
     const elkGraph = context.elkGraph;
-    const computedLayout = await rootRender.elk.layout(elkGraph);
+    const currentNode = elkGraph.children.at(-1);
-    console.log(computedLayout);
+    currentNode.x = event.x;
+    currentNode.y = event.y;
+
+    // const computedLayout = await rootRender.elk.layout(elkGraph);
 }
 
 /**

src/hook/render/index.js

@@ -32,6 +32,7 @@ export class NetlistRender {
                 'elk.spacing.nodeNode': 35,
                 'elk.layered.layering.strategy': 'NETWORK_SIMPLEX',
                 'elk.algorithm': 'layered',
+                'elk.direction': 'RIGHT',
                 'elk.partitioning.activate': true
             }
         };

src/hook/render/port.js

@@ -94,7 +94,9 @@ export class PortRender {
             .each(function (data) {                    
                 const portSelection = d3.select(this);
                 const manager = _this.createDataManager(portSelection, data);
-                registerDragEvent(manager, rootRender);       
+
+                // TODO: 实现拖拽
+                // registerDragEvent(manager, rootRender);       
             });
             
         this.selections = portSelections;