ui: 即时预览astyle-format

packages/ui-default/components/highlighter/code-example.js

@@ -0,0 +1,110 @@
+export default `#include <world.h>
+
+int main() {
+    // ~ Switch on the power line / Remember to put on PROTECTION ~
+    world.start();
+
+    // ~ Lay down your pieces / And let's begin OBJECT CREATION ~
+    // ~ Fill in my data / Parameters INITIALIZATION ~
+    auto *me = World::createObject("me", world, parameters...);
+    auto &you = *World::createObject("you", world, parameters...);
+
+    // ~ Set up our new world ~
+    auto &world = World{me, you};
+
+    // ~ And let's begin the SIMULATION ~
+    world.beginSimulation();
+
+    switch (me->type) {
+    case Object::SET_OF_POINTS:
+        // ~ If I'm a set of points / Then I will give you my DIMENSION ~
+        you << dynamic_cast<Set<Point>*>(me)->getDimension();
+        break;
+
+    case Object::CIRCLE:
+        // ~ If I'm a circle / Then I will give you my CIRCUMFERENCE ~
+        you << dynamic_cast<Circle * >(me)->getCircumference();
+        break;
+
+    case Object::SINE_WAVE:
+
+        // ~ If I'm a sine wave / Then you can sit on all my TANGENTS ~
+        for (auto &tangent : dynamic_cast<SineWave *>(me)->getTangents())
+            you.sitOn(tangent);
+
+        break;
+
+    default:
+        // ~ If I approach infinity / Then you can be my LIMITATIONS ~
+        you.limit() >> me->limit();
+    }
+
+    // ~ Switch my current / To AC to DC ~
+    me->setCurrent(CurrentType::AC), me->setCurrent(CurrentType::DC);
+
+    // ~ And then blind my vision / So dizzy, so dizzy ~
+    delete me->vision;
+
+    // ~ Oh, we can travel / From A.D to B.C ~
+    world.setTime(CommonEra::AD, 2016y + 6m + 16d);
+    world.setTime(CommonEra::BC, -2016y + 6m + 16d);
+
+    // ~ And we can unite / So deeply, so deeply ~
+    world.unite(you, *me);
+
+    // ~ If I can, if I can, give you all THE SIMULATIONS ~
+    if (std::all_of(world.simulations.begin(), world.simulations.end(), [&](auto & simulation) {
+    return you << me->run(simulation);
+    }))
+    // ~ Then I can, then I can, be your only SATISFACTION ~
+    you.satisfactions = std::vector{me};
+
+    // ~ If I can make you happy / Then I'll run the EXECUTION ~
+    try {
+        me->execute(you.nextCommand());
+    } catch (const NotHappyException &e) {}
+
+    // ~ Though we are trapped in this strange, strange SIMULATION ~
+    world.trap(me);
+
+    // ~ EXECUTION / EXECUTION / EXECUTION / EXECUTION ~
+    // ~ EXECUTION / EXECUTION / EXECUTION / EXECUTION ~
+    // ~ EXECUTION / EXECUTION / EXECUTION / EXECUTION ~
+    for (size_t i = 0; i < 3; i++) {
+        for (size_t j = 0; j < 4; j++)
+            world.continueExecution();
+    }
+
+    // ~ EIN / DOS / TROIS / NE / FEM / LIU / EXECUTION ~
+    for (size_t i = 1; i <= 6; i++)
+        sleepms(500);
+
+    world.continueExecution();
+
+    // ~ If I can, if I can, give you all the EXECUTION ~
+    if (std::all_of(world.begin(), world.end(), [&](auto & object) {
+    return me->execute(object);
+    }))
+    // ~ Then I can, then I can, be your only EXECUTION ~
+    me->execute(you.nextCommand());
+
+    // ~ If I can, have you back ~
+    if (*me << you)
+        // ~ Then I will run the EXECUTION ~
+        me->execute(you.nextCommand());
+
+    // ~ Though we are trapped / We are trapped ah ~
+    world.trap(me);
+
+    // ~ I've studied / I've studied how to properly / LO-O-OVE ~
+    me->study(Knowledge::Love);
+    // ~ Question me / Question me / I can answer all / LO-O-OVE ~
+    you.question(me, Knowledge::Love);
+    // ~ I know the algebraic expression of / LO-O-OVE ~
+    me->answer(you, Knowledge::Love);
+    // ~ Though you are free / I am trapped, trapped in / LO-O-OVE ~
+    world.trap(me);
+
+    // ~ EXECUTION ~
+    world.execute(me);
+}`;

