post-guard/Canon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat-visualization (#33)

Browse Source 
尽管里面有点粪，但还是生成了漂亮的树，就当给树施肥了
剩下一个小问题：未考虑节点的宽度（因为名称不一样长），但目前未发现对图生成的明显影响

Co-authored-by: jackfiled <xcrenchangjun@outlook.com>
Reviewed-on: PostGuard/Canon#33
Co-authored-by: Ichirinko <1621543655@qq.com>
Co-committed-by: Ichirinko <1621543655@qq.com>
This commit is contained in:
Ichirinko
2024-04-19 14:59:45 +08:00
committed by jackfiled
parent 4b6635796c
commit dbbab1c761
44 changed files with 4689 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
Canon.Server/client-app/.eslintrc.cjs Normal file
View File

@@ -0,0 +1,18 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}

24
Canon.Server/client-app/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

12
Canon.Server/client-app/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Canon</title>
</head>
<body>
<div id="root" style="width: 100vw;height: 100vh"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

38
Canon.Server/client-app/package.json Normal file
View File

@@ -0,0 +1,38 @@
{
"name": "client-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@fontsource/roboto": "^5.0.12",
"@mui/icons-material": "^5.15.14",
"@mui/material": "^5.15.14",
"openapi-fetch": "^0.9.3",
"openapi-typescript": "^6.7.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.51.2",
"react-photo-view": "^1.2.4",
"react-router-dom": "^6.22.3"
},
"devDependencies": {
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"typescript": "^5.2.2",
"vite": "^5.2.0"
}
}

2534
Canon.Server/client-app/pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

16
Canon.Server/client-app/src/App.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { RouterProvider, createBrowserRouter} from 'react-router-dom'
import { Index } from "./Pages/Index";
import 'react-photo-view/dist/react-photo-view.css';
const routers = createBrowserRouter([
{
path: "/",
element: <Index/>
}
])
export function App() {
return <>
<RouterProvider router={routers} />
</>
}

99
Canon.Server/client-app/src/Pages/Index.tsx Normal file
View File

@@ -0,0 +1,99 @@
import {AppBar, Button, Grid, Toolbar, Typography} from "@mui/material";
import {InputField} from "./InputField.tsx";
import {CSSProperties, useState} from "react";
import {OutputField} from "./OutputField.tsx";
import createClient from "openapi-fetch";
import * as openapi from '../openapi';
const client = createClient<openapi.paths>();
interface outputData {
compiledCode: string,
id: string,
imageAddress: string,
sourceCode: string
}
export function Index() {
const [inputValue, setInputValue] = useState('');
const [outputValue, setOutputValue] = useState<outputData>({
compiledCode: "",
sourceCode: "",
id: "",
imageAddress: ""
});
const handleValueChange = (value: string) => {
setInputValue(value);
};
async function compilerButtonClick() {
console.log(inputValue)
const {data} = await client.POST("/api/Compiler", {
body: {
code: inputValue
}
})
console.log(data)
if (data != undefined) {
setOutputValue({
compiledCode: data.compiledCode,
sourceCode: data.sourceCode,
id: data.id,
imageAddress: data.imageAddress
})
}
}
return <>
<div className={"title"}
style={titleClassCss}>
<AppBar style={{zIndex: 0}}>
<Toolbar style={{width: '100%'}}>
<Typography variant="h6">
任昌骏组编译器
</Typography>
<Button style={{
position: "absolute",
left: "50%",
transform: "translateX(-50%)",
fontSize: "medium",
}}
variant="outlined"
color="inherit"
onClick={compilerButtonClick}
>
编译
</Button>
</Toolbar>
</AppBar>
</div>
<div className={"content"}
style={contentClassCss}>
<Grid container spacing={2} style = {{width: "100%",height: "100%"}}>
<Grid item xs={12} sm={6} style = {{width: "100%",height: "100%"}}>
<InputField onValueChange={handleValueChange}>
</InputField>
</Grid>
<Grid item xs={12} sm={6} style = {{width: "100%",height: "100%"}}>
<OutputField imgPath={outputValue.imageAddress}>
</OutputField>
</Grid>
</Grid>
</div>
</>
}
const titleClassCss: CSSProperties = {
position: "absolute",
height: "max-content",
width: "100%",
}
const contentClassCss: CSSProperties = {
position: "relative",
height: "88%",
top: "12%",
width: "100%",
}

