;
};
export default App;
diff --git a/packages/property-view/src/main.tsx b/packages/property-view/src/main.tsx
index 8bd5145..f678921 100644
--- a/packages/property-view/src/main.tsx
+++ b/packages/property-view/src/main.tsx
@@ -1,22 +1,13 @@
import { createTheme, CssBaseline, ThemeProvider } from '@mui/material';
import { createRoot } from 'react-dom/client';
import App from './App';
+import { theme } from './theme';
import { StrictMode } from 'react';
/**
* Customize form so each control has more space
*/
-const theme = createTheme({
- components: {
- MuiFormControl: {
- styleOverrides: {
- root: {
- margin: '0.8em 0',
- },
- },
- },
- },
-});
+
const rootEl = document.getElementById('root');
diff --git a/packages/property-view/src/renderer/arraySelectControl.tsx b/packages/property-view/src/renderer/arraySelectControl.tsx
new file mode 100644
index 0000000..aa3d0d4
--- /dev/null
+++ b/packages/property-view/src/renderer/arraySelectControl.tsx
@@ -0,0 +1,39 @@
+import { JsonSchema } from '@jsonforms/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { FormControl, InputLabel, MenuItem, Select, TextField } from '@mui/material';
+
+interface ArraySelectControlProps {
+ data: any;
+ handleChange(path: string, value: any): void;
+ path: string;
+ schema: JsonSchema
+}
+
+const ArraySelectControl = ({ data, handleChange, path, schema}: ArraySelectControlProps)=>{
+ const value = data || '';
+
+ const arrayOptions = schema?.oneOf ?? [];
+
+ return (
+
+ {path}
+
+
+ );
+};
+
+export default withJsonFormsControlProps(ArraySelectControl);
diff --git a/packages/property-view/src/renderer/arraySelectControlTest.ts b/packages/property-view/src/renderer/arraySelectControlTest.ts
new file mode 100644
index 0000000..98b46dd
--- /dev/null
+++ b/packages/property-view/src/renderer/arraySelectControlTest.ts
@@ -0,0 +1,9 @@
+import type { JsonSchema} from '@jsonforms/core';
+import { rankWith, schemaMatches } from '@jsonforms/core';
+
+const isStringEnumSchema = (schema: JsonSchema) => {
+ return !Array.isArray(schema.enum) && Array.isArray(schema.oneOf) ;
+
+};
+
+export default rankWith(9, schemaMatches(isStringEnumSchema));
diff --git a/packages/property-view/src/renderer/baseTypeControl.tsx b/packages/property-view/src/renderer/baseTypeControl.tsx
new file mode 100644
index 0000000..8957667
--- /dev/null
+++ b/packages/property-view/src/renderer/baseTypeControl.tsx
@@ -0,0 +1,78 @@
+import { JsonSchema } from "@jsonforms/core";
+import { withJsonFormsControlProps } from "@jsonforms/react";
+import { FormControl, Grid, IconButton, InputLabel, MenuItem, Select, Typography } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteIcon from '@mui/icons-material/Delete';
+import { useState } from "react";
+import { BorderAllOutlined } from "@mui/icons-material";
+
+
+interface BaseTypeControlProps{
+ data: any;
+ handleChange(path: string, value: any): void;
+ path: string;
+ schema: JsonSchema
+}
+
+const BaseTypeControl = ({data, handleChange, path, schema}: BaseTypeControlProps)=>{
+ const [selectedBaseTypes, setSelectedBaseTypes] = useState(data ?? []);
+ const [filled, setFilled] = useState(true);
+ const itemsSchema = schema?.items as any;
+ const baseTypes = itemsSchema.oneOf;
+ return
+
+
+ {path}
+
+
+ {if(filled){
+ setSelectedBaseTypes([...selectedBaseTypes, {const:'', title:''}])
+ setFilled(!filled);
+ }}}>
+
+
+ {selectedBaseTypes.length === 0?
Keine BaseTypes vorhanden :
+ selectedBaseTypes.map((value: any, index: number)=>(
+
+
+
+
+
+
+ {
+ const changedValue = [...selectedBaseTypes];
+ if(changedValue[index].const===''){
+ setFilled(true);
+ }
+ if (index > -1) {
+ changedValue.splice(index, 1);
+ }
+ setSelectedBaseTypes(changedValue);
+ handleChange(path, changedValue);
+ }
+ }>
+
+
+
+ ))}
+
}
+
+export default withJsonFormsControlProps(BaseTypeControl);
+
+
diff --git a/packages/property-view/src/renderer/baseTypeControlTester.ts b/packages/property-view/src/renderer/baseTypeControlTester.ts
new file mode 100644
index 0000000..79c7a21
--- /dev/null
+++ b/packages/property-view/src/renderer/baseTypeControlTester.ts
@@ -0,0 +1,3 @@
+import { rankWith, schemaTypeIs } from '@jsonforms/core';
+
+export default rankWith(10, schemaTypeIs('array'));
diff --git a/packages/property-view/src/renderer/boolControl.tsx b/packages/property-view/src/renderer/boolControl.tsx
new file mode 100644
index 0000000..fe87c16
--- /dev/null
+++ b/packages/property-view/src/renderer/boolControl.tsx
@@ -0,0 +1,21 @@
+import { JsonSchema } from "@jsonforms/core"
+import { withJsonFormsAllOfProps, withJsonFormsControlProps } from "@jsonforms/react"
+import { Checkbox, FormControlLabel, FormGroup } from "@mui/material"
+
+
+interface BoolControlProps{
+ schema: JsonSchema,
+ data: boolean,
+ handleChange(path: string, value: any):void
+ path: string
+}
+
+const BoolControl = ({data, schema, handleChange, path}:BoolControlProps)=>{
+ return(
+
+ handleChange(path, !data)} checked={data} sx={{color: 'var(--vscode-statusBarItem-remoteBackground)','&.Mui-checked': {color: 'var(--vscode-statusBarItem-remoteBackground)',},}}/>} label={path} />
+
+ )
+}
+
+export default withJsonFormsControlProps(BoolControl);
diff --git a/packages/property-view/src/renderer/boolControlTester.ts b/packages/property-view/src/renderer/boolControlTester.ts
new file mode 100644
index 0000000..d21f66a
--- /dev/null
+++ b/packages/property-view/src/renderer/boolControlTester.ts
@@ -0,0 +1,3 @@
+import { rankWith, schemaTypeIs } from '@jsonforms/core';
+
+export default rankWith(3, schemaTypeIs('boolean'));
diff --git a/packages/property-view/src/renderer/counterControl.tsx b/packages/property-view/src/renderer/counterControl.tsx
new file mode 100644
index 0000000..5576e41
--- /dev/null
+++ b/packages/property-view/src/renderer/counterControl.tsx
@@ -0,0 +1,58 @@
+import { JsonSchema } from "@jsonforms/core";
+import { Stack, IconButton, TextField, colors, Typography } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveIcon from "@mui/icons-material/Remove";
+import { withJsonFormsControlProps } from "@jsonforms/react";
+
+interface CounterControlProps {
+ data: any;
+ handleChange(path: string, value: any): void;
+ path: string;
+ schema: JsonSchema
+}
+
+
+const INT32_MIN = -2147483648;
+const INT32_MAX = 2147483647;
+
+const clampToInt32 = (value: number) => {
+ return Math.max(INT32_MIN, Math.min(INT32_MAX, Math.floor(value)));
+};
+
+const CounterControl = ({ data, handleChange, path, schema}: CounterControlProps)=>{
+
+ const value = schema?.default|| 0;
+
+
+
+ const increment = () => {
+ const newValue = value+1;
+ handleChange(path, clampToInt32(newValue));
+ }
+ const decrement = () => {
+ const newValue = value-1;
+ handleChange(path, clampToInt32(newValue));
+ }
+
+ return(
+ <>
+
{path}
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+
+export default withJsonFormsControlProps(CounterControl);
diff --git a/packages/property-view/src/renderer/counterControlTester.ts b/packages/property-view/src/renderer/counterControlTester.ts
new file mode 100644
index 0000000..50a274e
--- /dev/null
+++ b/packages/property-view/src/renderer/counterControlTester.ts
@@ -0,0 +1,3 @@
+import { rankWith, schemaTypeIs } from '@jsonforms/core';
+
+export default rankWith(3, schemaTypeIs('number'));
diff --git a/packages/property-view/src/renderer/selectControl.tsx b/packages/property-view/src/renderer/selectControl.tsx
new file mode 100644
index 0000000..f67534e
--- /dev/null
+++ b/packages/property-view/src/renderer/selectControl.tsx
@@ -0,0 +1,40 @@
+import { JsonSchema } from '@jsonforms/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { Height } from '@mui/icons-material';
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+
+interface SelectControlProps {
+ data: any;
+ handleChange(path: string, value: any): void;
+ path: string;
+ schema: JsonSchema
+}
+
+const SelectControl = ({ data, handleChange, path, schema}: SelectControlProps)=>{
+ const value = data || '';
+
+ const enumOptions = schema?.enum?? [];
+
+ return (
+
+ {path}
+
+
+ );
+};
+
+export default withJsonFormsControlProps(SelectControl);
diff --git a/packages/property-view/src/renderer/selectControlTester.ts b/packages/property-view/src/renderer/selectControlTester.ts
new file mode 100644
index 0000000..fbbc002
--- /dev/null
+++ b/packages/property-view/src/renderer/selectControlTester.ts
@@ -0,0 +1,8 @@
+import type { JsonSchema} from '@jsonforms/core';
+import { rankWith, schemaMatches } from '@jsonforms/core';
+
+export const isStringEnumSchema = (schema: JsonSchema) => {
+ return schema.type === 'string' && Array.isArray(schema.enum);
+};
+
+export default rankWith(3, schemaMatches(isStringEnumSchema));
diff --git a/packages/property-view/src/renderer/textFieldControl.tsx b/packages/property-view/src/renderer/textFieldControl.tsx
new file mode 100644
index 0000000..3df9139
--- /dev/null
+++ b/packages/property-view/src/renderer/textFieldControl.tsx
@@ -0,0 +1,29 @@
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { BorderColor } from '@mui/icons-material';
+import { TextField } from '@mui/material';
+import React from 'react';
+
+interface TextFieldControlProps {
+ data: any;
+ handleChange(path: string, value: any): void;
+ path: string;
+}
+
+const TextFieldControl = ({ data, handleChange, path }: TextFieldControlProps)=>{
+ const [value, setValue] = React.useState(data);
+
+ return (
+
+);
+};
+
+export default withJsonFormsControlProps(TextFieldControl);
diff --git a/packages/property-view/src/renderer/textFieldControlTester.ts b/packages/property-view/src/renderer/textFieldControlTester.ts
new file mode 100644
index 0000000..a4c9d05
--- /dev/null
+++ b/packages/property-view/src/renderer/textFieldControlTester.ts
@@ -0,0 +1,9 @@
+import type { JsonSchema} from '@jsonforms/core';
+import { rankWith, schemaMatches } from '@jsonforms/core';
+
+export const isStringNotEnumSchema = (schema: JsonSchema) => {
+ return schema.type === 'string' && !Array.isArray(schema.enum) && !Array.isArray(schema.oneOf);
+};
+
+export default rankWith(10, schemaMatches(isStringNotEnumSchema));
+
diff --git a/packages/property-view/src/theme.tsx b/packages/property-view/src/theme.tsx
new file mode 100644
index 0000000..a466b05
--- /dev/null
+++ b/packages/property-view/src/theme.tsx
@@ -0,0 +1,80 @@
+import { createTheme } from "@mui/material";
+
+export const theme = createTheme({
+ breakpoints: {
+ values: {
+ xs: 0,
+ sm: 300,
+ md: 600,
+ lg: 1200,
+ xl: 1536,
+ },
+ },
+ components: {
+ MuiFormControl: {
+ styleOverrides: {
+ root: {
+ color: 'var(--vscode-editor-foreground)',
+ marginTop: '0.5em',
+ },
+ },
+ },
+ MuiFormHelperText:{
+ styleOverrides: {
+ root: {
+ height: '1em',
+ color: 'green',
+ '&.Mui-focused': {
+ color: 'var(--vscode-progressbar-background)'
+ }
+ }
+ }
+ },
+ MuiInputLabel: {
+ styleOverrides: {
+ root: {
+ color: 'var(--vscode-statusBarItem-remoteBackground)',
+ '&.MuiInputLabel-shrink':{
+ color:'var(--vscode-statusBarItem-remoteBackground)',
+ }
+
+ }
+
+ }
+
+ },
+ MuiTextField: {
+ defaultProps: {
+ variant: 'outlined',
+ size: 'small'
+ },
+ styleOverrides: {
+ root: {
+ color: 'var(--vscode-editor-foreground)',
+ backgroundColor: 'var(--vscode-editor-background)',
+ borderRadius: '4px',}
+ },
+ },
+
+ MuiInputBase: {
+ styleOverrides: {
+ root: {
+ color: 'var(--vscode-editor-foreground)',
+ }
+ }
+ },
+ MuiOutlinedInput: {
+ styleOverrides: {
+ root: {
+ '& fieldset': {
+ borderColor: 'var(--vscode-editor-foreground)',
+ },
+ '&.Mui-focused .MuiOutlinedInput-notchedOutline':{
+ borderColor:'var(--vscode-statusBarItem-remoteBackground)',
+ }
+ }
+ }
+ }
+ }
+ }
+);
diff --git a/packages/property-view/vite.config.mts b/packages/property-view/vite.config.mts
index fdbb8f3..35d40ee 100644
--- a/packages/property-view/vite.config.mts
+++ b/packages/property-view/vite.config.mts
@@ -4,8 +4,14 @@ import { defineConfig } from 'vitest/config';
export default defineConfig({
plugins: [react()],
build: {
- outDir: 'dist',
- assetsDir: 'property-view'
+ outDir: '../nmeta-vscode/dist',
+ assetsDir: 'property-view',
+ rollupOptions: {
+ output: {
+ entryFileNames: 'property.js',
+ assetFileNames: 'property.css',
+ },
+ },
},
test: {
environment: 'jsdom',
diff --git a/packages/property-views-client/src/websocket-provider.ts b/packages/property-views-client/src/websocket-provider.ts
index 57c945e..5eb7942 100644
--- a/packages/property-views-client/src/websocket-provider.ts
+++ b/packages/property-views-client/src/websocket-provider.ts
@@ -190,7 +190,6 @@ export function listen(
});
}
-
export class PropViewWebSocketProvider {
protected webSocket: WebSocket;
protected reconnectTimer: NodeJS.Timer;
@@ -223,7 +222,7 @@ export class PropViewWebSocketProvider {
};
return new Promise(resolve => {
- this.webSocket.onopen = (): void => {
+ this.webSocket.onopen = async (): Promise
=> {
clearInterval(this.reconnectTimer);
const wrappedSocket = wrap(this.webSocket);
const wsConnection = createWebSocketConnection(wrappedSocket, handler.logger);
@@ -250,7 +249,7 @@ export class PropViewWebSocketProvider {
if (isReconnecting) {
handler.logger?.warn('PropViewWebSocketProvider Reconnecting!');
- handler.onReconnect?.(wsConnection);
+ await handler.onReconnect?.(wsConnection);
} else {
handler.logger?.warn('PropViewWebSocketProvider Initializing!');
handler.onConnection?.(wsConnection);