From e10438c1bff3e7e9850572ee95d69233b1f7c053 Mon Sep 17 00:00:00 2001
From: Andy Wong <coulometer@gmail.com>
Date: Wed, 25 Nov 2020 13:04:14 +0800
Subject: [PATCH] publish

---
 form/src/app/form/form.component.html |  35 +--
 form/src/app/form/form.component.ts   |  57 ++--
 form/src/app/play/play.component.ts   | 414 +++++---------------------
 package.json                          |  29 +-
 4 files changed, 123 insertions(+), 412 deletions(-)

diff --git a/form/src/app/form/form.component.html b/form/src/app/form/form.component.html
index c07239d..e249200 100644
--- a/form/src/app/form/form.component.html
+++ b/form/src/app/form/form.component.html
@@ -1,36 +1,3 @@
 <div class="model-content">
- 
-  <div style="padding: 10px;">
-    
-    <div style="width: 300px;" align='center'>
-      <span>图1: </span>
-      <app-upload-image-with-preview
-        [picUrl]="item.pic_url"
-        (imageUploaded)="onImageUploadSuccess($event, 'pic_url')">
-      </app-upload-image-with-preview>
-    </div>
-   
-    <div style="width: 300px; margin-top: 5px;" align='center'>
-      <span>图2: </span>
-      <app-upload-image-with-preview
-        [picUrl]="item.pic_url_2"
-        (imageUploaded)="onImageUploadSuccess($event, 'pic_url_2')">
-      </app-upload-image-with-preview>
-    </div>
-
-    <div style="width: 300px; margin-top: 15px;">
-      <span>文本: </span>
-      <input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
-    </div>
-
-    <div style="margin-top: 5px">
-      <span>音频: </span>
-      <app-audio-recorder
-        [audioUrl]="item.audio_url"
-        (audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
-      ></app-audio-recorder>
-    </div>
-
-  </div>
-
+  <input nz-input [(ngModel)]="item.text" (blur)="save()" />
 </div>
diff --git a/form/src/app/form/form.component.ts b/form/src/app/form/form.component.ts
index 82a6e91..65fd680 100644
--- a/form/src/app/form/form.component.ts
+++ b/form/src/app/form/form.component.ts
@@ -1,29 +1,38 @@
-import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
-import { JsonPipe } from '@angular/common';
-
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnChanges,
+  OnInit,
+  Output,
+  ApplicationRef,
+  ChangeDetectorRef,
+} from "@angular/core";
+import { JsonPipe } from "@angular/common";
 
 @Component({
-  selector: 'app-form',
-  templateUrl: './form.component.html',
-  styleUrls: ['./form.component.css']
+  selector: "app-form",
+  templateUrl: "./form.component.html",
+  styleUrls: ["./form.component.css"],
 })
 export class FormComponent implements OnInit, OnChanges, OnDestroy {
-
   // 储存数据用
   saveKey = "test_001";
   // 储存对象
   item;
 
-  constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
-
-  }
+  constructor(
+    private appRef: ApplicationRef,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
 
   createShell() {
     this.item.wordList.push({
-      word: '',
-      audio: '',
-      backWord: '',
-      backWordAudio: '',
+      word: "",
+      audio: "",
+      backWord: "",
+      backWordAudio: "",
     });
     this.save();
   }
@@ -34,12 +43,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   ngOnInit() {
-
     this.item = {};
 
     // 获取存储的数据
     (<any>window).courseware.getData((data) => {
-
       if (data) {
         this.item = data;
       }
@@ -48,27 +55,20 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
       this.changeDetectorRef.markForCheck();
       this.changeDetectorRef.detectChanges();
       this.refresh();
-
     }, this.saveKey);
   }
 
-  ngOnChanges() {
-  }
-
-  ngOnDestroy() {
-  }
+  ngOnChanges() {}
 
-  init() {
-
-  }
+  ngOnDestroy() {}
 
+  init() {}
 
   /**
    * 储存图片数据
    * @param e
    */
   onImageUploadSuccess(e, key) {
-
     this.item[key] = e.url;
     this.save();
   }
@@ -99,7 +99,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
     (<any>window).courseware.setData(this.item, null, this.saveKey);
 
     this.refresh();
-    console.log('this.item = ' + JSON.stringify(this.item));
+    console.log("this.item = " + JSON.stringify(this.item));
   }
 
   /**
@@ -110,5 +110,4 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
       this.appRef.tick();
     }, 1);
   }
-
-}
\ No newline at end of file
+}
diff --git a/form/src/app/play/play.component.ts b/form/src/app/play/play.component.ts
index f4b8a86..0b66fda 100644
--- a/form/src/app/play/play.component.ts
+++ b/form/src/app/play/play.component.ts
@@ -1,29 +1,29 @@
-import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core';
-
 import {
-  Label,
-  MySprite, tweenChange,
-
-} from './Unit';
-import {res, resAudio} from './resources';
-
-import {Subject} from 'rxjs';
-import {debounceTime} from 'rxjs/operators';
-
-import TWEEN from '@tweenjs/tween.js';
+  Component,
+  ElementRef,
+  ViewChild,
+  OnInit,
+  Input,
+  OnDestroy,
+  HostListener,
+} from "@angular/core";
 
+import { Label, MySprite, tweenChange } from "./Unit";
+import { res, resAudio } from "./resources";
 
+import { Subject } from "rxjs";
+import { debounceTime } from "rxjs/operators";
 
+import TWEEN from "@tweenjs/tween.js";
 
 @Component({
-  selector: 'app-play',
-  templateUrl: './play.component.html',
-  styleUrls: ['./play.component.css']
+  selector: "app-play",
+  templateUrl: "./play.component.html",
+  styleUrls: ["./play.component.css"],
 })
 export class PlayComponent implements OnInit, OnDestroy {
-
-  @ViewChild('canvas', {static: true }) canvas: ElementRef;
-  @ViewChild('wrap', {static: true }) wrap: ElementRef;
+  @ViewChild("canvas", { static: true }) canvas: ElementRef;
+  @ViewChild("wrap", { static: true }) wrap: ElementRef;
 
   // 数据
   data;
@@ -34,12 +34,11 @@ export class PlayComponent implements OnInit, OnDestroy {
   canvasHeight = 720; // canvas实际高度
 
   canvasBaseW = 1280; // canvas 资源预设宽度
-  canvasBaseH = 720;  // canvas 资源预设高度
+  canvasBaseH = 720; // canvas 资源预设高度
 
   mx; // 点击x坐标
   my; // 点击y坐标
 
-
   // 资源
   rawImages = new Map(res);
   rawAudios = new Map(resAudio);
@@ -57,8 +56,7 @@ export class PlayComponent implements OnInit, OnDestroy {
   canvasLeft;
   canvasTop;
 
-  saveKey = 'test_0011';
-
+  saveKey = "test_001";
 
   btnLeft;
   btnRight;
@@ -69,27 +67,25 @@ export class PlayComponent implements OnInit, OnDestroy {
 
   curPic;
 
-  @HostListener('window:resize', ['$event'])
+  @HostListener("window:resize", ["$event"])
   onResize(event) {
     this.winResizeEventStream.next();
   }
 
-
   ngOnInit() {
-
     this.data = {};
 
     // 获取数据
-    const getData = (<any> window).courseware.getData;
+    const getData = (<any>window).courseware.getData;
     getData((data) => {
-
-      if (data && typeof data == 'object') {
+      console.log("data:", data);
+      if (data && typeof data == "object") {
         this.data = data;
       }
-      // console.log('data:' , data);
+      console.log("data:", data);
 
       // 初始化 各事件监听
-      this.initListener();
+      // this.initListener();
 
       // 若无数据 则为预览模式 需要填充一些默认数据用来显示
       this.initDefaultData();
@@ -100,19 +96,15 @@ export class PlayComponent implements OnInit, OnDestroy {
       this.initImg();
       // 开始预加载资源
       this.load();
-
     }, this.saveKey);
-
   }
 
   ngOnDestroy() {
-    window['curCtx'] = null;
+    window["curCtx"] = null;
     window.cancelAnimationFrame(this.animationId);
   }
 
-
   load() {
-
     // 预加载资源
     this.loadResources().then(() => {
       window["air"].hideAirClassLoading(this.saveKey, this.data);
@@ -121,9 +113,7 @@ export class PlayComponent implements OnInit, OnDestroy {
     });
   }
 
-
   init() {
-
     this.initCtx();
     this.initData();
     this.initView();
@@ -135,19 +125,13 @@ export class PlayComponent implements OnInit, OnDestroy {
     this.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth;
     this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight;
 
-
-    this.ctx = this.canvas.nativeElement.getContext('2d');
+    this.ctx = this.canvas.nativeElement.getContext("2d");
     this.canvas.nativeElement.width = this.canvasWidth;
     this.canvas.nativeElement.height = this.canvasHeight;
 
-    window['curCtx'] = this.ctx;
+    window["curCtx"] = this.ctx;
   }
 
-
-
-
-
-
   updateItem(item) {
     if (item) {
       item.update();
@@ -163,115 +147,7 @@ export class PlayComponent implements OnInit, OnDestroy {
     }
   }
 
-
-
-
-
-
-
-  initListener() {
-
-    this.winResizeEventStream
-      .pipe(debounceTime(500))
-      .subscribe(data => {
-        this.renderAfterResize();
-      });
-
-
-    // ---------------------------------------------
-    const setParentOffset = () => {
-      const rect = this.canvas.nativeElement.getBoundingClientRect();
-      this.canvasLeft = rect.left;
-      this.canvasTop = rect.top;
-    };
-    const setMxMyByTouch = (event) => {
-      if (event.touches.length <= 0) {
-        return;
-      }
-      if (this.canvasLeft == null) {
-        setParentOffset();
-      }
-      this.mx = event.touches[0].pageX - this.canvasLeft;
-      this.my = event.touches[0].pageY - this.canvasTop;
-    };
-
-    const setMxMyByMouse = (event) => {
-      this.mx = event.offsetX;
-      this.my = event.offsetY;
-    };
-    // ---------------------------------------------
-
-
-    let firstTouch = true;
-
-    const touchDownFunc = (e) => {
-      if (firstTouch) {
-        firstTouch = false;
-        removeMouseListener();
-      }
-      setMxMyByTouch(e);
-      this.mapDown(e);
-    };
-    const touchMoveFunc = (e) => {
-      setMxMyByTouch(e);
-      this.mapMove(e);
-    };
-    const touchUpFunc = (e) => {
-      setMxMyByTouch(e);
-      this.mapUp(e);
-    };
-
-    const mouseDownFunc = (e) => {
-      if (firstTouch) {
-        firstTouch = false;
-        removeTouchListener();
-      }
-      setMxMyByMouse(e);
-      this.mapDown(e);
-    };
-    const mouseMoveFunc = (e) => {
-      setMxMyByMouse(e);
-      this.mapMove(e);
-    };
-    const mouseUpFunc = (e) => {
-      setMxMyByMouse(e);
-      this.mapUp(e);
-    };
-
-
-    const element = this.canvas.nativeElement;
-
-    const addTouchListener = () => {
-      element.addEventListener('touchstart', touchDownFunc);
-      element.addEventListener('touchmove', touchMoveFunc);
-      element.addEventListener('touchend', touchUpFunc);
-      element.addEventListener('touchcancel', touchUpFunc);
-    };
-    const removeTouchListener = () => {
-      element.removeEventListener('touchstart', touchDownFunc);
-      element.removeEventListener('touchmove', touchMoveFunc);
-      element.removeEventListener('touchend', touchUpFunc);
-      element.removeEventListener('touchcancel', touchUpFunc);
-    };
-
-    const addMouseListener = () => {
-      element.addEventListener('mousedown', mouseDownFunc);
-      element.addEventListener('mousemove', mouseMoveFunc);
-      element.addEventListener('mouseup', mouseUpFunc);
-    };
-    const removeMouseListener = () => {
-      element.removeEventListener('mousedown', mouseDownFunc);
-      element.removeEventListener('mousemove', mouseMoveFunc);
-      element.removeEventListener('mouseup', mouseUpFunc);
-    };
-
-    addMouseListener();
-    addTouchListener();
-  }
-
-
   playAudio(key, now = false, callback = null) {
-
     const audio = this.audioObj[key];
     if (audio) {
       if (now) {
@@ -288,28 +164,28 @@ export class PlayComponent implements OnInit, OnDestroy {
     }
   }
 
-
-
   loadResources() {
     const pr = [];
-    this.rawImages.forEach((value, key) => {// 预加载图片
+    this.rawImages.forEach((value, key) => {
+      // 预加载图片
 
       const p = this.preload(value)
-        .then(img => {
+        .then((img) => {
           this.images.set(key, img);
         })
-        .catch(err => console.log(err));
+        .catch((err) => console.log(err));
 
       pr.push(p);
     });
 
-    this.rawAudios.forEach((value, key) => {// 预加载音频
+    this.rawAudios.forEach((value, key) => {
+      // 预加载音频
 
       const a = this.preloadAudio(value)
         .then(() => {
           // this.images.set(key, img);
         })
-        .catch(err => console.log(err));
+        .catch((err) => console.log(err));
 
       pr.push(a);
     });
@@ -340,19 +216,13 @@ export class PlayComponent implements OnInit, OnDestroy {
     });
   }
 
-
   renderAfterResize() {
     this.canvasWidth = this.wrap.nativeElement.clientWidth;
     this.canvasHeight = this.wrap.nativeElement.clientHeight;
     this.init();
   }
 
-
-
-
-
   checkClickTarget(target) {
-
     const rect = target.getBoundingBox();
 
     if (this.checkPointInRect(this.mx, this.my, rect)) {
@@ -362,11 +232,9 @@ export class PlayComponent implements OnInit, OnDestroy {
   }
 
   getWorlRect(target) {
-
     let rect = target.getBoundingBox();
 
     if (target.parent) {
-
       const pRect = this.getWorlRect(target.parent);
       rect.x += pRect.x;
       rect.y += pRect.y;
@@ -383,12 +251,7 @@ export class PlayComponent implements OnInit, OnDestroy {
     return false;
   }
 
-
-
-
-
   addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) {
-
     const audioObj = this.audioObj;
 
     if (url == null) {
@@ -416,60 +279,42 @@ export class PlayComponent implements OnInit, OnDestroy {
     this.rawImages.set(url, url);
   }
 
-
-
-
-
-
   // ======================================================编写区域==========================================================================
 
-
-
-
-
   /**
    * 添加默认数据 便于无数据时的展示
    */
   initDefaultData() {
-
     if (!this.data.pic_url) {
-      this.data.pic_url = 'assets/play/default/pic.jpg';
-      this.data.pic_url_2 = 'assets/play/default/pic.jpg';
+      this.data.pic_url = "assets/play/default/pic.jpg";
+      this.data.pic_url_2 = "assets/play/default/pic.jpg";
     }
   }
 
