From e9b5fcfd88b1a1375d5ccc5fc61c3561cf55fc65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Loi=CC=88c=20Correnson?= <loic.correnson@cea.fr>
Date: Fri, 15 May 2020 12:31:12 +0200
Subject: [PATCH] [ivette] refactor AST toolbar
---
ivette/src/renderer/ASTview.tsx | 90 +++++++++++++--------------------
1 file changed, 36 insertions(+), 54 deletions(-)
diff --git a/ivette/src/renderer/ASTview.tsx b/ivette/src/renderer/ASTview.tsx
index 1efa7a20abf..e7d564e533f 100644
--- a/ivette/src/renderer/ASTview.tsx
+++ b/ivette/src/renderer/ASTview.tsx
@@ -7,17 +7,23 @@ import * as Server from 'frama-c/server';
import * as States from 'frama-c/states';
import * as Dome from 'dome';
-import { Vfill } from 'dome/layout/boxes';
import { RichTextBuffer } from 'dome/text/buffers';
import { Text } from 'dome/text/editors';
-import { Select, Switch, IconButton } from 'dome/controls/buttons';
-import * as Toolbars from 'dome/frame/toolbars';
+import { Select, IconButton } from 'dome/controls/buttons';
+import { Space } from 'dome/frame/toolbars';
import { Component, TitleBar } from 'frama-c/LabViews';
import 'codemirror/mode/clike/clike';
import 'codemirror/theme/ambiance.css';
import 'codemirror/theme/solarized.css';
+const THEMES = [
+ { id: "default", label: "Default" },
+ { id: "ambiance", label: "Ambiance" },
+ { id: "solarized light", label: "Solarized Light" },
+ { id: "solarized dark", label: "Solarized Dark" }
+];
+
// --------------------------------------------------------------------------
// --- Rich Text Printer
// --------------------------------------------------------------------------
@@ -63,21 +69,18 @@ async function loadAST(buffer: any, theFunction?: string, theMarker?: string) {
// --- AST Printer
// --------------------------------------------------------------------------
-function useGlobal(param: string, dft: any) {
- return Dome.useGlobalSetting(`ASTview.${param}`, dft);
-}
-
const ASTview = () => {
// Hooks
const buffer = React.useMemo(() => new RichTextBuffer(), []);
const printed = React.useRef();
const [select, setSelect] = States.useSelection();
+ const [theme, setTheme] = Dome.useGlobalSetting('AST.theme', 'default');
+ const [fontSize, setFontSize] = Dome.useGlobalSetting('AST.fontSize', 12);
+ const [lineWrapping, setLineWrapping] = Dome.useSwitch('ASTview.lineWrapping', false);
+
const theFunction = select && select.function;
const theMarker = select && select.marker;
- const [theme, setTheme] = useGlobal('theme', 'default');
- const [lineWrapping, setLineWrapping] = useGlobal('lineWrapping', false);
- const [fontSize, setFontSize] = useGlobal('fontSize', 12);
// Hook: async loading
React.useEffect(() => {
@@ -93,56 +96,35 @@ const ASTview = () => {
}, [buffer, theMarker]);
// Callbacks
+ const zoomIn = () => setFontSize(fontSize + 2);
+ const zoomOut = () => setFontSize(fontSize - 2);
const onSelection = (marker: any) => setSelect({ marker });
- const titlebar = (
- <TitleBar>
- <Select
- value={theme}
- onChange={(name: string) => setTheme(name)}
- >
- <option value="default" label="Default" />
- <option value="ambiance" label="Ambiance" />
- <option value="solarized light" label="Solarized light" />
- <option value="solarized dark" label="Solarized dark" />
- </Select>
- <Toolbars.Space />
- <IconButton
- icon="MINUS"
- title="Decrease the font size"
- onClick={() => setFontSize(fontSize - 2)}
- />
- <IconButton
- icon="PLUS"
- title="increase the font size"
- onClick={() => setFontSize(fontSize + 2)}
- />
- <Toolbars.Space />
- <Switch
- label="Line wrapping"
- title="Change line wrapping mode"
- value={lineWrapping}
- onChange={() => setLineWrapping(!lineWrapping)}
- />
- <Toolbars.Space />
- </TitleBar>
- );
+ // Theme Popup
+
+ const checkTheme = (th: { id: string }) => ({ checked: th.id === theme, ...th });
+ const selectTheme = (id?: string) => id && setTheme(id);
+ const themePopup = () => Dome.popupMenu(THEMES.map(checkTheme), selectTheme);
// Component
return (
<>
- {titlebar}
- <Vfill style={{ fontSize }}>
- <Text
- buffer={buffer}
- mode="text/x-csrc"
- theme={theme}
- lineWrapping={lineWrapping}
- selection={theMarker}
- onSelection={onSelection}
- readOnly
- />
- </Vfill>
+ <TitleBar>
+ <IconButton icon="ZOOM.OUT" onClick={zoomOut} />
+ <IconButton icon="ZOOM.IN" onClick={zoomIn} />
+ <IconButton icon="CODE" onClick={themePopup} />
+ <IconButton icon="WRAPTEXT" selected={lineWrapping} onClick={setLineWrapping} />
+ </TitleBar>
+ <Text
+ buffer={buffer}
+ mode="text/x-csrc"
+ theme={theme}
+ fontSize={fontSize}
+ lineWrapping={lineWrapping}
+ selection={theMarker}
+ onSelection={onSelection}
+ readOnly
+ />
</>
);
--
GitLab