[PE mobile] Corrected Link Settings and Presentation Settings

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

@@ -9,8 +9,14 @@ import { EditLink } from '../../view/edit/EditLink';
 class EditLinkController extends Component {
     constructor (props) {
         super(props);
+
+        const api = Common.EditorApi.get();
+
         this.onEditLink = this.onEditLink.bind(this);
         this.onRemoveLink = this.onRemoveLink.bind(this);
+        this.initLink = this.initLink.bind(this);
+        this.slidesCount = api.getCountPages();
+        this.initLink();
     }
 
     closeModal () {
@@ -21,6 +27,58 @@ class EditLinkController extends Component {
         }
     }
 
+    initLink() {
+        const api = Common.EditorApi.get();
+        const linkObject = this.props.storeFocusObjects.linkObject;
+        const url = linkObject.get_Value();
+        const tooltip = linkObject.get_ToolTip();
+        const display = linkObject.get_Text();
+
+        this.url = url;
+        this.tooltip = tooltip;
+        this.display = display;
+        this.slideLink = 0;
+        this.slideNum = 0;
+
+        let indAction;
+        let slidesCount;
+        let slideNum;
+
+        if(url === null || url === undefined || url === '') {
+            this.typeLink = 1;
+        }
+        else {
+            indAction = url.indexOf("ppaction://hlink");
+            if(0 == indAction) {
+                if (url == "ppaction://hlinkshowjump?jump=firstslide") {
+                    this.slideLink = 2;
+                } else if (url == "ppaction://hlinkshowjump?jump=lastslide") {
+                    this.slideLink = 3;
+                }
+                else if (url == "ppaction://hlinkshowjump?jump=nextslide") {
+                    this.slideLink = 0;
+                }
+                else if (url == "ppaction://hlinkshowjump?jump=previousslide") {
+                    this.slideLink = 1;
+                }
+                else {
+                    this.slideLink = 4;
+                    slidesCount = api.getCountPages();
+                    let mask = "ppaction://hlinksldjumpslide",
+                        indSlide = url.indexOf(mask);
+                    if (0 == indSlide) {
+                        slideNum = parseInt(url.substring(mask.length));
+                        if (slideNum < 0) this.slideNum = 0;
+                        if (slideNum >= slidesCount) this.slideNum = slidesCount - 1;
+                    } else this.slideNum = 0;
+                }
+                this.typeLink = 0
+            } else {
+                this.typeLink = 1;
+            }
+        }
+    }
+
     onEditLink(type, linkInfo) {
         const api = Common.EditorApi.get();
         const { t } = this.props;
@@ -102,13 +160,21 @@ class EditLinkController extends Component {
     render () {
         return (
             <EditLink 
+                initLink={this.initLink}
+                typeLink={this.typeLink}
+                url={this.url}
+                display={this.display}
+                tooltip={this.tooltip}
+                slideLink={this.slideLink}
+                slideNum={this.slideNum}
                 onEditLink={this.onEditLink} 
                 onRemoveLink={this.onRemoveLink}
+                slidesCount={this.slidesCount}
             />
         )
     }
 }
 
-const EditLinkWithTranslation = withTranslation()(EditLinkController);
+const EditLinkWithTranslation = inject("storeFocusObjects")(observer(withTranslation()(EditLinkController)));
 
 export {EditLinkWithTranslation as EditLinkController};

apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx

@@ -6,6 +6,7 @@ class PresentationSettingsController extends Component {
     constructor(props) {
         super(props);
         this.initSlideSize = this.initSlideSize.bind(this);
+        this.onSlideSize = this.onSlideSize.bind(this);
     }
 
     initSlideSize() {
@@ -18,7 +19,15 @@ class PresentationSettingsController extends Component {
 
     onSlideSize(slideSizeArr) {
         const api = Common.EditorApi.get();
-        api.changeSlideSize(slideSizeArr[0], slideSizeArr[1]);
+
+        let ratio = slideSizeArr[1] / slideSizeArr[0];
+        let currentHeight = this.props.storePresentationSettings.currentPageSize.height;
+        let currentPageSize = {
+            width: (currentHeight || slideSizeArr[1]) / ratio,
+            height: currentHeight
+        };
+        // api.changeSlideSize(slideSizeArr[0], slideSizeArr[1], slideSizeArr[2]);
+        api.changeSlideSize(currentPageSize.width, currentPageSize.height, slideSizeArr[2]);
     }
 
     // Color Schemes

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

@@ -5,68 +5,4 @@ export class storeLinkSettings {
     @action canAddHyperlink (value) {
         this.canAddLink = value;
     }
-
-    @observable typeLink;
-    @action changeLinkType(value) {
-        this.typeLink = value;
-    }
-
-    @observable slideLink;
-    @action changeSlideLink(value) {
-        this.slideLink = value;
-    }
-
-    @observable slideNum;
-    @action changeSlideNum(value) {
-        this.slideNum = value;
-    }
-
-    @observable slideName;
-    @action changeSlideName(value) {
-        this.slideName = value;
-    }
-
-    initCategory(linkObject) {
-        const url = linkObject.get_Value();
-        const api = Common.EditorApi.get();
-
-        let indAction;
-        let slidesCount;
-        let slideNum;
-
-        if(url === null || url === undefined || url === '') {
-            this.changeLinkType(1);
-        }
-        else {
-            indAction = url.indexOf("ppaction://hlink");
-            if(0 == indAction) {
-                if (url == "ppaction://hlinkshowjump?jump=firstslide") {
-                    this.changeSlideLink(2);
-                } else if (url == "ppaction://hlinkshowjump?jump=lastslide") {
-                    this.changeSlideLink(3);
-                }
-                else if (url == "ppaction://hlinkshowjump?jump=nextslide") {
-                    this.changeSlideLink(0);
-                }
-                else if (url == "ppaction://hlinkshowjump?jump=previousslide") {
-                    this.changeSlideLink(1);
-                }
-                else {
-                    this.changeSlideLink(4);
-                    slidesCount = api.getCountPages();
-                    let mask = "ppaction://hlinksldjumpslide",
-                        indSlide = url.indexOf(mask);
-                    if (0 == indSlide) {
-                        slideNum = parseInt(url.substring(mask.length));
-                        if (slideNum < 0) this.changeSlideNum(0);
-                        if (slideNum >= slidesCount) this.changeSlideNum(slidesCount - 1);
-                    } else this.changeSlideNum(0);
-                }
-                this.changeLinkType(0);
-            } else {
-                this.changeLinkType(1);
-            }
-        }
-    }
-
 }

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

@@ -1,19 +1,23 @@
 import {action, observable} from 'mobx';
 
 export class storePresentationSettings {
-    slideSize = [[254, 190.5], [254, 143]];
+    @observable slideSizes = [
+        [9144000, 6858000, Asc.c_oAscSlideSZType.SzScreen4x3], 
+        [12192000, 6858000, Asc.c_oAscSlideSZType.SzCustom]
+    ];
+
+    @observable currentPageSize;
     @observable slideSizeIndex;
 
-    get getSlideSizes() {
-        return this.slideSize;
-    }
-
     @action changeSizeIndex(width, height) {
-        this.slideSize.forEach((array, index) => {
+        this.currentPageSize = {width, height};
-            if(Math.abs(array[0] - width) < 0.001 && Math.abs((array[1] - height)) < 0.001) {
+        let ratio = height / width;
+
+        this.slideSizes.forEach((array, index) => {
+            if(Math.abs(array[1] / array[0] - ratio) < 0.001) {
                 this.slideSizeIndex = index;
             }
-        })
+        });
     }
 
     // Color Schemes

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

@@ -7,15 +7,14 @@ import {Device} from "../../../../../common/mobile/utils/device";
 const PageTypeLink = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
-    const storeLinkSettings = props.storeLinkSettings;
+    const [typeLink, setTypeLink] = useState(props.curType);
-    const typeLink = storeLinkSettings.typeLink;
 
     return (
         <Page>
             <Navbar title={_t.textLinkType} backLink={_t.textBack}/>
             <List>
-                <ListItem title={_t.textExternalLink} radio checked={typeLink === 1} onClick={() => {storeLinkSettings.changeLinkType(1);}}></ListItem>
+                <ListItem title={_t.textExternalLink} radio checked={typeLink === 1} onClick={() => {setTypeLink(1); props.changeType(1); props.initLink();}}></ListItem>
-                <ListItem title={_t.textSlideInThisPresentation} radio checked={typeLink === 0} onClick={() => {storeLinkSettings.changeLinkType(0);}}></ListItem>
+                <ListItem title={_t.textSlideInThisPresentation} radio checked={typeLink === 0} onClick={() => {setTypeLink(0); props.changeType(0); props.initLink();}}></ListItem>
             </List>
         </Page>
     )
@@ -25,23 +24,18 @@ const PageLinkTo = props => {
     const isAndroid = Device.android;
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
-    const api = Common.EditorApi.get();
+    const slidesCount = props.slidesCount;
-    const slidesCount = api.getCountPages();
+    const [stateTypeTo, setTypeTo] = useState(props.curTo);
-    const storeLinkSettings = props.storeLinkSettings;
-    const slideLink = storeLinkSettings.slideLink;
-    // console.log(slideLink);
-    // const slideNum = storeLinkSettings.slideNum;
-    // const [stateTypeTo, setTypeTo] = useState(props.curTo);
 
     const changeTypeTo = (type) => {
-        storeLinkSettings.changeSlideLink(type);
+        setTypeTo(type);
         props.changeTo(type);
     };
 
     const [stateNumberTo, setNumberTo] = useState(0);
 
     const changeNumber = (curNumber, isDecrement) => {
-        storeLinkSettings.changeSlideLink(4);
+        setTypeTo(4);
         let value;
 
         if (isDecrement) {
@@ -51,7 +45,6 @@ const PageLinkTo = props => {
         }
 
         setNumberTo(value);
-        storeLinkSettings.changeSlideNum(value);
         props.changeTo(4, value);
     };
 
@@ -59,10 +52,10 @@ const PageLinkTo = props => {
         <Page>
             <Navbar title={_t.textLinkTo} backLink={_t.textBack}/>
             <List>
-                <ListItem title={_t.textNextSlide} radio checked={slideLink === 0} onClick={() => {changeTypeTo(0)}}></ListItem>
+                <ListItem title={_t.textNextSlide} radio checked={stateTypeTo === 0} onClick={() => {changeTypeTo(0)}}></ListItem>
-                <ListItem title={_t.textPreviousSlide} radio checked={slideLink === 1} onClick={() => {changeTypeTo(1)}}></ListItem>
+                <ListItem title={_t.textPreviousSlide} radio checked={stateTypeTo === 1} onClick={() => {changeTypeTo(1)}}></ListItem>
-                <ListItem title={_t.textFirstSlide} radio checked={slideLink === 2} onClick={() => {changeTypeTo(2)}}></ListItem>
+                <ListItem title={_t.textFirstSlide} radio checked={stateTypeTo === 2} onClick={() => {changeTypeTo(2)}}></ListItem>
-                <ListItem title={_t.textLastSlide} radio checked={slideLink === 3} onClick={() => {changeTypeTo(3)}}></ListItem>
+                <ListItem title={_t.textLastSlide} radio checked={stateTypeTo === 3} onClick={() => {changeTypeTo(3)}}></ListItem>
                 <ListItem title={_t.textSlideNumber}>
                     {!isAndroid && <div slot='after-start'>{stateNumberTo + 1}</div>}
                     <div slot='after'>
@@ -85,42 +78,44 @@ const PageLinkTo = props => {
 const PageLink = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
-    const storeFocusObjects = props.storeFocusObjects;
+    const url = props.url;
-    const storeLinkSettings = props.storeLinkSettings;
+    const tooltip = props.tooltip;
-    const linkObject = storeFocusObjects.linkObject;
+    const display = props.display;
-    
+    const slideNum = props.slideNum;
-    useEffect(() => {
+    const slideLink = props.slideLink;
-        storeLinkSettings.initCategory(linkObject);
+    const valueTypeLink = props.typeLink;
-    }, [linkObject]);
 
-    const url = linkObject.get_Value();
+    const typesDisplayTo = {
-    const tooltip = linkObject.get_ToolTip();
+        0: `${_t.textNextSlide}`,
-    const display = linkObject.get_Text();
+        1: `${_t.textPreviousSlide}`,
-    const slideNum = storeLinkSettings.slideNum;
+        2: `${_t.textFirstSlide}`,
-    const slideLink = storeLinkSettings.slideLink;
+        3: `${_t.textLastSlide}`,
-    const typeLink = storeLinkSettings.typeLink;
+        4: `${_t.textSlide} ${slideNum + 1}`
-    
+    };
-    if(typeLink === 1) {
-        storeLinkSettings.changeSlideName(_t.textNextSlide);
-        storeLinkSettings.changeSlideLink(0);
-    } 
 
+    const [typeLink, setTypeLink] = useState(valueTypeLink);
     const textType = typeLink === 1 ? _t.textExternalLink : _t.textSlideInThisPresentation;
+
+    const changeType = (newType) => {
+        setTypeLink(newType);
+    };
+
     const [link, setLink] = useState(typeLink !== 0 ? url : '');
+    const [linkTo, setLinkTo] = useState(slideLink);
+    const [displayTo, setDisplayTo] = useState(typesDisplayTo[slideLink]);
+    const [numberTo, setNumberTo] = useState(slideNum);
 
-    const changeTo = (slideLink, number) => {
+    const changeTo = (type, number) => {
-        switch (slideLink) {
+        setLinkTo(type);
-            case 0 : storeLinkSettings.changeSlideName(_t.textNextSlide); break;
+        switch (type) {
-            case 1 : storeLinkSettings.changeSlideName(_t.textPreviousSlide); break;
+            case 0 : setDisplayTo(_t.textNextSlide); break;
-            case 2 : storeLinkSettings.changeSlideName(_t.textFirstSlide); break;
+            case 1 : setDisplayTo(_t.textPreviousSlide); break;
-            case 3 : storeLinkSettings.changeSlideName(_t.textLastSlide); break;
+            case 2 : setDisplayTo(_t.textFirstSlide); break;
-            case 4 : storeLinkSettings.changeSlideName(`${_t.textSlide} ${number + 1}`); storeLinkSettings.changeSlideNum(number);
+            case 3 : setDisplayTo(_t.textLastSlide); break;
+            case 4 : setDisplayTo(`${_t.textSlide} ${number + 1}`); setNumberTo(number); break;
         }
-    }
+    };
 
-    changeTo(slideLink, slideNum);
-    
-    const slideName = storeLinkSettings.slideName;
     const [screenTip, setScreenTip] = useState(tooltip);
     const displayDisabled = display !== false && display === null;
     const [stateDisplay, setDisplay] = useState(display !== false ? ((display !== null) ? display : _t.textDefault) : "");
@@ -130,7 +125,9 @@ const PageLink = props => {
             <Navbar title={_t.textLink} backLink={_t.textBack}/>
             <List inlineLabels className='inputs-list'>
                 <ListItem link={'/edit-link-type/'} title={_t.textLinkType} after={textType} routeProps={{
-                    curType: typeLink
+                    changeType,
+                    curType: typeLink,
+                    initLink: props.initLink
                 }} />
                 {typeLink !== 0 ?
                     <ListInput label={_t.textLink}
@@ -139,9 +136,11 @@ const PageLink = props => {
                                value={link}
                                onChange={(event) => {setLink(event.target.value)}}
                     /> :
-                    <ListItem link={'/edit-link-to/'} title={_t.textLinkTo} after={slideName} routeProps={{
+                    <ListItem link={'/edit-link-to/'} title={_t.textLinkTo} after={displayTo} routeProps={{
                         changeTo: changeTo,
-                        curTo: slideLink
+                        curTo: linkTo,
+                        initLink: props.initLink,
+                        slidesCount: props.slidesCount
                     }}/>
                 }
                 <ListInput label={_t.textDisplay}
@@ -164,7 +163,7 @@ const PageLink = props => {
                             onClick={() => {
                                 props.onEditLink(typeLink, (typeLink === 1 ?
                                     {url: link, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled } :
-                                    {linkTo: slideLink, numberTo: slideNum, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled}));
+                                    {linkTo: linkTo, numberTo: numberTo, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled}));
                             }}
                 />
                 <ListButton title={_t.textRemoveLink}
@@ -178,10 +177,6 @@ const PageLink = props => {
     )
 };
 
-const EditLink = inject("storeFocusObjects", "storeLinkSettings")(observer(PageLink));
+export {PageLink as EditLink,
-const LinkTo = inject("storeFocusObjects", "storeLinkSettings")(observer(PageLinkTo));
+        PageLinkTo,
-const TypeLink = inject("storeFocusObjects", "storeLinkSettings")(observer(PageTypeLink));
+        PageTypeLink}
-
-export {EditLink,
-        LinkTo as PageLinkTo,
-        TypeLink as PageTypeLink}

apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx

@@ -7,14 +7,13 @@ const PagePresentationSettings = props => {
     const { t } = useTranslation();
     const _t = t("View.Settings", { returnObjects: true });
     props.initSlideSize();
-    const store = props.storePresentationSettings;
+    const storePresentationSettings = props.storePresentationSettings;
-    const slideSizeArr = store.getSlideSizes;
+    const slideSizeArr = storePresentationSettings.slideSizes;
-    const slideSizeIndex = store.slideSizeIndex;
+    const slideSizeIndex = storePresentationSettings.slideSizeIndex;
 
     return (
         <Page>
             <Navbar title={_t.textPresentationSettings} backLink={_t.textBack} />
-
             <BlockTitle>{_t.textSlideSize}</BlockTitle>
             <List>
                 <ListItem radio name="slide-size" checked={slideSizeIndex === 0} 
@@ -22,7 +21,6 @@ const PagePresentationSettings = props => {
                 <ListItem radio name="slide-size" checked={slideSizeIndex === 1}
                     onChange={() => props.onSlideSize(slideSizeArr[1])} title={_t.mniSlideWide}></ListItem>
             </List>
-        
             <List mediaList>
                 <ListItem title={_t.textColorSchemes} link="/color-schemes/" routeProps={{
                     onColorSchemeChange: props.onColorSchemeChange,
@@ -38,8 +36,8 @@ const PagePresentationColorSchemes = props => {
     const curScheme = props.initPageColorSchemes();
     const [stateScheme, setScheme] = useState(curScheme);
     const _t = t('View.Settings', {returnObjects: true});
-    const store = props.storePresentationSettings;
+    const storePresentationSettings = props.storePresentationSettings;
-    const allSchemes = store.allSchemes;
+    const allSchemes = storePresentationSettings.allSchemes;
 
     return (
         <Page>