浏览代码

graph 注释添加

haojianlong 4 年之前
父节点
当前提交
a8390ca5af

+ 33 - 2
persagy-web-graph/src/SGraphItem.ts

@@ -40,9 +40,11 @@ export class SGraphItem extends SObject {
     /** 场景对象 */
     private _scene: SGraphScene | null = null;
     get scene(): SGraphScene | null {
+        // 父节点不为空
         if (null != this._parent) {
             return this._parent.scene;
         } else {
+            // 否则
             return this._scene;
         }
     }
@@ -87,6 +89,7 @@ export class SGraphItem extends SObject {
     }
     set zOrder(v: number) {
         this._zOrder = v;
+        // 父节点不为空
         if (this._parent != null) {
             this._parent.children.sort(SGraphItem.sortItemZOrder);
         }
@@ -100,6 +103,7 @@ export class SGraphItem extends SObject {
         return this.pos.x;
     }
     set x(v: number) {
+        // 与旧值相等
         if (this.pos.x == v) {
             return;
         }
@@ -112,6 +116,7 @@ export class SGraphItem extends SObject {
         return this.pos.y;
     }
     set y(v: number) {
+        // 与旧值相等
         if (this.pos.y == v) {
             return;
         }
@@ -307,6 +312,7 @@ export class SGraphItem extends SObject {
      * 更新 Item
      */
     update(): void {
+        // item 在场景中
         if (null != this.scene) {
             const view = this.scene.view;
             if (null != view) {
@@ -361,6 +367,7 @@ export class SGraphItem extends SObject {
      * @return item 的路径节点列表
      */
     itemPath(): SGraphItem[] {
+        // 有父节点
         if (this.parent != null) {
             let list = this.parent.itemPath();
             list.push(this);
@@ -390,6 +397,7 @@ export class SGraphItem extends SObject {
      * @return 在场景中的坐标
      */
     mapToScene(x: number, y: number): SPoint {
+        // 父节点为空
         if (this.parent == null) {
             return new SPoint(x, y);
         }
@@ -407,6 +415,7 @@ export class SGraphItem extends SObject {
     scene2itemMattrix(): SMatrix {
         let m = new SMatrix();
         let list = this.itemPath();
+        // 遍历从根节点到当前 item 的路径数组
         for (let item of list) {
             m.translate(item.x, item.y);
             m.scale(item.scale, item.scale);
@@ -430,8 +439,10 @@ export class SGraphItem extends SObject {
      * @return 是否处理事件
      */
     onClick(event: SMouseEvent): boolean {
+        // 遍历子节点
         for (let i = this.children.length - 1; i >= 0; i--) {
             let item = this.children[i];
+            // 子节点接收事件且可见
             if (!this.acceptEvent() || !item.visible) {
                 continue;
             }
@@ -452,9 +463,11 @@ export class SGraphItem extends SObject {
      * @return 是否处理事件
      */
     onDoubleClick(event: SMouseEvent): boolean {
+        // 遍历子节点
         for (let i = this.children.length - 1; i >= 0; i--) {
             let item = this.children[i];
             if (!this.acceptEvent() || !item.visible) {
+                // 子节点接收事件且可见
                 continue;
             }
             let ce = SGraphItem.toChildMouseEvent(item, event);
@@ -474,10 +487,12 @@ export class SGraphItem extends SObject {
      * @return 是否处理事件
      */
     onMouseDown(event: SMouseEvent): boolean {
+        // 遍历子节点
         for (let i = this.children.length - 1; i >= 0; i--) {
             try {
                 let item = this.children[i];
                 if (!this.acceptEvent() || !item.visible) {
+                    // 子节点接收事件且可见
                     continue;
                 }
                 let ce = SGraphItem.toChildMouseEvent(item, event);
@@ -494,7 +509,7 @@ export class SGraphItem extends SObject {
         if (this.scene) {
             this._lastGrab = this.scene.grabItem;
         }
-        // 移动
+        // 移动
         if (this.moveable) {
             this._mouseDownPos = new SPoint(event.x, event.y);
             this._isMoving = true;
@@ -511,9 +526,11 @@ export class SGraphItem extends SObject {
      * @return 是否处理事件
      */
     onMouseMove(event: SMouseEvent): boolean {
+        // 遍历子节点
         for (let i = this.children.length - 1; i >= 0; i--) {
             let item = this.children[i];
             if (!this.acceptEvent() || !item.visible) {
+                // 子节点接收事件且可见
                 continue;
             }
             let ce = SGraphItem.toChildMouseEvent(item, event);
@@ -526,11 +543,13 @@ export class SGraphItem extends SObject {
         if (this.scene && this.scene.view) {
             this.scene.view.cursor = this.cursor;
         }
+
         if (
             event.buttons & SMouseButton.LeftButton &&
             this.moveable &&
             this._isMoving
         ) {
+            // 左键移动且节点可移动
             let old = new SPoint(this.pos.x, this.pos.y);
             const mp = this.toParentChange(
                 event.x - this._mouseDownPos.x,
@@ -543,8 +562,13 @@ export class SGraphItem extends SObject {
         // 处理 hover
         const scene = this.scene;
         if (null != scene) {
+            // 所在场景不为空
+
             if (scene.hoverItem == null || scene.hoverItem !== this) {
+                // 鼠标 hover 的 item 为空 或者 不是自身
+
                 if (scene.hoverItem != null) {
+                    //场景中记录的 hoveritem 不为空
                     scene.hoverItem.onMouseLeave(event);
                 }
                 this.onMouseEnter(event);
@@ -562,6 +586,7 @@ export class SGraphItem extends SObject {
      * @return 是否处理事件
      */
     onMouseUp(event: SMouseEvent): boolean {
+        // 遍历子节点
         for (let i = this.children.length - 1; i >= 0; i--) {
             let item = this.children[i];
             if (!this.acceptEvent() || !item.visible) {
@@ -582,6 +607,7 @@ export class SGraphItem extends SObject {
         }
 
         this.$emit("onMouseUp", event);
+        // 处于移动态
         if (this._isMoving) {
             this._isMoving = false;
             this.releaseItem();
@@ -621,6 +647,7 @@ export class SGraphItem extends SObject {
      * @return 是否处理事件
      */
     onContextMenu(event: SMouseEvent): boolean {
+        // 遍历子节点
         for (let i = this.children.length - 1; i >= 0; i--) {
             let item = this.children[i];
             if (!this.acceptEvent() || !item.visible) {
@@ -679,6 +706,7 @@ export class SGraphItem extends SObject {
      */
     moveToOrigin(x: number, y: number): void {
         if (this.children && this.children.length) {
+            // 如果有子节点
             this.children.forEach((it): void => {
                 it.moveToOrigin(x, y);
             });
@@ -713,7 +741,7 @@ export class SGraphItem extends SObject {
         ce.matrix.translate(child.x, child.y);
         ce.matrix.scale(child.scale, child.scale);
         ce.matrix.rotate(0, 0, child.rotate);
-
+        // 不跟随缩放
         if (!child.isTransform) {
             ce.matrix.scale(child._inverseScale, child._inverseScale);
         }
@@ -734,6 +762,7 @@ export class SGraphItem extends SObject {
      * @param item    被锁定的 item
      */
     protected grabItem(item: SGraphItem): void {
+        // 在场景中
         if (this.scene != null) {
             this.scene.grabItem = item;
         }
@@ -743,6 +772,7 @@ export class SGraphItem extends SObject {
      * 释放被锁定的 item
      */
     protected releaseItem(): void {
+        // 在场景中
         if (this.scene != null) {
             this.scene.grabItem = null;
         }
@@ -758,6 +788,7 @@ export class SGraphItem extends SObject {
     protected toParentChange(x: number, y: number): SPoint {
         const m = new SMatrix();
         m.scale(this.scale, this.scale);
+        // 不跟随缩放
         if (!this.isTransform) {
             m.scale(this._inverseScale, this._inverseScale);
         }

+ 14 - 0
persagy-web-graph/src/SGraphScene.ts

@@ -114,12 +114,15 @@ export class SGraphScene extends SObject {
         let rect: SRect | null = null;
         // 依次取 item 列中的所有 item。将所有 item 的边界做并焦处理。
         for (let item of this.root.children) {
+            // 只对可见 item 处理 或者对所有 item 处理
             if ((flag && item.visible) || !flag) {
+                // 第一次循环
                 if (rect == null) {
                     rect = item
                         .boundingRect()
                         .translated(item.pos.x, item.pos.y);
                 } else {
+                    // 否则
                     rect.union(
                         item.boundingRect().translated(item.pos.x, item.pos.y)
                     );
@@ -145,9 +148,11 @@ export class SGraphScene extends SObject {
                 continue;
             }
 
+            // 第一次循环
             if (rect == null) {
                 rect = item.boundingRect().translated(item.pos.x, item.pos.y);
             } else {
+                // 否则
                 rect.union(
                     item.boundingRect().translated(item.pos.x, item.pos.y)
                 );
@@ -183,6 +188,7 @@ export class SGraphScene extends SObject {
      * @return 是否处理事件
      */
     onDoubleClick(event: SMouseEvent): boolean {
+        // grabItem 不为空
         if (this.grabItem != null) {
             return this.grabItem.onDoubleClick(
                 this.toGrabItemMotionEvent(this.grabItem, event)
@@ -198,12 +204,14 @@ export class SGraphScene extends SObject {
      * @return 是否处理事件
      */
     onMouseDown(event: SMouseEvent): boolean {
+        // grabItem 不为空
         if (this.grabItem != null) {
             return this.grabItem.onMouseDown(
                 this.toGrabItemMotionEvent(this.grabItem, event)
             );
         }
         const flag = this.root.onMouseDown(event);
+        // 是否有子节点处理了事件
         if (!flag) {
             this.selectContainer.clear();
         }
@@ -217,6 +225,7 @@ export class SGraphScene extends SObject {
      * @return 是否处理事件
      */
     onMouseMove(event: SMouseEvent): boolean {
+        // grabItem 不为空
         if (this.grabItem != null) {
             return this.grabItem.onMouseMove(
                 this.toGrabItemMotionEvent(this.grabItem, event)
@@ -232,6 +241,7 @@ export class SGraphScene extends SObject {
      * @return 是否处理事件
      */
     onMouseUp(event: SMouseEvent): boolean {
+        // grabItem 不为空
         if (this.grabItem != null) {
             return this.grabItem.onMouseUp(
                 this.toGrabItemMotionEvent(this.grabItem, event)
@@ -247,6 +257,7 @@ export class SGraphScene extends SObject {
      * @return 是否处理事件
      */
     onContextMenu(event: SMouseEvent): boolean {
+        // grabItem 不为空
         if (this.grabItem != null) {
             return this.grabItem.onContextMenu(
                 this.toGrabItemMotionEvent(this.grabItem, event)
@@ -262,6 +273,7 @@ export class SGraphScene extends SObject {
      * @param event       事件参数
      */
     onKeyDown(event: KeyboardEvent): void {
+        // grabItem 不为空
         if (this.grabItem != null) {
             return this.grabItem.onKeyDown(event);
         }
@@ -274,6 +286,7 @@ export class SGraphScene extends SObject {
      * @param event       事件参数
      */
     onKeyUp(event: KeyboardEvent): void {
+        // grabItem 不为空
         if (this.grabItem != null) {
             return this.grabItem.onKeyUp(event);
         }
@@ -293,6 +306,7 @@ export class SGraphScene extends SObject {
     ): SMouseEvent {
         let se = { ...event };
         se.matrix = new SMatrix();
+        // 是否挂载到 view 上
         if (this.view) {
             se.matrix.translate(this.view.origin.x, this.view.origin.y);
             se.matrix.scale(this.view.scale, this.view.scale);

+ 63 - 1
persagy-web-graph/src/SGraphSelectContainer.ts

@@ -168,11 +168,14 @@ export class SGraphSelectContainer extends SGraphItem {
      * @param item    当前选中的 item
      */
     addItem(item: SGraphItem): void {
+        // 遍历已选中的 item 的列表
         for (let i = 0; i < this.itemList.length; i++) {
+            // 已存在不处理
             if (this.itemList[i] == item) {
                 return;
             }
         }
+        // item 可选且可见
         if (item.selectable && item.visible) {
             item.selected = true;
             this.itemList.push(item);
@@ -186,10 +189,12 @@ export class SGraphSelectContainer extends SGraphItem {
      * @param item    当前选中的 item
      */
     setItem(item: SGraphItem): void {
+        // 重置所有已选中 item
         this.itemList.forEach((t: SGraphItem): void => {
             t.selected = false;
         });
         this.itemList.length = 0;
+        // 可选且可见
         if (item.selectable && item.visible) {
             item.selected = true;
             this.itemList.push(item);
@@ -201,6 +206,7 @@ export class SGraphSelectContainer extends SGraphItem {
      * 清空选择对象
      */
     clear(): void {
+        // 重置所有选中 item
         this.itemList.forEach((t: SGraphItem): void => {
             t.selected = false;
         });
@@ -214,7 +220,9 @@ export class SGraphSelectContainer extends SGraphItem {
      * @param item    当前选中的 item
      */
     toggleItem(item: SGraphItem): void {
+        // 遍历已选中列表
         for (let i = 0; i < this.itemList.length; i++) {
+            // 已选中则反选
             if (this.itemList[i] == item) {
                 this.itemList[i].selected = false;
                 this.itemList.splice(i, 1);
@@ -228,6 +236,7 @@ export class SGraphSelectContainer extends SGraphItem {
                 return;
             }
         }
+        // 可选且可见
         if (item.selectable && item.visible) {
             item.selected = true;
             this.itemList.push(item);
@@ -241,31 +250,40 @@ export class SGraphSelectContainer extends SGraphItem {
      * @param type    对齐方式
      */
     layout(type: SGraphLayoutType): void {
+        // 已选中列表少于2项
         if (this.itemList.length < 2) {
             return;
         }
         switch (type) {
+            // 左对齐
             case SGraphLayoutType.Left:
                 this.alignLeft();
                 break;
+            // 底对齐
             case SGraphLayoutType.Bottom:
                 this.alignBottom();
                 break;
+            // 水平居中
             case SGraphLayoutType.Center:
                 this.alignCenter();
                 break;
+            // 垂直分布
             case SGraphLayoutType.Horizontal:
                 this.alignHorizontal();
                 break;
+            // 垂直居中
             case SGraphLayoutType.Middle:
                 this.alignMiddle();
                 break;
+            // 右对齐
             case SGraphLayoutType.Right:
                 this.alignRight();
                 break;
+            // 顶对齐
             case SGraphLayoutType.Top:
                 this.alignTop();
                 break;
+            // 垂直分布
             case SGraphLayoutType.Vertical:
                 this.alignVertical();
                 break;
@@ -281,19 +299,24 @@ export class SGraphSelectContainer extends SGraphItem {
      * @param type    操作类型
      */
     setOrder(type: SOrderSetType): void {
+        // 已选中列表少于1项
         if (this.itemList.length < 1) {
             return;
         }
         switch (type) {
+            // 置顶
             case SOrderSetType.Top:
                 this.setTop();
                 break;
+            // 置底
             case SOrderSetType.Bottom:
                 this.setBottom();
                 break;
+            // 上移一层
             case SOrderSetType.After:
                 this.setAfter();
                 break;
+            // 下移一层
             case SOrderSetType.Before:
                 this.setBefore();
                 break;
@@ -313,8 +336,10 @@ export class SGraphSelectContainer extends SGraphItem {
             standardItem.boundingRect().x,
             standardItem.boundingRect().y
         );
+        // 遍历已选中列表
         for (let i = 1; i < this.itemList.length; i++) {
             let curItem = this.itemList[i];
+            // 可移动
             if (curItem.moveable) {
                 // 将 p 转换为当前 item 中的坐标
                 let p1 = curItem.mapFromScene(p.x, p.y);
@@ -335,8 +360,10 @@ export class SGraphSelectContainer extends SGraphItem {
             standardItem.boundingRect().x,
             standardItem.boundingRect().y
         );
+        // 遍历已选中列表
         for (let i = 1; i < this.itemList.length; i++) {
             let curItem = this.itemList[i];
+            // 可移动
             if (curItem.moveable) {
                 let p1 = curItem.mapFromScene(p.x, p.y);
                 curItem.y =
@@ -355,8 +382,10 @@ export class SGraphSelectContainer extends SGraphItem {
             standardItem.boundingRect().right,
             standardItem.boundingRect().bottom
         );
+        // 遍历已选中列表
         for (let i = 1; i < this.itemList.length; i++) {
             let curItem = this.itemList[i];
+            // 可移动
             if (curItem.moveable) {
                 let p1 = curItem.mapFromScene(p.x, p.y);
                 curItem.x =
@@ -376,8 +405,10 @@ export class SGraphSelectContainer extends SGraphItem {
             standardItem.boundingRect().right,
             standardItem.boundingRect().bottom
         );
+        // 遍历已选中列表
         for (let i = 1; i < this.itemList.length; i++) {
             let curItem = this.itemList[i];
+            // 可移动
             if (curItem.moveable) {
                 let p1 = curItem.mapFromScene(p.x, p.y);
                 curItem.y =
@@ -398,8 +429,10 @@ export class SGraphSelectContainer extends SGraphItem {
         let center = standardItem.boundingRect().center();
         // 中心点转换为场景坐标
         let p = standardItem.mapToScene(center.x, center.y);
+        // 遍历已选中列表
         for (let i = 1; i < this.itemList.length; i++) {
             let curItem = this.itemList[i];
+            // 可移动
             if (curItem.moveable) {
                 let p1 = curItem.mapFromScene(p.x, p.y);
                 // 根据等式差值相等 newcenterx - oldcenterx = newposx - oldposx => newposx = newcenterx - oldcenterx + oldposx
@@ -421,8 +454,10 @@ export class SGraphSelectContainer extends SGraphItem {
         let center = standardItem.boundingRect().center();
         // 中心点转换为场景坐标
         let p = standardItem.mapToScene(center.x, center.y);
+        // 遍历已选中列表
         for (let i = 1; i < this.itemList.length; i++) {
             let curItem = this.itemList[i];
+            // 可移动
             if (curItem.moveable) {
                 let p1 = curItem.mapFromScene(p.x, p.y);
                 curItem.y =
@@ -437,9 +472,11 @@ export class SGraphSelectContainer extends SGraphItem {
      * 垂直分布
      */
     private alignVertical(): void {
+        // 已选中列表不足3项
         if (this.itemList.length < 3) {
             return;
         }
+        // 遍历选中列表
         for (let i = 0; i < this.itemList.length - 1; i++) {
             for (let j = 0; j < this.itemList.length - 1 - i; j++) {
                 let curItemCenter = this.itemList[j].boundingRect().center();
@@ -472,7 +509,7 @@ export class SGraphSelectContainer extends SGraphItem {
             bottom.mapToScene(bottomCenter.x, bottomCenter.y).y -
             top.mapToScene(topCenter.x, topCenter.y).y;
         let average = leftToRight / (this.itemList.length - 1);
-
+        // 遍历选中列表
         for (let k = 1; k < this.itemList.length - 1; k++) {
             let curItem = this.itemList[k];
             if (curItem.moveable) {
@@ -493,9 +530,11 @@ export class SGraphSelectContainer extends SGraphItem {
      * 水平分布
      */
     private alignHorizontal(): void {
+        // 已选中列表不足3项
         if (this.itemList.length < 3) {
             return;
         }
+        // 遍历选中列表
         for (let i = 0; i < this.itemList.length - 1; i++) {
             for (let j = 0; j < this.itemList.length - 1 - i; j++) {
                 let curItemCenter = this.itemList[j].boundingRect().center();
@@ -529,6 +568,7 @@ export class SGraphSelectContainer extends SGraphItem {
             left.mapToScene(leftCenter.x, leftCenter.y).x;
         let average = leftToRight / (this.itemList.length - 1);
 
+        // 遍历选中列表
         for (let k = 1; k < this.itemList.length - 1; k++) {
             let curItem = this.itemList[k];
             if (curItem.moveable) {
@@ -601,6 +641,7 @@ export class SGraphSelectContainer extends SGraphItem {
      */
     private setBefore(): void {
         const arr: SGraphItem[] = this.sortItemList(this.itemList, false);
+        // 按顺序 zOrder 减小
         arr.forEach((it): void => {
             if (it.parent) {
                 const min = it.zOrder;
@@ -635,6 +676,7 @@ export class SGraphSelectContainer extends SGraphItem {
      */
     private setAfter(): void {
         const arr: SGraphItem[] = this.sortItemList(this.itemList, false);
+        // 按顺序 zOrder 增加
         arr.forEach((it): void => {
             if (it.parent) {
                 const max = it.zOrder;
@@ -742,6 +784,7 @@ export class SGraphSelectContainer extends SGraphItem {
         if (this.itemList.length) {
             const fir = this.itemList[0];
             let rect = fir.boundingRect().adjusted(fir.pos.x, fir.pos.y, 0, 0);
+            // 遍历选中列表
             for (let i = 1; i < this.itemList.length; i++) {
                 const cur = this.itemList[i];
                 rect = rect.unioned(
@@ -785,6 +828,7 @@ export class SGraphSelectContainer extends SGraphItem {
     getNearestPoint(p: SPoint): void {
         let len = this.sceneDis;
         this.curIndex = -1;
+        // 遍历 8 个控制点
         for (let i = 0; i < this.pointList.length; i++) {
             let dis = SMathUtil.pointDistance(
                 p.x,
@@ -805,6 +849,7 @@ export class SGraphSelectContainer extends SGraphItem {
      * @return 对象边界区域
      */
     boundingRect(): SRect {
+        // 可见
         if (this.visible) {
             return new SRect(
                 -this.sceneDis,
@@ -840,12 +885,15 @@ export class SGraphSelectContainer extends SGraphItem {
      * @return 是否处理事件
      */
     onMouseDown(event: SMouseEvent): boolean {
+        // 鼠标左键
         if (event.buttons == 1) {
             this.getNearestPoint(new SPoint(event.x, event.y));
+            // 未店家到控制点
             if (this.curIndex < 0) {
                 this.curPoint = undefined;
                 return super.onMouseDown(event);
             } else {
+                // 否则
                 const cur = this.pointList[this.curIndex];
                 this.curPoint = new SPoint(cur.x, cur.y);
                 this.oldWidth = this.width;
@@ -866,6 +914,7 @@ export class SGraphSelectContainer extends SGraphItem {
      */
     onMouseMove(event: SMouseEvent): boolean {
         this.setCursor(9);
+        // 点击到控制点且有选中的 item ,item 可以改变大小
         if (
             this.curIndex > -1 &&
             this.count == 1 &&
@@ -880,6 +929,7 @@ export class SGraphSelectContainer extends SGraphItem {
             const oldSize = new SSize(this.width, this.height);
             let resultX, resultY;
             switch (this.curIndex) {
+                // 左上角
                 case 0:
                     resultX = this.width - difX;
                     resultY = this.height - difY;
@@ -892,6 +942,7 @@ export class SGraphSelectContainer extends SGraphItem {
                         this.y = this.y + mp.y;
                     }
                     break;
+                // 中上
                 case 1:
                     resultY = this.height - difY;
                     if (resultY > this.minHeight && resultY < this.maxHeight) {
@@ -899,6 +950,7 @@ export class SGraphSelectContainer extends SGraphItem {
                         this.y = this.y + mp.y;
                     }
                     break;
+                // 右上
                 case 2:
                     resultX = this.oldWidth + difX;
                     resultY = this.height - difY;
@@ -910,12 +962,14 @@ export class SGraphSelectContainer extends SGraphItem {
                         this.y = this.y + mp.y;
                     }
                     break;
+                // 右中
                 case 3:
                     resultX = this.oldWidth + difX;
                     if (resultX > this.minWidth && resultX < this.maxWidth) {
                         this.width = resultX;
                     }
                     break;
+                // 右下
                 case 4:
                     resultX = this.oldWidth + difX;
                     resultY = this.oldHeight + difY;
@@ -926,12 +980,14 @@ export class SGraphSelectContainer extends SGraphItem {
                         this.height = resultY;
                     }
                     break;
+                // 中下
                 case 5:
                     resultY = this.oldHeight + difY;
                     if (resultY > this.minHeight && resultY < this.maxHeight) {
                         this.height = resultY;
                     }
                     break;
+                // 左下
                 case 6:
                     resultX = this.width - difX;
                     resultY = this.oldHeight + difY;
@@ -943,6 +999,7 @@ export class SGraphSelectContainer extends SGraphItem {
                         this.height = resultY;
                     }
                     break;
+                // 左中
                 case 7:
                     resultX = this.width - difX;
                     if (resultX > this.minWidth && resultX < this.maxWidth) {
@@ -958,11 +1015,13 @@ export class SGraphSelectContainer extends SGraphItem {
             this.calExtreme();
         } else {
             let flag = true;
+            // 所有选中的均可移动
             for (let v of this.itemList) {
                 if (!v.moveable) {
                     flag = false;
                 }
             }
+            // 所有均可移动
             if (flag) {
                 super.onMouseMove(event);
                 this.setCursor(8);
@@ -1031,10 +1090,13 @@ export class SGraphSelectContainer extends SGraphItem {
 
             const r = painter.toPx(this.radius);
             painter.pen.lineDash = [];
+            // 遍历控制点
             this.pointList.forEach((t, i): void => {
                 if (i == this.curIndex) {
+                    // 是按下的项
                     painter.brush.color = this.fillColor;
                 } else {
+                    // 否则
                     painter.brush.color = SColor.White;
                 }
                 painter.drawCircle(t.x, t.y, r);

+ 15 - 0
persagy-web-graph/src/SGraphView.ts

@@ -50,10 +50,12 @@ export class SGraphView extends SCanvasView {
         return this._scene;
     }
     set scene(v: SGraphScene | null) {
+        // 置空旧场景
         if (this._scene != null) {
             this._scene.view = null;
         }
         this._scene = v;
+        // 设置新场景的视图为当前视图
         if (this._scene != null) {
             this._scene.view = this;
         }
@@ -127,6 +129,7 @@ export class SGraphView extends SCanvasView {
      * @param scale 适配所占绘制区域百分比
      */
     fitSceneToView(scale: number = 0.8): void {
+        // 视图展示的场景存在
         if (null == this.scene) {
             return;
         }
@@ -142,6 +145,7 @@ export class SGraphView extends SCanvasView {
      * @param scale 适配所占绘制区域百分比
      */
     fitSelectedToView(scale: number = 0.8): void {
+        // 视图展示的场景存在
         if (null == this.scene) {
             return;
         }
@@ -158,6 +162,7 @@ export class SGraphView extends SCanvasView {
      * @param scale    适配所占绘制区域百分比
      */
     fitItemToView(itemList: SGraphItem[], scale: number = 0.8): void {
+        // 视图展示的场景存在
         if (null == this.scene) {
             return;
         }
@@ -165,9 +170,11 @@ export class SGraphView extends SCanvasView {
 
         // 依次取 item 列中的所有 item。将所有 item 的边界做并焦处理。
         for (let item of itemList) {
+            // 第一次循环
             if (rect == null) {
                 rect = item.boundingRect().translated(item.pos.x, item.pos.y);
             } else {
+                // 否则
                 rect.union(
                     item.boundingRect().translated(item.pos.x, item.pos.y)
                 );
@@ -202,6 +209,7 @@ export class SGraphView extends SCanvasView {
      * @return 视图坐标
      */
     mapFromScene(x: number | SPoint, y?: number): SPoint {
+        // 是 SPoint 类型
         if (x instanceof SPoint) {
             // 如果传入的是 SPoint 对象
             return new SPoint(
@@ -396,6 +404,7 @@ export class SGraphView extends SCanvasView {
      * @param event       事件参数
      */
     protected onDoubleClick(event: MouseEvent): void {
+        // 视图展示的场景存在
         if (this.scene != null) {
             let ce = this.toSceneMotionEvent(event);
             this.scene.onDoubleClick(ce);
@@ -409,6 +418,7 @@ export class SGraphView extends SCanvasView {
      */
     protected onMouseDown(event: MouseEvent): void {
         super.onMouseDown(event);
+        // 视图展示的场景存在
         if (this.scene != null) {
             let ce = this.toSceneMotionEvent(event);
             this.scene.onMouseDown(ce);
@@ -422,6 +432,7 @@ export class SGraphView extends SCanvasView {
      */
     protected onMouseMove(event: MouseEvent): void {
         super.onMouseMove(event);
+        // 视图展示的场景存在
         if (this.scene != null) {
             let ce = this.toSceneMotionEvent(event);
             this.scene.onMouseMove(ce);
@@ -435,6 +446,7 @@ export class SGraphView extends SCanvasView {
      */
     protected onMouseUp(event: MouseEvent): void {
         super.onMouseUp(event);
+        // 视图展示的场景存在
         if (this.scene != null) {
             let ce = this.toSceneMotionEvent(event);
             this.scene.onMouseUp(ce);
@@ -447,6 +459,7 @@ export class SGraphView extends SCanvasView {
      * @param event       事件参数
      */
     protected onContextMenu(event: MouseEvent): void {
+        // 视图展示的场景存在
         if (this.scene != null) {
             let ce = this.toSceneMotionEvent(event);
             this.scene.onContextMenu(ce);
@@ -459,6 +472,7 @@ export class SGraphView extends SCanvasView {
      * @param event       事件参数
      */
     protected onKeyDown(event: KeyboardEvent): void {
+        // 视图展示的场景存在
         if (this.scene != null) {
             this.scene.onKeyDown(event);
         }
@@ -470,6 +484,7 @@ export class SGraphView extends SCanvasView {
      * @param event       事件参数
      */
     protected onKeyUp(event: KeyboardEvent): void {
+        // 视图展示的场景存在
         if (this.scene != null) {
             this.scene.onKeyUp(event);
         }