From 3f6c57257839d760b62e2796ff5575b8088987c9 Mon Sep 17 00:00:00 2001
From: fanxuehan <fanxuehan@qq.com>
Date: Wed, 24 Feb 2021 09:20:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A8=E5=8D=95=E9=A1=B5=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E9=BE=99=E9=AA=A8=E4=B8=8A=E4=BC=A0=E7=94=A8=E7=9A=84?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 form/src/app/app.module.ts                    |   3 +-
 .../upload-dragon-bone.component.html         |  50 +++++
 .../upload-dragon-bone.component.scss         | 110 +++++++++++
 .../upload-dragon-bone.component.ts           | 181 ++++++++++++++++++
 4 files changed, 343 insertions(+), 1 deletion(-)
 create mode 100644 form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.html
 create mode 100644 form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.scss
 create mode 100644 form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.ts

diff --git a/form/src/app/app.module.ts b/form/src/app/app.module.ts
index a0995a7..fe6ed4a 100644
--- a/form/src/app/app.module.ts
+++ b/form/src/app/app.module.ts
@@ -24,6 +24,7 @@ import {AudioRecorderComponent} from './common/audio-recorder/audio-recorder.com
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';
+import { UploadDragonBoneComponent } from './common/upload-dragon-bone/upload-dragon-bone.component';
 
 registerLocaleData(zh);
 
@@ -40,7 +41,7 @@ registerLocaleData(zh);
     TimePipe,
     UploadVideoComponent,
     CustomHotZoneComponent,
-
+    UploadDragonBoneComponent,
     PlayerContentWrapperComponent
 
   ],
