[SSE mobile] Make Spreadsheet Settings

This commit is contained in:
SergeyEzhin 2021-02-18 22:15:50 +03:00
parent 37248d0c0e
commit aeb2daacab
7 changed files with 525 additions and 14 deletions

View file

@ -216,6 +216,33 @@
"textDefault": "Selected range",
"textInvalidRange": "Invalid cells range",
"txtNotUrl": "This field should be a URL in the format \"http://www.example.com\""
},
"Settings": {
"textFindAndReplace": "Find and Replace",
"textSpreadsheetSettings": "Spreadsheet Settings",
"textApplicationSettings": "Application Settings",
"textDownload": "Download",
"textPrint": "Print",
"textSpreadsheetInfo": "Spreadsheet Info",
"textHelp": "Help",
"textAbout": "About",
"textDone": "Done",
"textSettings": "Settings",
"textBack": "Back",
"textOrientation": "Orientation",
"textPortrait": "Portrait",
"textLandscape": "Landscape",
"textFormat": "Format",
"textMargins": "Margins",
"textColorSchemes": "Color Schemes",
"textHideHeadings": "Hide Headings",
"textHideGridlines": "Hide Gridlines",
"textLeft": "Left",
"textBottom": "Bottom",
"textTop": "Top",
"textRight": "Right",
"textCustomSize": "Custom Size",
"textSpreadsheetFormats": "Spreadsheet Formats"
}
},
"Common": {

View file

@ -5,7 +5,7 @@ import { f7 } from 'framework7-react';
import { withTranslation } from 'react-i18next';
import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
@inject("storeFocusObjects", "storeCellSettings", "storeTextSettings", "storeChartSettings")
@inject("storeFocusObjects", "storeCellSettings", "storeTextSettings", "storeChartSettings", "storeSpreadsheetSettings")
class MainController extends Component {
constructor(props) {
super(props)
@ -204,6 +204,7 @@ class MainController extends Component {
// me.api.asc_registerCallback('asc_onDocumentName', _.bind(me.onDocumentName, me));
me.api.asc_registerCallback('asc_onEndAction', me._onLongActionEnd.bind(me));
const storeSpreadsheetSettings = this.props.storeSpreadsheetSettings;
const storeFocusObjects = this.props.storeFocusObjects;
const storeCellSettings = this.props.storeCellSettings;
const storeTextSettings = this.props.storeTextSettings;
@ -251,6 +252,12 @@ class MainController extends Component {
Common.Utils.ThemeColor.setColors(colors, standart_colors);
});
// Spreadsheet Settings
this.api.asc_registerCallback('asc_onSendThemeColorSchemes', schemes => {
storeSpreadsheetSettings.addSchemes(schemes);
});
}
_onLongActionEnd(type, id) {

View file

@ -0,0 +1,116 @@
import React, {Component} from 'react';
import {SpreadsheetSettings} from '../../view/settings/SpreadsheetSettings';
import {observer, inject} from "mobx-react";
class SpreadsheetSettingsController extends Component {
constructor (props) {
super (props);
this.initSpreadsheetMargins = this.initSpreadsheetMargins.bind(this);
this.onFormatChange = this.onFormatChange.bind(this);
this.onPageMarginsChange = this.onPageMarginsChange.bind(this);
this.initSpreadsheetSettings();
}
initSpreadsheetSettings() {
const api = Common.EditorApi.get();
const params = api.asc_getSheetViewSettings();
const currentSheet = api.asc_getActiveWorksheetIndex();
const propsSheet = api.asc_getPageOptions(currentSheet);
const opt = propsSheet.asc_getPageSetup();
this.props.storeSpreadsheetSettings.changeHideHeadings(!params.asc_getShowRowColHeaders());
this.props.storeSpreadsheetSettings.changeHideGridlines(!params.asc_getShowGridLines());
this.props.storeSpreadsheetSettings.resetPortrait(opt.asc_getOrientation() === Asc.c_oAscPageOrientation.PagePortrait ? true : false);
this.props.storeSpreadsheetSettings.changeDocSize(opt.asc_getWidth(), opt.asc_getHeight());
}
initSpreadsheetMargins() {
const api = Common.EditorApi.get();
// Init page margins
let currentSheet = api.asc_getActiveWorksheetIndex(),
props = api.asc_getPageOptions(currentSheet);
this.localMarginProps = props.asc_getPageMargins();
let left = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getLeft()).toFixed(2)),
top = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getTop()).toFixed(2)),
right = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getRight()).toFixed(2)),
bottom = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getBottom()).toFixed(2));
return {left, top, right, bottom};
}
onPageMarginsChange(align, marginValue) {
const api = Common.EditorApi.get();
let changeProps = new Asc.asc_CPageMargins();
changeProps.asc_setTop(this.localMarginProps.asc_getTop());
changeProps.asc_setBottom(this.localMarginProps.asc_getBottom());
changeProps.asc_setLeft(this.localMarginProps.asc_getLeft());
changeProps.asc_setRight(this.localMarginProps.asc_getRight());
switch (align) {
case 'left': changeProps.asc_setLeft(marginValue); break;
case 'top': changeProps.asc_setTop(marginValue); break;
case 'right': changeProps.asc_setRight(marginValue); break;
case 'bottom': changeProps.asc_setBottom(marginValue); break;
}
api.asc_changePageMargins(changeProps.asc_getLeft(), changeProps.asc_getRight(), changeProps.asc_getTop(), changeProps.asc_getBottom(), api.asc_getActiveWorksheetIndex());
// this.initSpreadsheetMargins();
}
onOrientationChange(value) {
const api = Common.EditorApi.get();
api.asc_changePageOrient(+value === Asc.c_oAscPageOrientation.PagePortrait, api.asc_getActiveWorksheetIndex());
}
clickCheckboxHideHeadings(value) {
const api = Common.EditorApi.get();
api.asc_setDisplayHeadings(!value);
}
clickCheckboxHideGridlines(value) {
const api = Common.EditorApi.get();
api.asc_setDisplayGridlines(!value);
}
initPageColorSchemes() {
const api = Common.EditorApi.get();
return api.asc_GetCurrentColorSchemeIndex();
}
onColorSchemeChange(index) {
const api = Common.EditorApi.get();
api.asc_ChangeColorSchemeByIdx(+index);
}
onFormatChange(value) {
const api = Common.EditorApi.get();
api.asc_changeDocSize(parseFloat(value[0]), parseFloat(value[1]), api.asc_getActiveWorksheetIndex());
this.initSpreadsheetSettings();
}
render () {
return (
<SpreadsheetSettings
isPortrait={this.isPortrait}
isHideHeadings={this.isHideHeadings}
isHideGridlines={this.isHideGridlines}
onOrientationChange={this.onOrientationChange}
clickCheckboxHideHeadings={this.clickCheckboxHideHeadings}
clickCheckboxHideGridlines={this.clickCheckboxHideGridlines}
initPageColorSchemes={this.initPageColorSchemes}
onColorSchemeChange={this.onColorSchemeChange}
onFormatChange={this.onFormatChange}
initSpreadsheetMargins={this.initSpreadsheetMargins}
onPageMarginsChange={this.onPageMarginsChange}
/>
)
}
}
export default inject("storeSpreadsheetSettings")(observer(SpreadsheetSettingsController));

