Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
SergeyEzhin 2020-12-31 02:18:22 +03:00
parent b7ed3bee64
commit b92ba29b6f
12 changed files with 182 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
apps/presentationeditor/mobile/src/controller/Main.jsx
View file

@ -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") {
const slideObject = objects[0].get_ObjectValue();
storeLayout.changeSlideLayoutIndex(slideObject.get_LayoutIndex());
storeTransition.addTransition(slideObject.get_transition());
}
// if(settings[0] === "slide") {
// const slideObject = objects[0].get_ObjectValue();
// storeLayout.changeSlideLayoutIndex(slideObject.get_LayoutIndex());
// storeTransition.initTransition(slideObject.get_transition());
// }
});
const storeTheme = this.props.storeTheme;

26
apps/presentationeditor/mobile/src/controller/edit/Effect.jsx
View file

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

29
apps/presentationeditor/mobile/src/controller/edit/Transition.jsx
View file

@ -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}
/>
);
}

5
apps/presentationeditor/mobile/src/store/effect.js
View file

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

15
apps/presentationeditor/mobile/src/store/focusObjects.js
View file

@ -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;
}
}
}

6
apps/presentationeditor/mobile/src/store/mainStore.js
View file

@ -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(),
storeEffect: new storeEffect(),
storeType: new storeType()
storeTheme: new storeTheme()
// storeTextSettings: new storeTextSettings(),
// storeParagraphSettings: new storeParagraphSettings(),
// storeShapeSettings: new storeShapeSettings(),

18
apps/presentationeditor/mobile/src/store/transition.js
View file

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

5
apps/presentationeditor/mobile/src/store/type.js
View file

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

8
apps/presentationeditor/mobile/src/view/edit/Edit.jsx
View file

@ -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 TypeController from '../../controller/edit/Type';
import { Effect } from './Transition';
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
}
];

48
apps/presentationeditor/mobile/src/view/edit/Effect.jsx
View file

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

12
apps/presentationeditor/mobile/src/view/edit/Layout.jsx
View file

@ -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 arrayLayouts = JSON.parse(JSON.stringify(store.arrayLayouts));
const slideLayoutIndex = store.slideLayoutIndex;
const storeFocusObjects = props.storeFocusObjects;
const storeLayout = props.storeLayout;
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;

113
apps/presentationeditor/mobile/src/view/edit/Transition.jsx
View file

@ -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) {
@ -82,14 +72,14 @@ const PageTransition = props => {
}
return (_arrCurrentEffectTypes.length > 0) ? _arrCurrentEffectTypes[0].value : -1;
};
const getEffectName = effect => {
for (var i=0; i < _arrEffect.length; i++) {
if (_arrEffect[i].value == effect) return _arrEffect[i].displayValue;
}
return '';
};
const getEffectTypeName = type => {
for (var i=0; i < _arrCurrentEffectTypes.length; i++) {
if (_arrCurrentEffectTypes[i].value == type) return _arrCurrentEffectTypes[i].displayValue;
@ -97,16 +87,22 @@ const PageTransition = props => {
return '';
};
const nameEffect = getEffectName(_effect);
const arrTypesEffect = fillEffectTypes(_effect);
const _effectType = transition.get_TransitionOption();
const nameEffectType = getEffectTypeName(_effectType);
const _effectDuration = transition.get_TransitionDuration();
const storeFocusObjects = props.storeFocusObjects;
const storeTransition = props.storeTransition;
const transitionObj = storeFocusObjects.slideObject.get_transition();
storeTransition.changeEffect(transitionObj.get_TransitionType());
const _effect = storeTransition.effect;
// console.log(_effectType);
// console.log(_effectDuration);
// console.log(transition.get_SlideAdvanceOnMouseClick());
// console.log(transition.get_SlideAdvanceAfter());
let _effectDelay = transitionObj.get_SlideAdvanceDuration();
const [stateRange, changeRange] = useState((_effectDelay !== null && _effectDelay !== undefined) ? parseInt(_effectDelay / 1000.) : 0);
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={() => {
store.toggleStartOnClick();
props.onStartClick(isStartOnClick);
}} />
<Toggle checked={isStartOnClick} onToggleChange={() => {props.onStartClick(!isStartOnClick)}} />
</ListItem>
<ListItem>
<span>{_t.textDelay}</span>
<Toggle checked={isDelay} onChange={() => {
store.toggleDelay();
props.onDelayCheck(isDelay, _effectDelay);
}} />
<Toggle checked={isDelay} onToggleChange={() => {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};