From 92986442d42153bd82f20f0f49bf3dc509c8bca6 Mon Sep 17 00:00:00 2001 From: undefined Date: Fri, 16 Apr 2021 01:22:08 +0800 Subject: [PATCH] =?UTF-8?q?ui:=20=E5=8D=B3=E6=97=B6=E9=A2=84=E8=A7=88astyl?= =?UTF-8?q?e-format?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/highlighter/code-example.js | 110 ++++++++++++++++++ .../components/highlighter/prismjs.js | 4 +- .../ui-default/components/wastyle/index.js | 6 +- packages/ui-default/misc/typography.styl | 3 +- .../ui-default/pages/home_preference.page.js | 73 ++++++++++++ 5 files changed, 193 insertions(+), 3 deletions(-) create mode 100644 packages/ui-default/components/highlighter/code-example.js create mode 100644 packages/ui-default/pages/home_preference.page.js diff --git a/packages/ui-default/components/highlighter/code-example.js b/packages/ui-default/components/highlighter/code-example.js new file mode 100644 index 000000000..f64616dc0 --- /dev/null +++ b/packages/ui-default/components/highlighter/code-example.js @@ -0,0 +1,110 @@ +export default `#include + +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*>(me)->getDimension(); + break; + + case Object::CIRCLE: + // ~ If I'm a circle / Then I will give you my CIRCUMFERENCE ~ + you << dynamic_cast(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(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); +}`; diff --git a/packages/ui-default/components/highlighter/prismjs.js b/packages/ui-default/components/highlighter/prismjs.js index 6e344af14..ed1ad97de 100644 --- a/packages/ui-default/components/highlighter/prismjs.js +++ b/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; diff --git a/packages/ui-default/components/wastyle/index.js b/packages/ui-default/components/wastyle/index.js index 98a879072..3e378c769 100644 --- a/packages/ui-default/components/wastyle/index.js +++ b/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]; } diff --git a/packages/ui-default/misc/typography.styl b/packages/ui-default/misc/typography.styl index 803921914..4746919d3 100644 --- a/packages/ui-default/misc/typography.styl +++ b/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 diff --git a/packages/ui-default/pages/home_preference.page.js b/packages/ui-default/pages/home_preference.page.js new file mode 100644 index 000000000..0d1477b97 --- /dev/null +++ b/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 ( + <> +
+