View file

@ -12,10 +12,11 @@ import {storeCellSettings} from "./cellSettings";
// import {storeImageSettings} from "./imageSettings";
// import {storeTableSettings} from "./tableSettings";
import {storeChartSettings} from "./chartSettings";
import {storeSpreadsheetSettings} from "./spreadsheetSettings";
export const stores = {
storeFocusObjects: new storeFocusObjects(),
// storeDocumentSettings: new storeDocumentSettings(),
storeSpreadsheetSettings: new storeSpreadsheetSettings(),
users: new storeUsers(),
sheets: new storeWorksheets(),
storeFunctions: new storeFunctions(),

View file

@ -0,0 +1,80 @@
import {action, observable, computed} from 'mobx';
export class storeSpreadsheetSettings {
@observable isPortrait = true;
@action resetPortrait (isPortrait) {
this.isPortrait = isPortrait === true;
}
// Spreadsheet Formats
@observable widthDocument;
@observable heightDocument;
@action changeDocSize (width, height) {
this.widthDocument = width;
this.heightDocument = height;
}
getPageSizesList () {
const txtCm = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.cm);
const pageSizes = [
{ caption: 'US Letter', subtitle: '21,59 ' + txtCm + ' x 27,94 ' + txtCm, value: [215.9, 279.4] },
{ caption: 'US Legal', subtitle: '21,59 ' + txtCm + ' x 35,56 ' + txtCm, value: [215.9, 355.6] },
{ caption: 'A4', subtitle: '21 ' + txtCm + ' x 29,7 ' + txtCm, value: [210, 297] },
{ caption: 'A5', subtitle: '14,8 ' + txtCm + ' x 21 ' + txtCm, value: [148, 210] },
{ caption: 'B5', subtitle: '17,6 ' + txtCm + ' x 25 ' + txtCm, value: [176, 250] },
{ caption: 'Envelope #10', subtitle: '10,48 ' + txtCm + ' x 24,13 ' + txtCm, value: [104.8, 241.3] },
{ caption: 'Envelope DL', subtitle: '11 ' + txtCm + ' x 22 ' + txtCm, value: [110, 220] },
{ caption: 'Tabloid', subtitle: '27,94 ' + txtCm + ' x 43,18 ' + txtCm, value: [279.4, 431.8] },
{ caption: 'A3', subtitle: '29,7 ' + txtCm + ' x 42 ' + txtCm, value: [297, 420] },
{ caption: 'Tabloid Oversize', subtitle: '30,48 ' + txtCm + ' x 45,71 ' + txtCm, value: [304.8, 457.1] },
{ caption: 'ROC 16K', subtitle: '19,68 ' + txtCm + ' x 27,3 ' + txtCm, value: [196.8, 273] },
{ caption: 'Envelope Choukei 3', subtitle: '11,99 ' + txtCm + ' x 23,49 ' + txtCm, value: [119.9, 234.9] },
{ caption: 'Super B/A3', subtitle: '33,02 ' + txtCm + ' x 48,25 ' + txtCm, value: [330.2, 482.5] },
{ caption: 'A0', subtitle: '84,1 ' + txtCm + ' x 118,9 ' + txtCm, value: [841, 1189] },
{ caption: 'A1', subtitle: '59,4 ' + txtCm + ' x 84,1 ' + txtCm, value: [594, 841] },
{ caption: 'A2', subtitle: '42 ' + txtCm + ' x 59,4 ' + txtCm, value: [420, 594] },
{ caption: 'A6', subtitle: '10,5 ' + txtCm + ' x 14,8 ' + txtCm, value: [105, 148] }
];
return pageSizes;
}
@computed get pageSizesIndex () {
let w = this.widthDocument;
let h = this.heightDocument;
let ind;
const pageSizes = this.getPageSizesList();
pageSizes.forEach(function callback(size, index) {
if (Math.abs(size.value[0] - w) < 0.1 && Math.abs(size.value[1] - h) < 0.1) {
ind = index;
}
}, this);
return ind;
}
// Color Schemes
@observable allSchemes;
@action addSchemes(arr) {
this.allSchemes = arr;
}
@observable isHideHeadings;
@observable isHideGridlines;
@action changeHideHeadings(value) {
this.isHideHeadings = value;
}
@action changeHideGridlines(value) {
this.isHideGridlines = value;
}
}

