feat(uicontrol): add codeedit ui control

contributes/meta3d-ui-control-codeedit/.gitignore

@@ -0,0 +1,25 @@
+.DS_Store
+.merlin
+.idea/
+.vscode/
+jest_0/
+reference/
+node_modules/
+mine/
+dist/
+lib/bs/
+.bs.js
+.gen.tsx
+lib/js/
+lib/es6_global/
+
+coverage
+
+dist/
+
+npm-debug
+
+.bsb.lock
+
+yarn.lock
+

contributes/meta3d-ui-control-codeedit/gulpfile.js

@@ -0,0 +1,25 @@
+var gulp = require("gulp");
+var path = require("path");
+var publish = require("meta3d-tool-publish")
+
+gulp.task("publish_local_env", function (done) {
+    publish.publishContribute(
+        "local",
+        path.join(__dirname, "package.json"),
+        path.join(__dirname, "dist/static/js", "main.js")
+    ).then(() => {
+        done()
+    })
+});
+
+gulp.task("publish_production_env", function (done) {
+    publish.publishContribute(
+        "production",
+        path.join(__dirname, "package.json"),
+        path.join(__dirname, "dist/static/js", "main.js")
+    ).then(() => {
+        done()
+    })
+});
+
+

contributes/meta3d-ui-control-codeedit/package.json

@@ -0,0 +1,37 @@
+{
+    "name": "meta3d-ui-control-codeedit",
+    "version": "1.2.0",
+    "publisher": "meta3d",
+    "displayName": "代码编辑",
+    "description": "",
+    "protocol": {
+        "name": "meta3d-ui-control-codeedit-protocol"
+    },
+    "license": "MIT",
+    "scripts": {
+        "watch": "tsc -w -noEmit",
+        "webpack": "webpack --config webpack.config.js",
+        "meta3d:publish_dev_auto": "yarn version --patch --no-git-tag-version && yarn meta3d:publish_dev",
+        "meta3d:publish_dev": "cross-env NODE_ENV=development npm run webpack && gulp publish_local_env",
+        "meta3d:publish_pro": "cross-env NODE_ENV=production npm run webpack && gulp publish_production_env"
+    },
+    "keywords": [],
+    "dependencies": {
+        "meta3d-editor-whole-protocol": "^1.2.0",
+        "meta3d-type": "^1.2.0",
+        "meta3d-ui-control-codeedit-protocol": "^1.2.0"
+    },
+    "devDependencies": {
+        "clean-webpack-plugin": "^4.0.0",
+        "cross-env": "^7.0.3",
+        "cz-customizable": "^6.3.0",
+        "gulp": "^4.0.2",
+        "meta3d-tool-publish": "^1.2.0",
+        "source-map-loader": "^3.0.0",
+        "ts-loader": "^9.2.6",
+        "typescript": "^4.2.3",
+        "webpack": "^5.62.1",
+        "webpack-cli": "^4.9.1",
+        "monaco-editor-webpack-plugin": "^7.1.0"
+    }
+}

contributes/meta3d-ui-control-codeedit/src/Main.ts

