!26 实现文件保存和读取功能界面

Merge pull request !26 from ZoeLeeFZ/io_pr2

src/Add-on/Save.ts

@@ -1,6 +1,8 @@
-import { Command } from "../Editor/CommandMachine";
-import { app } from "../ApplicationServices/Application";
-import { IndexedDbStore, StoreName } from "../IndexedDb/IndexedDbStore";
+import { app } from '../ApplicationServices/Application';
+import { formateDate } from '../Common/Utils';
+import { Command } from '../Editor/CommandMachine';
+import { IndexedDbStore, StoreName } from '../IndexedDb/IndexedDbStore';
+import { FileInfo } from '../UI/Components/SourceManage/FilePanel';
 
 export class Save implements Command
 {
@@ -9,7 +11,28 @@ export class Save implements Command
         let cadFile = app.m_Database.FileWrite();
 
         let store = await IndexedDbStore.CADStore();
+        let fileId = store.m_CurrentFileId;
+
+        let fileInfo: FileInfo;
+        if (!fileId)
+        {
+            let count = await store.Get(StoreName.FileId, "fileCount") as number || 0;
+            fileId = "f" + count;
+            store.Put(StoreName.FileId, "fileCount", ++count);
+            fileInfo = {
+                fileId,
+                title: "新文件",
+                modifyTime: "",
+                isNew: false
+            }
+        }
+        else
+            fileInfo = await store.Get(StoreName.Data, fileId) as FileInfo;
+        //更新最后修改时间
+        fileInfo.modifyTime = formateDate(new Date(), "yyyy-MM-dd hh:mm:ss")
+        //储存文件数据和对应图纸
+        store.Put(StoreName.Data, fileId, fileInfo);
+        store.Put(StoreName.Dwg, fileId, cadFile.Data);
 
-        store.Put(StoreName.Dwg, "1", cadFile.Data);
     }
 }

src/Common/Utils.ts

@@ -44,3 +44,30 @@ export function FixIndex(index: number, arr: Array<any> | number)
     else
         return index
 }
+//格式化日期
+export function formateDate(date: Date, fmt: string)
+{
+    let o = {
+        "M+": date.getMonth() + 1,                 //月份 
+        "d+": date.getDate(),                    //日 
+        "h+": date.getHours(),                   //小时 
+        "m+": date.getMinutes(),                 //分 
+        "s+": date.getSeconds(),                 //秒 
+        "q+": Math.floor((date.getMonth() + 3) / 3), //季度 
+        "S": date.getMilliseconds()             //毫秒 
+    };
+    //如:yyyy
+    if (/(y+)/.test(fmt))
+    {
+        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
+    }
+    //yyyy-MM-dd hh:mm:ss
+    for (var k in o)
+    {
+        if (new RegExp("(" + k + ")").test(fmt))
+        {
+            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+        }
+    }
+    return fmt;
+}

src/DatabaseServices/Database.ts

@@ -41,6 +41,10 @@ export class Database
     Destroy()
     {
         this.idMap.clear();
+        this.ModelSpace.Destroy();
+        this.MaterialDict.Destroy();
+        this.TextureTableCol.Destroy();
+        this.hm.historyRecord.length = 0;
     }
 
     FileWrite(): CADFile

src/IndexedDb/IndexedDbStore.ts

@@ -11,6 +11,8 @@ export enum StoreName
 {
     Texture = "Texture",
     Dwg = "Dwg",
+    Data = "Data",
+    FileId = "fileId"
 }
 
 export class IndexedDbStore
@@ -18,6 +20,7 @@ export class IndexedDbStore
     private dbRequest: IDBOpenDBRequest;
     private isOK: boolean = true;;
     private db: IDBDatabase;
+    m_CurrentFileId: string;
 
     /**
      * Creates an instance of IndexedDbStore.
@@ -26,7 +29,6 @@ export class IndexedDbStore
      */
     private constructor()
     {
-
     }
     private static cadStore: IndexedDbStore = new IndexedDbStore();
     static async CADStore()
@@ -81,6 +83,16 @@ export class IndexedDbStore
             (db: IDBDatabase) =>
             {
                 db.createObjectStore(StoreName.Dwg);
+            },
+            //ver3.
+            (db: IDBDatabase) =>
+            {
+                db.createObjectStore(StoreName.Data);
+            },
+            // ver4.
+            (db: IDBDatabase) =>
+            {
+                db.createObjectStore(StoreName.FileId);
             }
         ];
     }
@@ -106,4 +118,31 @@ export class IndexedDbStore
             }
         })
     }