View file

@ -3,20 +3,30 @@ import {View,Page,Navbar,NavRight,Link,Popup,Popover,Icon,ListItem,List} from 'f
import { withTranslation } from 'react-i18next';
import {f7} from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device';
import SpreadsheetSettingsController from '../../controller/settings/SpreadsheetSettings.jsx';
import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from './SpreadsheetSettings.jsx';
const routes = [
{
path: '/',
component: 'TSettingsView'
},
/*{
path: '/presentation-settings/',
component: PresentationSettingsController,
{
path: '/spreadsheet-settings/',
component: SpreadsheetSettingsController,
},
{
path: "/presentation-info/",
component: PresentationInfoController,
}*/
path: "/color-schemes/",
component: SpreadsheetColorSchemes
},
{
path: '/spreadsheet-formats/',
component: SpreadsheetFormats
},
{
path: '/margins/',
component: SpreadsheetMargins
}
];
@ -38,12 +48,12 @@ const SettingsList = withTranslation()(props => {
{navbar}
<List>
{!props.inPopover &&
<ListItem title={_t.textFindAndReplace}>
<Icon slot="media" icon="icon-search"></Icon>
</ListItem>
<ListItem title={_t.textFindAndReplace}>
<Icon slot="media" icon="icon-search"></Icon>
</ListItem>
}
<ListItem link="#" title={_t.textPresentationSettings} onClick={onoptionclick.bind(this, '/presentation-settings/')}>
<Icon slot="media" icon="icon-setup"></Icon>
<ListItem link="#" title={_t.textSpreadsheetSettings} onClick={onoptionclick.bind(this, '/spreadsheet-settings/')}>
<Icon slot="media" icon="icon-table-settings"></Icon>
</ListItem>
<ListItem title={_t.textApplicationSettings} link="#">
<Icon slot="media" icon="icon-app-settings"></Icon>
@ -54,7 +64,7 @@ const SettingsList = withTranslation()(props => {
<ListItem title={_t.textPrint}>
<Icon slot="media" icon="icon-print"></Icon>
</ListItem>
<ListItem title={_t.textPresentationInfo} link="#" onClick={onoptionclick.bind(this, "/presentation-info/")}>
<ListItem title={_t.textSpreadsheetInfo} link="#" onClick={onoptionclick.bind(this, "/spreadsheet-info/")}>
<Icon slot="media" icon="icon-info"></Icon>
</ListItem>
<ListItem title={_t.textHelp} link="#">

View file

@ -0,0 +1,270 @@
import React, {useState} from 'react';
import {observer, inject} from "mobx-react";
import {Page, Navbar, List, ListItem, BlockTitle, Segmented, Button, Icon, Toggle} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
const PageSpreadsheetColorSchemes = props => {
const { t } = useTranslation();
const curScheme = props.initPageColorSchemes();
const [stateScheme, setScheme] = useState(curScheme);
const _t = t('View.Settings', {returnObjects: true});
const storeSpreadsheetSettings = props.storeSpreadsheetSettings;
const allSchemes = storeSpreadsheetSettings.allSchemes;
return (
<Page>
<Navbar title={_t.textColorSchemes} backLink={_t.textBack} />
<List>
{
allSchemes ? allSchemes.map((scheme, index) => {
return (
<ListItem radio={true} className="color-schemes-menu" key={index} title={scheme.get_name()} checked={stateScheme === index}
onChange={() => {
if(index !== curScheme) {
setScheme(index);
props.onColorSchemeChange(index);
};
}}>
<div slot="before-title">
<span className="color-schema-block">
{
scheme.get_colors().map((elem, index) => {
if(index >=2 && index < 7) {
let clr = {background: "#" + Common.Utils.ThemeColor.getHexColor(elem.get_r(), elem.get_g(), elem.get_b())};
return (
<span className="color" key={index} style={clr}></span>
)
}
})
}
</span>
</div>
</ListItem>
)
}) : null
}
</List>
</Page>
)
};
const PageSpreadsheetFormats = props => {
const { t } = useTranslation();
const _t = t('View.Settings', {returnObjects: true});
const storeSpreadsheetSettings = props.storeSpreadsheetSettings;
const pageSizesIndex = storeSpreadsheetSettings.pageSizesIndex;
const pageSizes = storeSpreadsheetSettings.getPageSizesList();
const textMetric = Common.Utils.Metric.getCurrentMetricName();
return (
<Page>
<Navbar title={_t.textSpreadsheetFormats} backLink={_t.textBack} />
<List mediaList>
{pageSizes.map((item, index) => (
<ListItem
key={index}
radio
title={item.caption}
subtitle={parseFloat(Common.Utils.Metric.fnRecalcFromMM(item.value[0]).toFixed(2)) + ' ' + textMetric + ' x ' + parseFloat(Common.Utils.Metric.fnRecalcFromMM(item.value[1]).toFixed(2)) + ' ' + textMetric}
name="format-size-checkbox"
checked={pageSizesIndex === index}
onClick={e => {props.onFormatChange(item.value)}}>
</ListItem>
))}
</List>
</Page>
)
};
const PageSpreadsheetMargins = props => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('View.Settings', {returnObjects: true});
const metricText = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric());
const margins = props.initSpreadsheetMargins();
console.log(margins);
const [stateTop, setTop] = useState(margins.top);
const [stateBottom, setBottom] = useState(margins.bottom);
const [stateLeft, setLeft] = useState(margins.left);
const [stateRight, setRight] = useState(margins.right);
const onChangeMargins = (align, isDecrement) => {
let step = Common.Utils.Metric.getCurrentMetric() == Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.1;
step = Common.Utils.Metric.fnRecalcToMM(step);
let marginValue,
maxMarginsH = 482.5,
maxMarginsW = 482.5;
switch (align) {
case 'left': marginValue = stateLeft; break;
case 'top': marginValue = stateTop; break;
case 'right': marginValue = stateRight; break;
case 'bottom': marginValue = stateBottom; break;
}
if (isDecrement) {
marginValue = Math.max(0, marginValue - step);
} else {
marginValue = Math.min((align == 'left' || align == 'right') ? maxMarginsW : maxMarginsH, marginValue + step);
}
switch (align) {
case 'left': setLeft(marginValue); break;
case 'top': setTop(marginValue); break;
case 'right': setRight(marginValue); break;
case 'bottom': setBottom(marginValue); break;
}
props.onPageMarginsChange(align, marginValue);
};
return (
<Page>
<Navbar title={_t.textMargins} backLink={_t.textBack} />
<List>
<ListItem title={_t.textTop}>
{!isAndroid && <div slot='after-start'>{parseFloat(stateTop.toFixed(2)) + ' ' + metricText}</div>}
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('top', true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{parseFloat(stateTop.toFixed(2)) + ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {onChangeMargins('top', false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented>
</div>
</ListItem>
<ListItem title={_t.textBottom}>
{!isAndroid && <div slot='after-start'>{parseFloat(stateBottom.toFixed(2)) + ' ' + metricText}</div>}
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('bottom', true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{parseFloat(stateBottom.toFixed(2)) + ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {onChangeMargins('bottom', false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented>
</div>
</ListItem>
<ListItem title={_t.textLeft}>
{!isAndroid && <div slot='after-start'>{parseFloat(stateLeft.toFixed(2)) + ' ' + metricText}</div>}
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('left', true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{parseFloat(stateLeft.toFixed(2)) + ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {onChangeMargins('left', false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented>
</div>
</ListItem>
<ListItem title={_t.textRight}>
{!isAndroid && <div slot='after-start'>{parseFloat(stateRight.toFixed(2)) + ' ' + metricText}</div>}
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('right', true)}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button>
{isAndroid && <label>{parseFloat(stateRight.toFixed(2)) + ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {onChangeMargins('right', false)}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button>
</Segmented>
</div>
</ListItem>
</List>
</Page>
)
};
const PageSpreadsheetSettings = props => {
const { t } = useTranslation();
const _t = t('View.Settings', {returnObjects: true});
const storeSpreadsheetSettings = props.storeSpreadsheetSettings;
const isPortrait = storeSpreadsheetSettings.isPortrait;
const isHideHeadings = storeSpreadsheetSettings.isHideHeadings;
const isHideGridlines = storeSpreadsheetSettings.isHideGridlines;
// Init Format
const curMetricName = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric());
const pageSizesIndex = storeSpreadsheetSettings.pageSizesIndex;
const pageSizes = storeSpreadsheetSettings.getPageSizesList();
const textFormat = pageSizes[pageSizesIndex]['caption'];
const sizeW = parseFloat(Common.Utils.Metric.fnRecalcFromMM(pageSizes[pageSizesIndex]['value'][0]).toFixed(2));
const sizeH = parseFloat(Common.Utils.Metric.fnRecalcFromMM(pageSizes[pageSizesIndex]['value'][1]).toFixed(2));
const pageSizeTxt = sizeW + ' ' + curMetricName + ' x ' + sizeH + ' ' + curMetricName;
return (
<Page>
<Navbar title={_t.textSpreadsheetSettings} backLink={_t.textBack} />
<BlockTitle>{_t.textOrientation}</BlockTitle>
<List>
<ListItem radio title={_t.textPortrait} name="orientation-checkbox" checked={isPortrait} onClick={() => {
storeSpreadsheetSettings.resetPortrait(true);
props.onOrientationChange(0)}}>
</ListItem>
<ListItem radio title={_t.textLandscape} name="orientation-checkbox" checked={!isPortrait} onClick={() => {
storeSpreadsheetSettings.resetPortrait(false);
props.onOrientationChange(1)}}>
</ListItem>
</List>
<BlockTitle>{_t.textFormat}</BlockTitle>
<List mediaList>
<ListItem title={textFormat} subtitle={pageSizeTxt} link="/spreadsheet-formats/" routeProps={{
onFormatChange: props.onFormatChange
}}></ListItem>
<ListItem title={_t.textMargins} link="/margins/" routeProps={{
initSpreadsheetMargins: props.initSpreadsheetMargins,
onPageMarginsChange: props.onPageMarginsChange
}}></ListItem>
</List>
<List simpleList>
<ListItem>
<span>{_t.textHideHeadings}</span>
<Toggle checked={isHideHeadings} onChange={() => {
storeSpreadsheetSettings.changeHideHeadings(!isHideHeadings);
props.clickCheckboxHideHeadings(!isHideHeadings)
}} />
</ListItem>
<ListItem>
<span>{_t.textHideGridlines}</span>
<Toggle checked={isHideGridlines} onChange={() => {
storeSpreadsheetSettings.changeHideGridlines(!isHideGridlines);
props.clickCheckboxHideGridlines(!isHideGridlines)
}} />
</ListItem>
</List>
<List>
<ListItem title={_t.textColorSchemes} link="/color-schemes/" routeProps={{
onColorSchemeChange: props.onColorSchemeChange,
initPageColorSchemes: props.initPageColorSchemes
}}></ListItem>
</List>
</Page>
)
};
const SpreadsheetFormats = inject("storeSpreadsheetSettings")(observer(PageSpreadsheetFormats));
const SpreadsheetMargins = inject("storeSpreadsheetSettings")(observer(PageSpreadsheetMargins));
const SpreadsheetSettings = inject("storeSpreadsheetSettings")(observer(PageSpreadsheetSettings));
const SpreadsheetColorSchemes = inject("storeSpreadsheetSettings")(observer(PageSpreadsheetColorSchemes));
export {
SpreadsheetSettings,
SpreadsheetFormats,
SpreadsheetMargins,
SpreadsheetColorSchemes
};