!188 保存造型配置

Merge pull request !188 from ZoeLeeFZ/modeConfig_pr

src/UI/Components/Board/UserConfig.tsx

@@ -1,17 +1,17 @@
-import { Button, InputGroup, Menu, MenuItem, Popover } from '@blueprintjs/core';
+import { Button, InputGroup, Intent, Menu, MenuItem, Popover, Position } from '@blueprintjs/core';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { arrayLast } from '../../../Common/ArrayExt';
 import { IndexedDbStore, StoreName } from '../../../IndexedDb/IndexedDbStore';
-import { BoardOption, BoardProcessOption, LayerNailOption, TBBoardOption } from '../../Store/BoardInterface';
+import { BoardProcessOption, LayerNailOption, TBBoardOption } from '../../Store/BoardInterface';
 import { AppToaster } from '../Toaster';
-import { BoardModalProps } from './BoardModal';
+import { BoardModalProps, BoardModalType } from './BoardModal';
 import { DrillingOption } from './drillInterface';
 
 //保存的配置
 export interface IConfigOption
 {
-    boardData?: BoardOption;
+    option?: Object;
     nailData?: LayerNailOption;
     topBoardData?: TBBoardOption;
     bottomBoardData?: TBBoardOption;
@@ -25,6 +25,12 @@ interface UserConfigState
     configs: Map<string, IConfigOption>,
 }
 
+interface IConfigPRops
+{
+    type: BoardModalType;
+    store: { SaveConfig: Function, UpdateOption: Function }
+}
+
 /**
  *用户配置
  *
@@ -33,7 +39,7 @@ interface UserConfigState
  * @extends {React.Component<BoardModalProps, UserConfigState>}
  */
 @observer
-export class UserConfig extends React.Component<BoardModalProps, UserConfigState>{
+export class UserConfig extends React.Component<IConfigPRops, UserConfigState>{
 
     constructor(props)
     {
@@ -144,7 +150,7 @@ export class UserConfig extends React.Component<BoardModalProps, UserConfigState
     render()
     {
         return (
-            <label className="bp3-label pt-inline .modifier">
+            <label className="bp3-label bp3-inline .modifier">
                 <div className="cf-select">
                     <label>选择配置</label>
                     <InputGroup
@@ -160,6 +166,7 @@ export class UserConfig extends React.Component<BoardModalProps, UserConfigState
                                 autoFocus={true}
                                 enforceFocus={false}
                                 usePortal={false}
+                                position={Position.TOP}
                                 modifiers={{
                                     arrow: { enabled: false },
                                     flip: { enabled: true },
@@ -184,23 +191,23 @@ export class UserConfig extends React.Component<BoardModalProps, UserConfigState
                                     ></Button>} />
                         }
                     />
+                    <Button
+                        text="保存"
+                        intent={Intent.SUCCESS}
+                        onClick={async () =>
+                        {
+                            await this.handleSaveConfig();
+                        }}
+                    />
+                    <Button
+                        text="删除"
+                        intent={Intent.DANGER}
+                        onClick={async () =>
+                        {
+                            await this.handleDeleteConfig();
+                        }}
+                    />
                 </div>
-                <button
-                    type="button"
-                    className="bp3-button bp3-intent-success"
-                    onClick={async () =>
-                    {
-                        await this.handleSaveConfig();
-                    }}
-                >保存</button>
-                <button
-                    type="button"
-                    className="bp3-button bp3-intent-danger"
-                    onClick={async () =>
-                    {
-                        await this.handleDeleteConfig();
-                    }}
-                >删除</button>
             </label>
         )
     }

src/UI/Components/Modal/ModalStyle/Modal.less

@@ -119,6 +119,10 @@
     top:1px;
 }
 
+.input-select{
+    width: 40%;
+}
+
 @import (less) "LightModal.less";
 @import (less) "BoardModal.less";
 @import (less) "ArrayModal.less";

src/UI/Components/RightPanel/Modeling.less

@@ -7,6 +7,7 @@
     height: 100%;
 }
 .modeling{
+    margin-bottom: 2rem;
     width: 100%;
     &>li:first-child>label{
         text-align: center;

src/UI/Components/RightPanel/ModelingComponent.tsx

@@ -4,6 +4,8 @@ import * as React from 'react';
 import { ColorMaterial } from '../../../Common/ColorPalette';
 import { PXLFaceType } from '../../Store/BoardInterface';
 import { RightPanelStore } from '../../Store/RightPanelStore';
+import { UserConfig } from '../Board/UserConfig';
+import { BoardModalType } from '../Board/BoardModal';
 
 export interface IModelingItem
 {
@@ -101,6 +103,7 @@ export class ModelingComponent extends React.Component<{ store?: RightPanelStore
                         })
                     }
                 </ul>
+                <UserConfig type={BoardModalType.Zx} store={this.props.store} />
             </>
         )
     }

src/UI/Store/BoardStore.ts

@@ -75,15 +75,15 @@ export class BoardStore
     {
         //新的配置
         let newConfig: IConfigOption = {};
-        newConfig.boardData = toJS(this.m_Option);
+        newConfig.option = toJS(this.m_Option);
         newConfig.processData = toJS(this.m_BoardProcessOption);
         return newConfig;
     }
     UpdateOption(cof: IConfigOption)
     {
-        Object.assign(this.m_Option, cof.boardData);
+        Object.assign(this.m_Option, cof.option);
         if (this.m_UiOption)
-            Object.assign(this.m_UiOption, DataAdapter.ConvertUIData(cof.boardData));
+            Object.assign(this.m_UiOption, DataAdapter.ConvertUIData(cof.option));
         Object.assign(this.m_BoardProcessOption, cof.processData);
     }
     HasInvailValue()

src/UI/Store/RightPanelStore.ts

@@ -1,7 +1,8 @@
-import { observable, computed } from "mobx";
+import { observable, computed, toJS } from "mobx";
 import { IModelingItem } from "../Components/RightPanel/ModelingComponent";
 import { PXLFaceType } from "./BoardInterface";
 import { IModeling } from "../../DatabaseServices/Board";
+import { IConfigOption } from "../Components/Board/UserConfig";
 
 export class RightPanelStore 
 {
@@ -41,4 +42,21 @@ export class RightPanelStore
         this.modelingItems[index].dir = data.dir;
         this.UIModelingItems[index]["dir"] = data.dir;
     }
+    SaveConfig()
+    {
+        //新的配置
+        let newConfig: IConfigOption = {};
+        newConfig.option = toJS(this.modelingItems);
+        return newConfig;
+    }
+    UpdateOption(cof: IConfigOption)
+    {
+        observable(this.modelingItems).replace(cof.option as IModelingItem[]);
+        for (let i = 0; i < this.modelingItems.length; i++)
+        {
+            this.UIModelingItems[i].height = this.modelingItems[i].height.toString();
+            this.UIModelingItems[i].rad = this.modelingItems[i].rad.toString();
+            this.UIModelingItems[i].length = this.modelingItems[i].length.toString();
+        }
+    }
 }