section build

components/Section/Section.d.ts

@@ -1,9 +1,17 @@
 import { GraphicData, JlGraphic } from 'jl-graphic';
 import { IPointData } from 'pixi.js';
+import { SectionGraphic } from './SectionGraphic';
 export interface ISectionData extends GraphicData {
     code: string;
     points: IPointData[];
 }
+export interface SectionDisplayConfig {
+    lineColor: string;
+    lineWidth: number;
+}
 export declare class Section extends JlGraphic {
+    static Type: string;
+    lineGraphic: SectionGraphic;
+    constructor();
     doRepaint(): void;
 }

components/Section/Section.js

@@ -1,6 +1,15 @@
 import { JlGraphic } from 'jl-graphic';
+import { SectionGraphic } from './SectionGraphic.js';
 
 class Section extends JlGraphic {
+    static Type = 'Section';
+    lineGraphic;
+    constructor() {
+        super(Section.Type);
+        this.lineGraphic = new SectionGraphic();
+        // this.transformSave = true;
+        this.addChild(this.lineGraphic);
+    }
     doRepaint() {
         console.log('repaint');
     }

components/Section/SectionGraphic.d.ts

@@ -0,0 +1,13 @@
+import { Graphics, IPointData } from 'pixi.js';
+export declare class SectionGraphic extends Graphics {
+    static Type: string;
+    private _points;
+    get points(): IPointData[];
+    set points(value: IPointData[]);
+    private _segmentsCount;
+    get segmentsCount(): number;
+    set segmentsCount(value: number);
+    isCurve: boolean;
+    constructor();
+    paint(): void;
+}

components/Section/SectionGraphic.js

@@ -0,0 +1,51 @@
+import { Graphics } from 'pixi.js';
+import { assertBezierPoints, convertToBezierParams } from 'jl-graphic';
+
+class SectionGraphic extends Graphics {
+    static Type = 'SectionGraphic';
+    _points = [];
+    get points() {
+        return this._points;
+    }
+    set points(value) {
+        if (!this.isCurve) {
+            if (value.length < 2) {
+                throw Error('Polyline must have at least 2 points');
+            }
+        }
+        else {
+            assertBezierPoints(value);
+        }
+        this._points = value;
+    }
+    _segmentsCount = 10;
+    get segmentsCount() {
+        return this._segmentsCount;
+    }
+    set segmentsCount(value) {
+        if (value < 1) {
+            throw Error('segmentsCount must be at least 1');
+        }
+        this._segmentsCount = value;
+    }
+    isCurve = false;
+    constructor() {
+        super();
+    }
+    paint() {
+        if (this.isCurve) {
+            const bps = convertToBezierParams(this.points);
+            bps.forEach((bp) => {
+                this.drawBezierCurve(bp.p1, bp.p2, bp.cp1, bp.cp2, this.segmentsCount);
+            });
+        }
+        else {
+            this.moveTo(this.points[0].x, this.points[0].y);
+            for (let i = 1; i < this.points.length; i++) {
+                this.lineTo(this.points[i].x, this.points[i].y);
+            }
+        }
+    }
+}
+
+export { SectionGraphic };