gojs

pages/go/tree/index.vue

@@ -87,12 +87,16 @@ export default {
       let $ = go.GraphObject.make;
       this.go = $(go.Diagram, "card", {
         "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
-        layout: $(
-          go.TreeLayout, // specify a Diagram.layout that arranges trees
-          { angle: 90, layerSpacing: 35 }
-        )
+        // layout: $(
+        //   go.TreeLayout, // specify a Diagram.layout that arranges trees
+        //   { angle: 90, layerSpacing: 35 }
+        // ),
+        // nodeSelectionAdornmentTemplate:
+        //           $(go.Adornment, "Auto",
+        //               $(go.Shape, "Rectangle", { fill: "red", stroke: "red" ,strokeWidth:2}),
+        //           )
       });
-     
+
       var myModel = $(go.TreeModel);
       // in the model data, each node is represented by a JavaScript object:
 
@@ -105,16 +109,39 @@ export default {
           "Hi,henq",
           { margin: 12, stroke: "#fff", font: "bold 16px '宋体'" },
           new go.Binding("text", "name")
-        ),{
-          contextClick:(e,obj)=>{
+        ),
+        {
+          contextClick: (e, obj) => {
             // alert(obj.data.key+":"+obj.data.name);
-            console.warn("info",e,obj)
-            this.onContextmenu(e.event,obj.data)
+            console.warn("info", e, obj);
+            this.onContextmenu(e.event, obj.data);
           },
-          doubleClick:(e,obj)=>{
+          doubleClick: (e, obj) => {
             alert(321);
-          }
-        }
+          },
+          angle: 45,
+          // mouseEnter:(e,obj)=>{
+          //   console.warn(e,obj);
+          //   if(obj.part){
+          //     obj.part.fill="red"
+          //   }
+          // }
+          // mouseEnter: function(e, obj) {
+          //   console.log(obj)
+          //   obj.background = "green";
+          //   obj.stroke = "dodgerblue";
+          //   obj.toolTip="hello henq!"
+          // },
+          // mouseLeave: function(e, obj) {
+          //    obj.background = "orange";
+          //   obj.opacity = 1;
+          //   obj.strokeWidth = 2;
+          //   obj.stroke = "gray";
+          // }
+        },
+        new go.Binding("background","isSelected",(v)=>{
+          return v?"green":"red"
+        }).ofObject()
       );
       this.go.linkTemplate = $(
         go.Link,
@@ -122,8 +149,9 @@ export default {
         $(go.Shape, { strokeWidth: 1, stroke: "#ddd" })
       ); // the link shape
 
-      myModel.nodeDataArray = this.data;
+      // myModel.nodeDataArray = this.data;
       this.go.model = myModel;
+      this.go.add($(go.Part, "Table",$(go.Picture,{source:"/static/logo.png",margin:10,column:1})))
     },
     svg() {
       this.show = !this.show;
@@ -134,9 +162,9 @@ export default {
           maxSize: new go.Size(1200, NaN)
         });
         console.log(this.$refs.svg);
-        this.$nextTick(()=>{
+        this.$nextTick(() => {
           document.getElementById("svg").appendChild(svg);
-        })       
+        });
       }
     },
     onContextmenu(event, a) {
@@ -208,11 +236,11 @@ export default {
   background-color: white;
   top: 150px;
   left: 0;
-  rect{
+  rect {
     // fill:wheat;
     cursor: pointer;
   }
-  rect:hover{
+  rect:hover {
     fill: tomato;
   }
 }