@@ -0,0 +1,94 @@
+import { getContribute as getContributeMeta3D } from "meta3d-type"
+import { uiControlName, state as uiControlState, inputFunc, specificData, outputData } from "meta3d-ui-control-codeedit-protocol"
+import { service, uiControlContribute } from "meta3d-editor-whole-protocol/src/service/ServiceType"
+import { windowFlags } from "meta3d-imgui-renderer-protocol/src/service/ServiceType"
+
+export let getContribute: getContributeMeta3D<uiControlContribute<inputFunc, specificData, outputData>> = (api) => {
+    return {
+        uiControlName: uiControlName,
+        func: (meta3dState,
+            _getInputFunc,
+            _rect,
+            {
+                label,
+                initialCode
+            }
+        ) => {
+            // TODO check: should only has one
+
+            if (api.nullable.isNullable(api.uiControl.getUIControlState<uiControlState>(meta3dState, label))) {
+                let container = document.createElement("div")
+                document.body.appendChild(container)
+
+                container.style.position = "absolute"
+
+                meta3dState = api.uiControl.setUIControlState<uiControlState>(meta3dState, label, {
+                    editor: null,
+                    container
+                })
+            }
+
+            let state = api.nullable.getExn(api.uiControl.getUIControlState<uiControlState>(meta3dState, label))
+            let promise = null
+
+            if (api.nullable.isNullable(state.editor)) {
+                promise = import(
+    /* webpackPrefetch: true */"monaco-editor/esm/vs/editor/editor.api.js"
+                ).then(monaco => {
+                    let editor = monaco.editor.create(state.container, {
+                        model: monaco.editor.createModel(initialCode, "typescript"),
+                    })
+
+                    meta3dState = api.uiControl.setUIControlState<uiControlState>(meta3dState, label, {
+                        ...state,
+                        editor: api.nullable.return(editor)
+                    })
+                })
+
+            }
+            else {
+                promise = Promise.resolve(meta3dState)
+            }
+
+            return promise.then(meta3dState => {
+                let { container, editor } = api.nullable.getExn(api.uiControl.getUIControlState<uiControlState>(meta3dState, label))
+
+
+                let { getItemRectMin, getWindowSize, getWindowPos, beginWindow, endWindow, button, setNextWindowRect, setCursorPos } = api.nullable.getExn(api.getPackageService<service>(meta3dState, "meta3d-editor-whole-protocol")).ui(meta3dState)
+
+                let containerRect = {
+                    x: getItemRectMin(meta3dState).x,
+                    y: getItemRectMin(meta3dState).y,
+                    width: getWindowSize(meta3dState).x,
+                    height: getWindowSize(meta3dState).y - getItemRectMin(meta3dState).y + getWindowPos(meta3dState).y
+                }
+
+                container.style.top = containerRect.y + "px"
+                container.style.left = containerRect.x + "px"
+                container.style.width = containerRect.width + "px"
+                container.style.height = containerRect.height + "px"
+
+
+                meta3dState = setNextWindowRect(meta3dState, containerRect)
+
+                meta3dState = beginWindow(meta3dState, label, windowFlags.NoTitleBar)
+                meta3dState = endWindow(meta3dState)
+
+
+                meta3dState = setCursorPos(meta3dState, [containerRect.x, containerRect.y + containerRect.height])
+
+                let data = button(meta3dState, "提交", [100, 50])
+                meta3dState = data[0]
+                let isClick = data[1]
+
+                if (isClick) {
+                    return [meta3dState, api.nullable.return(editor.getValue())]
+                }
+
+                return [meta3dState, null]
+            })
+
+        },
+        init: (meta3dState) => Promise.resolve(meta3dState)
+    }
+}

contributes/meta3d-ui-control-codeedit/tsconfig.json

@@ -0,0 +1,24 @@
+{
+	"compilerOptions": {
+		"target": "ES6",
+		"module": "esnext",
+		"moduleResolution": "node",
+		"sourceMap": true,
+		"resolveJsonModule": true,
+		"esModuleInterop": true,
+		"jsx": "react",
+		// "noEmit": true,
+		// "noUnusedLocals": true,
+		// "noUnusedParameters": true,
+		"noImplicitReturns": true,
+		"lib": [
+			"DOM",
+			"ESNext",
+		],
+		"types": [],
+		"strict": true
+	},
+	"include": [
+		"./src"
+	]
+}

contributes/meta3d-ui-control-codeedit/webpack.config.js

@@ -0,0 +1,78 @@
+const path = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+
+module.exports = {
+	entry: "./src/Main.ts",
+	mode: process.env.NODE_ENV.trim() == 'production' ? 'production' : 'development',
+	output: {
+		path: path.resolve(__dirname, 'dist'),
+		filename: 'static/js/[name].js',
+		library: {
+			name: 'Contribute',
+			type: 'window',
+		},
+	},
+
+	// Enable sourcemaps for debugging webpack's output.
+	// devtool: "source-map",
+
+	resolve: {
+		extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss'],
+		modules: ['node_modules']
+	},
+
+	module: {
+		rules: [
+			// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
+			{
+				test: /\.tsx?$/,
+				exclude: /node_modules/,
+				use: "ts-loader"
+			},
+			// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
+			{
+				enforce: 'pre',
+				test: /\.js$/,
+				loader: "source-map-loader"
+			},
+			{
+				test: /\.css$/,
+				use: ['style-loader', 'css-loader']
+			},
+			{
+				test: /\.ttf$/,
+				type: 'asset/resource'
+			}
+		]
+	},
+	plugins: [
+		/**
+		* All files inside webpack's output.path directory will be removed once, but the
+		* directory itself will not be. If using webpack 4+'s default configuration,
+		* everything under <PROJECT_DIR>/dist/ will be removed.
+		* Use cleanOnceBeforeBuildPatterns to override this behavior.
+		*
+		* During rebuilds, all webpack assets that are not used anymore
+		* will be removed automatically.
+		*
+		* See `Options and Defaults` for information
+		*/
+		new CleanWebpackPlugin(),
+		// new HtmlWebpackPlugin({
+		// 	template: './user.html',
+		// 	filename: 'user.html',
+		// }),
+		new MonacoWebpackPlugin({
+			// available options are documented at https://github.com/microsoft/monaco-editor/blob/main/webpack-plugin/README.md#options
+			languages: ['typescript']
+			// languages: ['']
+		}),
+	],
+	// When importing a module whose path matches one of the following, just
+	// assume a corresponding global variable exists and use that instead.
+	// This is important because it allows us to avoid bundling all of our
+	// dependencies, which allows browsers to cache those libraries between builds.
+	externals: {
+	}
+};

