Skip to content

R
rjs_json_form
Commit 7e79da6c authored by Boris Kocherov's avatar Boris Kocherov
Browse files
Options

demo/with_monaco: use grid layout and add schema in place editor

parent d7d515b2
Show whitespace changes
Inline Side-by-side
Showing with 58 additions and 27 deletions
demo/with_monaco/index.css
View file @ 7e79da6c
.row, html, body { .container, html, body {
height: 100%; height: 100%;
margin: 0; margin: 0;
overflow: hidden;
} }
.row { .container {
display: flex; display: grid;
grid-gap: 5px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 50% 50%;
grid-template-areas:
"s f"
"d f";
} }
.column { #monaco-schema {
flex: 50%; grid-area: s;
}
#monaco-editor {
grid-area: d;
} }
#rjs_json_form { #rjs_json_form {
grid-area: f;
background-color: grey; background-color: grey;
} }
.rjs_json_form_gadget > iframe { .rjs_json_form_gadget > iframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 1000px; min-height: 800px;
} }
\ No newline at end of file
demo/with_monaco/index.html
View file @ 7e79da6c
...@@ -7,19 +7,17 @@ ...@@ -7,19 +7,17 @@
<title>Demo UI JSON Schema form generator</title> <title>Demo UI JSON Schema form generator</title>
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<!--<script src="https://d1.erp5.ru/nexedi/rjs_json_form/rsvp.js"></script>-->
<!--<script src="https://d1.erp5.ru/nexedi/rjs_json_form/renderjs.js"></script>-->
<script src="../../rsvp.js"></script> <script src="../../rsvp.js"></script>
<script src="../../renderjs.js"></script> <script src="../../renderjs.js"></script>
<script src="https://unpkg.com/monaco-editor@0.14.3/min/vs/loader.js"></script> <script src="https://unpkg.com/monaco-editor@0.14.3/min/vs/loader.js"></script>
<!--<script src="http://127.0.0.1/nexedi/rjs_json_form/jio.js"></script>-->
<script src="index.js"></script> <script src="index.js"></script>
</head> </head>
<body> <body>
<div class="row"> <div class="container">
<div id="monaco-editor" class="column"></div> <div id="monaco-schema"></div>
<div id="rjs_json_form" class="column"> <div id="monaco-editor"></div>
<div id="rjs_json_form">
<div class="rjs_json_form_gadget" data-gadget-url="../../jsonform.gadget.html" <div class="rjs_json_form_gadget" data-gadget-url="../../jsonform.gadget.html"
data-gadget-scope="rjs_json_form" data-gadget-scope="rjs_json_form"
data-gadget-sandbox="iframe"> data-gadget-sandbox="iframe">
......
demo/with_monaco/index.js
View file @ 7e79da6c
/*jslint esversion: 6, nomen: true, maxlen: 200, indent: 2, maxerr: 100*/ /*jslint nomen: true, maxlen: 200, indent: 2, maxerr: 100*/
/*jshint esversion: 6*/
/*global window, document, require, URL, rJS*/ /*global window, document, require, URL, rJS*/
(function (window, document, rJS) { (function (window, document, rJS) {
"use strict"; "use strict";
let repo = "jerome/slapos"; let repo = "nexedi/slapos";
let branch = "feat/erp5-fix-schema"; let branch = "master";
/*
const baseUrl = `https://lab.nexedi.com/${repo}/raw/${branch}/software/erp5/`; const baseUrl = `https://lab.nexedi.com/${repo}/raw/${branch}/software/erp5/`;
const mainSchema = "instance-erp5-input-schema.json"; const mainSchema = "instance-erp5-input-schema.json";
*/
/// XXX use jstestnode
// const baseUrl = `https://lab.nexedi.com/bk/slapos/raw/wip/feat/json-test-failure/software/jstestnode/`;
const baseUrl = `http://localhost/nexedi/slapos/software/jstestnode/`;
const mainSchema = "instance-jstestnode-input-schema.json";
let monacoSchemaEditor;
let monacoEditor; let monacoEditor;
// monaco should ignore edit event when it's caused by rjs_json_form // monaco should ignore edit event when it's caused by rjs_json_form
let monacoIgnoreEvent = false; let monacoIgnoreEvent = false;
...@@ -29,8 +23,7 @@ ...@@ -29,8 +23,7 @@
}); });
let proxy = URL.createObjectURL( let proxy = URL.createObjectURL(
new Blob( new Blob(
[ [`
`
self.MonacoEnvironment = { self.MonacoEnvironment = {
baseUrl: 'https://unpkg.com/monaco-editor@0.14.3/min/' baseUrl: 'https://unpkg.com/monaco-editor@0.14.3/min/'
}; };
...@@ -63,8 +56,8 @@ importScripts('https://unpkg.com/monaco-editor@0.14.3/min/vs/base/worker/workerM ...@@ -63,8 +56,8 @@ importScripts('https://unpkg.com/monaco-editor@0.14.3/min/vs/base/worker/workerM
let gadget = this; let gadget = this;
require(["vs/editor/editor.main"], function (monaco) { require(["vs/editor/editor.main"], function (monaco) {
var modelUri = monaco.Uri.parse("tmp://xxx.json"); // a made up unique URI for our model let modelUri = monaco.Uri.parse("tmp://xxx.json"); // a made up unique URI for our model
var model = monaco.editor.createModel("{\n}", "json", modelUri); let model = monaco.editor.createModel("{\n}", "json", modelUri);
const getSchema = relativeUrl => { const getSchema = relativeUrl => {
const schemaUrl = new URL(relativeUrl, baseUrl); const schemaUrl = new URL(relativeUrl, baseUrl);
...@@ -86,6 +79,7 @@ importScripts('https://unpkg.com/monaco-editor@0.14.3/min/vs/base/worker/workerM ...@@ -86,6 +79,7 @@ importScripts('https://unpkg.com/monaco-editor@0.14.3/min/vs/base/worker/workerM
s.fileMatch = [modelUri.toString()]; // this is the main schema associated to the model s.fileMatch = [modelUri.toString()]; // this is the main schema associated to the model
return s; return s;
}), }),
getSchema("http://json-schema.org/draft-07/schema")
]).then(schemas => { ]).then(schemas => {
gadget.getDeclaredGadget("rjs_json_form").then(g => { gadget.getDeclaredGadget("rjs_json_form").then(g => {
return g.render({ return g.render({
...@@ -101,6 +95,33 @@ importScripts('https://unpkg.com/monaco-editor@0.14.3/min/vs/base/worker/workerM ...@@ -101,6 +95,33 @@ importScripts('https://unpkg.com/monaco-editor@0.14.3/min/vs/base/worker/workerM
schemas: schemas schemas: schemas
}); });
monacoSchemaEditor = monaco.editor.create(
document.getElementById("monaco-schema"),
{
model: monaco.editor.createModel(JSON.stringify(schemas[0].schema, null, 2), "json", schemas[0].schema_url)
}
);
monacoSchemaEditor.onDidChangeModelContent(e => {
if (!monacoIgnoreEvent) {
console.log("schema changed", monacoEditor.getValue());
let parsed;
try {
parsed = JSON.parse(monacoSchemaEditor.getValue());
} catch (error) {
console.error("parse error, ignoring changes from monaco", error);
return;
}
gadget.getDeclaredGadget("rjs_json_form").then(g => {
return g.render({
key: "rjs_json_form",
schema: parsed,
schema_url: schemas[0].schema_url,
});
});
}
});
monacoEditor = monaco.editor.create( monacoEditor = monaco.editor.create(
document.getElementById("monaco-editor"), document.getElementById("monaco-editor"),
{ {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7