+    Delete(storeName: StoreName, key: string)
+    {
+        this.db.transaction(storeName, DbMode.ReadWrite)
+            .objectStore(storeName)
+            .delete(key);
+    }
+    GetDataList(storeName: StoreName)
+    {
+        return new Promise((res) =>
+        {
+            let dataList = [];
+            let store = this.db.transaction(storeName, DbMode.ReadWrite).objectStore(storeName);
+            let cursorRequest = store.openCursor();
+            cursorRequest.onsuccess = (e) =>
+            {
+                let cursor = cursorRequest.result;
+                if (cursor)
+                {
+                    dataList.push({
+                        key: cursor.key,
+                        data: cursor.value
+                    })
+                    cursor.continue();
+                } else res(dataList);
+            }
+        })
+    }
 }

src/UI/Components/SourceManage/FileItem.tsx

@@ -1,9 +1,16 @@
 import { Button } from '@blueprintjs/core';
 import * as React from 'react';
 
+import { FileInfo } from './FilePanel';
+
 interface FileItemProps
 {
-    //文件名
+    //文件信息
+    fileInfo: FileInfo,
+    callBack?: Function
+}
+interface FileItemState
+{
     title: string
 }
 /**
@@ -13,13 +20,23 @@ interface FileItemProps
  * @class FileItem
  * @extends {React.Component<FileItemProps, {}>}
  */
