41. Theo dõi các sự kiện sau khi quá trình kéo và thả kết thúc

Bạn có thể sử dụng công cụ LinkingTool để theo dõi các sự kiện sau khi quá trình kéo kết nối kết thúc. Các bước cụ thể như sau:

1. Tạo mộtCông cụ liên kếtdụ và đặt nó làm công cụ mặc định của biểu đồ:

myDiagram.toolManager.linkingTool = go.LinkingTool mới();

2. màn hìnhCông cụ liên kếtcủadoCancel()VàdoActivate()Cách thực hiện các thao tác tương ứng sau khi kéo kết nối xong:

myDiagram.toolManager.linkingTool.doCancel = function () { // Sẽ được gọi khi người dùng hủy thao tác kéo và thả liên kết console.log("Đã hủy liên kết"); ; myDiagram.toolManager.linkingTool.doActivate = function () { // Sẽ được gọi là console.log("Liên kết đã hoàn thành"); go.LinkingTool.prototype.doActivate.call(this); };

42. Nghe sự kiện sửa đổi của canvas

Trong mọi trường hợp gojs, sẽ có một đoạn mã như vậy. Phương thức myDiagram.addDiagramListener('Modified', function() {...}) được sử dụng để lắng nghe sự kiện sửa đổi của canvas. được sửa đổi, hàm gọi lại tương ứng sẽ được thực thi. Tuy nhiên, phương pháp này không phù hợp để theo dõi liên tục, có nghĩa là nó chỉ có thể được kích hoạt sau khi mỗi sửa đổi được lưu.

// khi tài liệu được sửa đổi, thêm "*" vào tiêu đề và bật nút "Save" myDiagram.addDiagramListener("Modified", function (e) { var Button = document.getElementById("SaveButton"); if ( nút) nút.disabled = !myDiagram.isModified; var idx = document.title.indexOf("*"); console.log(111); if (myDiagram.isModified) { if (idx < 0) document.title += "*"; } else { if (idx >= 0) document.title = document.title.substr(0, idx } }); ;

Nếu bạn muốn theo dõi mọi thay đổi của khung vẽ và thực hiện thay đổi JSON tương ứng, sự kiện này sẽ được kích hoạt mỗi khi mô hình được sửa đổi và bạn có thể lấy dữ liệu JSON mới nhất trong hàm gọi lại. Nếu việc sửa đổi diễn ra thường xuyên và các thao tác tiếp theo phức tạp thì nên thêm một lớp chống rung vào chức năng sửa đổi.

myDiagram.addChangedListener((e) => { //Thực hiện thao tác thay đổi JSON tương ứng var jsonData = myDiagram.model.toJson(); });

43. Nghe sự kiện gọi lại sau khi nút bị xóa bởi del (dùng để thực hiện giao diện gọi để thực hiện một số thao tác xóa thực tế)

Tên sự kiện để xóa các nút là SelectionDeleting. Bạn có thể sử dụng đoạn mã sau để nghe sự kiện xóa một nút và gọi giao diện:

myDiagram.addDiagramListener("SelectionDeleting", (e) => { const đã xóaObj = e.subject.first(); const deleteKey = đã xóaObj.part.data.key; });

44. Nghe các sự kiện di chuyển chuột vào và ra của nút và hiển thị các phần tử cụ thể sau khi di chuột

Cơ chế xử lý sự kiện của GoJS được sử dụng để thực hiện chức năng hiển thị nút thêm nút khi chuột di chuột vào nút cây. Các bước triển khai cụ thể như sau:

1. Thêm thành phần nút vào mẫu nút để hiển thị nút thêm nút.
2. Thêm chức năng xử lý sự kiện di chuột vào mẫu nút. Khi chuột di chuột qua nút, nút thêm nút sẽ được hiển thị.
3. Thêm chức năng xử lý sự kiện di chuột ra trong mẫu nút. Khi chuột di chuyển ra khỏi nút, nút thêm nút sẽ bị ẩn.
4. Thêm chức năng xử lý sự kiện nhấp chuột vào mẫu nút thêm nút để thêm nút mới.

myDiagram.nodeTemplate = $( go.Node, "Auto", { mouseEnter: function (e, node) { // Khi chuột di chuột qua nút, nút thêm nút được hiển thị var addButton = node.findObject("addButton ") ; if (addButton) addButton.visible = true; }, mouseLeave: function (e, node) { // Khi chuột di chuyển ra khỏi nút, ẩn nút thêm nút var addButton = node.findObject("addButton"); , $(go.Shape, "RoundedRectangle", { fill: "white" }), $(go.TextBlock, { lề : 8 }, new go.Binding("text", "name")), $( go.Panel, "Horizontal", { căn chỉnh: go.Spot.BottomRight, dòng: 4 }, $( "Button", { name: "addButton",visible: false, click: (e, obj) => {} }, $(go.TextBlock, "+" ) ) ) );

45. Bản đồ cây nghe thực hiện chức năng mở rộng hoặc thu gọn các nút con bằng cách nhấp vào chính nút đó thay vì nhấp vào nút khác.

  // MyDiagram.addDiagramListener('ObjectSingleClicked', (e, obj) { var part = e.subject.part if (part instanceof go.Node) { if (part .isTreeExpanded ) { part.collapseTree() } else { part.expandTree() } } })

46. Nghe sự kiện gọi lại sau khi chỉnh sửa khối văn bản hoàn tất (dùng để triển khai giao diện gọi để thực hiện một số thao tác chỉnh sửa và sửa đổi thực tế)

Bạn có thể sử dụng sự kiện TextEdited của lớp DiagramEvent để gọi lại hàm ở cuối quá trình chỉnh sửa văn bản. Sự kiện này được kích hoạt khi trình soạn thảo chỉnh sửa văn bản đã hoàn tất và bị đóng.

myDiagram.addDiagramListener("TextEdited", (e) => { const editText = e.subject.text; const key = e.subject.part.data.key; console.log("Nội dung đã chỉnh sửa: " + editText ) ; console .log("Khóa nút:", khóa });

47. Sau khi soạn thảo văn bản xong, trạng thái chỉnh sửa có thể bị hủy sau khi nhấn Enter

Theo mặc định, sau khi người dùng chỉnh sửa xong khối văn bản. trình chỉnh sửa trạng thái của khối văn bản đang được chỉnh sửa và phím mặc định được nhấn Enter được coi là ngắt dòng.

Enter, tức là thao tác chỉnh sửa đã hoàn tất chứ không phải thay đổi dòng nên cần thay đổi một thuộc tính. để hoàn tất thao tác chỉnh sửa.

$( go.TextBlock, { editable: true, // Liệu nó có thể được chỉnh sửa hay không isMultiline: false, // Liệu nó có thể là nhiều dòng hay không, false }, new go.Binding("text", "tên") );

Mô tả các thuộc tính/phương thức được sử dụng:

1. go.LinkingTool.prototype.doActivate

Phương thức này sẽ được gọi khi người dùng nhấp vào nút liên kết công cụ hoặc nhấn phím tắt công cụ liên kết.

2. thuộc tính có thể định hình lại và phân đoạn lại

• Thuộc tính có thể định cấu hình lại: Cho biết nút dữ liệu có thể được định cấu hình lại hoặc không thể đặt thành true để có thể cấu hình lại nút. thay đổi hình dạng bằng cách kéo các cạnh hoặc góc.

• được đặt thành đúng, kết nối của nút có thể được thêm hoặc xóa bằng cách kéo dài giữa các nút. kết nối của nút sẽ không thay đổi.

3. Vai trò của makeTwoWay trong go.Binding("text", "name").makeTwoWay() mới

Phương thức makeTwoWay được sử dụng để đặt hai chiều liên kết thành liên kết trong GoJS, liên kết đến các liên kết. thuộc tính có mối liên hệ lại trong mô hình dữ liệu với các thuộc tính thuộc tính của đồ họa phần tử, hãy thực hiện khi một thuộc tính được thay đổi trong dữ liệu mô hình thì các thuộc tính của đồ họa phần tử cũng thay đổi tương thích ứng.

Khi bạn sử dụng phương thức makeTwoWay, link sẽ trở thành hai chiều, có nghĩa là khi thuộc tính của phần đồ họa tử tử đã thay đổi, các thuộc tính trong dữ liệu mô hình cũng thay đổi tương ứng. màn hình dữ liệu và đồ họa các phần tử sẽ trở nên thuận tiện và hiệu quả hơn.

4. Cách sử dụng Point cơ bản

Điểm là một lớp trong GoJS được sử dụng để thể hiện một điểm có thể được định nghĩa trên Sản phẩm hai chiều. được tìm thấy trong API GoJS tài liệu.

Trong GoJS, bạn có thể sử dụng go.Point(x, y) mới để tạo một Point đối tượng, trong đó x và y lần biểu tượng bùng nổ độ và độ của điểm. Ví dụ:

var point = go.Point mới(100, 200);

Bạn cũng có thể sử dụng phương thức Point.parse(str) để phân tích một chuỗi thành đối tượng Point.str là một chuỗi biểu tượng mode của một điểm.

var str = "100 200"; var point = go.Point.parse(str);

5. Hàm dragTool.gridSnapCellSize

dragTool.gridSnapCellSize là một trong những thuộc tính thuộc tính của công cụ kéo trong gojs. while hold. bố cục gọn gàng và đẹp mắt hơn. Ví dụ: nếu bạn đặt dragTool.gridSnapCellSize thành 20, phần tử sẽ được kéo dài gắn vào đường viền 20 pixel. lưới.

myDiagram = $(go.Diagram, "myDiagramDiv", { "draggingTool.gridSnapCellSize": new go.Size(1, 5), });

6.initialPosition tọa độ ban đầu

Khi gojs tạo bản vẽ, đồ họa được đặt ở giữa khung vẽ theo mặc định. gojs được bố trí ở giữa. bạn muốn bản vẽ bắt đầu từ góc trên bên trái, bạn có thể:

var myDiagram = $(go.Diagram, "myDiagramDiv", { initPosition: new go.Point(0, 0), // Vị trí thư giãn ban đầu});

7. Sửa đổi kiểu mặc định của nút

$( "Button", { width: 15, Height: 15, "ButtonBorder.fill": "green", // Thay đổi màu thành mặc định _buttonFillOver: "red", // Màu tô khi di chuột // _buttonStrokeOver: " #000", //Màu đường viền di chuột}, $(go.TextBlock, "Nút văn bản") );

8. Phóng to hoặc thu nhỏ, khôi phục và làm lại

// Phóng to myDiagram.scale += 0,1; // Giảm myDiagram.scale -= 0,1; // Khôi phục myDiagram.commandHandler.undo(); // Làm lại myDiagram.commandHandler.redo();

9. Tìm các phần tử nút dựa trên các giá trị khóa và tìm các phần bên trong các phần tử

// Tìm các phần tử dựa trên khóa giá trị const node = diagram.findNodeForKey("key value"); // Tìm các phần tử trong phần tử: Tìm các phần có phần tên tử: TEXT và thay đổi màu phông chữ chữ thành màu đỏ node.findObject("TEXT") .đột ngột = "đỏ";

10.toolManager.hoverDelay

tính toolManager.hoverDelay chuột qua một biểu tượng thành phần.

Nếu it was set to 200, điều đó có nghĩa là sự kiện di chuột sẽ không được kích hoạt khi chuột di chuột qua Đồ họa phần tử trong 200 mili giây.

myDiagram = $(go.Diagram, "myDiagramDiv", { "toolManager.hoverDelay": 200, // delay});

Thời gian địu ToolTip mặc định được hiển thị bằng cách di chuột. Định nghĩa hơi dài.

$( go.TextBlock, { width: 100, maxLines: 1, tràn: go.TextBlock.OverflowEllipsis, }, new go.Binding("text", "name").makeTwoWay(), { toolTip: $("ToolTip ", $(go.TextBlock, new go.Binding("text", "name"))), } );

Nếu bạn muốn biết các bài viết liên quan tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai .