@safe-engine/pixi 1.0.0

package/src/helper/html-text-parser.ts

@@ -0,0 +1,364 @@
+/* eslint-disable no-var */
+/* eslint-disable quotes */
+/* eslint-disable no-useless-escape */
+/****************************************************************************
+ Copyright (c) 2013-2016 Chukong Technologies Inc.
+ Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
+
+ https://www.cocos.com/
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated engine source code (the "Software"), a limited,
+ worldwide, royalty-free, non-assignable, revocable and non-exclusive license
+ to use Cocos Creator solely to develop games on your target platforms. You shall
+ not use Cocos Creator software for developing other software or tools that's
+ used for developing games. You are not granted to publish, distribute,
+ sublicense, and/or sell copies of Cocos Creator.
+
+ The software or tools in this License Agreement are licensed, not sold.
+ Xiamen Yaji Software Co., Ltd. reserves all rights not expressly granted to you.
+
+ 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.
+ ****************************************************************************/
+
+const eventRegx = /^(click)(\s)*=|(param)(\s)*=/
+const imageAttrReg =
+  /(\s)*src(\s)*=|(\s)*height(\s)*=|(\s)*width(\s)*=|(\s)*align(\s)*=|(\s)*offset(\s)*=|(\s)*click(\s)*=|(\s)*param(\s)*=/
+/**
+ * A utils class for parsing HTML texts. The parsed results will be an object array.
+ */
+export const HtmlTextParser = function () {
+  this._parsedObject = {}
+  this._specialSymbolArray = []
+  this._specialSymbolArray.push([/&lt;/g, '<'])
+  this._specialSymbolArray.push([/&gt;/g, '>'])
+  this._specialSymbolArray.push([/&amp;/g, '&'])
+  this._specialSymbolArray.push([/&quot;/g, '"'])
+  this._specialSymbolArray.push([/&apos;/g, "'"])
+  this._specialSymbolArray.push([/&nbsp;/g, ' '])
+}
+
+HtmlTextParser.prototype = {
+  constructor: HtmlTextParser,
+  parse: function (htmlString) {
+    this._resultObjectArray = []
+    if (!htmlString) {
+      return this._resultObjectArray
+    }
+    this._stack = []
+
+    let startIndex = 0
+    const length = htmlString.length
+    while (startIndex < length) {
+      let tagEndIndex = htmlString.indexOf('>', startIndex)
+      let tagBeginIndex = -1
+      if (tagEndIndex >= 0) {
+        tagBeginIndex = htmlString.lastIndexOf('<', tagEndIndex)
+        const noTagBegin = tagBeginIndex < startIndex - 1
+
+        if (noTagBegin) {
+          tagBeginIndex = htmlString.indexOf('<', tagEndIndex + 1)
+          tagEndIndex = htmlString.indexOf('>', tagBeginIndex + 1)
+        }
+      }
+
+      if (tagBeginIndex < 0) {
+        this._stack.pop()
+        this._processResult(htmlString.substring(startIndex))
+        startIndex = length
+      } else {
+        let newStr = htmlString.substring(startIndex, tagBeginIndex)
+        const tagStr = htmlString.substring(tagBeginIndex + 1, tagEndIndex)
+        if (tagStr === '') newStr = htmlString.substring(startIndex, tagEndIndex + 1)
+        this._processResult(newStr)
+        if (tagEndIndex === -1) {
+          // cc.error('The HTML tag is invalid!');
+          tagEndIndex = tagBeginIndex
+        } else if (htmlString.charAt(tagBeginIndex + 1) === '/') {
+          this._stack.pop()
+        } else {
+          this._addToStack(tagStr)
+        }
+        startIndex = tagEndIndex + 1
+      }
+    }
+
+    return this._resultObjectArray
+  },
+
+  _attributeToObject: function (attribute) {
+    attribute = attribute.trim()
+
+    const obj: any = {}
+    let header = attribute.match(/^(color|size)(\s)*=/)
+    let tagName
+    let nextSpace
+    let eventObj
+    let eventHanlderString
+    if (header) {
+      tagName = header[0]
+      attribute = attribute.substring(tagName.length).trim()
+      if (attribute === '') return obj
+
+      //parse color
+      nextSpace = attribute.indexOf(' ')
+      switch (tagName[0]) {
+        case 'c':
+          if (nextSpace > -1) {
+            obj.color = attribute.substring(0, nextSpace).trim()
+          } else {
+            obj.color = attribute
+          }
+          break
+        case 's':
+          obj.size = parseInt(attribute)
+          break
+      }
+
+      //tag has event arguments
+      if (nextSpace > -1) {
+        eventHanlderString = attribute.substring(nextSpace + 1).trim()
+        eventObj = this._processEventHandler(eventHanlderString)
+        obj.event = eventObj
+      }
+      return obj
+    }
+
+    header = attribute.match(/^(br(\s)*\/)/)
+    if (header && header[0].length > 0) {
+      tagName = header[0].trim()
+      if (tagName.startsWith('br') && tagName[tagName.length - 1] === '/') {
+        obj.isNewLine = true
+        this._resultObjectArray.push({ text: '', style: { newline: true } })
+        return obj
+      }
+    }
+
+    header = attribute.match(/^(img(\s)*src(\s)*=[^>]+\/)/)
+    if (header && header[0].length > 0) {
+      tagName = header[0].trim()
+      if (tagName.startsWith('img') && tagName[tagName.length - 1] === '/') {
+        header = attribute.match(imageAttrReg)
+        var tagValue
+        var remainingArgument
+        let isValidImageTag = false
+        while (header) {
+          //skip the invalid tags at first
+          attribute = attribute.substring(attribute.indexOf(header[0]))
+          tagName = attribute.substr(0, header[0].length)
+          //remove space and = character
+          remainingArgument = attribute.substring(tagName.length).trim()
+          nextSpace = remainingArgument.indexOf(' ')
+
+          tagValue = nextSpace > -1 ? remainingArgument.substr(0, nextSpace) : remainingArgument
+          tagName = tagName.replace(/[^a-zA-Z]/g, '').trim()
+          tagName = tagName.toLocaleLowerCase()
+
+          attribute = remainingArgument.substring(nextSpace).trim()
+          if (tagValue.endsWith('/')) tagValue = tagValue.slice(0, -1)
+          if (tagName === 'src') {
+            switch (tagValue.charCodeAt(0)) {
+              case 34: // "
+              case 39: // '
+                isValidImageTag = true
+                tagValue = tagValue.slice(1, -1)
+                break
+            }
+            obj.isImage = true
+            obj.src = tagValue
+          } else if (tagName === 'height') {
+            obj.imageHeight = parseInt(tagValue)
+          } else if (tagName === 'width') {
+            obj.imageWidth = parseInt(tagValue)
+          } else if (tagName === 'align') {
+            switch (tagValue.charCodeAt(0)) {
+              case 34: // "
+              case 39: // '
+                tagValue = tagValue.slice(1, -1)
+                break
+            }
+            obj.imageAlign = tagValue.toLocaleLowerCase()
+          } else if (tagName === 'offset') {
+            obj.imageOffset = tagValue
+          } else if (tagName === 'click') {
+            obj.event = this._processEventHandler(`${tagName}=${tagValue}`)
+          }
+
+          if (obj.event && tagName === 'param') {
+            obj.event.param = tagValue.replace(/^\"|\"$/g, '')
+          }
+
+          header = attribute.match(imageAttrReg)
+        }
+
+        if (isValidImageTag && obj.isImage) {
+          this._resultObjectArray.push({ text: '', style: obj })
+        }
+
+        return {}
+      }
+    }
+
+    header = attribute.match(/^(outline(\s)*[^>]*)/)
+    if (header) {
+      attribute = header[0].substring('outline'.length).trim()
+      const defaultOutlineObject = { color: '#ffffff', width: 1 }
+      if (attribute) {
+        const outlineAttrReg = /(\s)*color(\s)*=|(\s)*width(\s)*=|(\s)*click(\s)*=|(\s)*param(\s)*=/
+        header = attribute.match(outlineAttrReg)
+        var tagValue
+        while (header) {
+          //skip the invalid tags at first
+          attribute = attribute.substring(attribute.indexOf(header[0]))
+          tagName = attribute.substr(0, header[0].length)
+          //remove space and = character
+          remainingArgument = attribute.substring(tagName.length).trim()
+          nextSpace = remainingArgument.indexOf(' ')
+          if (nextSpace > -1) {
+            tagValue = remainingArgument.substr(0, nextSpace)
+          } else {
+            tagValue = remainingArgument
+          }
+          tagName = tagName.replace(/[^a-zA-Z]/g, '').trim()
+          tagName = tagName.toLocaleLowerCase()
+
+          attribute = remainingArgument.substring(nextSpace).trim()
+          if (tagName === 'click') {
+            obj.event = this._processEventHandler(`${tagName}=${tagValue}`)
+          } else if (tagName === 'color') {
+            defaultOutlineObject.color = tagValue
+          } else if (tagName === 'width') {
+            defaultOutlineObject.width = parseInt(tagValue)
+          }
+
+          if (obj.event && tagName === 'param') {
+            obj.event.param = tagValue.replace(/^\"|\"$/g, '')
+          }
+
+          header = attribute.match(outlineAttrReg)
+        }
+      }
+      obj.outline = defaultOutlineObject
+    }
+
+    header = attribute.match(/^(on|u|b|i)(\s)*/)
+    if (header && header[0].length > 0) {
+      tagName = header[0]
+      attribute = attribute.substring(tagName.length).trim()
+      switch (tagName[0]) {
+        case 'u':
+          obj.underline = true
+          break
+        case 'i':
+          obj.italic = true
+          break
+        case 'b':
+          obj.bold = true
+          break
+      }
+      if (attribute === '') {
+        return obj
+      }
+      eventObj = this._processEventHandler(attribute)
+      obj.event = eventObj
+    }
+
+    return obj
+  },
+
+  _processEventHandler: function (eventString) {
+    let index = 0
+    const obj = {}
+    let eventNames = eventString.match(eventRegx)
+    let isValidTag = false
+    while (eventNames) {
+      let eventName = eventNames[0]
+      let eventValue = ''
+      isValidTag = false
+      eventString = eventString.substring(eventName.length).trim()
+      if (eventString.charAt(0) === '"') {
+        index = eventString.indexOf('"', 1)
+        if (index > -1) {
+          eventValue = eventString.substring(1, index).trim()
+          isValidTag = true
+        }
+        index++
+      } else if (eventString.charAt(0) === '\'') {
+        index = eventString.indexOf('\'', 1)
+        if (index > -1) {
+          eventValue = eventString.substring(1, index).trim()
+          isValidTag = true
+        }
+        index++
+      } else {
+        //skip the invalid attribute value
+        const match = eventString.match(/(\S)+/)
+        if (match) {
+          eventValue = match[0]
+        } else {
+          eventValue = ''
+        }
+        index = eventValue.length
+      }
+
+      if (isValidTag) {
+        eventName = eventName.substring(0, eventName.length - 1).trim()
+        obj[eventName] = eventValue
+      }
+
+      eventString = eventString.substring(index).trim()
+      eventNames = eventString.match(eventRegx)
+    }
+
+    return obj
+  },
+
+  _addToStack: function (attribute) {
+    const obj = this._attributeToObject(attribute)
+
+    if (this._stack.length === 0) {
+      this._stack.push(obj)
+    } else {
+      if (obj.isNewLine || obj.isImage) {
+        return
+      }
+      //for nested tags
+      const previousTagObj = this._stack[this._stack.length - 1]
+      for (const key in previousTagObj) {
+        if (!obj[key]) {
+          obj[key] = previousTagObj[key]
+        }
+      }
+      this._stack.push(obj)
+    }
+  },
+
+  _processResult: function (value) {
+    if (value === '') {
+      return
+    }
+
+    value = this._escapeSpecialSymbol(value)
+    if (this._stack.length > 0) {
+      this._resultObjectArray.push({ text: value, style: this._stack[this._stack.length - 1] })
+    } else {
+      this._resultObjectArray.push({ text: value })
+    }
+  },
+
+  _escapeSpecialSymbol: function (str) {
+    for (let i = 0; i < this._specialSymbolArray.length; ++i) {
+      const key = this._specialSymbolArray[i][0]
+      const value = this._specialSymbolArray[i][1]
+
+      str = str.replace(key, value)
+    }
+    return str
+  },
+}

package/src/helper/utils.ts

@@ -0,0 +1,64 @@
+import {
+  ComponentAddedEvent,
+  Constructor, EntityManager, EventManager, EventReceive,
+  System
+} from 'entityx-ts'
+
+import {  ComponentX, NodeComp } from '..'
+import { GameWorld } from '../gworld'
+
+export function registerSystem<T extends ComponentX>(component: Constructor<T>) {
+  if (GameWorld.Instance.systems.isRegistered(`${component.name}System`)) {
+    return
+  }
+  class NewSystem implements System {
+    configure(event_manager: EventManager) {
+      console.log('configure registerSystem', component.name)
+      event_manager.subscribe(ComponentAddedEvent(component), this)
+    }
+
+    receive(type: string, event: EventReceive) {
+      switch (type) {
+        case ComponentAddedEvent(component): {
+          const ett = event.entity
+          const newComp: any = ett.getComponent(component)
+          newComp.node = ett.getComponent(NodeComp)
+          break
+        }
+        default:
+          break
+      }
+    }
+    update(entities: EntityManager, events: EventManager, dt: number) {
+      for (const entt of entities.entities_with_components(component)) {
+        const comp = entt.getComponent(component)
+        // console.log('comp', comp.constructor.name, typeof comp['update'] === 'function')
+        if (comp.node.active && typeof comp['update'] === 'function') {
+          comp['update'](dt)
+        }
+      }
+    }
+  }
+  Object.defineProperty(NewSystem, 'name', { value: `${component.name}System` })
+  GameWorld.Instance.systems.add(NewSystem)
+  GameWorld.Instance.systems.configureOnce(NewSystem)
+  GameWorld.Instance.listUpdate.push(NewSystem)
+  return NewSystem
+}
+
+export function instantiate<T>(ComponentType: Constructor<T>, data?: any): T {
+  return (ComponentType as any).create(data)
+}
+
+export class Size {
+  constructor(width, height) {
+    this.width = width
+    this.height = height
+  }
+  width: number
+  height: number
+}
+
+export function size(width: number, height: number) {
+  return new Size(width, height)
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export { addGameCanvasTo, app, initWorld,setupResolution } from './app'
+export * from './components/GUIComponent'
+export { NodeComp } from './components/NodeComp'
+export * from './components/RenderComponent'
+export { ComponentX, NoRenderComponentX } from './core/decorator'
+export { SceneComponent } from './core/Scene'
+export * from './core/Size'
+export {  Vec2 } from './core/Vec2'
+export { GameWorld } from './gworld'
+export { instantiate, registerSystem } from './helper/utils'

package/src/systems/GUISystem.ts

@@ -0,0 +1,95 @@
+import { Button, ScrollBox } from '@pixi/ui'
+import {
+  ComponentAddedEvent, EventManager, EventReceive,
+  System
+} from 'entityx-ts'
+import { Sprite, Text } from 'pixi.js'
+import { CallFunc, EaseBackIn, ScaleTo, Sequence } from 'pixi-action-ease'
+
+import { NodeComp, SpriteRender } from '..'
+import { ButtonComp, LabelComp, ProgressBarComp, ScrollView } from '../components/GUIComponent'
+import { LoadingBar } from '../core/LoadingBar'
+
+export class GUISystem implements System {
+  configure(event_manager: EventManager) {
+    event_manager.subscribe(ComponentAddedEvent(ButtonComp), this)
+    event_manager.subscribe(ComponentAddedEvent(ProgressBarComp), this)
+    event_manager.subscribe(ComponentAddedEvent(ScrollView), this)
+    event_manager.subscribe(ComponentAddedEvent(LabelComp), this)
+    // event_manager.subscribe(ComponentAddedEvent(BlockInputEventsComp), this);
+  }
+  receive(type: string, event: EventReceive) {
+    switch (type) {
+      case ComponentAddedEvent(ButtonComp): {
+        console.log('ComponentAddedEvent ButtonComp', event)
+        const ett = event.entity
+        const button = ett.getComponent(ButtonComp)
+        const nodeComp = ett.getComponent(NodeComp)
+        // const { normalImage, selectedImage, disableImage, texType, zoomScale } = button
+        const node = new Button(nodeComp.instance)
+        // node.setZoomScale(zoomScale - 1)
+        button.node = nodeComp
+        // button.node = ett.assign(new NodeComp(node, ett))
+        node.onPress.connect(() => {
+          // console.log('onPress.connect')
+          const scale = ScaleTo.create(0.12, 1.2)
+          const scaleDown = ScaleTo.create(0.12, 1)
+          const seq = Sequence.create(
+            scale,
+            CallFunc.create(() => {
+              if (Object.prototype.hasOwnProperty.call(button, 'onPress')) {
+                button.onPress(button)
+              }
+            }),
+            scaleDown,
+          )
+          const ease = EaseBackIn.create(seq)
+          button.node.runAction(ease)
+        })
+        break
+      }
+      case ComponentAddedEvent(ProgressBarComp): {
+        console.log('ComponentAddedEvent ProgressBarComp', event)
+        const ett = event.entity
+        const bar = ett.getComponent(ProgressBarComp)
+        const spriteComp = ett.getComponent(SpriteRender)
+        if (!spriteComp) throw Error('ProgressBarComp need SpriteRender')
+        const { progress, mode } = bar
+        const node = new LoadingBar(mode, spriteComp.node.instance as Sprite)
+        spriteComp.node.instance.mask = node
+        bar.node = ett.assign(new NodeComp(node, ett))
+        node.progress = progress
+        break
+      }
+      case ComponentAddedEvent(ScrollView): {
+        console.log('ComponentAddedEvent ScrollView', event)
+        const ett = event.entity
+        const scroll = event.component as ScrollView
+        const { width, height } = scroll
+        const view = new ScrollBox({ width, height })
+        scroll.node = ett.assign(new NodeComp(view, ett))
+        break
+      }
+      case ComponentAddedEvent(LabelComp): {
+        console.log('ComponentAddedEvent LabelComp', event)
+        const ett = event.entity
+        const label = ett.getComponent(LabelComp)
+        const node = new Text()
+        // node.texture.rotate = 8
+        node.style.fill = '#fff'
+        label.node = ett.assign(new NodeComp(node, ett))
+        const { string = '', font = '', size } = label
+        if (font) label.setFont(font)
+        label.setSize(size)
+        label.setString(string)
+        break
+      }
+
+      default:
+        break
+    }
+  }
+  update() {
+    // throw new Error('Method not implemented.');
+  }
+}

package/src/systems/RenderSystem.ts

@@ -0,0 +1,100 @@
+import {
+  ComponentAddedEvent, ComponentRemovedEvent, EventManager, EventReceive,
+  System
+} from 'entityx-ts'
+import { Container, Graphics, Sprite } from 'pixi.js'
+
+import { NodeComp } from '..'
+import { GraphicsRender, 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(ComponentAddedEvent(NodeRender), this)
+    event_manager.subscribe(ComponentAddedEvent(SpriteRender), this)
+    // event_manager.subscribe(ComponentAddedEvent(ImageRender), this)
+    // event_manager.subscribe(ComponentAddedEvent(MaskRender), this)
+    event_manager.subscribe(ComponentAddedEvent(GraphicsRender), this)
+    event_manager.subscribe(ComponentAddedEvent(NodeComp), this)
+    event_manager.subscribe(ComponentRemovedEvent(NodeComp), this)
+  }
+
+  receive(type: string, event: EventReceive) {
+    switch (type) {
+      case ComponentAddedEvent(NodeRender): {
+        // console.log('NodeRender', event)
+        const ett = event.entity
+        const nodeRenderComp = ett.getComponent(NodeRender)
+        const node = new Container()
+        nodeRenderComp.node = ett.assign(new NodeComp(node, ett))
+        break
+      }
+
+      case ComponentAddedEvent(SpriteRender): {
+        // console.log('ComponentAddedEvent SpriteRender', event)
+        const ett = event.entity
+        const spriteComp = ett.getComponent(SpriteRender)
+        const { spriteFrame, type, fillType, fillRange, fillCenter } = spriteComp
+        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
+          spriteComp.loadingBar = loadingBar
+          // node.setMidpoint(fillCenter)
+        }
+        // node.texture.rotate = 8
+        spriteComp.node = ett.assign(new NodeComp(node, ett))
+        // spriteComp.node.anchorX = 0.5
+        // spriteComp.node.anchorY = 0.5
+        break
+      }
+
+      // case ComponentAddedEvent(MaskRender): {
+      //   console.log('MaskRender', event.component);
+      //   const ett = event.entity
+      //   const maskComp = event.entity.getComponent(MaskRender)
+      //   const { type, segments, inverted } = maskComp
+      //   const node = new cc.ClippingNode()
+      //   node.setInverted(inverted)
+      //   maskComp.node = ett.assign(new NodeComp(node, ett))
+      //   break
+      // }
+
+      case ComponentAddedEvent(GraphicsRender): {
+        console.log('MaskRender', event.component)
+        const ett = event.entity
+        const graphics = event.entity.getComponent(GraphicsRender)
+        const { lineWidth, strokeColor, fillColor } = graphics
+        const node = new Graphics()
+        node.beginFill(fillColor)
+        node.lineStyle(lineWidth, strokeColor)
+        graphics.node = ett.assign(new NodeComp(node, ett))
+        // node.drawCircle(0, 0, 100)
+        break
+      }
+      case ComponentRemovedEvent(NodeComp): {
+        const node = event.component as NodeComp
+        if (node) {
+          node.instance.removeFromParent()
+        }
+        break
+      }
+      default:
+        break
+    }
+  }
+  update() {
+    // throw new Error('Method not implemented.');
+  }
+}

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "es2017",
+      "dom"
+    ],
+    "outDir": "dist",
+    "target": "es5",
+    "declaration": true,
+    "declarationMap": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "noEmit": false
+  }
+}