refactor: decouple with pixi (wip)

#3

src/Entry.ts

@@ -94,7 +94,7 @@ export class Entry {
             .flat()
         ))
         Object.entries(this.objects).forEach(([_id, obj]) => {
-            obj.texture = this.textures[obj.textureIds[obj.currentTextureIndex]]
+            obj.pixiSprite.texture = this.textures[obj.textureIds[obj.currentTextureIndex]]
         })
         /*
         this.objects = Object.fromEntries(
@@ -243,19 +243,19 @@ export class Entry {
     /* 움직임 */
     move_direction(n: number, obj: EntrySprite) {
         obj.x += n * Math.sin(toRadian(obj.direction))
-        obj.y -= n * Math.cos(toRadian(obj.direction))
+        obj.y += n * Math.cos(toRadian(obj.direction))
     }
     move_x(n: number, obj: EntrySprite) {
         obj.x += n
     }
     move_y(n: number, obj: EntrySprite) {
-        obj.y -= n
+        obj.y += n
     }
     locate_x(x: number, obj: EntrySprite) {
-        obj.x = x + 240
+        obj.x = x
     }
     locate_y(y: number, obj: EntrySprite) {
-        obj.y = -y + 135
+        obj.y = y
     }
     locate_xy(x: number, y: number, obj: EntrySprite) {
         this.locate_x(x, obj)
@@ -268,13 +268,13 @@ export class Entry {
         obj.y = this.objects[objId].y
     }
     rotate_relative(angle: number, obj: EntrySprite) {
-        obj.angle += angle
+        obj.rotation += angle
     }
     direction_relative(angle: number, obj: EntrySprite) {
         obj.direction += angle
     }
     rotate_absolute(angle: number, obj: EntrySprite) {
-        obj.angle = angle
+        obj.rotation = angle
     }
     direction_absolute(angle: number, obj: EntrySprite) {
         obj.direction = angle
@@ -285,11 +285,11 @@ export class Entry {
         const target = this.objects[objId]
         const dx = target.x - obj.x
         const dy = target.y - obj.y
-        obj.angle = toDegrees(dy / dx) - obj.direction + (dx > 0 ? 90 : 270)
+        obj.rotation = - toDegrees(dy / dx) - obj.direction + (dx > 0 ? 90 : 270)
     }
     move_to_angle(angle: number, n: number, obj: EntrySprite) {
         obj.x += n * Math.sin(toRadian(angle))
-        obj.y -= n * Math.cos(toRadian(angle))
+        obj.y += n * Math.cos(toRadian(angle))
     }
 
     /* 생김새 */
@@ -312,12 +312,12 @@ export class Entry {
             const shapeId = shapeIdOrIndex
             // TODO: abstraction
             obj.currentTextureIndex = obj.textureIds.indexOf(shapeId)
-            obj.texture = this.textures[shapeId]
+            obj.pixiSprite.texture = this.textures[shapeId]
         } else {
             // TODO: handle edge case: ex) 0.5
             const index = shapeIdOrIndex - 1
             obj.currentTextureIndex = index
-            obj.texture = this.textures[obj.textureIds[index]]
+            obj.pixiSprite.texture = this.textures[obj.textureIds[index]]
         }
     }
     change_to_next_shape(type: "next" | "prev", obj: EntrySprite) {
@@ -332,7 +332,7 @@ export class Entry {
                 obj.currentTextureIndex,
                 obj.textureIds.length,
             )
-        obj.texture = this.textures[
+        obj.pixiSprite.texture = this.textures[
             obj.textureIds[
                 obj.currentTextureIndex
             ]
@@ -347,7 +347,7 @@ export class Entry {
         obj: EntrySprite,
     ) {
         if (type == "transparency")
-            obj.alpha -= amount / 100
+            obj.transparency += amount
         else throw new Error(`add_effect_amount - ${type} is not implemented yet.`)
     }
     change_effect_amount(
@@ -359,7 +359,7 @@ export class Entry {
         obj: EntrySprite,
     ) {
         if (type == "transparency")
-            obj.alpha = 1 - amount / 100
+            obj.transparency = amount
         else throw new Error(`add_effect_amount - ${type} is not implemented yet.`)
     }
     change_scale_size(d: number, obj: EntrySprite) {
@@ -440,19 +440,19 @@ export class Entry {
                 : this.objects[targetId]
         switch (type) {
             case "x":
-                return target.x - 240
+                return target.x
             case "y":
-                return -target.y + 135
+                return target.y
             case "rotation":
-                return target.angle
+                return target.rotation
             case "direction":
                 return target.direction
             case "picture_index":
                 return target.currentTextureIndex
             case "size":
                 return target.size
             case "picture_name":
-                return target.texture.label
+                return target.pixiSprite.texture.label
         }
     }
     quotient_and_mod(

src/EntrySprite.ts

@@ -1,26 +1,56 @@
 import type { Object_ } from "../deps/enz.ts"
-import { Sprite } from "../deps/pixi.ts"
+import { Sprite, EventEmitter } from "../deps/pixi.ts"
 import type { Entry } from "./Entry.ts"
 
-export class EntrySprite extends Sprite {
+export class EntrySprite extends EventEmitter {
     textureIds: string[] = []
     currentTextureIndex = 0
     direction = 0
     scene
     isClone = false
 
+    pixiSprite: Sprite
+
     constructor(data: { scene: string }) {
         super()
+        this.pixiSprite = new Sprite()
         this.scene = data.scene
     }
     get size() {
-        return (this.width + this.height) / 2
+        return (this.pixiSprite.width + this.pixiSprite.height) / 2
     }
     set size(newSize: number) {
         const scale = Math.max(1, newSize) / this.size
-        this.scale.x *= scale
-        this.scale.y *= scale
+        this.pixiSprite.scale.x *= scale
+        this.pixiSprite.scale.y *= scale
+    }
+    get x() {
+        return this.pixiSprite.x - 240
+    }
+    set x(x: number) {
+        this.pixiSprite.x = x + 240
+    }
+    get y() {
+        return -this.pixiSprite.y + 135
+    }
+    set y(y: number) {
+        this.pixiSprite.y = -y + 135
+    }
+    get rotation() { return this.pixiSprite.angle }
+    set rotation(a: number) { this.pixiSprite.angle = a }
+    get visible() { return this.pixiSprite.visible }
+    set visible(b: boolean) { this.pixiSprite.visible = b }
+    get transparency() {
+        return (1 - this.pixiSprite.alpha) * 100
     }
+    set transparency(n: number) {
+        this.pixiSprite.alpha = 1 - (n / 100)
+    }
+
+    destroy() {
+        this.pixiSprite.destroy()
+    }
+
     static fromEntryData(
         {
             selectedPictureId,
@@ -34,43 +64,47 @@ export class EntrySprite extends Sprite {
         project: Entry,
     ) {
         const sprite = new this({ scene })
+        const pixiSprite = sprite.pixiSprite
+
         sprite.textureIds = pictures.map(
             ({id}) => id
         )
         sprite.currentTextureIndex = sprite.textureIds.indexOf(selectedPictureId)
-        sprite.anchor.set(0.5)
-        sprite.x = entity.x + 240
-        sprite.y = -entity.y + 135
-        sprite.scale = {
+        pixiSprite.anchor.set(0.5)
+        sprite.x = entity.x
+        sprite.y = entity.y
+        pixiSprite.scale = {
             x: entity.scaleX,
             y: entity.scaleY,
         }
-        sprite.angle = entity.rotation
+        sprite.rotation = entity.rotation
         sprite.direction = entity.direction
         sprite.visible = entity.visible
-        project.scenes[sprite.scene].addChildAt(sprite, 0)
+        project.scenes[sprite.scene].addChildAt(pixiSprite, 0)
         return sprite
     }
     clone(project: Entry) {
         const sprite = new (this.constructor as new (data: { scene: string }) => this)({
             scene: this.scene
-        })
+        })        
+        const pixiSprite = sprite.pixiSprite
+
         sprite.textureIds = this.textureIds
         sprite.currentTextureIndex = this.currentTextureIndex
-        sprite.texture = this.texture
-        sprite.anchor.set(0.5)
+        pixiSprite.texture = this.pixiSprite.texture
+        pixiSprite.anchor.set(0.5)
         sprite.x = this.x
         sprite.y = this.y
-        sprite.scale = this.scale
-        sprite.angle = this.angle
+        sprite.size = this.size
+        sprite.rotation = this.rotation
         sprite.direction = this.direction
         sprite.visible = this.visible
 
         sprite.isClone = true
 
-        const myPos = project.scenes[sprite.scene].children.findIndex(x => x == this)
+        const myPos = project.scenes[sprite.scene].children.findIndex(x => x == this.pixiSprite)
 
-        project.scenes[sprite.scene].addChildAt(sprite, myPos)
+        project.scenes[sprite.scene].addChildAt(sprite.pixiSprite, myPos)
 
         sprite.emit("clone")