@leafer-ui/display 1.0.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023-present, Chao (Leafer) Wan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @leafer-ui/display

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@leafer-ui/display",
+  "version": "1.0.0-alpha.1",
+  "description": "@leafer-ui/display",
+  "author": "Chao (Leafer) Wan",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "files": ["src"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leaferjs/ui.git"
+  },
+  "homepage": "https://github.com/leaferjs/ui/tree/main/packages/display",
+  "bugs": "https://github.com/leaferjs/ui/issues",
+  "keywords": [
+    "leaferui",
+    "leafer-ui",
+    "leaferjs"
+  ],
+  "dependencies": {
+    "@leafer/core": "1.0.0-alpha.1",
+    "@leafer-ui/data": "1.0.0-alpha.1",
+    "@leafer-ui/module": "1.0.0-alpha.1",
+    "@leafer-ui/decorator": "1.0.0-alpha.1"
+  },
+  "devDependencies": {
+     "@leafer/interface": "1.0.0-alpha.1",
+     "@leafer-ui/interface": "1.0.0-alpha.1"
+  }
+}

package/src/Ellipse.ts

@@ -0,0 +1,65 @@
+import { PathCreator, OneRadian, dataProcessor, pathType, registerUI } from '@leafer/core'
+
+import { IEllipse, IEllipseInputData, IEllipseData } from '@leafer-ui/interface'
+import { EllipseData } from '@leafer-ui/data'
+
+import { UI } from './UI'
+
+
+const { PI } = Math
+const { begin, moveTo, close, ellipse } = PathCreator
+
+
+@registerUI()
+export class Ellipse extends UI implements IEllipse {
+
+    @dataProcessor(EllipseData)
+    public __: IEllipseData
+
+    @pathType(0)
+    public innerRadius: number
+
+    @pathType(0)
+    public startAngle: number
+
+    @pathType(0)
+    public endAngle: number
+
+    constructor(data?: IEllipseInputData) {
+        super(data)
+    }
+
+    public __updatePath(): void {
+
+        const { width, height, innerRadius, startAngle, endAngle } = this.__
+        const rx = width / 2, ry = height / 2
+
+        begin(this.__.path = [])
+
+        if (innerRadius) {
+
+            if (startAngle || endAngle) {
+                ellipse(rx, ry, rx * (1 - innerRadius), ry * (1 - innerRadius), 0, startAngle * OneRadian, endAngle * OneRadian, false)
+                ellipse(rx, ry, rx, ry, 0, endAngle * OneRadian, startAngle * OneRadian, true)
+                close()
+            } else {
+                ellipse(rx, ry, rx * (1 - innerRadius), ry * (1 - innerRadius), 0, 0, 2 * PI, false)
+                moveTo(width, ry)
+                ellipse(rx, ry, rx, ry, 0, 0, 2 * PI, true)
+            }
+
+        } else {
+
+            if (startAngle || endAngle) {
+                moveTo(rx, ry)
+                ellipse(rx, ry, rx, ry, 0, startAngle * OneRadian, endAngle * OneRadian, false)
+                close()
+            } else {
+                ellipse(rx, ry, rx, ry, 0, 0, 2 * PI, false)
+            }
+
+        }
+
+    }
+
+}

package/src/Frame.ts

