Skip to content
Permalink
Browse files

feat(progress): load wdb, import package add progress

  • Loading branch information...
yyc-git committed May 28, 2019
1 parent 4294e2d commit 36b9f7599d20dec0c968869882bd27c0acd57d63
@@ -3800,7 +3800,7 @@ html, body {
left: 0px;
width: 100%;
height: 100%;
display: flex;
display: none;
align-items: center;
justify-content: center; }
.wonder-progress .progress-content {
@@ -6,7 +6,7 @@
left:0px;
width:100%;
height:100%;
display: flex;
display: none;
align-items: center;
justify-content: center;
.progress-content{
@@ -1,9 +1,5 @@
module Method = {
let hideLoading = [%raw
loadingDomId => {|
document.querySelector("#" + loadingDomId).style.display = "none";
|}
];
let hideLoading = loadingDomId => DomUtils.hideDom(loadingDomId);
};

let component = ReasonReact.statelessComponent("AppShell");
@@ -8,20 +8,44 @@ type action =
| ChangePercent(int);

type state = {
style: ReactDOMRe.Style.t,
percent: int,
style: ReactDOMRe.Style.t,
};

module Method = {
let buildWidthPercentStr = percent => (percent |> string_of_int) ++ "%";

let willUnmount = () =>
ManageEventEngineService.offCustomGlobalEventByEventName(
~eventName=ProgressUtils.getProgressChangePercentCustomGlobalEventName(),
~state=StateEngineService.unsafeGetState(),
)
|> StateEngineService.setState
|> ignore;
let willUnmount = () => {
let engineState =
ManageEventEngineService.offCustomGlobalEventByEventName(
~eventName=
ProgressUtils.getProgressChangePercentCustomGlobalEventName(),
~state=StateEngineService.unsafeGetState(),
);
let engineState =
ManageEventEngineService.offCustomGlobalEventByEventName(
~eventName=ProgressUtils.getProgressShowCustomGlobalEventName(),
~state=engineState,
);
let engineState =
ManageEventEngineService.offCustomGlobalEventByEventName(
~eventName=ProgressUtils.getProgressHideCustomGlobalEventName(),
~state=engineState,
);
let engineState =
ManageEventEngineService.offCustomGlobalEventByEventName(
~eventName=ProgressUtils.getProgressFinishCustomGlobalEventName(),
~state=engineState,
);

engineState |> StateEngineService.setState |> ignore;
};

let showProgress = () => DomUtils.showDomFlex("wonder-progress");

let hideProgress = () => DomUtils.hideDom("wonder-progress");

let finish = () => hideProgress();
};

let component = ReasonReact.reducerComponent("Progress");
@@ -42,7 +66,8 @@ let reducer = (action, state) =>
};

let render = ({state, send}: ReasonReact.self('a, 'b, 'c)) =>
<article className="wonder-progress" key="WonderProgress">
<article
id="wonder-progress" className="wonder-progress" key="WonderProgress">
<div className="progress-content">
<div className="content-percent" style={state.style}>
{DomHelper.textEl(Method.buildWidthPercentStr(state.percent))}
@@ -51,39 +76,79 @@ let render = ({state, send}: ReasonReact.self('a, 'b, 'c)) =>
<div className="progress-bg" />
</article>;

let make = (~percent: int, ~completeFunc, _children) => {
let make = _children => {
...component,
initialState: () => {
percent,
style:
ReactDOMRe.Style.make(~width=Method.buildWidthPercentStr(percent), ()),
percent: 0,
style: ReactDOMRe.Style.make(~width=Method.buildWidthPercentStr(0), ()),
},
reducer,
render: _self => render(_self),
didUpdate: ({oldSelf, newSelf}: ReasonReact.oldNewSelf('a, 'b, 'c)) =>
newSelf.state.percent === 100 ? completeFunc(.) : (),
newSelf.state.percent === 100 ? Method.finish() : (),
didMount: ({state, send}: ReasonReact.self('a, 'b, 'c)) => {
let engineState = StateEngineService.unsafeGetState();

ManageEventEngineService.onCustomGlobalEvent(
~eventName=ProgressUtils.getProgressChangePercentCustomGlobalEventName(),
~handleFunc=
(. event, engineState) => {
send(
ChangePercent(
event.userData
|> OptionService.unsafeGet
|> WonderEditor.EventType.convertUserDataToInt,
),
);

(engineState, event);
},
~state=engineState,
(),
)
|> StateEngineService.setState
|> ignore;
let engineState =
ManageEventEngineService.onCustomGlobalEvent(
~eventName=
ProgressUtils.getProgressChangePercentCustomGlobalEventName(),
~handleFunc=
(. event, engineState) => {
send(
ChangePercent(
event.userData
|> OptionService.unsafeGet
|> WonderEditor.EventType.convertUserDataToInt,
),
);

(engineState, event);
},
~state=engineState,
(),
);

let engineState =
ManageEventEngineService.onCustomGlobalEvent(
~eventName=ProgressUtils.getProgressShowCustomGlobalEventName(),
~handleFunc=
(. event, engineState) => {
Method.showProgress();

(engineState, event);
},
~state=engineState,
(),
);

let engineState =
ManageEventEngineService.onCustomGlobalEvent(
~eventName=ProgressUtils.getProgressHideCustomGlobalEventName(),
~handleFunc=
(. event, engineState) => {
Method.hideProgress();

(engineState, event);
},
~state=engineState,
(),
);

let engineState =
ManageEventEngineService.onCustomGlobalEvent(
~eventName=ProgressUtils.getProgressFinishCustomGlobalEventName(),
~handleFunc=
(. event, engineState) => {
Method.finish();

(engineState, event);
},
~state=engineState,
(),
);

engineState |> StateEngineService.setState |> ignore;
},
willUnmount: ({state, send}: ReasonReact.self('a, 'b, 'c)) =>
Method.willUnmount(),
@@ -1 +1,59 @@
let getProgressChangePercentCustomGlobalEventName = () => "wd_editor_progress_change_percent";
let getProgressChangePercentCustomGlobalEventName = () => "wd_editor_progress_change_percent";

let getProgressShowCustomGlobalEventName = () => "wd_editor_progress_show";

let getProgressHideCustomGlobalEventName = () => "wd_editor_progress_hide";

let getProgressFinishCustomGlobalEventName = () => "wd_editor_progress_finish";

let show = engineState => {
let (engineState, _) =
ManageEventEngineService.triggerCustomGlobalEvent(
CreateCustomEventEngineService.create(
getProgressShowCustomGlobalEventName(),
None,
),
engineState,
);

engineState;
};

let hide = engineState => {
let (engineState, _) =
ManageEventEngineService.triggerCustomGlobalEvent(
CreateCustomEventEngineService.create(
getProgressHideCustomGlobalEventName(),
None,
),
engineState,
);

engineState;
};

let changePercent = (percent, engineState) => {
let (engineState, _) =
ManageEventEngineService.triggerCustomGlobalEvent(
CreateCustomEventEngineService.create(
getProgressChangePercentCustomGlobalEventName(),
Some(percent |> EventType.convertIntToUserData),
),
engineState,
);

engineState;
};

let finish = engineState => {
let (engineState, _) =
ManageEventEngineService.triggerCustomGlobalEvent(
CreateCustomEventEngineService.create(
getProgressFinishCustomGlobalEventName(),
None,
),
engineState,
);

engineState;
};
@@ -11,12 +11,24 @@ type action =

module Method = {
let importPackage = ((uiState, dispatchFunc), closeNavFunc, event) => {
StateEngineService.unsafeGetState()
|> ProgressUtils.show
|> ProgressUtils.changePercent(0)
|> StateEngineService.setState
|> ignore;

StateHistoryService.getStateForHistory()
|> StoreHistoryUtils.storeHistoryStateWithNoCopyEngineState(uiState);

HeaderImportPackageUtils.importPackage(dispatchFunc, event)
|> Js.Promise.then_(_ => closeNavFunc() |> Js.Promise.resolve)
|> Js.Promise.then_(_ => {
ProgressUtils.finish |> StateLogicService.getAndSetEngineState;

closeNavFunc() |> Js.Promise.resolve;
})
|> Js.Promise.catch(e => {
ProgressUtils.finish |> StateLogicService.getAndSetEngineState;

let e = Obj.magic(e);
let editorState = StateEditorService.getState();

@@ -52,7 +52,13 @@ let _handleAssetWDBType =
(fileName, wdbArrayBuffer),
(wdbNodeId, selectedFolderNodeInAssetTree),
(editorState, engineState),
) =>
) => {
StateEngineService.unsafeGetState()
|> ProgressUtils.show
|> ProgressUtils.changePercent(0)
|> StateEngineService.setState
|> ignore;

WDBAssetLogicService.importAssetWDB(
(
FileNameService.getBaseName(fileName)
@@ -118,8 +124,11 @@ let _handleAssetWDBType =
(editorState, engineState),
);

ProgressUtils.finish |> StateLogicService.getAndSetEngineState;

(editorState, engineState) |> resolve;
});
};

let _getAssetBundleTypeByExtname = extname =>
switch (extname) {
@@ -105,6 +105,7 @@ module Method = {
</div>
</div>
<canvas id="img-canvas" key="imgCanvas" width="50" height="50" />
<Progress />
</article>;

let onResize = domElement => {
@@ -5,12 +5,25 @@ let rec _iterateArrayDom = (targetDom, domArray, isIncludeTarget) =>
isIncludeTarget || targetDom === dom === true ?
true :
{
let children = (dom |> DomHelperType.convertDomElementToJsObj)##children;
let children =
(dom |> DomHelperType.convertDomElementToJsObj)##children;

_iterateArrayDom(targetDom, children, isIncludeTarget);
},
isIncludeTarget,
);

let isSpecificDomChildrenHasTargetDom = (targetDom, domArray) =>
_iterateArrayDom(targetDom, domArray, false);
_iterateArrayDom(targetDom, domArray, false);

let hideDom = [%raw
domId => {|
document.querySelector("#" + domId).style.display = "none";
|}
];

let showDomFlex = [%raw
domId => {|
document.querySelector("#" + domId).style.display = "flex";
|}
];

This file was deleted.

@@ -0,0 +1,12 @@
let stubFakeDomForQuerySelector = (sandbox, fakeDomId, fakeDom) => {
open Sinon;

let querySelector =
createMethodStub(
refJsObjToSandbox(sandbox^),
DomHelper.document |> Obj.magic,
"querySelector",
);

querySelector |> withOneArg({j|#$fakeDomId|j}) |> returns(fakeDom) |> ignore;
};

0 comments on commit 36b9f75

Please sign in to comment.
You can’t perform that action at this time.