-export class FileItem extends React.Component<FileItemProps, {}>{
+export class FileItem extends React.Component<FileItemProps, FileItemState>{
     constructor(props)
     {
         super(props);
+        this.state = {
+            title: this.props.fileInfo.title
+        }
     }
     render()
     {
+        const fileInfo = this.props.fileInfo;
+        const inputStyle: React.CSSProperties = {
+            outline: "none",
+            border: "none",
+            fontSize: "17px",
+            fontWeight: "bold"
+        }
         return (
             <li
                 className="pt-card pt-elevation-0"
@@ -42,27 +59,44 @@ export class FileItem extends React.Component<FileItemProps, {}>{
                     <div style={{
                         padding: 13
                     }}>
-                        <h5>{this.props.title}</h5>
+                        <input
+                            style={inputStyle}
+                            value={this.state.title}
+                            onChange={(e) =>
+                            {
+                                let value = e.target.value
+                                this.setState({ title: value })
+                                e.target.style.width = value.length * 20 + "px";
+                            }}
+                            onKeyDown={e =>
+                            {
+                                e.stopPropagation();
+                            }}
+                        />
                         <ul className="ul-unstyle">
-                            <li>杭州 未知小区</li>
-                            <li>共有0张渲染图</li>
-                            <li>最后修改时间:  2018-01-15 16:25:07</li>
+                            <li>{fileInfo.position}</li>
+                            <li>共有1张图</li>
+                            <li>最后修改时间:  {fileInfo.modifyTime}</li>
                         </ul>
                         <ul className="ul-unstyle">
                             <li>
                                 <Button
                                     text="打开"
                                     className="pt-intent-success"
+                                    onClick={() => this.props.callBack(fileInfo.fileId, this.state.title, "open")}
                                 />
                             </li>
                             <li>
                                 <Button
-                                    text="修改"
+                                    text="下载"
                                 />
                             </li>
                             <li>
                                 <Button
-                                    text="下载"
+                                    text="删除"
+                                    className="pt-intent-danger"
+                                    onClick={() => this.props.callBack(fileInfo.fileId, this.state.title, "delete")
+                                    }
                                 />
                             </li>
                         </ul>

src/UI/Components/SourceManage/FilePanel.tsx

@@ -1,20 +1,116 @@
 import * as React from 'react';
+import { position } from 'tether';
 
+import { app } from '../../../ApplicationServices/Application';
+import { formateDate } from '../../../Common/Utils';
+import { CADFile } from '../../../DatabaseServices/CADFile';
+import { Database } from '../../../DatabaseServices/Database';
+import { IndexedDbStore, StoreName } from '../../../IndexedDb/IndexedDbStore';
 import { FileItem } from './FileItem';
 
 interface FileProps
 {
-    isShow: boolean;
+    isShow: boolean,
+    callback?: Function
+
+}
+export interface FileInfo
+{
+    fileId: string,
+    title: string,
+    position?: string,
+    picCount?: number,
+    modifyTime: string,
+    isNew: boolean
+}
+interface FileData
+{
+    key: string,
+    data: FileInfo
+}
+interface FileState
+{
+    fileList: FileData[]
 }
 /**
  * 我的文件列表
- * //TODO:传入文件数据
  * @export
  * @class FilePanel
  * @extends {React.Component<FileProps, {}>}
  */
-export class FilePanel extends React.Component<FileProps, {}>
+export class FilePanel extends React.Component<FileProps, FileState>
 {
+    constructor(props)
+    {
+        super(props);
+        this.state = {
+            fileList: []
+        }
+    }
+    //添加新文件
+    handleAddNewFile = async () =>
+    {
+        let store = await IndexedDbStore.CADStore();
+        let fId = await store.Get(StoreName.FileId, "fileCount") as number || 0;
+        let newFile: FileInfo = {
+            fileId: "f" + fId,
+            title: "文件名" + fId,
+            modifyTime: formateDate(new Date(), "yyyy-MM-dd hh:mm:ss"),
+            isNew: true
+        }
+
+        store.Put(StoreName.Data, "f" + fId, newFile);
+        store.Put(StoreName.FileId, "fileCount", ++fId);
+        this.handleUpdateList();
+    }
+
+    handleFile = async (fid: string, fname: string, type: string) =>
+    {
+        let store = await IndexedDbStore.CADStore();
+
+        switch (type)
+        {
+            case "delete":
+                store.Delete(StoreName.Data, fid);
+                store.Delete(StoreName.Dwg, fid);
+                this.handleUpdateList();
+                break;
+            case "open":
+                //  修改当前文件名
+                let fileData: FileInfo = await store.Get(StoreName.Data, fid);
+                fileData.title = fname;
+                //切换当前图纸id
+                store.m_CurrentFileId = fid;
+                let file = await store.Get(StoreName.Dwg, fid);
+
+                if (fileData.isNew || !file)
+                {
+                    fileData.isNew = false;
+                    let db = new Database();
+                    app.m_Database.FileRead(db.FileWrite());
+                }
+                else
+                {
+                    let cadF = new CADFile();
+                    cadF.Data = file;
+                    app.m_Database.FileRead(cadF);
+                    app.m_Editor.UpdateScreen();
+                }
+                store.Put(StoreName.Data, fid, fileData);
+                this.props.callback();
+
+        }
+    }
+    handleUpdateList = async () =>
+    {
+        let store = await IndexedDbStore.CADStore();
+        let fileList = await store.GetDataList(StoreName.Data) as FileData[];;
+        this.setState({ fileList });
+    }
+    componentDidMount()
+    {
+        this.handleUpdateList();
+    }
     render()
     {
         return (
@@ -36,6 +132,13 @@ export class FilePanel extends React.Component<FileProps, {}>
                         <button className="pt-button pt-minimal pt-icon-trash ">
                             回收站
                         </button>
+                        <span className="pt-navbar-divider"></span>
+                        <button
+                            className="pt-button pt-intent-success pt-icon-file "
+                            onClick={this.handleAddNewFile}
+                        >
+                            新建
+                        </button>
                     </div>
                     <div className="pt-navbar-group pt-align-right">
                         <input
@@ -44,10 +147,16 @@ export class FilePanel extends React.Component<FileProps, {}>
                     </div>
                 </nav>
                 <ul className="ul-unstyle">
-                    {/* TODO:传入文件数据 */}
-                    <FileItem
-                        title="文件名"
-                    />
+                    {
+                        this.state.fileList.map((file) =>
+                        {
+                            return <FileItem
+                                key={file.key}
+                                fileInfo={file.data}
+                                callBack={this.handleFile}
+                            />
+                        })
+                    }
                 </ul>
             </div>
         )

src/UI/Components/SourceManage/SoucePanel.tsx

@@ -90,7 +90,7 @@ export default class SoucePanel extends React.Component<SoucePanelProps, SoucePa
                         </div>
                     </div>
                     {/* TODO:相应数据传入 */}
-                    <FilePanel isShow={this.state.showIndex === 0} />
+                    <FilePanel isShow={this.state.showIndex === 0} callback={this.props.handleClose} />
                     <MaterialPanel isShow={this.state.showIndex === 1} />
                 </div>
                 <div className="pt-dialog-footer">

src/UI/Components/commandLineInput/InputHint.tsx

@@ -72,18 +72,11 @@ export class InputHint extends React.Component<InputHintProps, InputHitState>
     {
         end(app.m_Editor.m_KeyCtrl, app.m_Editor.m_KeyCtrl.OnKeyDown, (e: KeyboardEvent) =>
         {
-            this.m_InputEl.focus();
             if (document.activeElement !== this.m_InputEl)
             {
-                if (e.keyCode === KeyBoard.Backspace)
-                {
-                    this.m_InputEl.value = this.m_InputEl.value.slice(0, -1);
-                }
-                if (IsChar(e.keyCode) || IsNumble(e.keyCode))
-                {
-                    this.m_InputEl.value += e.key;
-                }
+                this.m_InputEl.focus();
             }
+            this.handleOnChangeIntelliSense(this.m_InputEl.value);
             this.handleKeyboardEvent(e);
 
             if (e.keyCode === KeyBoard.Space)
@@ -132,7 +125,6 @@ export class InputHint extends React.Component<InputHintProps, InputHitState>
                 intelliSenseCmdList.push(cmdName);
             }
         }
-
         intelliSenseCmdList.sort((c1, c2) =>
         {
             let lastIndex = 0;