diff --git a/components/Section/Section.d.ts b/components/Section/Section.d.ts index 4b38d55..8c60565 100644 --- a/components/Section/Section.d.ts +++ b/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; } diff --git a/components/Section/Section.js b/components/Section/Section.js index 33003e8..aa53a1a 100644 --- a/components/Section/Section.js +++ b/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'); } diff --git a/components/Section/SectionGraphic.d.ts b/components/Section/SectionGraphic.d.ts new file mode 100644 index 0000000..e8bd226 --- /dev/null +++ b/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; +} diff --git a/components/Section/SectionGraphic.js b/components/Section/SectionGraphic.js new file mode 100644 index 0000000..730aff3 --- /dev/null +++ b/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 };