43
Canon.Server/client-app/src/Pages/InputField.tsx Normal file
View File

@@ -0,0 +1,43 @@
import {TextField} from "@mui/material";
import {CSSProperties, useState} from "react";
// @ts-expect-error ...
export function InputField({ onValueChange }) {
const [inputValue, setInputValue] = useState('');
// @ts-expect-error ...
const handleChange = (e) => {
const newValue = e.target.value;
setInputValue(newValue);
onValueChange(newValue);
};
return <>
<div className={"input-field"} style={inputFieldClassCss}>
<TextField
id="outlined-textarea"
label="Pascal Code"
rows={24}
multiline
style={
{
width: "100%",
height: "100%"
}
}
value={inputValue}
onChange={handleChange}
/>
</div>
</>
}
const inputFieldClassCss: CSSProperties = {
width: "100%",
height: "100%",
padding: "5% 5%",
boxSizing: "border-box"
}

27
Canon.Server/client-app/src/Pages/OutputField.tsx Normal file
View File

@@ -0,0 +1,27 @@
import {CSSProperties} from "react";
import {PhotoProvider, PhotoView} from "react-photo-view";
// @ts-expect-error ...
export function OutputField({imgPath}) {
return <>
<div className={"output-field"} style={outputFieldClassCss}>
<PhotoProvider>
<PhotoView key={1} src={imgPath}>
<img src={imgPath}
style={{ objectFit: 'cover' ,width:"100%",height:"100%" }}
alt=""/>
</PhotoView>
</PhotoProvider>
</div>
</>
}
const outputFieldClassCss: CSSProperties = {
width: "100%",
height: "100%",
padding: "5% 5%",
boxSizing: "border-box",
}

15
Canon.Server/client-app/src/main.tsx Normal file
View File

@@ -0,0 +1,15 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import { App } from './App.tsx'
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
import { CssBaseline } from '@mui/material';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<CssBaseline />
<App />
</React.StrictMode>,
)

90
Canon.Server/client-app/src/openapi.d.ts vendored Normal file
View File

@@ -0,0 +1,90 @@
/**
* This file was auto-generated by openapi-typescript.
* Do not make direct changes to the file.
*/
export interface paths {
"/api/Compiler/{compileId}": {
get: {
parameters: {
path: {
compileId: string;
};
};
responses: {
/** @description Success */
200: {
content: {
"text/plain": components["schemas"]["CompileResponse"];
"application/json": components["schemas"]["CompileResponse"];
"text/json": components["schemas"]["CompileResponse"];
};
};
};
};
};
"/api/Compiler": {
post: {
requestBody?: {
content: {
"application/json": components["schemas"]["SourceCode"];
"text/json": components["schemas"]["SourceCode"];
"application/*+json": components["schemas"]["SourceCode"];
};
};
responses: {
/** @description Success */
200: {
content: {
"text/plain": components["schemas"]["CompileResponse"];
"application/json": components["schemas"]["CompileResponse"];
"text/json": components["schemas"]["CompileResponse"];
};
};
};
};
};
"/api/File/{filename}": {
get: {
parameters: {
path: {
filename: string;
};
};
responses: {
/** @description Success */
200: {
content: never;
};
};
};
};
}
export type webhooks = Record<string, never>;
export interface components {
schemas: {
CompileResponse: {
id: string;
sourceCode: string;
compiledCode: string;
imageAddress: string;
};
SourceCode: {
code: string;
};
};
responses: never;
parameters: never;
requestBodies: never;
headers: never;
pathItems: never;
}
export type $defs = Record<string, never>;
export type external = Record<string, never>;
export type operations = Record<string, never>;

1
Canon.Server/client-app/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

25
Canon.Server/client-app/tsconfig.json Normal file
View File

@@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

11
Canon.Server/client-app/tsconfig.node.json Normal file
View File

@@ -0,0 +1,11 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true,
"strict": true
},
"include": ["vite.config.ts"]
}

15
Canon.Server/client-app/vite.config.ts Normal file
View File

@@ -0,0 +1,15 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
proxy: {
"/api": {
target: "http://localhost:5277",
changeOrigin: true
}
}
}
})