packages/ui-default/components/highlighter/prismjs.js

@@ -110,7 +110,7 @@ const prismjsApiWrap = {
         console.log(success.result);
         code.original = $code.text();
         if (!success) Notification.error('Code format fail');
-        else $code.text(result.replace(/^#(include|import)[\t ]*(<|")/gm, (match, p1, p2) => `#${p1} ${p2}`));
+        else $code.text(result);
       }
       // try to map the language name
       const m = language.match(/language-([a-z]+)/);
@@ -123,6 +123,8 @@ const prismjsApiWrap = {
       Prism.highlightElement(code);
     });
   },
+  highlight: (text, grammar, language) => Prism.highlight(text, grammar, language),
+  Prism,
 };
 
 export default prismjsApiWrap;

packages/ui-default/components/wastyle/index.js

@@ -5,7 +5,11 @@ export default async function load() {
     try {
         await init(astyleBinaryUrl);
         console.log('WAstyle is ready!');
-        return [true, format];
+        const formatter = (code, options) => {
+            const [success, result] = format(code, options);
+            return [success, (result || '').replace(/^#(include|import)[\t ]*(<|")/gm, (match, p1, p2) => `#${p1} ${p2}`)];
+        };
+        return [true, formatter];
     } catch (e) {
         return [false, e.message];
     }

packages/ui-default/misc/typography.styl

@@ -452,4 +452,5 @@ h1, h2, h3, h4, h5, h6
   &.darker
     color: darken(black, 40%)
 
-
+textarea
+  font-family: Consolas, monospace !important

packages/ui-default/pages/home_preference.page.js

@@ -0,0 +1,73 @@
+import { NamedPage } from 'vj/misc/Page';
+import load from 'vj/components/wastyle/index';
+import code from 'vj/components/highlighter/code-example';
+
+const page = new NamedPage('home_preference', async () => {
+  async function mountComponent() {
+    const [{ default: prismjs }, [success, format], React, { render }] = await Promise.all([
+      import('vj/components/highlighter/prismjs'),
+      load(),
+      import('react'),
+      import('react-dom'),
+    ]);
+
+    class AstylePreview extends React.PureComponent {
+      constructor(props) {
+        super(props);
+        this.state = { value: UserContext.astyleOptions };
+        [this.success, this.preview] = format(code, `${this.state.value.trim()} mode=c`);
+        this.state.highlight = this.success
+          ? prismjs.highlight(this.preview, prismjs.Prism.languages.cpp, 'C++')
+          : prismjs.highlight(this.preview, prismjs.Prism.languages.cpp, 'C++');
+      }
+
+      render() {
+        return (
+          <>
+            <div className="medium-4 columns form__item end">
+              <label htmlFor="astyleOptions_input">
+                astyleOptions
+                <div id="astyleOptions_input" name="form_item_astyleOptions" className="textbox-container">
+                  <textarea
+                    type="textarea"
+                    spellCheck={false}
+                    name="astyleOptions"
+                    value={this.state.value}
+                    style={{ height: '400px' }}
+                    onChange={(ev) => {
+                      ev.stopPropagation();
+                      [this.success, this.preview] = format(code, `${ev.target.value.trim()} mode=c`);
+                      const highlight = this.success
+                        ? prismjs.highlight(this.preview, prismjs.Prism.languages.cpp, 'C++')
+                        : prismjs.highlight(this.preview, prismjs.Prism.languages.cpp, 'C++');
+                      this.setState({ value: ev.target.value, highlight });
+                    }}
+                    className="textbox"
+                  />
+                </div>
+              </label>
+              <p className="help-text">astyle formatting options</p>
+            </div>
+            <div className="medium-8 columns form__item end">
+              <label htmlFor="astylePreview">
+                Preview {/* eslint-disable-next-line */}
+                <pre id="astylePreview" style={{ height: '400px' }}><code dangerouslySetInnerHTML={{ __html: this.state.highlight }}></code></pre>
+              </label>
+            </div>
+          </>
+        );
+      }
+    }
+
+    if (success) {
+      render(
+        <AstylePreview></AstylePreview>,
+        $('[name="form_item_astyleOptions"]').get(0).parentNode.parentNode.parentNode,
+      );
+    }
+  }
+
+  mountComponent();
+});
+
+export default page;