@@ -0,0 +1,84 @@
+import { ILeaferCanvas, IRenderOptions, ICanvasDrawPath, IBoundsData, IPathCommandData } from '@leafer/interface'
+import { BoundsHelper, dataProcessor, boundsType, rewrite, useModule, rewriteAble, registerUI } from '@leafer/core'
+
+import { IFrame, IFrameData, IFrameInputData } from '@leafer-ui/interface'
+import { FrameData } from '@leafer-ui/data'
+import { FrameRender } from '@leafer-ui/display-module'
+
+import { Group } from './Group'
+import { Rect } from './Rect'
+
+
+const rect = Rect.prototype
+const group = Group.prototype
+const bounds = {} as IBoundsData
+const { copy, add } = BoundsHelper
+
+
+@useModule(FrameRender)
+@rewriteAble()
+@registerUI()
+export class Frame extends Group implements IFrame {
+
+    @dataProcessor(FrameData)
+    public __: IFrameData
+
+    @boundsType(true)
+    public clip: boolean
+
+    constructor(data?: IFrameInputData) {
+        super(data)
+        if (!this.fill) this.fill = '#FFFFFF'
+        this.__isBranchLeaf = true
+    }
+
+    @rewrite(rect.__drawPathByData)
+    public __drawPathByData(drawer: ICanvasDrawPath, data: IPathCommandData): void { }
+
+    public __updateBoxBounds(): void {
+        this.__updateRectBoxBounds()
+        if (!this.__.clip) {
+            const { boxBounds } = this.__layout
+            copy(bounds, boxBounds)
+            super.__updateBoxBounds()
+            add(boxBounds, bounds)
+        }
+    }
+
+    public __updateEventBounds(): void {
+        this.__updateRectEventBounds()
+        if (!this.__.clip) {
+            const { eventBounds } = this.__layout
+            copy(bounds, eventBounds)
+            super.__updateEventBounds()
+            add(eventBounds, bounds)
+        }
+    }
+
+    public __updateRenderBounds(): void {
+        this.__updateRectRenderBounds()
+        if (!this.__.clip) {
+            const { renderBounds } = this.__layout
+            copy(bounds, renderBounds)
+            super.__updateRenderBounds()
+            add(renderBounds, bounds)
+        }
+    }
+
+    @rewrite(rect.__updateBoxBounds)
+    public __updateRectBoxBounds(): void { }
+
+    @rewrite(rect.__updateEventBounds)
+    public __updateRectEventBounds(): void { }
+
+    @rewrite(rect.__updateRenderBounds)
+    public __updateRectRenderBounds(): void { }
+
+
+    @rewrite(rect.__render)
+    public __renderRect(canvas: ILeaferCanvas, options: IRenderOptions): void { }
+
+    @rewrite(group.__render)
+    public __renderGroup(canvas: ILeaferCanvas, options: IRenderOptions): void { }
+
+}

package/src/Group.ts

@@ -0,0 +1,44 @@
+import { Branch, useModule, dataProcessor, registerUI } from '@leafer/core'
+
+import { IGroup, IGroupData, IGroupInputData, IUI } from '@leafer-ui/interface'
+import { GroupData } from '@leafer-ui/data'
+
+import { UI } from './UI'
+
+
+@useModule(Branch)
+@registerUI()
+export class Group extends UI implements IGroup {
+
+    @dataProcessor(GroupData)
+    public __: IGroupData
+
+    public children: IUI[]
+
+    constructor(data?: IGroupInputData) {
+        super(data)
+        this.__isBranch = true
+        this.children = []
+    }
+
+    public __updatePath(): void {
+
+    }
+
+    public add(child: IUI, index?: number): void { } // Branch rewrite
+
+    public addAt(child: IUI, index: number): void {
+        this.add(child, index)
+    }
+
+    public addAfter(child: IUI, after: IUI): void {
+        this.add(child, this.children.indexOf(after) + 1)
+    }
+
+    public addBefore(child: UI, before: IUI): void {
+        this.add(child, this.children.indexOf(before))
+    }
+
+    public remove(child?: IUI): void { }  // Branch rewrite
+
+}

package/src/Image.ts

@@ -0,0 +1,25 @@
+import { boundsType, dataProcessor, registerUI } from '@leafer/core'
+
+import { IImage, IImageInputData, IImageData } from '@leafer-ui/interface'
+import { ImageData } from '@leafer-ui/data'
+
+import { Rect } from './Rect'
+
+
+@registerUI()
+export class Image extends Rect implements IImage {
+
+    @dataProcessor(ImageData)
+    public __: IImageData
+
+    @boundsType('')
+    public url: string
+
+    @boundsType('')
+    public thumb: string
+
+    constructor(data?: IImageInputData) {
+        super(data)
+    }
+
+}

package/src/Line.ts

