代码结构整理

assets/Scripts/chat18x/ui/components/ChatContentsLayout.ts

@@ -0,0 +1,60 @@
+import { _decorator, Component, instantiate, Node, Vec3 } from "cc";
+import { DialogManager } from "../../manager/DialogManager";
+import { DialogBubble } from "./DialogBubble";
+import { Dialog } from "../../utils/DemoData";
+const { ccclass, property } = _decorator;
+
+const BUTTOM_Y = -955.571;
+
+@ccclass("ChatContentsLayout")
+export class ChatContentsLayout extends Component {
+  manager: DialogManager = null;
+
+  @property(DialogBubble)
+  lBubble: DialogBubble = null;
+  @property(DialogBubble)
+  rBubble: DialogBubble = null;
+
+  bubbles: DialogBubble[] = [];
+
+  protected start(): void {
+    this.lBubble.node.active = false;
+    this.rBubble.node.active = false;
+  }
+
+  protected onEnable(): void {
+    if (!this.manager) this.manager = DialogManager.getInstance();
+
+    this.manager.layoutout = this;
+  }
+
+  UpdateDialog(dialogs: Dialog[]) {
+    //if (!this.bubbles) this.bubbles = [];
+    for (let i = this.bubbles.length - 1; i >= 0; i--) {
+      if (this.bubbles[i].node) {
+        this.bubbles[i].node.destroy();
+      }
+    }
+    this.bubbles = [];
+    let initPosY: number = BUTTOM_Y;
+    for (let i = dialogs.length - 1; i >= 0; i--) {
+      const dialog = dialogs[i]; //倒序
+
+      let newBubbleNode = dialog.isPlayer
+        ? instantiate(this.rBubble.node)
+        : instantiate(this.lBubble.node);
+      let newBubble = newBubbleNode.getComponent(DialogBubble);
+
+      newBubbleNode.setParent(this.node);
+      newBubble.node.active = true;
+
+      let offset = newBubble.updateBubbleContent(dialog.content);
+
+      let pos = newBubble.node.position;
+      newBubble.node.position = new Vec3(pos.x, initPosY, pos.z);
+
+      initPosY += offset + 20;
+      this.bubbles.push(newBubble);
+    }
+  }
+}

assets/Scripts/chat18x/ui/components/ChatContentsLayout.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "8abe19dc-5ef2-4ff2-bc27-6c92e7b9f311",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/Scripts/chat18x/ui/components/DialogBubble.ts

@@ -0,0 +1,57 @@
+import { _decorator, Component, Label, Node, Size, UITransform } from "cc";
+import Tools from "../../utils/tools";
+const { ccclass, property } = _decorator;
+
+@ccclass("DialogBubble")
+export class DialogBubble extends Component {
+  @property(UITransform)
+  bg: UITransform = null;
+  @property(Label)
+  content: Label = null;
+  @property(UITransform)
+  contentT: UITransform = null;
+
+  updateBubbleContent(str: string) {
+    const lines = str.split("\n");
+    let len = 0;
+    let index = 0;
+    for (let i = 0; i < lines.length; i++) {
+      const element = lines[i];
+      if (element.length > len) {
+        len = element.length;
+        index = i;
+      }
+    }
+
+    let finalLen = 0;
+    // for (let i = 0; i < lines[index].length; i++) {
+    //   const element = lines[index][i];
+    //   if ("\u4e00" <= element[i] && element[i] <= "\u9fff") {
+    //     finalLen += 35;
+    //   } else {
+    //     finalLen += 18;
+    //   }
+    // }
+
+    if (Tools.IsChinese(lines[index])) {
+      finalLen = 35 * lines[index].length;
+    } else {
+      finalLen = 21 * lines[index].length;
+    }
+
+    this.content.string = str;
+    this.contentT.setContentSize(
+      new Size(Math.min(finalLen, 950), this.contentT.contentSize.y)
+    );
+    this.content.updateRenderData();
+
+    this.bg.setContentSize(
+      new Size(
+        this.contentT.contentSize.x + 30,
+        this.contentT.contentSize.y + 20
+      )
+    );
+
+    return this.bg.contentSize.y;
+  }
+}

assets/Scripts/chat18x/ui/components/DialogBubble.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "f5819f30-6fb8-435b-883e-1483a8bf9a92",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/Scripts/chat18x/ui/components/ImagePopup.ts

@@ -0,0 +1,52 @@
+import { _decorator, Component, Node,Sprite,Vec3 ,tween, UITransform} from 'cc';
+import ResManager from "db://assets/Scripts/Main/Manager/ResManager";
+import Utils from "db://assets/Scripts/Main/Common/Utils";
+import {ViewManager} from "db://assets/Scripts/Main/Manager/ViewManager";
+const { ccclass, property } = _decorator;
+
+@ccclass('ImagePopup')
+export class ImagePopup extends Component {
+    @property(Sprite)
+    image:Sprite;
+
+
+    start()
+    {
+        this.node.setPosition(new Vec3(-1500,493,0));
+        this.image.node.on(Node.EventType.TOUCH_START,this.openImage);
+    }
+
+    onDestroy()
+    {
+        //this.image.node.off(Node.EventType.TOUCH_START,this.openImage);
+    }
+
+    refresh(path:string)
+    {
+        ResManager.I.changeBundleSpriteFrame(this.image,path,"Chat18x",()=>{
+            let sizeTran = this.image.node.parent.getComponent(UITransform);
+            Utils.adjustBgPixelRatioToSize(sizeTran.contentSize,this.image.node,2);
+            this.popUp();
+        });
+
+    }
+
+    openImage()
+    {
+        let data = {url:"Image/Girls/10001/DetailImg/10001_3"};
+        ViewManager.I.openBundlesView('ShowPanel',data);
+    }
+    popUp()
+    {
+        tween(this.node).to(0.5,{position:new Vec3(-559.374,493,0)},{easing:"backOut"}).start();
+        this.scheduleOnce(()=>{
+            this.popDown();
+        },5);
+    }
+    popDown()
+    {
+        tween(this.node).to(0.5,{position:new Vec3(-1500,493,0)},{easing:"backIn"}).start();
+    }
+}
+
+

assets/Scripts/chat18x/ui/components/ImagePopup.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "fdde853b-08ee-4506-8e7f-dc9148d53056",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}