diff --git a/form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.html b/form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.html
new file mode 100644
index 0000000..9354797
--- /dev/null
+++ b/form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.html
@@ -0,0 +1,50 @@
+<div class="position-relative">
+
+
+  <button nz-button (click)="setAnimaBtnClick()" style=" border-radius: 0.5rem; border: 1px solid #ddd;">
+    <i nz-icon nzType="tool" nzTheme="outline"></i>
+    {{btnName}}
+  </button>
+
+
+  <!--配置龙骨面板-->
+  <nz-modal [(nzVisible)]="animaPanelVisible" (nzAfterClose)="closePanel()" nzTitle="配置资源文件"
+    (nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">
+
+    <div class="anima-upload-btn">
+      <span style="margin-right: 10px">上传 ske_json 文件: </span>
+      <nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData"
+        (nzChange)="skeJsonHandleChange($event)">
+        <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
+      </nz-upload>
+      <i *ngIf="isSkeJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
+      <span *ngIf="skeJsonData && skeJsonData['name']" style="margin-left: 10px"><u> {{skeJsonData['name']}} </u></span>
+    </div>
+
+    <div class="anima-upload-btn">
+      <span style="margin-right: 10px">上传 tex_json 文件: </span>
+      <nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData"
+        (nzChange)="texJsonHandleChange($event)">
+        <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
+      </nz-upload>
+      <i *ngIf="isTexJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
+      <span *ngIf="texJsonData && texJsonData['name']" style="margin-left: 10px"><u> {{texJsonData['name']}} </u></span>
+    </div>
+
+    <div class="anima-upload-btn">
+      <span style="margin-right: 10px">上传 tex_png 文件: </span>
+      <nz-upload [nzShowUploadList]="false" nzAccept="image/*" [nzAction]="uploadUrl" [nzData]="uploadData"
+        (nzChange)="texPngHandleChange($event)">
+        <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
+      </nz-upload>
+      <i *ngIf="isTexPngLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
+      <span *ngIf="texPngData && texPngData['name']" style="margin-left: 10px"><u> {{texPngData['name']}} </u></span>
+    </div>
+
+    <div class="anima-upload-btn" *ngIf="animaNames && animaNames.length > 0">
+      提示:需包含动画: {{animaNames.toString()}}.
+    </div>
+
+  </nz-modal>
+
+</div>
\ No newline at end of file
diff --git a/form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.scss b/form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.scss
new file mode 100644
index 0000000..e9c56bf
--- /dev/null
+++ b/form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.scss
@@ -0,0 +1,110 @@
+@import '../../style/common_mixin.css';
+
+.p-image-uploader {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 0;
+  padding-bottom: 56.25%;
+  .p-box {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    border: 2px dashed #ddd;
+    border-radius: 0.5rem;
+    background-color: #fafafa;
+    text-align: center;
+    color: #aaa;
+    .p-upload-icon {
+      text-align: center;
+      margin: auto;
+      .anticon-upload {
+        color: #888;
+        font-size: 5rem;
+      }
+      .p-progress-bar {
+        position: relative;
+        width: 20rem;
+        height: 1.5rem;
+        border: 1px solid #ccc;
+        border-radius: 1rem;
+        .p-progress-bg {
+          background-color: #1890ff;
+          border-radius: 1rem;
+          height: 100%;
+        }
+        .p-progress-value {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          text-shadow: 0 0 4px #000;
+          color: white;
+          text-align: center;
+          font-size: 0.9rem;
+          line-height: 1.5rem;
+        }
+      }
+    }
+    .p-preview {
+      width: 100%;
+      height: 100%;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      //background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
+    }
+  }
+  .d-flex{
+    display: flex;
+  }
+}
+
+.p-btn-delete {
+  position: absolute;
+  right: -0.5rem;
+  top: -0.5rem;
+  width: 2rem;
+  height: 2rem;
+  border: 0.2rem solid white;
+  border-radius: 50%;
+  font-size: 1.2rem;
+  background-color: #fb781a;
+  color: white;
+  text-align: center;
+}
+
+.p-upload-progress-bg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  & .i-text {
+    position: absolute;
+    text-align: center;
+    color: white;
+    text-shadow: 0 0 2px rgba(0, 0, 0, .85);
+  }
+  & .i-bg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background-color: #27b43f;
+    border-radius: 0.5rem;
+  }
+}
+
+.anima-upload-btn {
+  padding: 10px;
+}
+
+
+:host ::ng-deep .ant-upload {
+  display: block;
+}
diff --git a/form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.ts b/form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.ts
new file mode 100644
index 0000000..a99c3e4
--- /dev/null
+++ b/form/src/app/common/upload-dragon-bone/upload-dragon-bone.component.ts
@@ -0,0 +1,181 @@
+import {ApplicationRef, Component, EventEmitter, Input, OnChanges, OnDestroy, Output} from '@angular/core';
+import { NzMessageService, UploadXHRArgs, UploadFile } from 'ng-zorro-antd';
+
+
+@Component({
+  selector: 'app-upload-dragon-bone',
+  templateUrl: './upload-dragon-bone.component.html',
+  styleUrls: ['./upload-dragon-bone.component.scss']
+})
+export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
+  uploading = false;
+  progress = 0;
+  @Input()
+  btnName = '配置龙骨动画';
+  @Input()
+  animaNames = [];
+
+  @Input()
+  skeJsonData = {};
+  @Input()
+  texJsonData = {};
+  @Input()
+  texPngData = {};
+  
+  @Output()
+  save = new EventEmitter();
+
+  @Output()
+  refreshEmitter = new EventEmitter();
+
+  // @Input()
+  // picUrl;
+  // @Input()
+  // canDelete = false;
+  // @Output()
+  // imageUploaded = new EventEmitter();
+  // @Output()
+  // imageUploadFailure = new EventEmitter();
+  // @Output()
+  // delete = new EventEmitter();
+  // @Input()
+  // picItem = null;
+  // @Input()
+  // iconSize = 2;
+  // @Input()
+  // TIP = 'Click here to upload image';
+  // @Input()
+  // disableUpload = false;
+
+
+  uploadUrl;
+  uploadData;
+
+  animaPanelVisible = false;
+
+  isSkeJsonLoading = false;
+  isTexJsonLoading = false;
+  isTexPngLoading = false;
+
+  constructor(private appRef: ApplicationRef, private nzMessageService: NzMessageService) {
+
+    this.uploadUrl = (<any> window).courseware.uploadUrl();
+    this.uploadData = (<any> window).courseware.uploadData();
+
+    window['air'].getUploadCallback = (url, data) => {
+      this.uploadUrl = url;
+      this.uploadData = data;
+    };
+
+  }
+  ngOnChanges() {
+ 
+  }
+
+  setAnimaBtnClick() {
+    this.animaPanelVisible = true;
+    this.refresh();
+  }
+
+  animaPanelCancel() {
+    this.animaPanelVisible = false;
+    this.refresh();
+  }
+
+  animaPanelOk() {
+    this.sendItemDragonBoneData();
+    this.animaPanelVisible = false;
+    this.refresh();
+  }
+
+  sendItemDragonBoneData() {
+    const data = {};
+    data['skeJsonData'] = this.skeJsonData;
+    data['texJsonData'] = this.texJsonData;
+    data['texPngData'] = this.texPngData;
+    this.save.emit(data);
+  }
+
+
+  skeJsonHandleChange(e) {
+    console.log('e: ', e);
+    switch (e.type) {
+      case 'start':
+        this.isSkeJsonLoading = true;
+        break;
+
+      case 'success':
+        this.skeJsonData['url'] = e.file.response.url;
+        this.skeJsonData['name'] = e.file.name;
+        this.nzMessageService.success('上传成功');
+        this.isSkeJsonLoading = false;
+        break;
+
+      case 'progress':
+        break;
+    }
+  }
+
+  texJsonHandleChange(e) {
+    console.log('e: ', e);
+    switch (e.type) {
+      case 'start':
+        this.isTexJsonLoading = true;
+        break;
+
+      case 'success':
+        this.texJsonData['url'] = e.file.response.url;
+        this.texJsonData['name'] = e.file.name;
+        this.nzMessageService.success('上传成功');
+        this.isTexJsonLoading = false;
+        break;
+
+      case 'progress':
+        break;
+    }
+  }
+
+  texPngHandleChange(e) {
+    console.log('e: ', e);
+    switch (e.type) {
+      case 'start':
+        this.isTexPngLoading = true;
+        break;
+
+      case 'success':
+        this.texPngData['url'] = e.file.response.url;
+        this.texPngData['name'] = e.file.name;
+        this.nzMessageService.success('上传成功');
+        this.isTexPngLoading = false; 
+        break;
+
+      case 'progress':
+        break;
+    }
+  }
+
+
+
+  /**
+   * 刷新 渲染页面
+   */
+  refresh() {
+
+    // this.refreshEmitter.emit();
+    setTimeout(() => {
+      this.appRef.tick();
+    }, 1);
+  }
+
+
+  closePanel() {
+    console.log(' in closePanel ');
+    this.refresh();
+  }
+
+
+
+  ngOnDestroy() {
+  }
+
+}
-- 
2.21.0