@@ -0,0 +1,71 @@
+import { __Number, IPointData, ITwoPointBoundsData } from '@leafer/interface'
+import { PathCreator, PointHelper, TwoPointBoundsHelper, boundsType, dataProcessor, registerUI } from '@leafer/core'
+
+import { ILine, ILineData, ILineInputData } from '@leafer-ui/interface'
+import { LineData } from '@leafer-ui/data'
+
+import { UI } from './UI'
+
+
+const { begin, moveTo, lineTo, end } = PathCreator
+const { rotate, getAngle, getDistance, defaultPoint } = PointHelper
+const { setPoint, addPoint, toBounds } = TwoPointBoundsHelper
+
+const pointBounds = {} as ITwoPointBoundsData
+
+
+@registerUI()
+export class Line extends UI implements ILine {
+
+    @dataProcessor(LineData)
+    public __: ILineData
+
+    @boundsType()
+    public rotation: __Number
+
+
+    protected __to: IPointData
+
+    public get toPoint(): IPointData {
+        if (this.__to && !this.__layout.boxBoundsChanged) return this.__to
+
+        const { width, height, rotation } = this.__
+        const to: IPointData = { x: 0, y: 0 }
+
+        if (width) to.x = width
+        if (height) to.y = height
+
+        if (rotation) rotate(to, rotation)
+        this.__to = to
+
+        return to
+    }
+
+    public set toPoint(value: IPointData) {
+        this.width = getDistance(defaultPoint, value)
+        this.rotation = getAngle(defaultPoint, value)
+        if (this.height) this.height = 0
+    }
+
+
+    constructor(data?: ILineInputData) {
+        super(data)
+    }
+
+    public __updatePath(): void {
+
+        begin(this.__.path = [])
+        moveTo(0, 0)
+
+        const to = this.toPoint
+        lineTo(to.x, to.y)
+        end()
+    }
+
+    public __updateBoxBounds(): void {
+        setPoint(pointBounds, 0, 0)
+        addPoint(pointBounds, this.__to.x, this.__to.y)
+        toBounds(pointBounds, this.__layout.boxBounds)
+    }
+
+}

package/src/Path.ts

@@ -0,0 +1,42 @@
+import { ITwoPointBoundsData, ILeaferCanvas, IPathCommandData } from '@leafer/interface'
+import { PathHelper, TwoPointBoundsHelper, dataProcessor, pathType, registerUI } from '@leafer/core'
+
+import { IPath, IPathData, IPathInputData, IWindingRule, IPathString } from '@leafer-ui/interface'
+import { PathData } from '@leafer-ui/data'
+
+import { UI } from './UI'
+
+
+const { toTwoPointBounds } = PathHelper
+const { toBounds } = TwoPointBoundsHelper
+
+const pointBounds = {} as ITwoPointBoundsData
+
+
+@registerUI()
+export class Path extends UI implements IPath {
+
+    @dataProcessor(PathData)
+    public __: IPathData
+
+    @pathType()
+    public path: IPathCommandData | IPathString
+
+    @pathType()
+    public windingRule: IWindingRule
+
+    constructor(data?: IPathInputData) {
+        super(data)
+    }
+
+    public __drawRenderPath(canvas: ILeaferCanvas): void {
+        canvas.beginPath()
+        this.__drawPathByData(canvas, this.__.path)
+    }
+
+    public __updateBoxBounds(): void {
+        toTwoPointBounds(this.__.path, pointBounds)
+        toBounds(pointBounds, this.__layout.boxBounds)
+    }
+
+}

package/src/Polygon.ts