-
   /**
    * 添加预加载图片
    */
   initImg() {
-
     this.addUrlToImages(this.data.pic_url);
     this.addUrlToImages(this.data.pic_url_2);
-
   }
 
   /**
    * 添加预加载音频
    */
   initAudio() {
-
     // 音频资源
     this.addUrlToAudioObj(this.data.audio_url);
     this.addUrlToAudioObj(this.data.audio_url_2);
 
     // 音效
-    this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
-
+    this.addUrlToAudioObj("click", this.rawAudios.get("click"), 0.3);
   }
 
-
-
   /**
    * 初始化数据
    */
   initData() {
-
     const sx = this.canvasWidth / this.canvasBaseW;
     const sy = this.canvasHeight / this.canvasBaseH;
     const s = Math.min(sx, sy);
@@ -478,31 +323,21 @@ export class PlayComponent implements OnInit, OnDestroy {
     // this.mapScale = sx;
     // this.mapScale = sy;
 
-
     this.renderArr = [];
-
-
-
   }
 
-
-
   /**
    * 初始化试图
    */
   initView() {
-
-
-    this.initPic();
+    // this.initPic();
 
     this.initBottomPart();
-
   }
 
   initBottomPart() {
-
     const btnLeft = new MySprite();
-    btnLeft.init(this.images.get('btn_left'));
+    btnLeft.init(this.images.get("btn_left"));
     btnLeft.x = this.canvasWidth - 150 * this.mapScale;
     btnLeft.y = this.canvasHeight - 100 * this.mapScale;
 
@@ -512,10 +347,8 @@ export class PlayComponent implements OnInit, OnDestroy {
 
     this.btnLeft = btnLeft;
 
-
-
     const btnRight = new MySprite();
-    btnRight.init(this.images.get('btn_right'));
+    btnRight.init(this.images.get("btn_right"));
     btnRight.x = this.canvasWidth - 50 * this.mapScale;
     btnRight.y = this.canvasHeight - 100 * this.mapScale;
     btnRight.setScaleXY(this.mapScale);
@@ -523,142 +356,60 @@ export class PlayComponent implements OnInit, OnDestroy {
     this.renderArr.push(btnRight);
 
     this.btnRight = btnRight;
-  }
-
-  initPic() {
-
-    const maxW = this.canvasWidth * 0.7;
-
-    const pic1 = new MySprite();
-    pic1.init(this.images.get(this.data.pic_url));
-    pic1.x = this.canvasWidth / 2;
-    pic1.y = this.canvasHeight / 2;
-    pic1.setScaleXY(maxW / pic1.width);
-
-    this.renderArr.push(pic1);
-    this.pic1 = pic1;
-
 
     const label1 = new Label();
     label1.text = this.data.text;
-    label1.textAlign = 'center';
+    label1.textAlign = "center";
     label1.fontSize = 50;
-    label1.fontName = 'BRLNSDB';
-    label1.fontColor = '#ffffff';
-
-    pic1.addChild(label1);
-
-
-
-
-
-    const pic2 = new MySprite();
-    pic2.init(this.images.get(this.data.pic_url_2));
-    pic2.x = this.canvasWidth / 2 + this.canvasWidth;
-    pic2.y = this.canvasHeight / 2;
-    pic2.setScaleXY(maxW / pic2.width);
-
-    this.renderArr.push(pic2);
-    this.pic2 = pic2;
-
-    this.curPic = pic1;
-  }
-
-
-  btnLeftClicked() {
-
-    this.lastPage();
-  }
-
-  btnRightClicked() {
-
-    this.nextPage();
-  }
-
-  lastPage() {
-
-    if (this.curPic == this.pic1) {
-      return;
-    }
-
-    this.canTouch = false;
-
-    const moveLen = this.canvasWidth;
-    tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1);
-    tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => {
-      this.canTouch = true;
-      this.curPic = this.pic1;
-    });
-  }
-
-  nextPage() {
-
-    if (this.curPic == this.pic2) {
-      return;
-    }
-
-    this.canTouch = false;
-
-    const moveLen = this.canvasWidth;
-    tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1);
-    tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => {
-      this.canTouch = true;
-      this.curPic = this.pic2;
-    });
-  }
-
-  pic1Clicked() {
-    this.playAudio(this.data.audio_url);
-  }
-
-  pic2Clicked() {
-    this.playAudio(this.data.audio_url_2);
+    label1.fontName = "BRLNSDB";
+    label1.fontColor = "#000000";
+    label1.x = this.canvasWidth * 0.5 - 150 * this.mapScale;
+    label1.y = this.canvasHeight * 0.5 - 100 * this.mapScale;
+    this.renderArr.push(label1);
   }
 
