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