@@ -0,0 +1,41 @@
+import { PathCreator, dataProcessor, pathType, registerUI } from '@leafer/core'
+
+import { IPolygon, IPolygonData, IPolygonInputData } from '@leafer-ui/interface'
+import { PolygonData } from '@leafer-ui/data'
+
+import { UI } from './UI'
+
+
+const { sin, cos, PI } = Math
+const { begin, moveTo, lineTo, close } = PathCreator
+
+
+@registerUI()
+export class Polygon extends UI implements IPolygon {
+
+    @dataProcessor(PolygonData)
+    public __: IPolygonData
+
+    @pathType(3)
+    sides: number
+
+    constructor(data?: IPolygonInputData) {
+        super(data)
+    }
+
+    public __updatePath(): void {
+
+        const { width, height, sides } = this.__
+        const rx = width / 2, ry = height / 2
+
+        begin(this.__.path = [])
+        moveTo(rx, 0)
+
+        for (let i = 1; i < sides; i++) {
+            lineTo(rx + rx * sin((i * 2 * PI) / sides), ry - ry * cos((i * 2 * PI) / sides))
+        }
+
+        close()
+    }
+
+}

package/src/Rect.ts

@@ -0,0 +1,32 @@
+import { ICanvasDrawPath, IPathCommandData } from '@leafer/interface'
+import { dataProcessor, registerUI, useModule } from '@leafer/core'
+
+import { IRect, IRectInputData, IRectData } from '@leafer-ui/interface'
+import { RectData } from '@leafer-ui/data'
+import { RectRender } from '@leafer-ui/display-module'
+
+import { UI } from './UI'
+
+
+@useModule(RectRender)
+@registerUI()
+export class Rect extends UI implements IRect {
+
+    @dataProcessor(RectData)
+    public __: IRectData
+
+    constructor(data?: IRectInputData) {
+        super(data)
+    }
+
+    public __updatePath(): void { }
+
+    public __drawPathByData(drawer: ICanvasDrawPath, data: IPathCommandData): void {
+        const { width, height, borderRadius } = this.__
+        if (borderRadius) {
+            drawer.roundRect(0, 0, width, height, borderRadius)
+        } else {
+            drawer.rect(0, 0, width, height)
+        }
+    }
+}

package/src/Star.ts

@@ -0,0 +1,45 @@
+import { PathCreator, dataProcessor, pathType, registerUI } from '@leafer/core'
+
+import { IStar, IStarData, IStarInputData } from '@leafer-ui/interface'
+import { StarData } from '@leafer-ui/data'
+
+import { UI } from './UI'
+
+
+const { sin, cos, PI } = Math
+const { begin, moveTo, lineTo, close } = PathCreator
+
+
+@registerUI()
+export class Star extends UI implements IStar {
+
+    @dataProcessor(StarData)
+    public __: IStarData
+
+    @pathType(5)
+    public points: number
+
+    @pathType(0.38)
+    public innerRadius: number
+
+    constructor(data?: IStarInputData) {
+        super(data)
+    }
+
+    public __updatePath() {
+
+        const { width, height, points, innerRadius } = this.__
+        const rx = width / 2, ry = height / 2
+
+        begin(this.__.path = [])
+        moveTo(rx, 0)
+
+        for (let i = 1; i < points * 2; i++) {
+            lineTo(rx + (i % 2 === 0 ? rx : rx * innerRadius) * sin((i * PI) / points), ry - (i % 2 === 0 ? ry : ry * innerRadius) * cos((i * PI) / points))
+        }
+
+        close()
+
+    }
+
+}

package/src/Text.ts

