edit,big-edit:feat:版本升级

persagy-web-big-edit/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/big-edit",
-    "version": "2.2.6",
+    "version": "2.2.7",
     "description": "博锐尚格二维图形编辑器。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -40,7 +40,7 @@
         "typescript": "^3.5.3"
     },
     "dependencies": {
-        "@persagy-web/edit": "2.2.5",
+        "@persagy-web/edit": "2.2.6",
         "@types/uuid": "^8.0.0",
         "crypto-js": "^4.0.0",
         "axios": "^0.20.0"

persagy-web-edit/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/edit",
-    "version": "2.2.5",
+    "version": "2.2.6",
     "description": "博锐尚格二维图形编辑器。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",

persagy-web-edit/src/items/SBaseCircleEdit.ts

@@ -26,10 +26,11 @@
 
 import { SColor, SPainter, SPoint, SRect } from "@persagy-web/draw";
 import { SMouseButton, SMouseEvent, SUndoStack } from "@persagy-web/base";
-import { SItemStatus } from "@persagy-web/big";;
+import { SItemStatus } from "@persagy-web/big";
 import {
-  SLineStyle,
-  SGraphItem, SGraphPointListInsert
+    SLineStyle,
+    SGraphItem,
+    SGraphPointListInsert
 } from "@persagy-web/graph/";
 import { SGraphEdit } from "..";
 import { Marker } from "../type/Marker";
@@ -40,377 +41,379 @@ import { Marker } from "../type/Marker";
  * @author 韩耀龙 <han_yao_long@163.com>
  */
 export class SBaseCircleEdit extends SGraphEdit {
-  /** 编辑相关操作的数据 */
-  data: Marker
-  _status: SItemStatus = SItemStatus.Normal;
-  get status(): SItemStatus {
-    return this._status;
-  }
-  set status(v: SItemStatus) {
-    this._status = v;
-    this.undoStack.clear();
-    this.update();
-  }
-
-  /** 矩形两个对角 */
-  private _line: SPoint[] = [];
-  get line(): SPoint[] {
-    return this._line;
-  }
-  set line(arr: SPoint[]) {
-    this._line = arr;
-    this.update();
-  }
-
-  /** 矩形左上角 */
-  private _leftTop: SPoint = new SPoint();
-  /** 矩形右下角 */
-  private _rightBottom: SPoint = new SPoint();
-  /** 绘制矩形的圆角半径 */
-  private _radius: number = 0;
-  get radius(): number {
-    return this._radius;
-  }
-  set radius(v: number) {
-    if (v == this._radius) {
-      return;
+    /** 编辑相关操作的数据 */
+    data: Marker;
+    _status: SItemStatus = SItemStatus.Normal;
+    get status(): SItemStatus {
+        return this._status;
+    }
+    set status(v: SItemStatus) {
+        this._status = v;
+        this.undoStack.clear();
+        this.update();
     }
 
-    this._radius = v;
-    this.update();
-  }
-
-  /** 线条颜色 */
-  _strokeColor: SColor = SColor.Black;
-  get strokeColor(): SColor {
-    return this._strokeColor;
-  }
-  set strokeColor(v: SColor) {
-    this._strokeColor = v;
-    this.update();
-  }
-
-  /** 填充色 */
-  _fillColor: SColor = new SColor("#2196f3");
-  get fillColor(): SColor {
-    return this._fillColor;
-  }
-  set fillColor(v: SColor) {
-    this._fillColor = v;
-    this.update();
-  }
-
-  /** 边框样式 */
-  _lineStyle: SLineStyle = SLineStyle.Solid;
-  get lineStyle(): SLineStyle {
-    return this._lineStyle;
-  }
-  set lineStyle(v: SLineStyle) {
-    this._lineStyle = v;
-    this.update();
-  }
-
-  /** 线条宽度 */
-  _lineWidth: number = 1;
-  get lineWidth(): number {
-    return this._lineWidth;
-  }
-  set lineWidth(v: number) {
-    this._lineWidth = v;
-    this.update();
-  }
-
-  /** undo/redo 堆栈 */
-  private undoStack: SUndoStack = new SUndoStack();
-
-  /**
-   * 构造函数
-   *
-   * @param parent    指向父对象
-   * @param data      矩形数据
-  */
-  constructor(parent: SGraphItem | null, data: Marker) {
-    super(parent);
-    this.widthIsPx = true;
-    this.data = data;
-    if (data.style) {
-      // 关于顶点
-      if (data.style.line) {
-        let setPointList: SPoint[];
-        setPointList = data.style.line.map(i => {
-          return new SPoint(i.x, i.y)
-        });
-        this.line = setPointList;
-        this.calRect()
-      }
+    /** 矩形两个对角 */
+    private _line: SPoint[] = [];
+    get line(): SPoint[] {
+        return this._line;
+    }
+    set line(arr: SPoint[]) {
+        this._line = arr;
+        this.update();
     }
 
-    if (data.style && data.style.default) {
+    /** 矩形左上角 */
+    private _leftTop: SPoint = new SPoint();
+    /** 矩形右下角 */
+    private _rightBottom: SPoint = new SPoint();
+    /** 绘制矩形的圆角半径 */
+    private _radius: number = 0;
+    get radius(): number {
+        return this._radius;
+    }
+    set radius(v: number) {
+        if (v == this._radius) {
+            return;
+        }
 
-      // 颜色
-      if (data.style.default.strokeColor) {
-        this.strokeColor = new SColor(data.style.default.strokeColor)
-      }
+        this._radius = v;
+        this.update();
+    }
 
-      // 线宽
-      if (data.style.default.lineWidth) {
-        this.lineWidth = data.style.default.lineWidth
-      }
+    /** 线条颜色 */
+    _strokeColor: SColor = SColor.Black;
+    get strokeColor(): SColor {
+        return this._strokeColor;
+    }
+    set strokeColor(v: SColor) {
+        this._strokeColor = v;
+        this.update();
+    }
 
-      // 线样式
-      if (data.style.default.lineStyle) {
-        this.lineStyle = data.style.default.lineStyle
-      }
+    /** 填充色 */
+    _fillColor: SColor = new SColor("#2196f3");
+    get fillColor(): SColor {
+        return this._fillColor;
     }
-  }
-
-  /**
-   * 大小改变
-   *
-   * @param oldSize  旧数据
-   * @param newSize  新数据
-  */
-  resize(oldSize: SRect, newSize: SRect): void {
-    const xs = newSize.width / oldSize.width;
-    const ys = newSize.height / oldSize.height;
-    this.line = this.line.map(t => {
-      t.x = t.x * xs;
-      t.y = t.y * ys;
-      return t
-    })
-
-    this.calRect()
-    this.update()
-  }
-
-  /**
-   * 鼠标按下事件
-   *
-   * @param event   鼠标事件
-   * @return 是否处理事件
-  */
-  onMouseDown(event: SMouseEvent): boolean {
-    if (event.buttons == SMouseButton.LeftButton) {
-      if (this.status == SItemStatus.Create) {
-        this.addPoint(new SPoint(event.x, event.y));
-        return true;
-      } else {
-        // return super.onMouseDown(event);
-        super.onMouseDown(event);
+    set fillColor(v: SColor) {
+        this._fillColor = v;
+        this.update();
+    }
+
+    /** 边框样式 */
+    _lineStyle: SLineStyle = SLineStyle.Solid;
+    get lineStyle(): SLineStyle {
+        return this._lineStyle;
+    }
+    set lineStyle(v: SLineStyle) {
+        this._lineStyle = v;
+        this.update();
+    }
+
+    /** 线条宽度 */
+    _lineWidth: number = 1;
+    get lineWidth(): number {
+        return this._lineWidth;
+    }
+    set lineWidth(v: number) {
+        this._lineWidth = v;
+        this.update();
+    }
+
+    /** undo/redo 堆栈 */
+    private undoStack: SUndoStack = new SUndoStack();
+
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      矩形数据
+     */
+    constructor(parent: SGraphItem | null, data: Marker) {
+        super(parent);
+        this.data = data;
+        if (data.style) {
+            // 关于顶点
+            if (data.style.line) {
+                let setPointList: SPoint[];
+                setPointList = data.style.line.map(i => {
+                    return new SPoint(i.x, i.y);
+                });
+                this.line = setPointList;
+                this.calRect();
+            }
+        }
+
+        if (data.style && data.style.default) {
+            // 颜色
+            if (data.style.default.strokeColor) {
+                this.strokeColor = new SColor(data.style.default.strokeColor);
+            }
+
+            // 线宽
+            if (data.style.default.lineWidth) {
+                this.lineWidth = data.style.default.lineWidth;
+            }
+
+            // 线样式
+            if (data.style.default.lineStyle) {
+                this.lineStyle = data.style.default.lineStyle;
+            }
+        }
+    }
+
+    /**
+     * 大小改变
+     *
+     * @param oldSize  旧数据
+     * @param newSize  新数据
+     */
+    resize(oldSize: SRect, newSize: SRect): void {
+        const xs = newSize.width / oldSize.width;
+        const ys = newSize.height / oldSize.height;
+        this.line = this.line.map(t => {
+            t.x = t.x * xs;
+            t.y = t.y * ys;
+            return t;
+        });
+
+        this.calRect();
+        this.update();
+    }
+
+    /**
+     * 鼠标按下事件
+     *
+     * @param event   鼠标事件
+     * @return 是否处理事件
+     */
+    onMouseDown(event: SMouseEvent): boolean {
+        if (event.buttons == SMouseButton.LeftButton) {
+            if (this.status == SItemStatus.Create) {
+                this.addPoint(new SPoint(event.x, event.y));
+                return true;
+            } else {
+                // return super.onMouseDown(event);
+                super.onMouseDown(event);
+                return true;
+            }
+        }
+
         return true;
-      }
     }
 
-    return true;
-  }
-
-  /**
-   * 鼠标移动事件
-   *
-   * @param event   鼠标事件
-   * @return 是否处理事件
-  */
-  onMouseMove(event: SMouseEvent): boolean {
-    if (this.status == SItemStatus.Create) {
-      if (this.line[0] instanceof SPoint) {
-        this.line[1] = new SPoint(event.x, event.y);
-        this.calRect()
-      }
-    } else {
-      return super.onMouseMove(event);
+    /**
+     * 鼠标移动事件
+     *
+     * @param event   鼠标事件
+     * @return 是否处理事件
+     */
+    onMouseMove(event: SMouseEvent): boolean {
+        if (this.status == SItemStatus.Create) {
+            if (this.line[0] instanceof SPoint) {
+                this.line[1] = new SPoint(event.x, event.y);
+                this.calRect();
+            }
+        } else {
+            return super.onMouseMove(event);
+        }
+
+        this.update();
+        return true;
     }
 
-    this.update();
-    return true;
-  }
-
-  /**
-   * 鼠标抬起事件
-   *
-   * @param	event    事件参数
-   * @return 是否处理该事件
-  */
-  onMouseUp(event: SMouseEvent): boolean {
-    if (this.status != SItemStatus.Create) {
-      super.onMouseUp(event);
+    /**
+     * 鼠标抬起事件
+     *
+     * @param	event    事件参数
+     * @return 是否处理该事件
+     */
+    onMouseUp(event: SMouseEvent): boolean {
+        if (this.status != SItemStatus.Create) {
+            super.onMouseUp(event);
+        }
+
+        return true;
     }
 
-    return true;
-  }
-
-  /**
-   * 计算矩形的左上角和右下角
-  */
-  private calRect(): void {
-    if (this.line.length > 1) {
-      const fi = this.line[0];
-      const se = this.line[1];
-      let minx, maxx, miny, maxy;
-      if (fi.x < se.x) {
-        minx = fi.x;
-        maxx = se.x;
-      } else {
-        minx = se.x;
-        maxx = fi.x;
-      }
-
-      if (fi.y < se.y) {
-        miny = fi.y;
-        maxy = se.y;
-      } else {
-        miny = se.y;
-        maxy = fi.y;
-      }
-
-      this._leftTop = new SPoint(minx, miny)
-      this._rightBottom = new SPoint(maxx, maxy)
+    /**
+     * 计算矩形的左上角和右下角
+     */
+    private calRect(): void {
+        if (this.line.length > 1) {
+            const fi = this.line[0];
+            const se = this.line[1];
+            let minx, maxx, miny, maxy;
+            if (fi.x < se.x) {
+                minx = fi.x;
+                maxx = se.x;
+            } else {
+                minx = se.x;
+                maxx = fi.x;
+            }
+
+            if (fi.y < se.y) {
+                miny = fi.y;
+                maxy = se.y;
+            } else {
+                miny = se.y;
+                maxy = fi.y;
+            }
+
+            this._leftTop = new SPoint(minx, miny);
+            this._rightBottom = new SPoint(maxx, maxy);
+        }
     }
-  }
-
-  /**
-   * 添加点至数组中
-   *
-   * @param p   添加的点
-  */
-  private addPoint(p: SPoint): void {
-    if (this.line.length < 2) {
-      this.line.push(p);
-      this.recordAction(SGraphPointListInsert, [this.line, p]);
-    } else {
-      this.line[1] = p;
-      this.recordAction(SGraphPointListInsert, [this.line, p, 1]);
-      this.status = SItemStatus.Normal;
-      this.releaseItem();
-      this.$emit("finishCreated");
+
+    /**
+     * 添加点至数组中
+     *
+     * @param p   添加的点
+     */
+    private addPoint(p: SPoint): void {
+        if (this.line.length < 2) {
+            this.line.push(p);
+            this.recordAction(SGraphPointListInsert, [this.line, p]);
+        } else {
+            this.line[1] = p;
+            this.recordAction(SGraphPointListInsert, [this.line, p, 1]);
+            this.status = SItemStatus.Normal;
+            this.releaseItem();
+            this.$emit("finishCreated");
+        }
+
+        this.calRect();
+        this.update();
     }
 
-    this.calRect()
-    this.update();
-  }
-
-  /**
-   * 记录相关动作并推入栈中
-   *
-   * @param	SGraphCommand   相关命令类
-   * @param	any             对应传入参数
-  */
-  protected recordAction(SGraphCommand: any, any: any[]): void {
-    // 记录相关命令并推入堆栈中
-    const command = new SGraphCommand(this.scene, this, ...any);
-    this.undoStack.push(command);
-  }
-
-  /**
-   * Item 对象边界区域
-   *
-   * @return SRect   外接矩阵
-  */
-  boundingRect(): SRect {
-    if (this.line.length > 1) {
-      this.calRect()
-      return new SRect(this._leftTop, this._rightBottom);
+    /**
+     * 记录相关动作并推入栈中
+     *
+     * @param	SGraphCommand   相关命令类
+     * @param	any             对应传入参数
+     */
+    protected recordAction(SGraphCommand: any, any: any[]): void {
+        // 记录相关命令并推入堆栈中
+        const command = new SGraphCommand(this.scene, this, ...any);
+        this.undoStack.push(command);
     }
 
-    return new SRect()
-  }
+    /**
+     * Item 对象边界区域
+     *
+     * @return SRect   外接矩阵
+     */
+    boundingRect(): SRect {
+        if (this.line.length > 1) {
+            this.calRect();
+            return new SRect(this._leftTop, this._rightBottom);
+        }
+
+        return new SRect();
+    }
 
-  /**
-   * 撤销操作
-  */
-  undo(): void {
-    if (this._status != SItemStatus.Normal) {
-      this.undoStack.undo();
+    /**
+     * 撤销操作
+     */
+    undo(): void {
+        if (this._status != SItemStatus.Normal) {
+            this.undoStack.undo();
+        }
     }
-  }
-
-  /**
-   * 重做操作
-  */
-  redo(): void {
-    if (this._status != SItemStatus.Normal) {
-      this.undoStack.redo();
+
+    /**
+     * 重做操作
+     */
+    redo(): void {
+        if (this._status != SItemStatus.Normal) {
+            this.undoStack.redo();
+        }
     }
-  }
-
-  /**
-   * 取消操作执行
-  */
-  cancelOperate(): void {
-    if (this.status == SItemStatus.Create) {
-      this.parent = null;
-      this.releaseItem();
-    } else if (this.status == SItemStatus.Edit) {
-      this.status = SItemStatus.Normal;
-      this.releaseItem();
+
+    /**
+     * 取消操作执行
+     */
+    cancelOperate(): void {
+        if (this.status == SItemStatus.Create) {
+            this.parent = null;
+            this.releaseItem();
+        } else if (this.status == SItemStatus.Edit) {
+            this.status = SItemStatus.Normal;
+            this.releaseItem();
+        }
     }
-  }
 
-   /**
+    /**
      * 移动后处理所有坐标,并肩原点置为场景原点
      */
     moveToOrigin(): void {
-      this.line = this.line.map(t => {
-          t.x = t.x + this.x;
-          t.y = t.y + this.y;
-          return t;
-      });
-
-      this.x = 0;
-      this.y = 0;
+        this.line = this.line.map(t => {
+            t.x = t.x + this.x;
+            t.y = t.y + this.y;
+            return t;
+        });
+
+        this.x = 0;
+        this.y = 0;
     } // Function moveToOrigin()
-  
-  /**
-   * 返回对象储存的相关数据
-   *
-   * @return  实体类数据
-  */
-  toData(): any {
-    // 将原点移动到场景原点
-    this.moveToOrigin();
-    const Line = [{ x: this.line[0].x, y: this.line[0].y }, { x: this.line[1].x, y: this.line[1].y }];
-    this.data.style.line = Line;
-    this.data.style.default.lineWidth = this.lineWidth;
-    this.data.style.default.lineStyle = this.lineStyle;
-    this.data.style.default.strokeColor = this.strokeColor.value;
-    this.data.style.default.fillColor = this.fillColor.value;
-    return this.data
-  }
-
-  /**
-   * Item 绘制操作
-   *
-   * @param painter    绘制对象
-  */
-  onDraw(painter: SPainter): void {
-    if (this.line.length == 2) {
-      this.calRect()
-      painter.pen.color = this.strokeColor;
-      painter.brush.color = this.fillColor;
-
-      // 使用像素值
-      if(this.widthIsPx) {
-        painter.pen.lineWidth = painter.toPx(this.lineWidth);
-      } else { //否则
-        painter.pen.lineWidth = this.lineWidth;
-      }
-      if (this.lineStyle == SLineStyle.Dashed) {
-        painter.pen.lineDash = [
-          painter.toPx(this.lineWidth * 3),
-          painter.toPx(this.lineWidth * 7)
-        ];
-      } else if (this.lineStyle == SLineStyle.Dotted) {
-        painter.pen.lineDash = [
-          painter.toPx(this.lineWidth * 2),
-          painter.toPx(this.lineWidth * 2)
+
+    /**
+     * 返回对象储存的相关数据
+     *
+     * @return  实体类数据
+     */
+    toData(): any {
+        // 将原点移动到场景原点
+        this.moveToOrigin();
+        const Line = [
+            { x: this.line[0].x, y: this.line[0].y },
+            { x: this.line[1].x, y: this.line[1].y }
         ];
-      }
-
-      painter.drawEllipse(
-        (this._leftTop.x + this._rightBottom.x) / 2,
-        (this._leftTop.y + this._rightBottom.y) / 2,
-        (this._rightBottom.x - this._leftTop.x) / 2,
-        (this._rightBottom.y - this._leftTop.y) / 2
-      );
+        this.data.style.line = Line;
+        this.data.style.default.lineWidth = this.lineWidth;
+        this.data.style.default.lineStyle = this.lineStyle;
+        this.data.style.default.strokeColor = this.strokeColor.value;
+        this.data.style.default.fillColor = this.fillColor.value;
+        return this.data;
+    }
+
+    /**
+     * Item 绘制操作
+     *
+     * @param painter    绘制对象
+     */
+    onDraw(painter: SPainter): void {
+        if (this.line.length == 2) {
+            this.calRect();
+            painter.pen.color = this.strokeColor;
+            painter.brush.color = this.fillColor;
+
+            // 使用像素值
+            if (this.widthIsPx) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth);
+            } else {
+                //否则
+                painter.pen.lineWidth = this.lineWidth;
+            }
+            if (this.lineStyle == SLineStyle.Dashed) {
+                painter.pen.lineDash = [
+                    painter.toPx(this.lineWidth * 3),
+                    painter.toPx(this.lineWidth * 7)
+                ];
+            } else if (this.lineStyle == SLineStyle.Dotted) {
+                painter.pen.lineDash = [
+                    painter.toPx(this.lineWidth * 2),
+                    painter.toPx(this.lineWidth * 2)
+                ];
+            }
+
+            painter.drawEllipse(
+                (this._leftTop.x + this._rightBottom.x) / 2,
+                (this._leftTop.y + this._rightBottom.y) / 2,
+                (this._rightBottom.x - this._leftTop.x) / 2,
+                (this._rightBottom.y - this._leftTop.y) / 2
+            );
+        }
     }
-  }
 }

persagy-web-edit/src/items/SBaseRectEdit.ts

@@ -25,10 +25,11 @@
  */
 import { SColor, SPainter, SPoint, SRect } from "@persagy-web/draw";
 import { SMouseButton, SMouseEvent, SUndoStack } from "@persagy-web/base";
-import { SItemStatus } from "@persagy-web/big";;
+import { SItemStatus } from "@persagy-web/big";
 import {
     SLineStyle,
-    SGraphItem, SGraphPointListInsert
+    SGraphItem,
+    SGraphPointListInsert
 } from "@persagy-web/graph/";
 import { SGraphEdit } from "..";
 import { Marker } from "../type/Marker";
@@ -138,32 +139,31 @@ export class SBaseRectEdit extends SGraphEdit {
      */
     constructor(parent: SGraphItem | null, data: Marker) {
         super(parent);
-        this.widthIsPx = true;
         this.data = data;
         if (data.style && data.style.default) {
             // 关于顶点
             if (data.style.default.line) {
                 let setPointList: SPoint[];
                 setPointList = data.style.default.line.map(i => {
-                    return new SPoint(i.x, i.y)
+                    return new SPoint(i.x, i.y);
                 });
                 this.line = setPointList;
-                this.calRect()
+                this.calRect();
             }
             // 颜色
             if (data.style.default.strokeColor) {
-                this.strokeColor = new SColor(data.style.default.strokeColor)
+                this.strokeColor = new SColor(data.style.default.strokeColor);
             }
             if (data.style.default.fillColor) {
-                this.fillColor = new SColor(data.style.default.fillColor)
+                this.fillColor = new SColor(data.style.default.fillColor);
             }
             // 线宽
             if (data.style.default.lineWidth) {
-                this.lineWidth = data.style.default.lineWidth
+                this.lineWidth = data.style.default.lineWidth;
             }
             // 线样式
             if (data.style.default.lineStyle) {
-                this.lineStyle = data.style.default.lineStyle
+                this.lineStyle = data.style.default.lineStyle;
             }
         }
     }
@@ -215,7 +215,7 @@ export class SBaseRectEdit extends SGraphEdit {
         if (this.status == SItemStatus.Create) {
             if (this.line[0] instanceof SPoint) {
                 this.line[1] = new SPoint(event.x, event.y);
-                this.calRect()
+                this.calRect();
             }
         } else {
             return super.onMouseMove(event);
@@ -368,7 +368,7 @@ export class SBaseRectEdit extends SGraphEdit {
         this.moveToOrigin();
         const Line: any = [];
         this.line.forEach(item => {
-            Line.push({ x: item.x, y: item.y })
+            Line.push({ x: item.x, y: item.y });
         });
         this.data.style.default.line = Line;
         this.data.style.default.lineWidth = this.lineWidth;
@@ -392,7 +392,8 @@ export class SBaseRectEdit extends SGraphEdit {
             // 使用像素值
             if (this.widthIsPx) {
                 painter.pen.lineWidth = painter.toPx(this.lineWidth);
-            } else { // 否则
+            } else {
+                // 否则
                 painter.pen.lineWidth = this.lineWidth;
             }
             if (this.lineStyle == SLineStyle.Dashed) {
@@ -408,7 +409,11 @@ export class SBaseRectEdit extends SGraphEdit {
             }
 
             if (this.radius != 0) {
-                painter.drawRoundRect(this._leftTop, this._rightBottom, this.radius);
+                painter.drawRoundRect(
+                    this._leftTop,
+                    this._rightBottom,
+                    this.radius
+                );
             } else {
                 painter.drawRect(this._leftTop, this._rightBottom);
             }

persagy-web-graph/src/items/SGraphAreaGroupItem.ts

@@ -153,7 +153,11 @@ export class SGraphAreaGroupItem extends SGraphStyleItem {
     onDraw(painter: SPainter): void {
         painter.pen.color = this.strokeColor;
         painter.brush.color = this.fillColor;
-        painter.pen.lineWidth = this.lineWidth;
+        if (this.widthIsPx) {
+            painter.pen.lineWidth = painter.toPx(this.lineWidth);
+        } else {
+            painter.pen.lineWidth = this.lineWidth;
+        }
         this.pathList.forEach((t): void => {
             painter.drawPath(t);
         });

persagy-web-graph/src/items/SGraphBaseCircle.ts

@@ -71,7 +71,11 @@ export class SGraphBaseCircle extends SGraphStyleItem {
     onDraw(painter: SPainter): void {
         painter.pen.color = this.strokeColor;
         painter.brush.color = this.fillColor;
-        painter.pen.lineWidth = this.lineWidth;
+        if (this.widthIsPx) {
+            painter.pen.lineWidth = painter.toPx(this.lineWidth);
+        } else {
+            painter.pen.lineWidth = this.lineWidth;
+        }
         if (this.lineStyle == SLineStyle.Dashed) {
             painter.pen.lineDash = [
                 painter.toPx(this.lineWidth * 3),

persagy-web-graph/src/items/SGraphCircleItem.ts

@@ -117,7 +117,11 @@ export class SGraphCircleItem extends SGraphStyleItem {
         if (this.line.length == 2) {
             painter.pen.color = this.strokeColor;
             painter.brush.color = this.fillColor;
-            painter.pen.lineWidth = this.lineWidth;
+            if (this.widthIsPx) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth);
+            } else {
+                painter.pen.lineWidth = this.lineWidth;
+            }
             if (this.lineStyle == SLineStyle.Dashed) {
                 painter.pen.lineDash = [
                     painter.toPx(this.lineWidth * 3),

persagy-web-graph/src/items/SGraphPolyGroupItem.ts

@@ -122,7 +122,11 @@ export class SGraphPolyGroupItem extends SGraphStyleItem {
     onDraw(painter: SPainter): void {
         painter.pen.color = this.strokeColor;
         painter.brush.color = this.fillColor;
-        painter.pen.lineWidth = this.lineWidth;
+        if (this.widthIsPx) {
+            painter.pen.lineWidth = painter.toPx(this.lineWidth);
+        } else {
+            painter.pen.lineWidth = this.lineWidth;
+        }
         this.pointList.forEach((t): void => {
             painter.drawPolygon(t);
         });

persagy-web-graph/src/items/SGraphRectItem.ts

@@ -131,7 +131,11 @@ export class SGraphRectItem extends SGraphStyleItem {
         if (this.line.length == 2) {
             painter.pen.color = this.strokeColor;
             painter.brush.color = this.fillColor;
-            painter.pen.lineWidth = this.lineWidth;
+            if (this.widthIsPx) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth);
+            } else {
+                painter.pen.lineWidth = this.lineWidth;
+            }
             if (this.lineStyle == SLineStyle.Dashed) {
                 painter.pen.lineDash = [
                     painter.toPx(this.lineWidth * 3),