| | |
| | | sx={{ |
| | | display: 'flex', |
| | | alignItems: 'center', |
| | | backgroundColor: '#f5f5f5', |
| | | color: '#000', |
| | | backgroundColor: theme.palette.background.default, |
| | | color: theme.palette.text.primary, |
| | | padding: '0 16px', |
| | | height: '64px', |
| | | flexShrink: 0, // keep height |
| | | zIndex: 200, |
| | | boxShadow: theme.shadows[1], |
| | | }} |
| | | > |
| | | <TextField |
| | |
| | | placeholder="搜索..." |
| | | sx={{ |
| | | width: '200px', |
| | | backgroundColor: '#fff', |
| | | backgroundColor: theme.palette.background.paper, |
| | | borderRadius: 1, |
| | | }} |
| | | /> |
| | |
| | | size="small" |
| | | sx={{ |
| | | ml: 2, |
| | | backgroundColor: '#fff', |
| | | backgroundColor: theme.palette.background.paper, |
| | | color: theme.palette.text.primary, |
| | | borderRadius: 1, |
| | | }} |
| | | > |
| | |
| | | }}> |
| | | <Stack direction="row" p={2}> |
| | | <Typography variant="h6" flex="1"> |
| | | {batchSprites?.length || 0} items {translate('common.action.selected')} |
| | | {batchSprites?.length || 0} {translate('common.action.selected')} |
| | | </Typography> |
| | | <IconButton onClick={handleClose} size="small"> |
| | | <CloseIcon /> |
| | |
| | | } |
| | | |
| | | showCoordinates = () => { |
| | | const coordinatesText = new PIXI.Text('{ x: 0, y: 0 }', { |
| | | fill: this.themeMode === 'dark' ? 0xffffff : 0x000000, |
| | | this.coordinatesText = new PIXI.Text('{ x: 0, y: 0 }', { |
| | | fill: this.themeMode === 'dark' ? 0xdddddd : 0x333333, |
| | | fontSize: 13, |
| | | fontFamily: 'MicrosoftYaHei', |
| | | fontWeight: 'bold', |
| | | }); |
| | | coordinatesText.name = 'xyStr' |
| | | coordinatesText.position.set(10, 10); |
| | | this.app.stage.addChild(coordinatesText); |
| | | this.coordinatesText.name = 'xyStr' |
| | | this.coordinatesText.position.set(10, 10); |
| | | this.app.stage.addChild(this.coordinatesText); |
| | | |
| | | const mouseMoveInfoTextHandler = (event) => { |
| | | const mouseX = (event.clientX - this.mapContainer.position.x) / this.scale; |
| | | const mouseY = (event.clientY - this.mapContainer.position.y) / this.scale; |
| | | coordinatesText.text = `{ x: ${mouseX.toFixed(2)}, y: ${mouseY.toFixed(2)} }`; |
| | | this.coordinatesText.text = `{ x: ${mouseX.toFixed(2)}, y: ${mouseY.toFixed(2)} }`; |
| | | }; |
| | | this.app.view.addEventListener('mousemove', mouseMoveInfoTextHandler); |
| | | } |
| | |
| | | } |
| | | |
| | | setTheme = (themeMode) => { |
| | | this.app.renderer.background.color = themeMode === 'dark' ? 0x2f3542 : 0xf1f2f6; |
| | | this.app.renderer.background.color = themeMode === 'dark' ? '#3a3f44' : '#f1f2f6'; |
| | | if (this.coordinatesText) { |
| | | this.coordinatesText.style.fill = themeMode === 'dark' ? 0xdddddd : 0x333333; |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | const generateApp = (dom, themeMode) => { |
| | | const app = new PIXI.Application({ |
| | | background: themeMode === 'dark' ? '#2f3542' : '#f1f2f6', |
| | | background: themeMode === 'dark' ? '#3b4148' : '#f1f2f6', |
| | | antialias: true, |
| | | // resizeTo: dom, |
| | | }) |