@safe-engine/pixi 7.0.2 → 8.0.3

package/src/core/LoadingBar.ts

@@ -1,63 +1,63 @@
-import { Container, Graphics, Point, Sprite, Texture } from 'pixi.js'
-
-export enum LoadingBarMode {
-  BAR,
-  RADIAL,
-}
-
-export class LoadingBar extends Graphics {
-  spriteComp: Sprite
-  mode: LoadingBarMode
-  fillCenter = new Point(0.5, 0.5)
-  constructor(mode: LoadingBarMode, spriteComp: Sprite) {
-    super()
-    this.spriteComp = spriteComp
-    this.mode = mode || LoadingBarMode.BAR
-    this.beginFill(0xffffff)
-    this.drawRect(0, 0, spriteComp.width, spriteComp.height)
-    spriteComp.mask = this
-    spriteComp.addChild(this)
-  }
-
-  set progress(val: number) {
-    this.clear()
-    this.beginFill(0xffffff)
-    if (this.mode === LoadingBarMode.BAR) {
-      const spriteComp = this.spriteComp
-      this.drawRect(0, 0, spriteComp.width * val, spriteComp.height)
-      // console.log('new length', spriteComp.width)
-      this.x = -spriteComp.width * 0.5
-      this.y = -spriteComp.height * 0.5
-    }
-  }
-}
-
-export class ProgressTimer extends Container {
-  graphics: Graphics
-  spriteComp: Sprite
-  mode: LoadingBarMode
-  fillCenter = new Point(0.5, 0.5)
-  constructor(mode: LoadingBarMode, spriteFrame: string) {
-    super()
-    const texture = Texture.from(spriteFrame)
-    this.spriteComp = Sprite.from(texture)
-    this.graphics = new Graphics()
-    this.mode = mode || LoadingBarMode.BAR
-    this.graphics.beginFill(0xffffff)
-    this.graphics.drawRect(0, 0, this.spriteComp.width, this.spriteComp.height)
-    this.spriteComp.mask = this.graphics
-    this.addChild(this.graphics)
-    this.addChild(this.spriteComp)
-    // this.graphics.x = -this.spriteComp.width * this.fillCenter.x
-    // this.graphics.y = -this.spriteComp.height * this.fillCenter.y
-  }
-
-  set progress(val: number) {
-    this.graphics.clear()
-    if (this.mode === LoadingBarMode.BAR) {
-      this.graphics.beginFill(0xffffff)
-      this.graphics.drawRect(0, 0, this.spriteComp.width * val, this.spriteComp.height)
-      // console.log('new length', this.width)
-    }
-  }
+import { Container, Graphics, Point, Sprite, Texture } from 'pixi.js'
+
+export enum LoadingBarMode {
+  BAR,
+  RADIAL,
+}
+
+export class LoadingBar extends Graphics {
+  spriteComp: Sprite
+  mode: LoadingBarMode
+  fillCenter = new Point(0.5, 0.5)
+  constructor(mode: LoadingBarMode, spriteComp: Sprite) {
+    super()
+    this.spriteComp = spriteComp
+    this.mode = mode || LoadingBarMode.BAR
+    this.fill(0xffffff)
+    this.rect(0, 0, spriteComp.width, spriteComp.height)
+    spriteComp.mask = this
+    spriteComp.addChild(this)
+  }
+
+  set progress(val: number) {
+    this.clear()
+    this.fill(0xffffff)
+    if (this.mode === LoadingBarMode.BAR) {
+      const spriteComp = this.spriteComp
+      this.rect(0, 0, spriteComp.width * val, spriteComp.height)
+      // console.log('new length', spriteComp.width)
+      this.x = -spriteComp.width * 0.5
+      this.y = -spriteComp.height * 0.5
+    }
+  }
+}
+
+export class ProgressTimer extends Container {
+  graphics: Graphics
+  spriteComp: Sprite
+  mode: LoadingBarMode
+  fillCenter = new Point(0.5, 0.5)
+  constructor(mode: LoadingBarMode, spriteFrame: string) {
+    super()
+    const texture = Texture.from(spriteFrame)
+    this.spriteComp = Sprite.from(texture)
+    this.graphics = new Graphics()
+    this.mode = mode || LoadingBarMode.BAR
+    this.graphics.fill(0xffffff)
+    this.graphics.rect(0, 0, this.spriteComp.width, this.spriteComp.height)
+    this.spriteComp.mask = this.graphics
+    this.addChild(this.graphics)
+    this.addChild(this.spriteComp)
+    // this.graphics.x = -this.spriteComp.width * this.fillCenter.x
+    // this.graphics.y = -this.spriteComp.height * this.fillCenter.y
+  }
+
+  set progress(val: number) {
+    this.graphics.clear()
+    if (this.mode === LoadingBarMode.BAR) {
+      this.graphics.rect(0, 0, this.spriteComp.width * val, this.spriteComp.height)
+      // console.log('new length', this.width)
+      this.graphics.fill(0xffffff)
+    }
+  }
 }

package/src/systems/RenderSystem.ts

@@ -1,70 +1,71 @@
-import {
-  EventManager,
-  EventTypes,
-  System
-} from 'entityx-ts'
-import { Container, Graphics, Sprite } from 'pixi.js'
-
-import { NodeComp } from '..'
-import { GraphicsRender, MaskRender, NodeRender, SpriteRender } from '../components/RenderComponent'
-import { LoadingBar } from '../core/LoadingBar'
-
-export enum SpriteTypes {
-  SIMPLE,
-  SLICED,
-  TILED,
-  FILLED,
-  MESH,
-  ANIMATION,
-}
-
-export class RenderSystem implements System {
-  configure(event_manager: EventManager) {
-    event_manager.subscribe(EventTypes.ComponentAdded, NodeRender, ({ entity }) => {
-      const nodeRenderComp = entity.getComponent(NodeRender)
-      const node = new Container()
-      nodeRenderComp.node = entity.assign(new NodeComp(node, entity))
-    })
-    event_manager.subscribe(EventTypes.ComponentAdded, SpriteRender, ({ entity, component }) => {
-      const { spriteFrame, type, fillType, fillRange, fillCenter } = component
-      // console.log('SpriteRender', component)
-      const node = Sprite.from(spriteFrame)
-      if (type === SpriteTypes.FILLED) {
-        // console.log('fillType', fillType)
-        const loadingBar = new LoadingBar(fillType, node)
-        if (fillRange) loadingBar.progress = fillRange
-        if (fillCenter) loadingBar.fillCenter = fillCenter
-        component.loadingBar = loadingBar
-        // node.setMidpoint(fillCenter)
-      }
-      // node.texture.rotate = 8
-      component.node = entity.assign(new NodeComp(node, entity))
-      // component.node.anchorX = 0.5
-      // component.node.anchorY = 0.5
-    })
-    event_manager.subscribe(EventTypes.ComponentAdded, MaskRender, ({ component }) => {
-      console.log('MaskRender', component);
-      // const { type, segments, inverted } = maskComp
-      // const node = new cc.ClippingNode()
-      // node.setInverted(inverted)
-      // maskComp.node = ett.assign(new NodeComp(node, ett))
-    })
-    event_manager.subscribe(EventTypes.ComponentAdded, GraphicsRender, ({ entity, component }) => {
-      const { lineWidth, strokeColor, fillColor } = component
-      const node = new Graphics()
-      node.beginFill(fillColor)
-      node.lineStyle(lineWidth, strokeColor)
-      component.node = entity.assign(new NodeComp(node, entity))
-      // node.drawCircle(0, 0, 100)
-    })
-    event_manager.subscribe(EventTypes.ComponentRemoved, NodeComp, ({ component }) => {
-      if (component) {
-        component.instance.removeFromParent()
-      }
-    })
-  }
-
-  // update() {
-  // throw new Error('Method not implemented.');
-  // }
-}
+import {
+  EventManager,
+  EventTypes,
+  System
+} from 'entityx-ts'
+import { Container, Graphics, Sprite } from 'pixi.js'
+
+import { NodeComp } from '..'
+import { GraphicsRender, MaskRender, NodeRender, SpriteRender } from '../components/RenderComponent'
+import { LoadingBar } from '../core/LoadingBar'
+
+export enum SpriteTypes {
+  SIMPLE,
+  SLICED,
+  TILED,
+  FILLED,
+  MESH,
+  ANIMATION,
+}
+
+export class RenderSystem implements System {
+  configure(event_manager: EventManager) {
+    event_manager.subscribe(EventTypes.ComponentAdded, NodeRender, ({ entity }) => {
+      const nodeRenderComp = entity.getComponent(NodeRender)
+      const node = new Container()
+      nodeRenderComp.node = entity.assign(new NodeComp(node, entity))
+    })
+    event_manager.subscribe(EventTypes.ComponentAdded, SpriteRender, ({ entity, component }) => {
+      const { spriteFrame, type, fillType, fillRange, fillCenter } = component
+      // console.log('SpriteRender', component)
+      const node = Sprite.from(spriteFrame)
+      if (type === SpriteTypes.FILLED) {
+        // console.log('fillType', fillType)
+        const loadingBar = new LoadingBar(fillType, node)
+        if (fillRange) loadingBar.progress = fillRange
+        if (fillCenter) loadingBar.fillCenter = fillCenter
+        component.loadingBar = loadingBar
+        // node.setMidpoint(fillCenter)
+      }
+      // node.texture.rotate = 8
+      component.node = entity.assign(new NodeComp(node, entity))
+      // component.node.anchorX = 0.5
+      // component.node.anchorY = 0.5
+    })
+    event_manager.subscribe(EventTypes.ComponentAdded, MaskRender, ({ component }) => {
+      console.log('MaskRender', component);
+      // const { type, segments, inverted } = maskComp
+      // const node = new cc.ClippingNode()
+      // node.setInverted(inverted)
+      // maskComp.node = ett.assign(new NodeComp(node, ett))
+    })
+    event_manager.subscribe(EventTypes.ComponentAdded, GraphicsRender, ({ entity, component }) => {
+      const { lineWidth, strokeColor, fillColor } = component
+      const node = new Graphics()
+      node.fill(fillColor)
+      node.fillStyle = strokeColor
+      node.width = lineWidth
+      component.node = entity.assign(new NodeComp(node, entity))
+      // node.drawCircle(0, 0, 100)
+    })
+    event_manager.subscribe(EventTypes.ComponentRemoved, NodeComp, ({ component }) => {
+      if (component) {
+        component.instance.removeFromParent()
+      }
+    })
+  }
+
+  // update() {
+  // throw new Error('Method not implemented.');
+  // }
+}