+
)}
diff --git a/src/components/Playground/CodeEditor/FileSelector/file-selector.scss b/src/components/Playground/CodeEditor/FileSelector/file-selector.scss
deleted file mode 100644
index a1a0ecd..0000000
--- a/src/components/Playground/CodeEditor/FileSelector/file-selector.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-[data-component=playground-file-selector].tab{
- display: flex;
- flex: 0 0 auto;
- height: 40px;
-
- .multiple {
- flex: 1;
- width: 0;
-
- .tab-content {
- height: 40px;
- align-items: flex-end;
- gap: 2px;
- margin-left: 10px;
-
- .tab-item-add {
- padding: 0 12px;
- }
-
- .tabs-margin-right {
- height: 100%;
-
- > * {
- height: 100%;
- width: 10px;
- }
- }
- }
- }
-
- .sticky {
- display: flex;
- flex: 0 0 auto;
- align-items: flex-end;
- margin-right: 10px;
- }
-
- .tab-item {
- display: flex;
- align-items: center;
- justify-content: center;
- flex: 0 0 auto;
- height: 30px;
- padding: 0 20px;
- border: 1px solid #f0f0f0;
- background-color: rgba(0, 0, 0, 0.04);
- border-radius: 6px 6px 0 0;
- cursor: pointer;
-
- .tab-item-input {
- position: relative;
- min-width: 40px;
- transform: translateY(1px);
-
- .tab-item-input-mask {
- display: inline-block;
- color: transparent;
- }
- input {
- position: absolute;
- background-color: transparent;
- width: 100%;
- font-size: 1em;
- }
- }
-
- .tab-item-close {
- transform: translateX(10px);
-
- :hover {
- fill: #888;
- }
-
- svg {
- height: 8px;
- fill: #666;
- }
- }
-
- &.active {
- background-color: white;
- border-bottom: none;
- }
- }
-
-}
\ No newline at end of file
diff --git a/src/components/Playground/CodeEditor/FileSelector/index.style.ts b/src/components/Playground/CodeEditor/FileSelector/index.style.ts
new file mode 100644
index 0000000..d19ffb5
--- /dev/null
+++ b/src/components/Playground/CodeEditor/FileSelector/index.style.ts
@@ -0,0 +1,41 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(() => ({
+ root: {
+ display: 'flex',
+ flex: '0 0 auto',
+ height: 40
+ },
+
+ multiple: {
+ flex: 1,
+ width: 0
+ },
+
+ tabContent: {
+ height: 40,
+ alignItems: 'flex-end',
+ gap: 2,
+ marginLeft: 10
+ },
+
+ tabItemAdd: {
+ padding: '0 12px'
+ },
+
+ tabsMarginRight: {
+ height: '100%',
+
+ '> *': {
+ height: '100%',
+ width: 10
+ }
+ },
+
+ sticky: {
+ display: 'flex',
+ flex: '0 0 auto',
+ alignItems: 'flex-end',
+ marginRight: 10
+ }
+}))
diff --git a/src/components/Playground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx
index ffe35b0..661ad06 100644
--- a/src/components/Playground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx
@@ -1,4 +1,4 @@
-import '@/components/Playground/CodeEditor/FileSelector/file-selector.scss'
+import useStyles from '@/components/Playground/CodeEditor/FileSelector/index.style'
import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
import { IFiles } from '@/components/Playground/shared'
@@ -32,6 +32,7 @@ const FileSelector = ({
onUpdateFileName,
selectedFileName = ''
}: FileSelectorProps) => {
+ const { styles } = useStyles()
const hideScrollbarRef = useRef
(null)
const [tabs, setTabs] = useState([])
const [isCreating, setIsCreating] = useState(false)
@@ -164,8 +165,8 @@ const FileSelector = ({
return (
<>
-
-
+
+
-
+
{tabs.map((item, index) => (
+
{files[TS_CONFIG_FILE_NAME] && (
- ({
+ root: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ flex: '0 0 auto',
+ height: 30,
+ padding: '0 20px',
+ color: token.colorText,
+ border: `1px solid ${token.colorBorder}`,
+ backgroundColor: token.colorBgLayout,
+ borderRadius: '6px 6px 0 0',
+ cursor: 'pointer'
+ },
+
+ active: {
+ backgroundColor: token.colorBgElevated,
+ borderBottom: 'none'
+ },
+
+ tabItemInput: {
+ position: 'relative',
+ minWidth: 40,
+ transform: 'translateY(1px)',
+
+ input: {
+ position: 'absolute',
+ backgroundColor: 'transparent',
+ width: '100%',
+ color: token.colorText,
+ fontSize: token.fontSizeSM
+ }
+ },
+
+ tabItemInputMask: {
+ display: 'inline-block',
+ color: 'transparent'
+ },
+
+ tabItemClose: {
+ transform: 'translateX(10px)',
+
+ svg: {
+ height: token.sizeXS,
+ fill: token.colorTextSecondary
+ },
+
+ '>:hover': {
+ fill: token.colorTextDescription
+ }
+ }
+}))
diff --git a/src/components/Playground/CodeEditor/code-editor.scss b/src/components/Playground/CodeEditor/code-editor.scss
deleted file mode 100644
index 3887677..0000000
--- a/src/components/Playground/CodeEditor/code-editor.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-[data-component=playground-code-editor] {
- position: relative;
- width: 100%;
- height: 100%;
-}
\ No newline at end of file
diff --git a/src/components/Playground/CodeEditor/index.style.ts b/src/components/Playground/CodeEditor/index.style.ts
new file mode 100644
index 0000000..8635be8
--- /dev/null
+++ b/src/components/Playground/CodeEditor/index.style.ts
@@ -0,0 +1,18 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+ root: {
+ position: 'relative',
+ height: '100%'
+ },
+
+ errorMessage: {
+ position: 'absolute',
+ bottom: 0,
+ width: '100%',
+ color: token.colorErrorText,
+ backgroundColor: token.colorErrorBg,
+ padding: '5px 10px',
+ fontSize: token.fontSize
+ }
+}))
diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
index b2d70d6..fb32d59 100644
--- a/src/components/Playground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -1,7 +1,9 @@
+import { Monaco } from '@monaco-editor/react'
+import { editor } from 'monaco-editor'
import _ from 'lodash'
-import '@/components/Playground/CodeEditor/code-editor.scss'
+import useStyles from '@/components/Playground/CodeEditor/index.style'
import FlexBox from '@/components/common/FlexBox'
-import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
+import { IEditorOptions, IFiles, ITsconfig } from '@/components/Playground/shared'
import {
fileNameToLanguage,
getFileNameList,
@@ -9,10 +11,10 @@ import {
TS_CONFIG_FILE_NAME
} from '@/components/Playground/files'
import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
-import Editor from '@/components/Playground/CodeEditor/Editor'
+import Editor, { ExtraLib } from '@/components/Playground/CodeEditor/Editor'
interface CodeEditorProps {
- theme?: ITheme
+ isDarkMode?: boolean
showFileSelector?: boolean
tsconfig?: ITsconfig
files: IFiles
@@ -21,6 +23,8 @@ interface CodeEditorProps {
notRemovable?: string[]
selectedFileName?: string
options?: IEditorOptions
+ extraLibs?: ExtraLib[]
+ onEditorDidMount?: (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void
onSelectedFileChange?: (fileName: string) => void
onAddFile?: (fileName: string, files: IFiles) => void
onRemoveFile?: (fileName: string, files: IFiles) => void
@@ -30,7 +34,7 @@ interface CodeEditorProps {
}
const CodeEditor = ({
- theme,
+ isDarkMode,
showFileSelector = true,
tsconfig,
files,
@@ -44,8 +48,11 @@ const CodeEditor = ({
onRenameFile,
onChangeFileContent,
onError,
+ extraLibs,
+ onEditorDidMount,
...props
}: CodeEditorProps) => {
+ const { styles } = useStyles()
const filteredFilesName = getFileNameList(files).filter(
(item) => ![IMPORT_MAP_FILE_NAME, TS_CONFIG_FILE_NAME].includes(item) && !files[item].hidden
)
@@ -120,7 +127,7 @@ const CodeEditor = ({
return (
<>
-
+
{showFileSelector && (
)}
- {errorMsg &&
{errorMsg}
}
+ {errorMsg && {errorMsg}
}
)
diff --git a/src/components/Playground/Output/Preview/Render.tsx b/src/components/Playground/Output/Preview/Render.tsx
index e8f7d65..27e079c 100644
--- a/src/components/Playground/Output/Preview/Render.tsx
+++ b/src/components/Playground/Output/Preview/Render.tsx
@@ -1,247 +1,148 @@
-import { ChangeEvent } from 'react'
-import '@/components/Playground/Output/Preview/render.scss'
-import { COLOR_FONT_MAIN } from '@/constants/common.constants'
+import Icon from '@ant-design/icons'
+import { Background, Controls, MiniMap, Node, Panel, ReactFlow } from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+import { AppContext } from '@/App'
+import useStyles from '@/components/Playground/Output/Preview/render.style'
import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
-import HideScrollbar from '@/components/common/HideScrollbar'
+import devices, { DeviceName } from '@/components/Playground/Output/Preview/devices'
+import Simulation, { SimulationData } from '@/components/Playground/Output/Preview/Simulation'
interface RenderProps {
iframeKey: string
compiledCode: string
mobileMode?: boolean
+ globalJsVariables?: Record
+ globalCssVariables?: string
}
interface IMessage {
- type: 'LOADED' | 'ERROR' | 'UPDATE' | 'DONE' | 'SCALE'
+ type: 'LOADED' | 'ERROR' | 'UPDATE' | 'DONE' | 'GLOBAL_VARIABLES'
msg: string
data: {
compiledCode?: string
zoom?: number
+ globalJsVariables?: Record
+ globalCssVariables?: string
}
}
-interface IDevice {
- name: string
- width: number
- height: number
-}
-
const getIframeUrl = (iframeRaw: string) => {
- const shimsUrl = '//unpkg.com/es-module-shims/dist/es-module-shims.js'
- // 判断浏览器是否支持esm ，不支持esm就引入es-module-shims
- const newIframeRaw =
- typeof import.meta === 'undefined'
- ? iframeRaw.replace(
- '',
- ``
- )
- : iframeRaw
- return URL.createObjectURL(new Blob([newIframeRaw], { type: 'text/html' }))
+ return URL.createObjectURL(new Blob([iframeRaw], { type: 'text/html' }))
}
const iframeUrl = getIframeUrl(iframeRaw)
-const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) => {
+const Render = ({
+ iframeKey,
+ compiledCode,
+ mobileMode = false,
+ globalJsVariables,
+ globalCssVariables
+}: RenderProps) => {
+ const { styles, theme } = useStyles()
+ const { isDarkMode } = useContext(AppContext)
const iframeRef = useRef(null)
const [isLoaded, setIsLoaded] = useState(false)
- const [selectedDevice, setSelectedDevice] = useState('Pixel 7')
- const [zoom, setZoom] = useState(1)
+ const [selectedDevice, setSelectedDevice] = useState('Pixel 7')
const [isRotate, setIsRotate] = useState(false)
-
- const devices: IDevice[] = [
- {
- name: 'iPhone SE',
- width: 375,
- height: 667
- },
- {
- name: 'iPhone XR',
- width: 414,
- height: 896
- },
- {
- name: 'iPhone 12 Pro',
- width: 390,
- height: 844
- },
- {
- name: 'iPhone 14 Pro Max',
- width: 430,
- height: 932
- },
- {
- name: 'Pixel 7',
- width: 412,
- height: 915
- },
- {
- name: 'Samsung Galaxy S8+',
- width: 360,
- height: 740
- },
- {
- name: 'Samsung Galaxy S20 Ultra',
- width: 412,
- height: 915
- },
- {
- name: 'iPad Mini',
- width: 768,
- height: 1024
- },
- {
- name: 'iPad Air',
- width: 820,
- height: 1180
- },
- {
- name: 'iPad Pro',
- width: 1024,
- height: 1366
- },
- {
- name: 'Surface Pro 7',
- width: 912,
- height: 1368
- },
- {
- name: 'Surface Duo',
- width: 540,
- height: 720
- },
- {
- name: 'Galaxy Fold',
- width: 280,
- height: 653
- },
- {
- name: 'Asus Zenbook Fold',
- width: 853,
- height: 1280
- },
- {
- name: 'Samsung Galaxy A51/71',
- width: 412,
- height: 914
- },
- {
- name: 'Nest Hub',
- width: 1024,
- height: 600
- },
- {
- name: 'Nest Hub Max',
- width: 1280,
- height: 800
- }
- ]
-
- const handleOnChangeDevice = (e: ChangeEvent) => {
- setSelectedDevice(e.target.value)
- }
-
- const handleOnChangeZoom = (e: ChangeEvent) => {
- setZoom(Number(e.target.value))
- }
+ const [nodes, setNodes] = useState[]>([])
const handleOnRotateDevice = () => {
setIsRotate(!isRotate)
}
+ const loadGlobalVariables = () => {
+ iframeRef.current?.contentWindow?.postMessage(
+ {
+ type: 'GLOBAL_VARIABLES',
+ data: { globalJsVariables, globalCssVariables }
+ } as IMessage,
+ '*'
+ )
+ }
+
useEffect(() => {
- if (isLoaded) {
- iframeRef.current?.contentWindow?.postMessage(
- {
- type: 'UPDATE',
- data: { compiledCode }
- } as IMessage,
- '*'
- )
+ if (!isLoaded) {
+ return
}
+ iframeRef.current?.contentWindow?.postMessage(
+ {
+ type: 'UPDATE',
+ data: { compiledCode }
+ } as IMessage,
+ '*'
+ )
+ loadGlobalVariables()
}, [isLoaded, compiledCode])
useEffect(() => {
- if (isLoaded) {
- iframeRef.current?.contentWindow?.postMessage(
- {
- type: 'SCALE',
- data: { zoom: zoom }
- } as IMessage,
- '*'
- )
+ if (!isLoaded) {
+ return
}
- }, [isLoaded, zoom])
+ loadGlobalVariables()
+ }, [isLoaded, globalJsVariables, globalCssVariables])
+
+ useEffect(() => {
+ setNodes([
+ {
+ id: 'device',
+ type: 'simulation',
+ position: { x: 0, y: 0 },
+ data: {
+ deviceWidth: devices[selectedDevice].width,
+ deviceHeight: devices[selectedDevice].height,
+ isRotate,
+ iframeKey,
+ iframeRef,
+ iframeUrl,
+ setIsLoaded
+ }
+ }
+ ])
+ }, [])
return mobileMode ? (
<>
-
-
-
-
-
value.name === selectedDevice)
- ?.height ?? 915
- : devices.find((value) => value.name === selectedDevice)
- ?.width ?? 412,
- height: isRotate
- ? devices.find((value) => value.name === selectedDevice)
- ?.width ?? 412
- : devices.find((value) => value.name === selectedDevice)
- ?.height ?? 915
- }}
- >
-