| | |
| | | window.removeEventListener('resize', handleResize); |
| | | Tool.patchRaLayout(''); |
| | | }; |
| | | }, []) |
| | | |
| | | useEffect(() => { |
| | | player.setTheme(themeMode); |
| | | Tool.setThemeMode(themeMode); |
| | | }, [themeMode]) |
| | | |
| | | const switchMode = (mode) => { |
| | |
| | | this.app.destroy(true, { children: true }); |
| | | } |
| | | |
| | | setTheme = (themeMode) => { |
| | | this.app.renderer.background.color = themeMode === 'dark' ? 0x2f3542 : 0xf1f2f6; |
| | | } |
| | | |
| | | } |
| | | |
| | | const generateApp = (dom, themeMode) => { |
| | |
| | | Grid, |
| | | Typography, |
| | | TextField, |
| | | Slider, |
| | | Card, |
| | | CardContent, |
| | | Button, |
| | | Select, |
| | | MenuItem, |
| | | InputLabel, |
| | | useTheme, |
| | | FormControl, |
| | | Stack, |
| | | Divider, |
| | |
| | | const { open, onCancel, sprite, value, width = PAGE_DRAWER_WIDTH, handleOnCopy } = props; |
| | | const notify = useNotification(); |
| | | const translate = useTranslate(); |
| | | const theme = useTheme(); |
| | | const themeMode = theme.palette.mode; |
| | | |
| | | const deviceType = sprite?.data?.type; |
| | | const incrementOptions = incrementOptionsMap[deviceType] |
| | | |
| | |
| | | </Stack> |
| | | |
| | | <Box p={3}> |
| | | <Box component="form" onSubmit={handleSubmit(onFormSubmit)} noValidate sx={{ mt: 0 }}> |
| | | <Grid container spacing={1.4}> |
| | | <Grid item xs={6}> |
| | | <Controller |
| | | name="copyDirect" |
| | | control={control} |
| | | render={({ field }) => ( |
| | | <TextField |
| | | {...field} |
| | | label={translate('page.map.settings.map.copy.direction')} |
| | | InputProps={{ |
| | | readOnly: true, |
| | | }} |
| | | fullWidth |
| | | /> |
| | | )} |
| | | /> |
| | | </Grid> |
| | | <Grid item xs={6}> |
| | | <Controller |
| | | name="copyCount" |
| | | control={control} |
| | | render={({ field }) => ( |
| | | <TextField |
| | | {...field} |
| | | label={translate('page.map.settings.map.copy.count')} |
| | | InputProps={{ |
| | | readOnly: true, |
| | | }} |
| | | fullWidth |
| | | /> |
| | | )} |
| | | /> |
| | | </Grid> |
| | | |
| | | <Grid item xs={12}> |
| | | <Controller |
| | | name="gap" |
| | | control={control} |
| | | render={({ field }) => ( |
| | | <TextField |
| | | {...field} |
| | | label={translate('page.map.settings.map.copy.field.gap')} |
| | | type="number" |
| | | sx={{ width: '50%' }} |
| | | fullWidth |
| | | inputProps={{ |
| | | min: 0, |
| | | step: 1, |
| | | }} |
| | | /> |
| | | )} |
| | | /> |
| | | </Grid> |
| | | |
| | | <Grid item xs={12} mt={2} mb={1}> |
| | | <Divider /> |
| | | </Grid> |
| | | |
| | | <Grid item xs={12}> |
| | | <Controller |
| | | name="autoIncrement" |
| | | control={control} |
| | | rules={{ validate: (value) => validateIncrement(value, deviceType, sprite, translate) }} |
| | | render={({ field }) => ( |
| | | <FormControlLabel |
| | | control={ |
| | | <Switch |
| | | <Card sx={{ |
| | | p: 2, |
| | | transition: '0.3s', |
| | | boxShadow: themeMode === 'light' |
| | | ? '0px 2px 8px rgba(0, 0, 0, 0.1)' |
| | | : '0px 2px 2px rgba(255, 255, 255, 0.1)', |
| | | '&:hover': { |
| | | boxShadow: themeMode === 'light' |
| | | ? '0px 4px 16px rgba(0, 0, 0, 0.2)' |
| | | : '0px 4px 8px rgba(255, 255, 255, 0.2)', |
| | | }, |
| | | borderRadius: '8px', |
| | | }}> |
| | | <CardContent> |
| | | <Box component="form" onSubmit={handleSubmit(onFormSubmit)} noValidate sx={{ mt: 0 }}> |
| | | <Grid container spacing={1.4}> |
| | | <Grid item xs={6}> |
| | | <Controller |
| | | name="copyDirect" |
| | | control={control} |
| | | render={({ field }) => ( |
| | | <TextField |
| | | {...field} |
| | | checked={field.value || false} |
| | | onChange={(e) => field.onChange(e.target.checked)} |
| | | label={translate('page.map.settings.map.copy.direction')} |
| | | InputProps={{ |
| | | readOnly: true, |
| | | }} |
| | | fullWidth |
| | | /> |
| | | } |
| | | label={translate('page.map.settings.map.copy.field.autoIncrement')} |
| | | )} |
| | | /> |
| | | </Grid> |
| | | <Grid item xs={6}> |
| | | <Controller |
| | | name="copyCount" |
| | | control={control} |
| | | render={({ field }) => ( |
| | | <TextField |
| | | {...field} |
| | | label={translate('page.map.settings.map.copy.count')} |
| | | InputProps={{ |
| | | readOnly: true, |
| | | }} |
| | | fullWidth |
| | | /> |
| | | )} |
| | | /> |
| | | </Grid> |
| | | |
| | | <Grid item xs={12}> |
| | | <Controller |
| | | name="gap" |
| | | control={control} |
| | | render={({ field }) => ( |
| | | <TextField |
| | | {...field} |
| | | label={translate('page.map.settings.map.copy.field.gap')} |
| | | type="number" |
| | | sx={{ width: '50%' }} |
| | | fullWidth |
| | | inputProps={{ |
| | | min: 0, |
| | | step: 1, |
| | | }} |
| | | /> |
| | | )} |
| | | /> |
| | | </Grid> |
| | | |
| | | <Grid item xs={12} mt={2} mb={1}> |
| | | <Divider /> |
| | | </Grid> |
| | | |
| | | <Grid item xs={12}> |
| | | <Controller |
| | | name="autoIncrement" |
| | | control={control} |
| | | rules={{ validate: (value) => validateIncrement(value, deviceType, sprite, translate) }} |
| | | render={({ field }) => ( |
| | | <FormControlLabel |
| | | control={ |
| | | <Switch |
| | | {...field} |
| | | checked={field.value || false} |
| | | onChange={(e) => field.onChange(e.target.checked)} |
| | | /> |
| | | } |
| | | label={translate('page.map.settings.map.copy.field.autoIncrement')} |
| | | /> |
| | | )} |
| | | /> |
| | | {errors.autoIncrement && ( |
| | | <Typography color="error"> |
| | | {errors.autoIncrement.message} |
| | | </Typography> |
| | | )} |
| | | </Grid> |
| | | |
| | | {(!!incrementOptions?.length && autoIncrement) && ( |
| | | <Grid item xs={12}> |
| | | <FormControl fullWidth> |
| | | <FormLabel sx={{ mb: 1 }}> |
| | | {translate('page.map.settings.map.copy.field.incrementValue')} |
| | | </FormLabel> |
| | | <Controller |
| | | name='incrementValue' |
| | | control={control} |
| | | render={({ field }) => ( |
| | | <ToggleButtonGroup |
| | | {...field} |
| | | value={field.value} |
| | | exclusive |
| | | onChange={(event, value) => { |
| | | if (value !== null) { |
| | | field.onChange(value); |
| | | } |
| | | }} |
| | | fullWidth |
| | | > |
| | | {incrementOptions.map((option, idx) => ( |
| | | <ToggleButton key={idx} value={option.value}> |
| | | {translate(option.label)} |
| | | </ToggleButton> |
| | | ))} |
| | | </ToggleButtonGroup> |
| | | )} |
| | | /> |
| | | </FormControl> |
| | | </Grid> |
| | | )} |
| | | /> |
| | | {errors.autoIncrement && ( |
| | | <Typography color="error"> |
| | | {errors.autoIncrement.message} |
| | | </Typography> |
| | | )} |
| | | </Grid> |
| | | |
| | | {(!!incrementOptions?.length && autoIncrement) && ( |
| | | <Grid item xs={12}> |
| | | <FormControl fullWidth> |
| | | <FormLabel sx={{ mb: 1 }}> |
| | | {translate('page.map.settings.map.copy.field.incrementValue')} |
| | | </FormLabel> |
| | | <Controller |
| | | name='incrementValue' |
| | | control={control} |
| | | render={({ field }) => ( |
| | | <ToggleButtonGroup |
| | | {...field} |
| | | value={field.value} |
| | | exclusive |
| | | onChange={(event, value) => { |
| | | if (value !== null) { |
| | | field.onChange(value); |
| | | } |
| | | }} |
| | | fullWidth |
| | | > |
| | | {incrementOptions.map((option, idx) => ( |
| | | <ToggleButton key={idx} value={option.value}> |
| | | {translate(option.label)} |
| | | </ToggleButton> |
| | | ))} |
| | | </ToggleButtonGroup> |
| | | )} |
| | | /> |
| | | </FormControl> |
| | | {autoIncrement && ( |
| | | <Grid item xs={12}> |
| | | <FormControl fullWidth> |
| | | <FormLabel sx={{ |
| | | mb: 1 |
| | | }}> |
| | | {translate('page.map.settings.map.copy.field.incrementMode')} |
| | | </FormLabel> |
| | | <Controller |
| | | name="incrementMode" |
| | | control={control} |
| | | render={({ field }) => ( |
| | | <ToggleButtonGroup |
| | | {...field} |
| | | value={field.value} |
| | | exclusive |
| | | onChange={(event, value) => { |
| | | if (value !== null) { |
| | | field.onChange(value); |
| | | } |
| | | }} |
| | | fullWidth |
| | | > |
| | | <ToggleButton value="ascending"> |
| | | {translate('page.map.settings.map.copy.field.ascend')} |
| | | </ToggleButton> |
| | | <ToggleButton value="descending"> |
| | | {translate('page.map.settings.map.copy.field.descend')} |
| | | </ToggleButton> |
| | | </ToggleButtonGroup> |
| | | )} |
| | | /> |
| | | </FormControl> |
| | | </Grid> |
| | | )} |
| | | |
| | | <Grid item xs={12} mt={2}> |
| | | <Divider /> |
| | | </Grid> |
| | | |
| | | <Grid item xs={12} mt={2}> |
| | | <Stack direction="row" spacing={2}> |
| | | <Button variant="contained" color="primary" type="submit"> |
| | | {translate('ra.action.confirm')} |
| | | </Button> |
| | | </Stack> |
| | | </Grid> |
| | | |
| | | </Grid> |
| | | )} |
| | | |
| | | {autoIncrement && ( |
| | | <Grid item xs={12}> |
| | | <FormControl fullWidth> |
| | | <FormLabel sx={{ |
| | | mb: 1 |
| | | }}> |
| | | {translate('page.map.settings.map.copy.field.incrementMode')} |
| | | </FormLabel> |
| | | <Controller |
| | | name="incrementMode" |
| | | control={control} |
| | | render={({ field }) => ( |
| | | <ToggleButtonGroup |
| | | {...field} |
| | | value={field.value} |
| | | exclusive |
| | | onChange={(event, value) => { |
| | | if (value !== null) { |
| | | field.onChange(value); |
| | | } |
| | | }} |
| | | fullWidth |
| | | > |
| | | <ToggleButton value="ascending"> |
| | | {translate('page.map.settings.map.copy.field.ascend')} |
| | | </ToggleButton> |
| | | <ToggleButton value="descending"> |
| | | {translate('page.map.settings.map.copy.field.descend')} |
| | | </ToggleButton> |
| | | </ToggleButtonGroup> |
| | | )} |
| | | /> |
| | | </FormControl> |
| | | </Grid> |
| | | )} |
| | | |
| | | <Grid item xs={12} mt={2}> |
| | | <Divider /> |
| | | </Grid> |
| | | |
| | | <Grid item xs={12} mt={2}> |
| | | <Stack direction="row" spacing={2}> |
| | | <Button variant="contained" color="primary" type="submit"> |
| | | {translate('ra.action.confirm')} |
| | | </Button> |
| | | </Stack> |
| | | </Grid> |
| | | |
| | | </Grid> |
| | | </Box> |
| | | </Box> |
| | | </CardContent> |
| | | </Card> |
| | | </Box> |
| | | </Box> |
| | | )} |
| | |
| | | |
| | | const { control, handleSubmit, reset, watch } = useForm({ |
| | | defaultValues: { |
| | | x: sprite?.position.x || 0, |
| | | y: sprite?.position.y || 0, |
| | | scaleX: sprite?.scale.x || 1, |
| | | scaleY: sprite?.scale.y || 1, |
| | | x: sprite?.position?.x || 0, |
| | | y: sprite?.position?.y || 0, |
| | | scaleX: sprite?.scale?.x || 1, |
| | | scaleY: sprite?.scale?.y || 1, |
| | | rotation: (sprite?.rotation * 180) / Math.PI || 0, |
| | | copyDirection: 'right', |
| | | copyCount: 1, |
| | |
| | | import React, { useState, useRef, useEffect } from 'react'; |
| | | import { useTranslate } from "react-admin"; |
| | | import { Drawer, Box, Typography, Tabs, Tab, IconButton, Stack, useTheme, Card, CardContent, CardHeader, Divider } from '@mui/material'; |
| | | import { Drawer, Box, Typography, Tabs, Tab, IconButton, Stack, useTheme, Card, CardContent, Divider } from '@mui/material'; |
| | | import CloseIcon from '@mui/icons-material/Close'; |
| | | import { PAGE_DRAWER_WIDTH } from '@/config/setting'; |
| | | import MapSettings from './MapSettings'; |
| | |
| | | <Box p={3}> |
| | | <Card sx={{ |
| | | transition: '0.3s', |
| | | boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.1)', |
| | | boxShadow: themeMode === 'light' |
| | | ? '0px 2px 8px rgba(0, 0, 0, 0.1)' |
| | | : '0px 2px 2px rgba(255, 255, 255, 0.1)', |
| | | '&:hover': { |
| | | boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2)', |
| | | boxShadow: themeMode === 'light' |
| | | ? '0px 4px 16px rgba(0, 0, 0, 0.2)' |
| | | : '0px 4px 8px rgba(255, 255, 255, 0.2)', |
| | | }, |
| | | borderRadius: '8px', |
| | | }}> |