@@ -0,0 +1,78 @@
+import { ICanvasDrawPath, IPathCommandData } from '@leafer/interface'
+import { Platform, boundsType, dataProcessor, registerUI, useModule } from '@leafer/core'
+
+import { IText, IFontWeight, ITextCase, ITextDecoration, IPercent, ITextData, ITextInputData } from '@leafer-ui/interface'
+import { TextData } from '@leafer-ui/data'
+import { TextRender } from '@leafer-ui/display-module'
+
+import { UI } from './UI'
+
+
+@useModule(TextRender)
+@registerUI()
+export class Text extends UI implements IText {
+
+    @dataProcessor(TextData)
+    public __: ITextData
+
+    @boundsType('')
+    public content: string
+
+    @boundsType('arial')
+    public fontFamily: string
+
+    @boundsType(12)
+    public fontSize: number
+
+    @boundsType('normal')
+    public fontWeight: IFontWeight
+
+    @boundsType(false)
+    public italic: boolean
+
+    @boundsType('normal')
+    public textCase: ITextCase
+
+    @boundsType('normal')
+    public textDecoration: ITextDecoration
+
+    @boundsType()
+    public letterSpacing: number | IPercent
+
+    @boundsType()
+    public lineHeight: number | IPercent
+
+    @boundsType()
+    public paragraphIndent: number
+
+    @boundsType()
+    public paragraphSpacing: number
+
+    constructor(data?: ITextInputData) {
+        super(data)
+    }
+
+    public __updatePath(): void {
+
+    }
+
+    public __drawPathByData(drawer: ICanvasDrawPath, data: IPathCommandData): void {
+        const { width, height } = this.__
+        drawer.rect(0, 0, width, height)
+    }
+
+    public __updateBoxBounds(): void {
+        const { fontFamily, fontSize, fontWeight, italic, textCase, lineHeight } = this.__
+        const b = this.__layout.boxBounds
+
+        this.__.__font = Platform.canvas.font = `${italic ? 'italic' : ''} ${textCase === 'small-caps' ? 'small-caps' : 'normal'} ${fontWeight ? fontWeight : 'normal'} ${fontSize}px/${lineHeight ? lineHeight : fontSize}px ${fontFamily}`
+        const width = Platform.canvas.measureText(this.content).width
+        const height = fontSize
+
+        b.x = 0
+        b.y = -fontSize * 0.75
+        b.width = width
+        b.height = height
+    }
+
+}

package/src/UI.ts

