From c7ec89619354404c3503384c7db7f3bf841ae33b Mon Sep 17 00:00:00 2001 From: Jason Park Date: Wed, 13 Feb 2019 12:57:47 -0500 Subject: [PATCH] Add layout feature --- src/backend/controllers/tracers.js | 2 +- src/backend/tracers/js/worker.js | 2 +- src/frontend/apis/index.js | 8 +- src/frontend/components/App/index.jsx | 34 +++++--- src/frontend/components/CodeEditor/index.jsx | 2 +- .../components/FoldableAceEditor/index.jsx | 6 +- src/frontend/components/Player/index.jsx | 21 ++--- .../components/ResizableContainer/index.jsx | 7 +- .../components/VisualizationViewer/index.jsx | 83 +++++++------------ .../VisualizationViewer/stylesheet.scss | 6 +- src/frontend/core/datas/ChartData.js | 10 --- src/frontend/core/datas/index.js | 7 -- src/frontend/core/layouts/HorizontalLayout.js | 6 ++ src/frontend/core/layouts/Layout.jsx | 55 ++++++++++++ src/frontend/core/layouts/VerticalLayout.js | 6 ++ src/frontend/core/layouts/index.js | 3 + .../core/renderers/GraphRenderer/index.jsx | 6 +- .../core/renderers/LogRenderer/index.jsx | 6 +- .../Array1DTracer.js} | 20 ++--- .../Array2DTracer.js} | 6 +- src/frontend/core/tracers/ChartTracer.js | 10 +++ .../GraphData.js => tracers/GraphTracer.js} | 20 ++--- .../LogData.js => tracers/LogTracer.js} | 6 +- .../MarkdownTracer.js} | 6 +- .../{datas/Data.jsx => tracers/Tracer.jsx} | 16 ++-- src/frontend/core/tracers/index.js | 7 ++ 26 files changed, 213 insertions(+), 148 deletions(-) delete mode 100644 src/frontend/core/datas/ChartData.js delete mode 100644 src/frontend/core/datas/index.js create mode 100644 src/frontend/core/layouts/HorizontalLayout.js create mode 100644 src/frontend/core/layouts/Layout.jsx create mode 100644 src/frontend/core/layouts/VerticalLayout.js create mode 100644 src/frontend/core/layouts/index.js rename src/frontend/core/{datas/Array1DData.js => tracers/Array1DTracer.js} (55%) rename src/frontend/core/{datas/Array2DData.js => tracers/Array2DTracer.js} (91%) create mode 100644 src/frontend/core/tracers/ChartTracer.js rename src/frontend/core/{datas/GraphData.js => tracers/GraphTracer.js} (94%) rename src/frontend/core/{datas/LogData.js => tracers/LogTracer.js} (79%) rename src/frontend/core/{datas/MarkdownData.js => tracers/MarkdownTracer.js} (63%) rename src/frontend/core/{datas/Data.jsx => tracers/Tracer.jsx} (52%) create mode 100644 src/frontend/core/tracers/index.js diff --git a/src/backend/controllers/tracers.js b/src/backend/controllers/tracers.js index d4304a4..04806e4 100644 --- a/src/backend/controllers/tracers.js +++ b/src/backend/controllers/tracers.js @@ -38,7 +38,7 @@ const trace = lang => (req, res, next) => { }).finally(() => clearTimeout(timer)); }) .then(() => new Promise((resolve, reject) => { - const visualizationPath = path.resolve(tempPath, 'traces.json'); + const visualizationPath = path.resolve(tempPath, 'visualization.json'); res.sendFile(visualizationPath, err => { if (err) return reject(new Error('Visualization Not Found')); resolve(); diff --git a/src/backend/tracers/js/worker.js b/src/backend/tracers/js/worker.js index 681d748..7d5ac5b 100644 --- a/src/backend/tracers/js/worker.js +++ b/src/backend/tracers/js/worker.js @@ -10,5 +10,5 @@ onmessage = e => { const lines = e.data.split('\n').map((line, i) => line.replace(/(\.\s*delay\s*)\(\s*\)/g, `$1(${i})`)); const code = lines.join('\n'); sandbox(code); - postMessage(AlgorithmVisualizer.Tracer.traces); + postMessage(AlgorithmVisualizer.Commander.commands); }; diff --git a/src/frontend/apis/index.js b/src/frontend/apis/index.js index f55e348..a4b645c 100644 --- a/src/frontend/apis/index.js +++ b/src/frontend/apis/index.js @@ -69,11 +69,11 @@ const GitHubApi = { const TracerApi = { md: ({ code }) => Promise.resolve([{ - tracerKey: '0-MarkdownTracer-Markdown', - method: 'construct', - args: ['MarkdownTracer', 'Markdown'], + key: 'markdown', + method: 'MarkdownTracer', + args: ['Markdown'], }, { - tracerKey: '0-MarkdownTracer-Markdown', + key: 'markdown', method: 'set', args: [code], }]), diff --git a/src/frontend/components/App/index.jsx b/src/frontend/components/App/index.jsx index 2e37cbd..69cbe69 100644 --- a/src/frontend/components/App/index.jsx +++ b/src/frontend/components/App/index.jsx @@ -27,13 +27,16 @@ class App extends BaseComponent { super(props); this.state = { - navigatorOpened: true, + workspaceVisibles: [true, true, true], workspaceWeights: [1, 2, 2], }; this.codeEditorRef = React.createRef(); this.ignoreHistoryBlock = this.ignoreHistoryBlock.bind(this); + this.handleClickTitleBar = this.handleClickTitleBar.bind(this); + this.loadScratchPapers = this.loadScratchPapers.bind(this); + this.handleChangeWorkspaceWeights = this.handleChangeWorkspaceWeights.bind(this); } componentDidMount() { @@ -161,7 +164,7 @@ class App extends BaseComponent { login: undefined, gistId, title: 'Untitled', - files: [CONTRIBUTING_MD, createUserFile('traces.json', JSON.stringify(content))], + files: [CONTRIBUTING_MD, createUserFile('visualization.json', JSON.stringify(content))], }); }); } else if (gistId === 'new') { @@ -182,7 +185,10 @@ class App extends BaseComponent { return Promise.resolve(); }; fetch() - .then(() => this.selectDefaultTab()) + .then(() => { + this.selectDefaultTab(); + return null; // to suppress unnecessary bluebird warning + }) .catch(error => { this.handleError(error); this.props.history.push('/'); @@ -204,15 +210,22 @@ class App extends BaseComponent { this.codeEditorRef.current.getWrappedInstance().handleResize(); } - toggleNavigatorOpened(navigatorOpened = !this.state.navigatorOpened) { - this.setState({ navigatorOpened }); + toggleNavigatorOpened(navigatorOpened = !this.state.workspaceVisibles[0]) { + const workspaceVisibles = [...this.state.workspaceVisibles]; + workspaceVisibles[0] = navigatorOpened; + this.setState({ workspaceVisibles }); } - render() { - const { navigatorOpened, workspaceWeights } = this.state; + handleClickTitleBar() { + this.toggleNavigatorOpened(); + } + render() { + const { workspaceVisibles, workspaceWeights } = this.state; const { titles, description, saved } = this.props.current; + const title = `${saved ? '' : '(Unsaved) '}${titles.join(' - ')}`; + const [navigatorOpened] = workspaceVisibles; return (
@@ -220,12 +233,11 @@ class App extends BaseComponent { {title} -
this.toggleNavigatorOpened()} - navigatorOpened={navigatorOpened} loadScratchPapers={() => this.loadScratchPapers()} +
this.handleChangeWorkspaceWeights(weights)}> + visibles={workspaceVisibles} onChangeWeights={this.handleChangeWorkspaceWeights}> diff --git a/src/frontend/components/CodeEditor/index.jsx b/src/frontend/components/CodeEditor/index.jsx index c50ad8b..5c67cd9 100644 --- a/src/frontend/components/CodeEditor/index.jsx +++ b/src/frontend/components/CodeEditor/index.jsx @@ -17,7 +17,7 @@ class CodeEditor extends React.Component { } handleResize() { - this.aceEditorRef.current.editor.resize(); + this.aceEditorRef.current.getWrappedInstance().resize(); } render() { diff --git a/src/frontend/components/FoldableAceEditor/index.jsx b/src/frontend/components/FoldableAceEditor/index.jsx index 5f9f0a9..1a7713b 100644 --- a/src/frontend/components/FoldableAceEditor/index.jsx +++ b/src/frontend/components/FoldableAceEditor/index.jsx @@ -11,7 +11,7 @@ import 'brace/theme/tomorrow_night_eighties'; import 'brace/ext/searchbox'; import { actions } from '/reducers'; -@connect(({ current }) => ({ current }), actions) +@connect(({ current }) => ({ current }), actions, null, { withRef: true }) class FoldableAceEditor extends AceEditor { componentDidMount() { super.componentDidMount(); @@ -40,6 +40,10 @@ class FoldableAceEditor extends AceEditor { } } } + + resize() { + this.editor.resize(); + } } export default FoldableAceEditor; diff --git a/src/frontend/components/Player/index.jsx b/src/frontend/components/Player/index.jsx index a988472..0333fcc 100644 --- a/src/frontend/components/Player/index.jsx +++ b/src/frontend/components/Player/index.jsx @@ -41,22 +41,23 @@ class Player extends BaseComponent { } } - reset(traces = []) { + reset(commands = []) { const chunks = [{ - traces: [], + commands: [], lineNumber: undefined, }]; - while (traces.length) { - const trace = traces.shift(); - if (trace.method === 'delay') { - const [lineNumber] = trace.args; + while (commands.length) { + const command = commands.shift(); + const { key, method, args } = command; + if (key === null && method === 'delay') { + const [lineNumber] = args; chunks[chunks.length - 1].lineNumber = lineNumber; chunks.push({ - traces: [], + commands: [], lineNumber: undefined, }); } else { - chunks[chunks.length - 1].traces.push(trace); + chunks[chunks.length - 1].commands.push(command); } } this.props.setChunks(chunks); @@ -76,10 +77,10 @@ class Player extends BaseComponent { const ext = extension(file.name); if (ext in TracerApi) { TracerApi[ext]({ code: file.content }, undefined, this.tracerApiSource.token) - .then(traces => { + .then(commands => { this.tracerApiSource = null; this.setState({ building: false }); - this.reset(traces); + this.reset(commands); this.next(); }) .catch(error => { diff --git a/src/frontend/components/ResizableContainer/index.jsx b/src/frontend/components/ResizableContainer/index.jsx index 24a3778..aa93daf 100644 --- a/src/frontend/components/ResizableContainer/index.jsx +++ b/src/frontend/components/ResizableContainer/index.jsx @@ -16,7 +16,7 @@ class ResizableContainer extends React.Component { let totalWeight = 0; let subtotalWeight = 0; weights.forEach((weight, i) => { - if (!visibles[i]) return; + if (visibles && !visibles[i]) return; totalWeight += weight; if (i < index) subtotalWeight += weight; }); @@ -34,9 +34,10 @@ class ResizableContainer extends React.Component { const elements = []; let lastIndex = -1; - const totalWeight = weights.filter((weight, i) => visibles[i]).reduce((sumWeight, weight) => sumWeight + weight, 0); + const totalWeight = weights.filter((weight, i) => !visibles || visibles[i]) + .reduce((sumWeight, weight) => sumWeight + weight, 0); children.forEach((child, i) => { - if (visibles[i]) { + if (!visibles || visibles[i]) { if (~lastIndex) { const prevIndex = lastIndex; elements.push( diff --git a/src/frontend/components/VisualizationViewer/index.jsx b/src/frontend/components/VisualizationViewer/index.jsx index fde46b2..b066dd7 100644 --- a/src/frontend/components/VisualizationViewer/index.jsx +++ b/src/frontend/components/VisualizationViewer/index.jsx @@ -1,21 +1,23 @@ import React from 'react'; import { connect } from 'react-redux'; -import { classes } from '/common/util'; -import { BaseComponent, ResizableContainer } from '/components'; +import { BaseComponent } from '/components'; import { actions } from '/reducers'; import styles from './stylesheet.scss'; -import { Array1DData, Array2DData, ChartData, Data, GraphData, LogData, MarkdownData } from '/core/datas'; +import * as TracerClasses from '/core/tracers'; +import * as LayoutClasses from '/core/layouts'; +import { classes } from '/common/util'; @connect(({ player }) => ({ player }), actions) class VisualizationViewer extends BaseComponent { constructor(props) { super(props); - this.state = { - dataWeights: {}, - }; + this.reset(); + } - this.datas = []; + reset() { + this.root = null; + this.objects = {}; } componentDidMount() { @@ -36,19 +38,11 @@ class VisualizationViewer extends BaseComponent { if (cursor > oldCursor) { applyingChunks = chunks.slice(oldCursor, cursor); } else { - this.datas = []; + this.reset(); applyingChunks = chunks.slice(0, cursor); } applyingChunks.forEach(chunk => this.applyChunk(chunk)); - const dataWeights = chunks === oldChunks ? { ...this.state.dataWeights } : {}; - this.datas.forEach(data => { - if (!(data.tracerKey in dataWeights)) { - dataWeights[data.tracerKey] = 1; - } - }); - this.setState({ dataWeights }); - const lastChunk = applyingChunks[applyingChunks.length - 1]; if (lastChunk && lastChunk.lineNumber !== undefined) { this.props.setLineIndicator({ lineNumber: lastChunk.lineNumber, cursor }); @@ -57,29 +51,24 @@ class VisualizationViewer extends BaseComponent { } } - addTracer(className, tracerKey, title) { - const DataClass = { - Tracer: Data, - MarkdownTracer: MarkdownData, - LogTracer: LogData, - Array2DTracer: Array2DData, - Array1DTracer: Array1DData, - ChartTracer: ChartData, - GraphTracer: GraphData, - }[className]; - const data = new DataClass(tracerKey, title, this.datas); - this.datas.push(data); - } - - applyTrace(trace) { - const { tracerKey, method, args } = trace; + applyCommand(command) { + const { key, method, args } = command; try { - if (method === 'construct') { - const [className, title] = args; - this.addTracer(className, tracerKey, title); + if (key === null && method === 'setRoot') { + const [root] = args; + this.root = this.objects[root]; + } else if (method === 'destroy') { + delete this.objects[key]; + } else if (method in LayoutClasses) { + const [children] = args; + const LayoutClass = LayoutClasses[method]; + this.objects[key] = new LayoutClass(key, key => this.objects[key], children); + } else if (method in TracerClasses) { + const [title] = args; + const TracerClass = TracerClasses[method]; + this.objects[key] = new TracerClass(key, key => this.objects[key], title); } else { - const data = this.datas.find(data => data.tracerKey === tracerKey); - data[method](...args); + this.objects[key][method](...args); } } catch (error) { this.handleError(error); @@ -87,30 +76,18 @@ class VisualizationViewer extends BaseComponent { } applyChunk(chunk) { - chunk.traces.forEach(trace => this.applyTrace(trace)); - } - - handleChangeWeights(weights) { - const dataWeights = {}; - weights.forEach((weight, i) => { - dataWeights[this.datas[i].tracerKey] = weight; - }); - this.setState({ dataWeights }); + chunk.commands.forEach(command => this.applyCommand(command)); } render() { const { className } = this.props; - const { dataWeights } = this.state; return ( - dataWeights[data.tracerKey])} - visibles={this.datas.map(() => true)} - onChangeWeights={weights => this.handleChangeWeights(weights)}> +
{ - this.datas.map(data => data.render()) + this.root && this.root.render() } - +
); } } diff --git a/src/frontend/components/VisualizationViewer/stylesheet.scss b/src/frontend/components/VisualizationViewer/stylesheet.scss index cdc44e1..8db0a8e 100644 --- a/src/frontend/components/VisualizationViewer/stylesheet.scss +++ b/src/frontend/components/VisualizationViewer/stylesheet.scss @@ -1,4 +1,8 @@ @import "~/common/stylesheet/index"; .visualization_viewer { -} \ No newline at end of file + flex: 1; + display: flex; + flex-direction: column; + align-items: stretch; +} diff --git a/src/frontend/core/datas/ChartData.js b/src/frontend/core/datas/ChartData.js deleted file mode 100644 index ab8149b..0000000 --- a/src/frontend/core/datas/ChartData.js +++ /dev/null @@ -1,10 +0,0 @@ -import { Array1DData } from '/core/datas'; -import { ChartRenderer } from '/core/renderers'; - -class ChartData extends Array1DData { - getRendererClass() { - return ChartRenderer; - } -} - -export default ChartData; diff --git a/src/frontend/core/datas/index.js b/src/frontend/core/datas/index.js deleted file mode 100644 index e8dc772..0000000 --- a/src/frontend/core/datas/index.js +++ /dev/null @@ -1,7 +0,0 @@ -export { default as Data } from './Data'; -export { default as MarkdownData } from './MarkdownData'; -export { default as LogData } from './LogData'; -export { default as Array2DData } from './Array2DData'; -export { default as Array1DData } from './Array1DData'; -export { default as ChartData } from './ChartData'; -export { default as GraphData } from './GraphData'; diff --git a/src/frontend/core/layouts/HorizontalLayout.js b/src/frontend/core/layouts/HorizontalLayout.js new file mode 100644 index 0000000..0de4f95 --- /dev/null +++ b/src/frontend/core/layouts/HorizontalLayout.js @@ -0,0 +1,6 @@ +import { Layout } from '/core/layouts'; + +class HorizontalLayout extends Layout { +} + +export default HorizontalLayout; diff --git a/src/frontend/core/layouts/Layout.jsx b/src/frontend/core/layouts/Layout.jsx new file mode 100644 index 0000000..b37579f --- /dev/null +++ b/src/frontend/core/layouts/Layout.jsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { ResizableContainer } from '/components'; +import { HorizontalLayout } from '/core/layouts'; + +class Layout { + constructor(key, getObject, children) { + this.key = key; + this.getObject = getObject; + this.children = children.map(key => this.getObject(key)); + this.weights = children.map(() => 1); + this.ref = React.createRef(); + + this.handleChangeWeights = this.handleChangeWeights.bind(this); + } + + add(key, index = this.children.length) { + const child = this.getObject(key); + this.children.splice(index, 0, child); + this.weights.splice(index, 0, 1); + } + + remove(key) { + const child = this.getObject(key); + const index = this.children.indexOf(child); + if (~index) { + this.children.splice(index, 1); + this.weights.splice(index, 1); + } + } + + removeAll() { + this.children = []; + this.weights = []; + } + + handleChangeWeights(weights) { + this.weights.splice(0, this.weights.length, ...weights); + this.ref.current.forceUpdate(); + } + + render() { + const horizontal = this instanceof HorizontalLayout; + + return ( + + { + this.children.map(tracer => tracer && tracer.render()) + } + + ); + } +} + +export default Layout; diff --git a/src/frontend/core/layouts/VerticalLayout.js b/src/frontend/core/layouts/VerticalLayout.js new file mode 100644 index 0000000..a98d9b2 --- /dev/null +++ b/src/frontend/core/layouts/VerticalLayout.js @@ -0,0 +1,6 @@ +import { Layout } from '/core/layouts'; + +class VerticalLayout extends Layout { +} + +export default VerticalLayout; diff --git a/src/frontend/core/layouts/index.js b/src/frontend/core/layouts/index.js new file mode 100644 index 0000000..c833ea7 --- /dev/null +++ b/src/frontend/core/layouts/index.js @@ -0,0 +1,3 @@ +export { default as Layout } from './Layout'; +export { default as HorizontalLayout } from './HorizontalLayout'; +export { default as VerticalLayout } from './VerticalLayout'; diff --git a/src/frontend/core/renderers/GraphRenderer/index.jsx b/src/frontend/core/renderers/GraphRenderer/index.jsx index 9bb6547..92fec19 100644 --- a/src/frontend/core/renderers/GraphRenderer/index.jsx +++ b/src/frontend/core/renderers/GraphRenderer/index.jsx @@ -7,7 +7,7 @@ class GraphRenderer extends Renderer { constructor(props) { super(props); - this.element = React.createRef(); + this.elementRef = React.createRef(); this.selectedNode = null; this.togglePan(true); @@ -35,7 +35,7 @@ class GraphRenderer extends Renderer { } computeCoords(e) { - const svg = this.element.current; + const svg = this.elementRef.current; const s = svg.createSVGPoint(); s.x = e.clientX; s.y = e.clientY; @@ -53,7 +53,7 @@ class GraphRenderer extends Renderer { baseHeight * this.zoom, ]; return ( - + diff --git a/src/frontend/core/renderers/LogRenderer/index.jsx b/src/frontend/core/renderers/LogRenderer/index.jsx index d25bc93..eb4bad6 100644 --- a/src/frontend/core/renderers/LogRenderer/index.jsx +++ b/src/frontend/core/renderers/LogRenderer/index.jsx @@ -6,12 +6,12 @@ class LogRenderer extends Renderer { constructor(props) { super(props); - this.element = React.createRef(); + this.elementRef = React.createRef(); } componentDidUpdate(prevProps, prevState, snapshot) { super.componentDidUpdate(prevProps, prevState, snapshot); - const div = this.element.current; + const div = this.elementRef.current; div.scrollTop = div.scrollHeight; } @@ -19,7 +19,7 @@ class LogRenderer extends Renderer { const { log } = this.props.data; return ( -
+
); } } diff --git a/src/frontend/core/datas/Array1DData.js b/src/frontend/core/tracers/Array1DTracer.js similarity index 55% rename from src/frontend/core/datas/Array1DData.js rename to src/frontend/core/tracers/Array1DTracer.js index 5bda332..1ed5f19 100644 --- a/src/frontend/core/datas/Array1DData.js +++ b/src/frontend/core/tracers/Array1DTracer.js @@ -1,20 +1,20 @@ -import { Array2DData } from '/core/datas'; +import { Array2DTracer } from '/core/tracers'; import { Array1DRenderer } from '/core/renderers'; -class Array1DData extends Array2DData { +class Array1DTracer extends Array2DTracer { getRendererClass() { return Array1DRenderer; } init() { super.init(); - this.chartData = null; + this.chartTracer = null; } set(array1d = []) { const array2d = [array1d]; super.set(array2d); - this.syncChartData(); + this.syncChartTracer(); } patch(x, v) { @@ -33,14 +33,14 @@ class Array1DData extends Array2DData { super.deselect(0, sx, 0, ex); } - chart(tracerKey) { - this.chartData = tracerKey ? this.findData(tracerKey) : null; - this.syncChartData(); + chart(key) { + this.chartTracer = key ? this.getObject(key) : null; + this.syncChartTracer(); } - syncChartData() { - if (this.chartData) this.chartData.data = this.data; + syncChartTracer() { + if (this.chartTracer) this.chartTracer.data = this.data; } } -export default Array1DData; +export default Array1DTracer; diff --git a/src/frontend/core/datas/Array2DData.js b/src/frontend/core/tracers/Array2DTracer.js similarity index 91% rename from src/frontend/core/datas/Array2DData.js rename to src/frontend/core/tracers/Array2DTracer.js index cf2d320..dd59f8c 100644 --- a/src/frontend/core/datas/Array2DData.js +++ b/src/frontend/core/tracers/Array2DTracer.js @@ -1,4 +1,4 @@ -import { Data } from '/core/datas'; +import { Tracer } from '/core/tracers'; import { Array2DRenderer } from '/core/renderers'; class Element { @@ -9,7 +9,7 @@ class Element { } } -class Array2DData extends Data { +class Array2DTracer extends Tracer { getRendererClass() { return Array2DRenderer; } @@ -62,4 +62,4 @@ class Array2DData extends Data { } } -export default Array2DData; +export default Array2DTracer; diff --git a/src/frontend/core/tracers/ChartTracer.js b/src/frontend/core/tracers/ChartTracer.js new file mode 100644 index 0000000..9eec46e --- /dev/null +++ b/src/frontend/core/tracers/ChartTracer.js @@ -0,0 +1,10 @@ +import { Array1DTracer } from '/core/tracers'; +import { ChartRenderer } from '/core/renderers'; + +class ChartTracer extends Array1DTracer { + getRendererClass() { + return ChartRenderer; + } +} + +export default ChartTracer; diff --git a/src/frontend/core/datas/GraphData.js b/src/frontend/core/tracers/GraphTracer.js similarity index 94% rename from src/frontend/core/datas/GraphData.js rename to src/frontend/core/tracers/GraphTracer.js index 285d6ee..2d3f6d1 100644 --- a/src/frontend/core/datas/GraphData.js +++ b/src/frontend/core/tracers/GraphTracer.js @@ -1,8 +1,8 @@ -import { Data } from '/core/datas'; +import { Tracer } from '/core/tracers'; import { distance } from '/common/util'; import { GraphRenderer } from '/core/renderers'; -class GraphData extends Data { +class GraphTracer extends Tracer { getRendererClass() { return GraphRenderer; } @@ -21,7 +21,7 @@ class GraphData extends Data { this.isDirected = true; this.isWeighted = false; this.callLayout = { method: this.layoutCircle, args: [] }; - this.logData = null; + this.logTracer = null; } set(array2d = []) { @@ -230,8 +230,8 @@ class GraphData extends Data { const node = this.findNode(target); if (weight !== undefined) node.weight = weight; node.visitedCount += visit ? 1 : -1; - if (this.logData) { - this.logData.println(visit ? (source || '') + ' -> ' + target : (source || '') + ' <- ' + target); + if (this.logTracer) { + this.logTracer.println(visit ? (source || '') + ' -> ' + target : (source || '') + ' <- ' + target); } } @@ -248,14 +248,14 @@ class GraphData extends Data { if (edge) edge.selectedCount += select ? 1 : -1; const node = this.findNode(target); node.selectedCount += select ? 1 : -1; - if (this.logData) { - this.logData.println(select ? (source || '') + ' => ' + target : (source || '') + ' <= ' + target); + if (this.logTracer) { + this.logTracer.println(select ? (source || '') + ' => ' + target : (source || '') + ' <= ' + target); } } - log(tracerKey) { - this.logData = tracerKey ? this.findData(tracerKey) : null; + log(key) { + this.logTracer = key ? this.getObject(key) : null; } } -export default GraphData; +export default GraphTracer; diff --git a/src/frontend/core/datas/LogData.js b/src/frontend/core/tracers/LogTracer.js similarity index 79% rename from src/frontend/core/datas/LogData.js rename to src/frontend/core/tracers/LogTracer.js index b0f2dd3..f20871a 100644 --- a/src/frontend/core/datas/LogData.js +++ b/src/frontend/core/tracers/LogTracer.js @@ -1,8 +1,8 @@ import { sprintf } from 'sprintf-js'; -import { Data } from '/core/datas'; +import { Tracer } from '/core/tracers'; import { LogRenderer } from '/core/renderers'; -class LogData extends Data { +class LogTracer extends Tracer { getRendererClass() { return LogRenderer; } @@ -25,4 +25,4 @@ class LogData extends Data { } } -export default LogData; +export default LogTracer; diff --git a/src/frontend/core/datas/MarkdownData.js b/src/frontend/core/tracers/MarkdownTracer.js similarity index 63% rename from src/frontend/core/datas/MarkdownData.js rename to src/frontend/core/tracers/MarkdownTracer.js index 50ff994..3c456f8 100644 --- a/src/frontend/core/datas/MarkdownData.js +++ b/src/frontend/core/tracers/MarkdownTracer.js @@ -1,7 +1,7 @@ -import { Data } from '/core/datas'; +import { Tracer } from '/core/tracers'; import { MarkdownRenderer } from '/core/renderers'; -class MarkdownData extends Data { +class MarkdownTracer extends Tracer { getRendererClass() { return MarkdownRenderer; } @@ -12,4 +12,4 @@ class MarkdownData extends Data { } } -export default MarkdownData; +export default MarkdownTracer; diff --git a/src/frontend/core/datas/Data.jsx b/src/frontend/core/tracers/Tracer.jsx similarity index 52% rename from src/frontend/core/datas/Data.jsx rename to src/frontend/core/tracers/Tracer.jsx index c090ec0..46d8deb 100644 --- a/src/frontend/core/datas/Data.jsx +++ b/src/frontend/core/tracers/Tracer.jsx @@ -1,19 +1,15 @@ import React from 'react'; import { Renderer } from '/core/renderers'; -class Data { - constructor(tracerKey, title, datas) { - this.tracerKey = tracerKey; +class Tracer { + constructor(key, getObject, title = this.constructor.name) { + this.key = key; + this.getObject = getObject; this.title = title; - this.datas = datas; this.init(); this.reset(); } - findData(tracerKey) { - return this.datas.find(data => data.tracerKey === tracerKey); - } - getRendererClass() { return Renderer; } @@ -24,7 +20,7 @@ class Data { render() { const RendererClass = this.getRendererClass(); return ( - + ); } @@ -36,4 +32,4 @@ class Data { } } -export default Data; +export default Tracer; diff --git a/src/frontend/core/tracers/index.js b/src/frontend/core/tracers/index.js new file mode 100644 index 0000000..1b94f99 --- /dev/null +++ b/src/frontend/core/tracers/index.js @@ -0,0 +1,7 @@ +export { default as Tracer } from './Tracer'; +export { default as MarkdownTracer } from './MarkdownTracer'; +export { default as LogTracer } from './LogTracer'; +export { default as Array2DTracer } from './Array2DTracer'; +export { default as Array1DTracer } from './Array1DTracer'; +export { default as ChartTracer } from './ChartTracer'; +export { default as GraphTracer } from './GraphTracer'; -- GitLab