Angular2 Learning Note (3)：Drag and Drop + Pop up windows + Canvas + File upload

- drop-and-drop:
    https://www.npmjs.com/package/ng2-dnd

有人的demo:
    https://github.com/akserg/ng2-dnd/blob/master/demo/src/app/examples/dnd/simple/simple.component.ts
    http://akserg.github.io/ng2-webpack-demo/#/dnd

我們的：

View:

- pop-up window:
用modal
記錄一下怎麼傳遞參數的
舉例來說：點擊一個stage button的時候會有一個pop-up window，我們想要在這個window裡面讓使用者輸入name和duration，點擊ok的時候回傳到main page
Define一個新的class，view用外部的html

然後再class裡面定義 @Input是從main page要輸入的參數，@Output是要從這個modal輸出到main page的參數

Input的部分相對簡單，注意我們的Output 是一個EventEmitter() ，我們會在main page中 subscribe這個 EventEmitter

這裡我們subscribe了兩個在modal中宣告的EventEmitter，都有各自的用途，一個用來update stage configuration，一個用來刪掉stage

另外注意這些pop up window的class都要在 module.ts裡面加入

- Canvas
在圖片上面用滑鼠拖曳選取範圍：
參考這個
https://stackoverflow.com/questions/47879692/angular2-draw-rectangle-on-canvas-with-mouse?rq=1
html宣告：


Typescript 宣告：

使用(mousedown) (mouseup) (mouvemove) event + drawImage + setLineDash 在canvas上面畫畫

- ng2-file-upload
https://valor-software.com/ng2-file-upload/

https://ciphertrick.com/2016/10/24/file-upload-with-angular2-nodejs/
https://appdividend.com/2018/05/25/angular-6-file-upload-tutorial/
file的屬性：
https://stackoverflow.com/questions/46703218/ng2-file-upload-does-not-save-original-file-name

本來用的好好得，上傳到assets之後angular2沒辦法讀取他
(好像是因為$ng serve的時候，$ng build 會把assets的內容複製到整個專案當成static context，之後assets內的更新不會被看到，直到手動重新$ng build)
如果只是要上傳檔案可以用
    這個 https://appdividend.com/2018/05/25/angular-6-file-upload-tutorial/
    在html中的宣告：
    
    在type script中的宣告：

    要上傳的時候：

     在 server side:

    

        

但是上傳之後要拿url來當作background image source很困難
改用上傳firebase並且擷取url
https://angularfirebase.com/lessons/angular-file-uploads-to-firebase-storage/
https://www.youtube.com/watch?v=4vgrEByJjck
https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md
http://www.ucamc.com/e-learning/computer-skills/294-upload-files-to-firebase-storage-using-javascript.html
收費：
https://firebase.google.com/pricing/

0. 先把firebase中提供的web application embedded code 複製到Ａngular的environment參數

1. 安裝套件並且import module
$npm install angularfire2 firebase --save

2. 在html中使用

在selectedFileOnChanged()中直接把檔案上傳，使用.put() 上傳檔案以及request url
(網路上有一些擷取url的API，這裡我們上傳的時候直接extract:
https://stackoverflow.com/questions/38523515/function-that-returns-download-url-from-firebase-storage
https://stackoverflow.com/questions/43911080/return-the-download-url-of-a-file-uploaded-to-firebase
)

(如果url確定沒錯卻遇到403，去編輯firebase裡面Storage的Rule: 改成all true)