@@ -0,0 +1,197 @@
+import { ILeaferCanvas, ICanvasDrawPath, IPathCommandData, __Number, __Boolean, __String, IMatrixData, IBoundsData } from '@leafer/interface'
+import { Leaf, PathHelper, affectEventBoundsType, surfaceType, dataType, positionType, boundsType, pathType, scaleType, rotationType, opacityType, sortType, dataProcessor, useModule, rewrite, rewriteAble } from '@leafer/core'
+
+import { IUI, IShadowEffect, IBlurEffect, IPaint, IStrokeAlign, IStrokeJoin, IStrokeCap, IBlendMode, IPaintString, IDashPatternString, IShadowString, IGrayscaleEffect, IUIData, IGroup, IBorderWidthString, IBorderRadiusString } from '@leafer-ui/interface'
+import { effectType } from '@leafer-ui/decorator'
+
+import { UIData } from '@leafer-ui/data'
+import { UIBounds, UIHit, UIRender } from '@leafer-ui/display-module'
+
+
+@useModule(UIBounds)
+@useModule(UIHit)
+@useModule(UIRender)
+@rewriteAble()
+export class UI extends Leaf implements IUI {
+
+
+    @dataProcessor(UIData)
+    public __: IUIData
+
+    public root?: IGroup
+    public parent?: IGroup
+
+    // ---
+
+    // id
+    @dataType('')
+    public id: __String
+
+    @dataType('')
+    public name: __String
+
+    @dataType('')
+    public className: __String
+
+
+    // layer
+    @opacityType(1)
+    public opacity: __Number
+
+    @opacityType(true)
+    public visible: __Boolean
+
+    @sortType(0)
+    public zIndex: __Number
+
+
+    // position
+    @positionType(0)
+    public x: __Number
+
+    @positionType(0)
+    public y: __Number
+
+    // size
+    @boundsType(100)
+    public width: __Number
+
+    @boundsType(100)
+    public height: __Number
+
+
+    // scale
+    @scaleType(1)
+    public scaleX: __Number
+
+    @scaleType(1)
+    public scaleY: __Number
+
+
+    // rotate
+    @rotationType(0)
+    public rotation: __Number
+
+    // skew
+    @rotationType(0)
+    public skewX: __Number
+
+    @rotationType(0)
+    public skewY: __Number
+
+    public draggable: __Boolean
+
+    // ---
+
+
+    // layer
+
+    @surfaceType() // "pass-through"
+    public blendMode: IBlendMode
+
+    @boundsType()
+    public mask: __Boolean
+
+    @dataType()
+    public locked: __Boolean
+
+    // fill
+
+    @surfaceType()
+    public fill: IPaint | IPaint[] | IPaintString
+
+    // border 
+
+    @pathType()
+    public borderRadius: __Number | __Number[] | IBorderRadiusString
+
+    @affectEventBoundsType(1)
+    public borderWidth: __Number | __Number[] | IBorderWidthString
+
+
+    // stroke
+
+    @affectEventBoundsType()
+    public stroke: IPaint | IPaint[] | IPaintString
+
+    @affectEventBoundsType('center')
+    public strokeAlign: IStrokeAlign
+
+    @affectEventBoundsType(1)
+    public strokeWidth: __Number
+
+    @surfaceType('none')
+    public strokeCap: IStrokeCap
+
+    @surfaceType('miter')
+    public strokeJoin: IStrokeJoin
+
+    @surfaceType()
+    public dashPattern: __Number[] | IDashPatternString
+
+    @surfaceType()
+    public dashOffset: __Number
+
+    @surfaceType(10)
+    public miterLimit: __Number
+
+
+    // corner
+
+    @pathType()
+    public cornerRadius: __Number
+
+    @pathType()
+    public cornerSmoothing: __Number
+
+    // effect
+
+    @effectType()
+    public shadow: IShadowEffect | IShadowEffect[] | IShadowString
+
+    @effectType()
+    public innerShadow: IShadowEffect | IShadowEffect[] | IShadowString
+
+    @effectType()
+    public blur: __Number | IBlurEffect
+
+    @effectType()
+    public backgroundBlur: __Number | IBlurEffect
+
+    @effectType()
+    public grayscale: __Number | IGrayscaleEffect
+
+
+    // now transform
+
+    public get worldTransform(): IMatrixData { return this.__layout.getTransform('world') }
+
+    public get relativeTransform(): IMatrixData { return this.__layout.getTransform('relative') }
+
+    // now bounds
+
+    public get worldBoxBounds(): IBoundsData { return this.__layout.getBounds('world', 'box') }
+
+    public get worldRenderBounds(): IBoundsData { return this.__layout.getBounds('world', 'render') }
+
+
+    public __updateRenderPath(): void {
+        const { __: data } = this
+        const { cornerRadius, path } = data
+        data.__renderPath = cornerRadius && path ? PathHelper.applyCorner(path, cornerRadius, data.cornerSmoothing) : path
+    }
+
+    public __drawRenderPath(canvas: ILeaferCanvas): void {
+        canvas.beginPath()
+        this.__drawPathByData(canvas, this.__.__renderPath)
+    }
+
+    public __drawPath(canvas: ILeaferCanvas): void {
+        canvas.beginPath()
+        this.__drawPathByData(canvas, this.__.path)
+    }
+
+    @rewrite(PathHelper.drawData)
+    public __drawPathByData(drawer: ICanvasDrawPath, data: IPathCommandData): void { }
+
+}

package/src/Vector.ts

@@ -0,0 +1,26 @@
+import { dataProcessor, pathType, registerUI } from '@leafer/core'
+
+import { IVectorPath, IVectorPathString, IVector, IVectorData, IVectorInputData } from '@leafer-ui/interface'
+import { VectorData } from '@leafer-ui/data'
+
+import { Group } from './Group'
+
+
+@registerUI()
+export class Vector extends Group implements IVector {
+
+    @dataProcessor(VectorData)
+    public __: IVectorData
+
+    @pathType()
+    public paths: IVectorPath[] | IVectorPathString
+
+    constructor(data?: IVectorInputData) {
+        super(data)
+    }
+
+    public __updatePath(): void {
+
+    }
+
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+export { UI } from './UI'
+export { Group } from './Group'
+export { Frame } from './Frame'
+export { Rect } from './Rect'
+export { Ellipse } from './Ellipse'
+export { Polygon } from './Polygon'
+export { Star } from './Star'
+export { Line } from './Line'
+export { Path } from './Path'
+export { Vector } from './Vector'
+export { Text } from './Text'
+export { Image } from './Image'
+