[PE mobile] Edited store, views and continue make settings

apps/presentationeditor/mobile/src/controller/Main.jsx

@@ -193,19 +193,18 @@ class MainController extends Component {
 
         const storeFocusObjects = this.props.storeFocusObjects;
         const storeLayout = this.props.storeLayout;
-        const storeTransition = this.props.storeTransition;
         
         this.api.asc_registerCallback('asc_onFocusObject', objects => {
             // console.log(objects);
             storeFocusObjects.resetFocusObjects(objects);
 
-            const settings = storeFocusObjects.settings;
+            // const settings = storeFocusObjects.settings;
 
-            if(settings[0] === "slide") {
+            // if(settings[0] === "slide") {
-                const slideObject = objects[0].get_ObjectValue();
+            //     const slideObject = objects[0].get_ObjectValue();
-                storeLayout.changeSlideLayoutIndex(slideObject.get_LayoutIndex());
+            //     storeLayout.changeSlideLayoutIndex(slideObject.get_LayoutIndex());
-                storeTransition.addTransition(slideObject.get_transition());
+            //     storeTransition.initTransition(slideObject.get_transition());
-            }
+            // }
         });
 
         const storeTheme = this.props.storeTheme;

apps/presentationeditor/mobile/src/controller/edit/Effect.jsx

@@ -1,16 +1,16 @@
-import React, { Component } from "react";
+// import React, { Component } from "react";
-import Effect from "../../view/edit/Effect";
+// import Effect from "../../view/edit/Effect";
 
-class EffectController extends Component {
+// class EffectController extends Component {
-    constructor(props) {
+//     constructor(props) {
-        super(props);
+//         super(props);
-    }
+//     }
 
-    render() {
+//     render() {
-        return (
+//         return (
-            <Effect />
+//             <Effect />
-        );
+//         );
-    }
+//     }
-}
+// }
 
-export default EffectController;
+// export default EffectController;

apps/presentationeditor/mobile/src/controller/edit/Transition.jsx

@@ -1,10 +1,9 @@
 import React, { Component } from "react";
-import Transition from "../../view/edit/Transition";
+import {Transition} from "../../view/edit/Transition";
-
 class TransitionController extends Component {
     constructor(props) {
         super(props);
-    }
+    };
 
     onApplyAll() {
         const api = Common.EditorApi.get();
@@ -13,8 +12,9 @@ class TransitionController extends Component {
 
     changeDuration(duration) {
         const api = Common.EditorApi.get();
+
         let props = new Asc.CAscSlideProps(),
-            timing = new Asc.CAscSlideTransition();
+            timing = new Asc.CAscSlideTransition(),
             _effectDuration = duration * 1000;
 
         timing.put_TransitionDuration(_effectDuration);
@@ -24,6 +24,7 @@ class TransitionController extends Component {
 
     onStartClick(value) {
         const api = Common.EditorApi.get();
+
         let props = new Asc.CAscSlideProps(),
             timing = new Asc.CAscSlideTransition();
 
@@ -34,6 +35,7 @@ class TransitionController extends Component {
 
     onDelayCheck(value, _effectDelay) {
         const api = Common.EditorApi.get();
+
         let props = new Asc.CAscSlideProps(),
             timing = new Asc.CAscSlideTransition();
 
@@ -41,10 +43,11 @@ class TransitionController extends Component {
         timing.put_SlideAdvanceDuration(_effectDelay);
         props.put_transition(timing);
         api.SetSlideProps(props);
-    }
+    };
 
     onDelay(value) {
         const api = Common.EditorApi.get();
+
         let props = new Asc.CAscSlideProps(),
             timing = new Asc.CAscSlideTransition(),
             _effectDelay = value * 1000;
@@ -54,13 +57,29 @@ class TransitionController extends Component {
         api.SetSlideProps(props);
     };
 
+    onEffectClick(value) {
+        const api = Common.EditorApi.get();
+
+        // let props = new Asc.CAscSlideProps(),
+        //     timing = new Asc.CAscSlideTransition(),
+        //     _effectType = this.fillEffectTypes(value);
+
+        // timing.put_TransitionType(value);
+        // timing.put_TransitionOption(_effectType);
+        // props.put_transition(timing);
+        // api.SetSlideProps(props);
+        
+    };
+
     render() {
         return (
             <Transition 
                 onApplyAll={this.onApplyAll} 
+                changeDuration={this.changeDuration}
                 onStartClick={this.onStartClick}
                 onDelayCheck={this.onDelayCheck}
                 onDelay={this.onDelay}
+                onEffectClick={this.onEffectClick}
             />
         );
     }

apps/presentationeditor/mobile/src/store/effect.js

@@ -1,5 +0,0 @@
-import {action, observable} from 'mobx';
-
-export class storeEffect {
-
-}

apps/presentationeditor/mobile/src/store/focusObjects.js

@@ -52,4 +52,19 @@ export class storeFocusObjects {
         }
         return resultArr;
     }
+
+    @computed get slideObject() {
+        const slides = [];
+        for (let object of this._focusObjects) {
+            if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Slide) {
+                slides.push(object);
+            }
+        }
+        if (slides.length > 0) {
+            const object = slides[slides.length - 1]; // get top
+            return object.get_ObjectValue();
+        } else {
+            return undefined;
+        }
+    }
 }

apps/presentationeditor/mobile/src/store/mainStore.js

@@ -9,8 +9,6 @@ import {storePresentationSettings} from './presentationSettings';
 import { storeLayout } from './layout';
 import { storeTransition } from './transition';
 import { storeTheme } from './theme';
-import { storeEffect } from './effect';
-import { storeType } from './type';
 // import {storeTextSettings} from "./textSettings";
 // import {storeParagraphSettings} from "./paragraphSettings";
 // import {storeShapeSettings} from "./shapeSettings";
@@ -28,9 +26,7 @@ export const stores = {
     storePresentationSettings: new storePresentationSettings(),
     storeLayout: new storeLayout(),
     storeTransition: new storeTransition(),
-    storeTheme: new storeTheme(),
+    storeTheme: new storeTheme()
-    storeEffect: new storeEffect(),
-    storeType: new storeType()
     // storeTextSettings: new storeTextSettings(),
     // storeParagraphSettings: new storeParagraphSettings(),
     // storeShapeSettings: new storeShapeSettings(),

apps/presentationeditor/mobile/src/store/transition.js

@@ -2,19 +2,9 @@ import {action, observable} from 'mobx';
 
 export class storeTransition {
 
-    @observable transition = {};
+    @observable effect;
-    @observable isDelay = false;
-    @observable isStartOnClick = true;
     
-    @action toggleDelay() {
+    @action changeEffect(value) {
-        this.isDelay = !this.isDelay;
+        this.effect = value;
-    }
-
-    @action toggleStartOnClick() {
-        this.isStartOnClick = !this.isStartOnClick;
-    }
-
-    @action addTransition(obj) {
-        this.transition = obj;
     }
 }

apps/presentationeditor/mobile/src/store/type.js

@@ -1,5 +0,0 @@
-import {action, observable} from 'mobx';
-
-export class storeType {
-
-}

apps/presentationeditor/mobile/src/view/edit/Edit.jsx

@@ -10,8 +10,8 @@ import EditTextController from "../../controller/edit/EditText";
 import LayoutController from "../../controller/edit/Layout";
 import TransitionController from '../../controller/edit/Transition';
 import ThemeController from '../../controller/edit/Theme';
-import EffectController from '../../controller/edit/Effect';
+import { Effect } from './Transition';
-import TypeController from '../../controller/edit/Type';
+import { Type } from './Transition';
 //import EditShapeController from "../../controller/edit/EditShape";
 //import EditImageController from "../../controller/edit/EditImage";
 //import EditTableController from "../../controller/edit/EditTable";
@@ -33,11 +33,11 @@ const routes = [
     },
     {
         path: '/effect/',
-        component: EffectController
+        component: Effect
     },
     {
         path: '/type/',
-        component: TypeController
+        component: Type
     }
 ];
 

apps/presentationeditor/mobile/src/view/edit/Effect.jsx

@@ -1,24 +1,32 @@
-import React, {useState} from "react";
+// import React, {useState} from "react";
-import { observer, inject } from "mobx-react";
+// import { observer, inject } from "mobx-react";
-import { Page, Navbar, List, ListItem, NavRight, Link, Toggle, Range, ListItemCell } from "framework7-react";
+// import { Page, Navbar, List, ListItem } from "framework7-react";
-import { useTranslation } from "react-i18next";
+// import { useTranslation } from "react-i18next";
 
-const PageEffect= props => {
+// const PageEffect= props => {
-    const { t } = useTranslation();
+//     const { t } = useTranslation();
-    const _t = t("View.Edit", { returnObjects: true });
+//     const _t = t("View.Edit", { returnObjects: true });
+//     console.log(props);
+//     const arrEffect = props.arrEffect;
+//     const effect = props.effect;
     
-    return (
+//     return (
-        <Page>
+//         <Page>
-            <Navbar title={_t.textEffect} backLink={_t.textBack} />
+//             <Navbar title={_t.textEffect} backLink={_t.textBack} />
-            <List mediaList>
+//             {arrEffect.length ? (
-                <ListItem radio name="editslide-effect"></ListItem>
+//                 <List mediaList>
-                <ListItem radio name="editslide-effect"></ListItem>
+//                     {arrEffect.map((elem, index) => {
-                <ListItem radio name="editslide-effect"></ListItem>
+//                         return (
-            </List>
+//                             <ListItem key={index} radio name="editslide-effect" title={elem.displayValue} value={elem.value} 
-        </Page>
+//                                 checked={elem.value === effect}></ListItem>
-    );
+//                         )
-};
+//                     })}
+//                 </List>
+//             ) : null}
+//         </Page>
+//     );
+// };
 
-const Effect = inject("storeEffect")(observer(PageEffect));
+// const Effect = inject("storeEffect")(observer(PageEffect));
 
-export default Effect;
+// export default Effect;

apps/presentationeditor/mobile/src/view/edit/Layout.jsx

@@ -6,9 +6,11 @@ import { useTranslation } from "react-i18next";
 const PageLayout = props => {
     const { t } = useTranslation();
     const _t = t("View.Edit", { returnObjects: true });
-    const store = props.storeLayout;
+    const storeFocusObjects = props.storeFocusObjects;
-    const arrayLayouts = JSON.parse(JSON.stringify(store.arrayLayouts));
+    const storeLayout = props.storeLayout;
-    const slideLayoutIndex = store.slideLayoutIndex;
+    storeLayout.changeSlideLayoutIndex(storeFocusObjects.slideObject.get_LayoutIndex());
+    const arrayLayouts = JSON.parse(JSON.stringify(storeLayout.arrayLayouts));
+    const slideLayoutIndex = storeLayout.slideLayoutIndex;
    
     console.log(slideLayoutIndex);
     console.log(arrayLayouts);
@@ -26,7 +28,7 @@ const PageLayout = props => {
                         return (
                             <ListItem key={index} className={slideLayoutIndex === index ? "active" : ""} 
                                 onClick={() => {
-                                    store.changeSlideLayoutIndex(index);
+                                    storeLayout.changeSlideLayoutIndex(index);
                                     props.onLayoutClick(index);
                                 }}>
                                 <img src={elem.Image} style={{width: elem.Width, height: elem.Height}} alt=""/>
@@ -39,6 +41,6 @@ const PageLayout = props => {
     );
 };
 
-const Layout = inject("storeLayout")(observer(PageLayout));
+const Layout = inject("storeLayout", "storeFocusObjects")(observer(PageLayout));
 
 export default Layout;

apps/presentationeditor/mobile/src/view/edit/Transition.jsx

@@ -6,17 +6,6 @@ import { useTranslation } from "react-i18next";
 const PageTransition = props => {
     const { t } = useTranslation();
     const _t = t("View.Edit", { returnObjects: true });
-    const store = props.storeTransition;
-    const transition = store.transition;
-    const _effect = transition.get_TransitionType();
-
-    let _arrCurrentEffectTypes;
-    let _effectDelay = transition.get_SlideAdvanceDuration();
-
-    const [stateRange, changeRange] = useState((_effectDelay !== null && _effectDelay !== undefined) ? parseInt(_effectDelay / 1000.) : 0);
-    const isDelay = store.isDelay;
-    const isStartOnClick = store.isStartOnClick;
-
     const _arrEffect = [
         {displayValue: _t.textNone,    value: Asc.c_oAscSlideTransitionTypes.None},
         {displayValue: _t.textFade,    value: Asc.c_oAscSlideTransitionTypes.Fade},
@@ -28,7 +17,6 @@ const PageTransition = props => {
         {displayValue: _t.textClock,   value: Asc.c_oAscSlideTransitionTypes.Clock},
         {displayValue: _t.textZoom,    value: Asc.c_oAscSlideTransitionTypes.Zoom}
     ];
-
     const _arrEffectType = [
         {displayValue: _t.textSmoothly,           value: Asc.c_oAscSlideTransitionParams.Fade_Smoothly},
         {displayValue: _t.textBlack,              value: Asc.c_oAscSlideTransitionParams.Fade_Through_Black},
@@ -52,6 +40,8 @@ const PageTransition = props => {
         {displayValue: _t.textZoomRotate,         value: Asc.c_oAscSlideTransitionParams.Zoom_AndRotate}
     ];
 
+    let _arrCurrentEffectTypes = [];
+
     const fillEffectTypes = type => {
         _arrCurrentEffectTypes = [];
         switch (type) {
@@ -97,16 +87,22 @@ const PageTransition = props => {
         return '';
     };
 
-    const nameEffect = getEffectName(_effect);
+    const storeFocusObjects = props.storeFocusObjects;
-    const arrTypesEffect = fillEffectTypes(_effect);
+    const storeTransition = props.storeTransition;
-    const _effectType = transition.get_TransitionOption();
+    const transitionObj = storeFocusObjects.slideObject.get_transition();
-    const nameEffectType = getEffectTypeName(_effectType);
+    storeTransition.changeEffect(transitionObj.get_TransitionType());
-    const _effectDuration = transition.get_TransitionDuration();
+    const _effect = storeTransition.effect;
 
-    // console.log(_effectType);
+    let _effectDelay = transitionObj.get_SlideAdvanceDuration();
-    // console.log(_effectDuration);
+
-    // console.log(transition.get_SlideAdvanceOnMouseClick());
+    const [stateRange, changeRange] = useState((_effectDelay !== null && _effectDelay !== undefined) ? parseInt(_effectDelay / 1000.) : 0);
-    // console.log(transition.get_SlideAdvanceAfter());
+    const isDelay = transitionObj.get_SlideAdvanceAfter();
+    const isStartOnClick = transitionObj.get_SlideAdvanceOnMouseClick();
+    const nameEffect = getEffectName(_effect);
+    const arrEffectType = fillEffectTypes(_effect);
+    const _effectType = transitionObj.get_TransitionOption();
+    const nameEffectType = getEffectTypeName(_effectType);
+    const _effectDuration = transitionObj.get_TransitionDuration();
 
     return (
         <Page className="slide-transition">
@@ -116,7 +112,10 @@ const PageTransition = props => {
                 </NavRight>
             </Navbar>
             <List>
-                <ListItem link="/effect/" title={_t.textEffect} after={nameEffect}></ListItem>
+                <ListItem link="/effect/" title={_t.textEffect} after={nameEffect} routeProps={{
+                    _arrEffect,
+                    onEffectClick: props.onEffectClick
+                }}></ListItem>
                 <ListItem link="/type/" title={_t.textType}
                     after={_effect != Asc.c_oAscSlideTransitionTypes.None ? nameEffectType : ''} 
                     disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}>
@@ -143,17 +142,11 @@ const PageTransition = props => {
             <List>
                 <ListItem>
                     <span>{_t.textStartOnClick}</span>
-                    <Toggle checked={isStartOnClick} onChange={() => {
+                    <Toggle checked={isStartOnClick} onToggleChange={() => {props.onStartClick(!isStartOnClick)}} />
-                        store.toggleStartOnClick();
-                        props.onStartClick(isStartOnClick);
-                    }} />
                 </ListItem>
                 <ListItem>
                     <span>{_t.textDelay}</span>
-                    <Toggle checked={isDelay} onChange={() => {
+                    <Toggle checked={isDelay} onToggleChange={() => {props.onDelayCheck(!isDelay, _effectDelay)}} />
-                        store.toggleDelay();
-                        props.onDelayCheck(isDelay, _effectDelay);
-                    }} />
                 </ListItem>
                 <ListItem>
                     <ListItemCell className="flex-shrink-3">
@@ -175,6 +168,58 @@ const PageTransition = props => {
     );
 };
 
-const Transition = inject("storeTransition")(observer(PageTransition));
 
-export default Transition;
+const PageEffect = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Edit", { returnObjects: true });
+    const storeTransition = props.storeTransition;
+    const _effect = storeTransition.effect;
+    const _arrEffect = props._arrEffect;
+    
+    return (
+        <Page>
+            <Navbar title={_t.textEffect} backLink={_t.textBack} />
+            {_arrEffect.length ? (
+                <List mediaList>
+                    {_arrEffect.map((elem, index) => {
+                        return (
+                            <ListItem key={index} radio name="editslide-effect" title={elem.displayValue} value={elem.value} 
+                                checked={elem.value === _effect} onChange={() => {
+                                    storeTransition.changeEffect(elem.value);
+                                    props.onEffectClick(elem.value);
+                                }}></ListItem>
+                        )
+                    })}
+                </List>
+            ) : null}
+        </Page>
+    );
+};
+
+const PageType= props => {
+    const { t } = useTranslation();
+    const _t = t("View.Edit", { returnObjects: true });
+    console.log(props);
+    const storeTransition = props.storeTransition;
+
+    return (
+        <Page>
+            <Navbar title={_t.textType} backLink={_t.textBack}>
+                <NavRight>
+                    <Link icon='icon-expand-down' sheetClose></Link>
+                </NavRight>
+            </Navbar>
+            <List mediaList>
+                <ListItem radio name="editslide-effect-type"></ListItem>
+                <ListItem radio name="editslide-effect-type"></ListItem>
+                <ListItem radio name="editslide-effect-type"></ListItem>
+            </List>
+        </Page>
+    );
+};
+
+const Effect = inject("storeTransition", "storeFocusObjects")(observer(PageEffect));
+const Type = inject("storeTransition", "storeFocusObjects")(observer(PageType));
+const Transition = inject("storeTransition", "storeFocusObjects")(observer(PageTransition));
+
+export {Transition, Effect, Type};