defaults/meta3d-type/src/contribute/UIControlProtocolConfigType.res

@@ -20,6 +20,7 @@ type supportedEventName = [
   | #input_change
   | #checkbox_select
   | #popup_select
+  | #codeedit_submit
 ]
 
 type actionName = Js.Nullable.t<string>

defaults/meta3d-type/src/contribute/UIControlProtocolConfigType.ts

@@ -10,7 +10,7 @@ export type rect = {
 
 export type childrenFunc = (state: state) => state
 
-export type supportedEventName = "button_click" | "run" | "stop" | "click1" | "click2" | "select_asset" | "drop_asset" | "select_tree_node" | "drag_tree_node" | "input_change" | "checkbox_select" | "popup_select"
+export type supportedEventName = "button_click" | "run" | "stop" | "click1" | "click2" | "select_asset" | "drop_asset" | "select_tree_node" | "drag_tree_node" | "input_change" | "checkbox_select" | "popup_select" | "codeedit_submit"
 
 export type actionName = nullable<string>
 

doc/1.3.0.org

@@ -234,11 +234,39 @@ TODO demo
     get editor's value
     defer load
 
-TODO add
+
+
+
+TODO add draft
+
+
+TODO update
+imgui
+ui
+editor-whole
+
+
+
+
+TODO pass run test:
+show codeedit in script inspector
+    TODO add fake action to handle submit event
+    TODO verify: defer load
+
+switch script inspector and gameobject inspector
+    TODO code edit ui control: register event when beforeRender:
+        hidden container
 
 **** TODO add asset
 
-TODO defer load monaco when show script asset
+# TODO defer load monaco when show script asset
+
+TODO add select ui control for add script asset
+
+
+
+# TODO code edit ui control: defer load
+
 
 **** TODO add script component
 

packages/editor-whole/ui/extensions/meta3d-imgui-webgl1-renderer/src/Main.ts

@@ -399,6 +399,9 @@ export let getExtensionService: getExtensionServiceMeta3D<
 
             return result
         },
+        getItemRectMin: () => ImGui.GetItemRectMin(),
+        getWindowPos: () => ImGui.GetWindowPos(),
+        getWindowSize: () => ImGui.GetWindowSize(),
         getContext: () => {
             return ImGui_Impl.gl
         },

packages/editor-whole/ui/extensions/meta3d-ui/src/Main.res

@@ -169,6 +169,9 @@ let getExtensionService: Meta3dType.Index.getExtensionService<
     beginModal: UIManager.beginModal((api, "meta3d-imgui-renderer-protocol")),
     endModal: UIManager.endModal((api, "meta3d-imgui-renderer-protocol")),
     popup: UIManager.popup((api, "meta3d-imgui-renderer-protocol")),
+    getItemRectMin: UIManager.getItemRectMin((api, "meta3d-imgui-renderer-protocol")),
+    getWindowPos: UIManager.getWindowPos((api, "meta3d-imgui-renderer-protocol")),
+    getWindowSize: UIManager.getWindowSize((api, "meta3d-imgui-renderer-protocol")),
     // getIOData: UIManager.getIOData,
     // dispatch: UIManager.dispatch,
     updateElementState: (meta3dState, updateElementStateFunc) => {