+  initPic() {
+    const maxW = this.canvasWidth * 0.7;
 
+    // const pic1 = new MySprite();
+    // pic1.init(this.images.get(this.data.pic_url));
+    // pic1.x = this.canvasWidth / 2;
+    // pic1.y = this.canvasHeight / 2;
+    // pic1.setScaleXY(maxW / pic1.width);
 
+    // this.renderArr.push(pic1);
+    // this.pic1 = pic1;
 
+    // const label1 = new Label();
+    // label1.text = this.data.text;
+    // label1.textAlign = 'center';
+    // label1.fontSize = 50;
+    // label1.fontName = 'BRLNSDB';
+    // label1.fontColor = '#ffffff';
 
-  mapDown(event) {
-
-    if (!this.canTouch) {
-      return;
-    }
-
-    if ( this.checkClickTarget(this.btnLeft) ) {
-      this.btnLeftClicked();
-      return;
-    }
-
-    if ( this.checkClickTarget(this.btnRight) ) {
-      this.btnRightClicked();
-      return;
-    }
-
-    if ( this.checkClickTarget(this.pic1) ) {
-      this.pic1Clicked();
-      return;
-    }
-
-    if ( this.checkClickTarget(this.pic2) ) {
-      this.pic2Clicked();
-      return;
-    }
-
-  }
+    // pic1.addChild(label1);
 
-  mapMove(event) {
+    // const pic2 = new MySprite();
+    // pic2.init(this.images.get(this.data.pic_url_2));
+    // pic2.x = this.canvasWidth / 2 + this.canvasWidth;
+    // pic2.y = this.canvasHeight / 2;
+    // pic2.setScaleXY(maxW / pic2.width);
 
-  }
+    // this.renderArr.push(pic2);
+    // this.pic2 = pic2;
 
-  mapUp(event) {
+    // this.curPic = pic1;
 
+    // const label1 = new Label();
+    // label1.text = this.data.text;
+    // label1.textAlign = "center";
+    // label1.fontSize = 50;
+    // label1.fontName = "BRLNSDB";
+    // label1.fontColor = "#ff0000";
+    // this.renderArr.push(label1);
   }
 
-
-
   update() {
-
     // ----------------------------------------------------------
     this.animationId = window.requestAnimationFrame(this.update.bind(this));
     // 清除画布内容
@@ -667,13 +418,6 @@ export class PlayComponent implements OnInit, OnDestroy {
     TWEEN.update();
     // ----------------------------------------------------------
 
-
-
     this.updateArr(this.renderArr);
-
-
   }
-
-
-
 }
diff --git a/package.json b/package.json
index 3ea4ce5..abc727b 100644
--- a/package.json
+++ b/package.json
@@ -1,16 +1,17 @@
 {
-  "name": "publish",
-  "version": "1.0.0",
-  "description": "",
-  "main": "build.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "sh ./publish/build.sh",
-    "win": "cd publish && build.cmd"
-  },
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "compressing": "^1.5.0"
-  }
+	"name": "publish",
+	"version": "1.0.0",
+	"description": "",
+	"main": "build.js",
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1",
+		"build": "sh ./publish/build.sh",
+		"win": "cd publish && build.cmd"
+	},
+	"author": "",
+	"license": "ISC",
+	"dependencies": {
+		"compressing": "^1.5.0",
+		"node-sass": "^4.0.0"
+	}
 }
-- 
2.21.0