11 |
12 | }
13 |
14 | <%= name %>.propTypes = {
15 | };
16 |
17 | <%= name %>.defaultProps = {
18 | };
19 |
20 | export default <%= name %>;
--------------------------------------------------------------------------------
/_templates/view/cont/component.ejs.t:
--------------------------------------------------------------------------------
1 | ---
2 | to: src/views/<%= name %>/<%= name %>.js
3 | ---
4 | import React from 'react';
5 | import PropTypes from 'prop-types';
6 |
7 | import './<%= name %>.css'
8 |
9 | const <%= name %> = ({ }) => {
10 | return
11 |
12 | }
13 |
14 | <%= name %>.propTypes = {
15 | };
16 |
17 | <%= name %>.defaultProps = {
18 | };
19 |
20 | export default <%= name %>;
--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/src/views/Title/Title.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Title from './Title';
3 | import { getComponenent } from '../storybook/stories'
4 |
5 | export default {
6 | title: 'Components/Title',
7 | component: Title,
8 | };
9 |
10 | const Template = (args) => First panel
Other panel
12 |
15 | }
16 |
17 | export default SubTitle;
18 |
--------------------------------------------------------------------------------
/src/views/WindowImportUrl/index.js:
--------------------------------------------------------------------------------
1 | import { useDispatch, useSelector } from 'react-redux'
2 | import Internal from './WindowImportUrl'
3 | import { importUrl, closeImportUrl, updateUrl } from '../../actions/editor';
4 |
5 | const WindowImportUrl = () => {
6 | const dispatch = useDispatch();
7 |
8 | const onClose = () => dispatch(closeImportUrl());
9 | const open = useSelector((state) => state.editor.windowImportUrlOpened)
10 | const url = useSelector((state) => state.editor.windowImportUrl)
11 | const onImportUrl = (url) => dispatch(importUrl(url));
12 | const onUrlChange = (url) => dispatch(updateUrl(url));
13 |
14 | return Edit diagrams from textual descriptions! : A kroki interface.
13 | Github project page: https://github.com/webgiss/niolesk/ - Version {version}
14 |
13 | 
14 |
15 |
17 |
27 |
38 | }
39 |
40 | CopyField.propTypes = {
41 | text: PropTypes.string.isRequired,
42 | onCopy: PropTypes.func.isRequired,
43 | onCopyHover: PropTypes.func.isRequired,
44 | isCopyHover: PropTypes.bool.isRequired,
45 | isCopied: PropTypes.bool.isRequired,
46 | scope: PropTypes.string.isRequired,
47 | isMultiline: PropTypes.bool.isRequired,
48 | };
49 |
50 | CopyField.defaultProps = {
51 | text: '',
52 | isCopyHover: false,
53 | isCopied: false,
54 | scope: 'image',
55 | isMultiline: false,
56 | };
57 |
58 | export default CopyField;
59 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
15 |
16 |
20 |
21 |
30 | This is a content
, 29 | open: true, 30 | isContentCentered: true, 31 | actions: null, 32 | }; 33 | 34 | export const Default = getComponenent(Template, { ...defaultArgs }); 35 | export const WithExampleCards = getComponenent(Template, { ...defaultArgs, children:
23 |
43 | }
44 |
45 | export default Render;
--------------------------------------------------------------------------------
/src/views/Editor/Editor.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import MonacoEditor from '@uiw/react-monacoeditor';
3 | import PropTypes from 'prop-types';
4 | import './Editor.css'
5 | import 'monaco-editor/esm/vs/language/json/json.worker'
6 |
7 | class Editor extends React.Component {
8 | get shouldUpdate() {
9 | return this._shouldUpdate === undefined ? true : this._shouldUpdate
10 | }
11 |
12 | set shouldUpdate(value) {
13 | this._shouldUpdate = value;
14 | }
15 |
16 | shouldComponentUpdate(nextProps) {
17 | if (this._editor && this._editor.editor) {
18 | const editorText = this._editor.editor.getValue();
19 | const nextPropsText = nextProps.text;
20 |
21 | if (nextPropsText === editorText) {
22 | if (nextProps.height !== this.props.height) {
23 | this.shouldUpdate = true;
24 | } else {
25 | this.shouldUpdate = false;
26 | }
27 | } else {
28 | this.shouldUpdate = true;
29 | }
30 | return this.shouldUpdate;
31 | } else {
32 | return true;
33 | }
34 | }
35 |
36 | render() {
37 | const { text, language, onTextChanged, height } = this.props;
38 | const { shouldUpdate } = this;
39 |
40 | return
24 | {
25 | diagramError ?
26 | :
27 |
28 | {(utils) => {
29 | if (shouldRedraw) {
30 | utils.resetTransform()
31 | }
32 | return
33 |
37 | }}
38 |
39 | }
40 |
41 |
42 |
34 | 
{ onDiagramError(diagramUrl) }} style={{ maxWidth: width, maxHeight: height, }} />
35 |
36 |
41 | this._editor = ref}
44 | language={language || "plaintext"}
45 |
46 | onChange={(text) => onTextChanged(text)}
47 | value={shouldUpdate ? text : null}
48 | options={{
49 | theme: 'vs',
50 | automaticLayout: true,
51 | folding: true,
52 | foldingStrategy: 'indentation',
53 | }}
54 | height={`${height}px`}
55 | />
56 |
57 | }
58 | }
59 |
60 | Editor.propTypes = {
61 | text: PropTypes.string,
62 | language: PropTypes.string,
63 | onTextChanged: PropTypes.func.isRequired,
64 | height: PropTypes.number,
65 | };
66 |
67 | export default Editor;
--------------------------------------------------------------------------------
/src/actions/example.test.js:
--------------------------------------------------------------------------------
1 | import { CHANGE_EXAMPLE_INDEX, CHANGE_SEARCH, CLOSE_EXAMPLE, IMPORT_EXAMPLE, NEXT_EXAMPLE, OPEN_EXAMPLES, PREV_EXAMPLE, VIEW_EXAMPLE } from "../constants/example";
2 | import { changeExampleIndex, closeExample, importExample, nextExample, openExamples, prevExample, updateSearch, viewExample } from "./example";
3 |
4 | describe('openExamples', () => {
5 | it(`should dispatch the correct action`, () => {
6 | const result = openExamples();
7 | expect(result).toStrictEqual({ type: OPEN_EXAMPLES })
8 | })
9 | })
10 |
11 | describe('changeExampleIndex', () => {
12 | it(`should dispatch the correct action`, () => {
13 | const result = changeExampleIndex(17);
14 | expect(result).toStrictEqual({ type: CHANGE_EXAMPLE_INDEX, exampleIndex: 17 })
15 | })
16 | })
17 |
18 | describe('importExample', () => {
19 | it(`should dispatch the correct action`, () => {
20 | const result = importExample('A -> B; B -> C;', 'grutDiagram');
21 | expect(result).toStrictEqual({ type: IMPORT_EXAMPLE, diagramText: 'A -> B; B -> C;', diagramType: 'grutDiagram' })
22 | })
23 | })
24 |
25 | describe('viewExample', () => {
26 | it(`should dispatch the correct action`, () => {
27 | const result = viewExample(17);
28 | expect(result).toStrictEqual({ type: VIEW_EXAMPLE, exampleIndex: 17 })
29 | })
30 | })
31 |
32 | describe('closeExample', () => {
33 | it(`should dispatch the correct action`, () => {
34 | const result = closeExample();
35 | expect(result).toStrictEqual({ type: CLOSE_EXAMPLE })
36 | })
37 | })
38 |
39 | describe('prevExample', () => {
40 | it(`should dispatch the correct action`, () => {
41 | const result = prevExample();
42 | expect(result).toStrictEqual({ type: PREV_EXAMPLE })
43 | })
44 | })
45 |
46 | describe('nextExample', () => {
47 | it(`should dispatch the correct action`, () => {
48 | const result = nextExample();
49 | expect(result).toStrictEqual({ type: NEXT_EXAMPLE })
50 | })
51 | })
52 |
53 | describe('updateSearch', () => {
54 | it(`should dispatch the correct action`, () => {
55 | const result = updateSearch('vega pyr');
56 | expect(result).toStrictEqual({ type: CHANGE_SEARCH, search: 'vega pyr' });
57 | })
58 | })
59 |
--------------------------------------------------------------------------------
/public/config-analytic-providers.js:
--------------------------------------------------------------------------------
1 | window.config_analytic_providers = {
2 | matomo_js: [
3 | {
4 | type: 'js',
5 | content: `
6 | var _paq = window._paq = window._paq || [];
7 | /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
8 | _paq.push(['trackPageView']);
9 | _paq.push(['enableLinkTracking']);
10 | (function() {
11 | var u="{1}";
12 | _paq.push(['setTrackerUrl', u+'matomo.php']);
13 | _paq.push(['setSiteId', '{2}']);
14 | var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
15 | g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
16 | })();
17 | `,
18 | },
19 | ],
20 | matomo_image: [
21 | {
22 | type: 'html',
23 | content: `
24 |
25 | -
17 | {items.map((item, index) =>
{diagramText}
35 |
89 |
131 | }
132 |
133 | App.propTypes = {
134 | onExamples: PropTypes.func.isRequired,
135 | onImportUrl: PropTypes.func.isRequired,
136 | onSetZenMode: PropTypes.func.isRequired,
137 | onKey: PropTypes.func.isRequired,
138 | onResize: PropTypes.func.isRequired,
139 | };
140 |
141 | export default App;
142 |
--------------------------------------------------------------------------------
/src/reducers/utils/analytics_functions.test.js:
--------------------------------------------------------------------------------
1 | import get_analytic_content from './analytics_functions'
2 |
3 | const default_content = `
4 | analytics_call('https://example.com/analytics', '3;7,15,1,292')
5 | `
6 |
7 | const example_provider_name = 'example'
8 | const example_provider_data = ['https://example.com/analytics', '42']
9 |
10 | const other_provider_name = 'other'
11 | const other_provider_data = ['https://example.com/analytics/142.png']
12 |
13 | const complex_provider_name = 'complex'
14 | const complex_provider_data = ['https://example.com/analytics', '43', 'erk']
15 |
16 | const nonexisting_provider_name = 'nonexisting'
17 | const nonexisting_provider_data = ['https://example.com/analytics', '43', 'erk']
18 |
19 | const nodata_provider_name = 'nodata'
20 | const nodata_provider_data = []
21 |
22 | const multiple_js_provider_name = 'multiple_js'
23 | const multiple_js_provider_data = ['E-B6533HAL42']
24 |
25 | const default_providers = {
26 | 'example': [
27 | {
28 | type: 'js',
29 | content: `
30 | const analytics_url='{1}';
31 | const analytics_id='{2}';
32 | analytics_call(analytics_url, analytics_id)
33 | `,
34 | },
35 | ],
36 | 'other': [
37 | {
38 | type: 'html',
39 | content: `
90 |
93 |
113 |
114 |
115 |
116 |
117 |
120 | {
121 | hasAnalyticsHtml ? analyticsHtml.map((item) => ) : null
122 | }
123 |
124 |
125 |
130 | 
`,
56 | },
57 | ],
58 | 'multiple_js': [
59 | {
60 | type: 'js',
61 | content: `https://example.com/tag/js?id={1}`,
62 | },
63 | {
64 | type: 'js',
65 | content: `
66 | window.dataExample = window.dataExample || []
67 | const exampleTag = ()=>dataExample.push(arguments)
68 | exampleTag('js',new Date())
69 | exampleTag('config', '{1}')
70 | `,
71 | },
72 | ]
73 | }
74 |
75 | const example_expected_content = [
76 | {
77 | content: `
78 | const analytics_url='https://example.com/analytics';
79 | const analytics_id='42';
80 | analytics_call(analytics_url, analytics_id)
81 | `,
82 | type: 'js',
83 | },
84 | ]
85 |
86 | const other_expected_content = [
87 | {
88 | content: `
`,
89 | type: 'html',
90 | },
91 | ]
92 |
93 | const complex_expected_content = [
94 | {
95 | content: `
96 | const analytics_url='https://example.com/analytics';
97 | const analytics_id='43';
98 | analytics_call('https://example.com/analytics', '43', 'erk')
99 | `,
100 | type: 'js',
101 | },
102 | ]
103 |
104 | const nodata_expected_content = [
105 | {
106 | content: default_providers['nodata'][0]['content'],
107 | type: 'html',
108 | },
109 | ]
110 |
111 | const multiple_js_expected_content = [
112 | {
113 | content: 'https://example.com/tag/js?id=E-B6533HAL42',
114 | type: 'js',
115 | },
116 | {
117 | content: `
118 | window.dataExample = window.dataExample || []
119 | const exampleTag = ()=>dataExample.push(arguments)
120 | exampleTag('js',new Date())
121 | exampleTag('config', 'E-B6533HAL42')
122 | `,
123 | type: 'js',
124 | },
125 | ]
126 |
127 | describe('get_analytic_content', () => {
128 | it('should return the content if provided a non null non empty string', () => {
129 | const content = default_content
130 | const type = 'html'
131 | const provider_name = example_provider_name
132 | const provider_data = example_provider_data
133 | const providers = default_providers
134 | const result = get_analytic_content(content, type, provider_name, provider_data, providers)
135 | expect(result).toStrictEqual([{ content: default_content, type: 'html' }]);
136 | })
137 |
138 | it('should return null if provided an empty content, and a provider name that doesnt exists in providers', () => {
139 | const content = ''
140 | const type = ''
141 | const provider_name = nonexisting_provider_name
142 | const provider_data = nonexisting_provider_data
143 | const providers = default_providers
144 | const result = get_analytic_content(content, type, provider_name, provider_data, providers)
145 | expect(result).toBeNull();
146 | })
147 |
148 | it('should return null if provided an empty content, and a provider name that doesnt exists in providers even if type is provided not empty', () => {
149 | const content = ''
150 | const type = 'js'
151 | const provider_name = nonexisting_provider_name
152 | const provider_data = nonexisting_provider_data
153 | const providers = default_providers
154 | const result = get_analytic_content(content, type, provider_name, provider_data, providers)
155 | expect(result).toBeNull();
156 | })
157 |
158 | it('should return null if provided an empty content, and a provider name that doesnt exists in providers even if type is provided not empty (bis)', () => {
159 | const content = ''
160 | const type = 'html'
161 | const provider_name = nonexisting_provider_name
162 | const provider_data = nonexisting_provider_data
163 | const providers = default_providers
164 | const result = get_analytic_content(content, type, provider_name, provider_data, providers)
165 | expect(result).toBeNull();
166 | })
167 |
168 | it('should return data for the correct provider if provided an empty content and a provider that need no data', () => {
169 | const content = ''
170 | const type = ''
171 | const provider_name = nodata_provider_name
172 | const provider_data = nodata_provider_data
173 | const providers = default_providers
174 | const result = get_analytic_content(content, type, provider_name, provider_data, providers)
175 | expect(result).toStrictEqual(nodata_expected_content);
176 | })
177 |
178 | it('should return the formated pattern "example" if provided the "example" provider and data', () => {
179 | const content = ''
180 | const type = 'html'
181 | const provider_name = example_provider_name
182 | const provider_data = example_provider_data
183 | const providers = default_providers
184 | const result = get_analytic_content(content, type, provider_name, provider_data, providers)
185 | expect(result).toStrictEqual(example_expected_content);
186 | })
187 |
188 | it('should return the formated pattern "example" if provided the "example" provider and data even if the content is null and not empty', () => {
189 | const content = ''
190 | const type = 'html'
191 | const provider_name = example_provider_name
192 | const provider_data = example_provider_data
193 | const providers = default_providers
194 | const result = get_analytic_content(content, type, provider_name, provider_data, providers)
195 | expect(result).toStrictEqual(example_expected_content);
196 | })
197 |
198 | it('should return the formated pattern "other" if provided the "other" provider and data', () => {
199 | const content = ''
200 | const type = 'html'
201 | const provider_name = other_provider_name
202 | const provider_data = other_provider_data
203 | const providers = default_providers
204 | const result = get_analytic_content(content, type, provider_name, provider_data, providers)
205 | expect(result).toStrictEqual(other_expected_content);
206 | })
207 |
208 | it('should return the formated pattern "complex" if provided the "complex" provider and data', () => {
209 | const content = ''
210 | const type = 'html'
211 | const provider_name = complex_provider_name
212 | const provider_data = complex_provider_data
213 | const providers = default_providers
214 | const result = get_analytic_content(content, type, provider_name, provider_data, providers)
215 | expect(result).toStrictEqual(complex_expected_content);
216 | })
217 |
218 | it('should return the formated pattern "multiple_js" if provided the "multiple_js" provider and data', () => {
219 | const content = ''
220 | const type = 'html'
221 | const provider_name = multiple_js_provider_name
222 | const provider_data = multiple_js_provider_data
223 | const providers = default_providers
224 | const result = get_analytic_content(content, type, provider_name, provider_data, providers)
225 | expect(result).toStrictEqual(multiple_js_expected_content);
226 | })
227 | })
--------------------------------------------------------------------------------
/src/actions/editor.test.js:
--------------------------------------------------------------------------------
1 | import { COPY_BUTTON_HOVERED, COPY_TEXT, DIAGRAM_CHANGED, DIAGRAM_CHANGED_UPDATE, DIAGRAM_HAS_ERROR, DIAGRAM_TYPE_CHANGED, IMPORT_URL, KEY_PRESSED, OPEN_IMPORT_URL, RENDERURL_CHANGED, TEXT_COPIED, UPDATE_IMPORT_URL, WINDOW_RESIZED, ZEN_MODE_CHANGED } from '../constants/editor';
2 | import { changeZenMode, copyButtonHovered, copyText, diagramChanged, diagramHasError, diagramTypeChanged, importUrl, keyPressed, onWindowResized, openImportUrl, renderUrlChanged, updateUrl } from './editor'
3 | import delay from './utils/delay';
4 |
5 | import { resetCopy, hasCopy, getCopy, mockCopy } from './__jest__/copy'
6 | import { executeThunkAction, getDispatchActions, resetDispatchActions } from './__jest__/thunk'
7 | import { getCurrentTime } from './__jest__/time'
8 |
9 | jest.mock('copy-to-clipboard', () => (element) => { mockCopy(element); });
10 |
11 | describe('copyText', () => {
12 | it('should dispatch COPY_TEXT', async () => {
13 | resetCopy();
14 | resetDispatchActions();
15 | expect(hasCopy()).toBe(false);
16 | expect(getDispatchActions().length).toBe(0)
17 |
18 | const copyTextPromise = executeThunkAction(() => copyText('scope', 'text'))
19 |
20 | expect(hasCopy()).toBe(true);
21 | expect(getCopy()).toBe('text')
22 | let dispatch_state = getDispatchActions();
23 | expect(dispatch_state.length).toBe(2)
24 | expect(dispatch_state[0]).toStrictEqual({ type: COPY_TEXT, scope: 'scope', text: 'text' })
25 | expect(dispatch_state[1]).toStrictEqual({ type: TEXT_COPIED, scope: 'scope', isCopied: true })
26 |
27 | await copyTextPromise;
28 |
29 | dispatch_state = getDispatchActions();
30 | expect(dispatch_state.length).toBe(3)
31 | expect(dispatch_state[0]).toStrictEqual({ type: COPY_TEXT, scope: 'scope', text: 'text' })
32 | expect(dispatch_state[1]).toStrictEqual({ type: TEXT_COPIED, scope: 'scope', isCopied: true })
33 | expect(dispatch_state[2]).toStrictEqual({ type: TEXT_COPIED, scope: 'scope', isCopied: false })
34 | })
35 | })
36 |
37 | describe('copyButtonHovered', () => {
38 | const testForHover = (isHover) => {
39 | it(`should dispatch the correct action for isHover at ${isHover}`, () => {
40 | const result = copyButtonHovered('scope', isHover);
41 | expect(result).toStrictEqual({ type: COPY_BUTTON_HOVERED, scope: 'scope', isHover })
42 | })
43 | }
44 | testForHover(true)
45 | testForHover(false)
46 | })
47 |
48 | describe('renderUrlChanged', () => {
49 | it(`should dispatch the correct action`, () => {
50 | const result = renderUrlChanged('https://example.com/test');
51 | expect(result).toStrictEqual({ type: RENDERURL_CHANGED, renderUrl: 'https://example.com/test' })
52 | })
53 | })
54 |
55 | describe('diagramChanged', () => {
56 | it('should dispatch the correct actions with just one change', async () => {
57 | resetDispatchActions();
58 | let dispatch_state = getDispatchActions();
59 | expect(dispatch_state.length).toBe(0)
60 | const startTest = getCurrentTime();
61 |
62 | const diagramChangedPromise = executeThunkAction(() => diagramChanged('text 01'))
63 |
64 | dispatch_state = getDispatchActions();
65 | expect(dispatch_state.length).toBe(1)
66 | expect(dispatch_state[0]).toStrictEqual({ type: DIAGRAM_CHANGED, diagramText: 'text 01' })
67 |
68 | await diagramChangedPromise;
69 |
70 | const endTest = getCurrentTime();
71 |
72 | dispatch_state = getDispatchActions();
73 | expect(dispatch_state).toStrictEqual([
74 | { type: DIAGRAM_CHANGED, diagramText: 'text 01' },
75 | { type: DIAGRAM_CHANGED_UPDATE },
76 | ])
77 | expect(endTest - startTest).toBeGreaterThanOrEqual(750)
78 | })
79 |
80 | it('should dispatch the correct actions with several changes including some with less than 750ms interval', async () => {
81 | resetDispatchActions();
82 | let dispatch_state = getDispatchActions();
83 | expect(dispatch_state.length).toBe(0)
84 |
85 | const startTest01 = getCurrentTime();
86 | const diagramChangedPromise01 = executeThunkAction(() => diagramChanged('text 01'))
87 |
88 | dispatch_state = getDispatchActions();
89 | expect(dispatch_state.length).toBe(1)
90 | expect(dispatch_state[0]).toStrictEqual({ type: DIAGRAM_CHANGED, diagramText: 'text 01' })
91 |
92 | await delay(100);
93 |
94 | const startTest02 = getCurrentTime();
95 | const diagramChangedPromise02 = executeThunkAction(() => diagramChanged('text 02'))
96 |
97 | dispatch_state = getDispatchActions();
98 | expect(dispatch_state.length).toBe(2)
99 | expect(dispatch_state[1]).toStrictEqual({ type: DIAGRAM_CHANGED, diagramText: 'text 02' })
100 |
101 | await delay(300);
102 |
103 | const startTest03 = getCurrentTime();
104 | const diagramChangedPromise03 = executeThunkAction(() => diagramChanged('text 03'))
105 |
106 | dispatch_state = getDispatchActions();
107 | expect(dispatch_state.length).toBe(3)
108 | expect(dispatch_state[2]).toStrictEqual({ type: DIAGRAM_CHANGED, diagramText: 'text 03' })
109 |
110 | await delay(800);
111 |
112 | const startTest04 = getCurrentTime();
113 | const diagramChangedPromise04 = executeThunkAction(() => diagramChanged('text 04'))
114 |
115 | dispatch_state = getDispatchActions();
116 | expect(dispatch_state.length).toBe(5)
117 | expect(dispatch_state[3]).toStrictEqual({ type: DIAGRAM_CHANGED_UPDATE })
118 | expect(dispatch_state[4]).toStrictEqual({ type: DIAGRAM_CHANGED, diagramText: 'text 04' })
119 |
120 | await delay(100);
121 |
122 | const startTest05 = getCurrentTime();
123 | const diagramChangedPromise05 = executeThunkAction(() => diagramChanged('text 05'))
124 |
125 | dispatch_state = getDispatchActions();
126 | expect(dispatch_state.length).toBe(6)
127 | expect(dispatch_state[5]).toStrictEqual({ type: DIAGRAM_CHANGED, diagramText: 'text 05' })
128 |
129 | await Promise.all([
130 | diagramChangedPromise01,
131 | diagramChangedPromise02,
132 | diagramChangedPromise03,
133 | diagramChangedPromise04,
134 | diagramChangedPromise05
135 | ]);
136 |
137 | const endTest = getCurrentTime();
138 |
139 | dispatch_state = getDispatchActions();
140 | expect(dispatch_state).toStrictEqual([
141 | { type: DIAGRAM_CHANGED, diagramText: 'text 01' },
142 | { type: DIAGRAM_CHANGED, diagramText: 'text 02' },
143 | { type: DIAGRAM_CHANGED, diagramText: 'text 03' },
144 | { type: DIAGRAM_CHANGED_UPDATE },
145 | { type: DIAGRAM_CHANGED, diagramText: 'text 04' },
146 | { type: DIAGRAM_CHANGED, diagramText: 'text 05' },
147 | { type: DIAGRAM_CHANGED_UPDATE },
148 | ])
149 | expect(startTest02 - startTest01).toBeLessThan(750)
150 | expect(startTest03 - startTest02).toBeLessThan(750)
151 | expect(startTest04 - startTest03).toBeGreaterThanOrEqual(750)
152 | expect(startTest05 - startTest04).toBeLessThan(750)
153 | expect(endTest - startTest05).toBeGreaterThanOrEqual(750)
154 | })
155 | })
156 |
157 | describe('diagramTypeChanged', () => {
158 | it(`should dispatch the correct action`, () => {
159 | const result = diagramTypeChanged('grutUML');
160 | expect(result).toStrictEqual({ type: DIAGRAM_TYPE_CHANGED, diagramType: 'grutUML' })
161 | })
162 | })
163 |
164 | describe('importUrl', () => {
165 | it(`should dispatch the correct action`, () => {
166 | const result = importUrl('https://example.com/diagramType/data==');
167 | expect(result).toStrictEqual({ type: IMPORT_URL, url: 'https://example.com/diagramType/data==' })
168 | })
169 | })
170 |
171 | describe('closeImportUrl', () => {
172 | it(`should dispatch the correct action`, () => {
173 | const result = importUrl('https://example.com/diagramType/data==');
174 | expect(result).toStrictEqual({ type: IMPORT_URL, url: 'https://example.com/diagramType/data==' })
175 | })
176 | })
177 |
178 | describe('openImportUrl', () => {
179 | it(`should dispatch the correct action`, () => {
180 | const result = openImportUrl();
181 | expect(result).toStrictEqual({ type: OPEN_IMPORT_URL })
182 | })
183 | })
184 |
185 | describe('updateUrl', () => {
186 | it(`should dispatch the correct action`, () => {
187 | const result = updateUrl('https://example.com/diagramType/data==');
188 | expect(result).toStrictEqual({ type: UPDATE_IMPORT_URL, url: 'https://example.com/diagramType/data==' })
189 | })
190 | })
191 |
192 | describe('diagramHasError', () => {
193 | it(`should dispatch the correct action`, () => {
194 | const result = diagramHasError('https://example.com/diagramType/data==');
195 | expect(result).toStrictEqual({ type: DIAGRAM_HAS_ERROR, url: 'https://example.com/diagramType/data==' })
196 | })
197 | })
198 |
199 | describe('changeZenMode', () => {
200 | it(`should dispatch the correct action`, () => {
201 | const result = changeZenMode(true);
202 | expect(result).toStrictEqual({ type: ZEN_MODE_CHANGED, zenMode: true })
203 | })
204 | })
205 |
206 | describe('keyPressed', () => {
207 | it(`should dispatch the correct action`, () => {
208 | const result = keyPressed({ code: 'KeyQ', key: 'a', ctrlKey: false, shiftKey: false, altKey: true, metaKey: false });
209 | expect(result).toStrictEqual({ type: KEY_PRESSED, code: 'KeyQ', key: 'a', ctrlKey: false, shiftKey: false, altKey: true, metaKey: false })
210 | })
211 | })
212 |
213 | describe('onWindowResized', () => {
214 | it(`should dispatch the correct action`, () => {
215 | const result = onWindowResized(1920, 1080);
216 | expect(result).toStrictEqual({ type: WINDOW_RESIZED, width: 1920, height: 1080 })
217 | })
218 | })
219 |
220 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Niolesk
2 |
3 | Edit **diagrams** from **textual** descriptions! : A [kroki](https://kroki.io/) interface.
4 |
5 | * Application : https://niolesk.top/
6 | * Project page : https://github.com/webgiss/niolesk/
7 | * Container image : `ghcr.io/webgiss/niolesk` (static site served by nginx)
8 |
9 | ## Description
10 |
11 | Provide an interface for https://kroki.io/
12 |
13 | Just add any kroki url after the url of niolesk followed by `#` and you'll be able to edit the diagram, and export again a new url after change.
14 |
15 | ## Example
16 |
17 | 
18 |
19 | [Edit this diagram](https://niolesk.top/#https://kroki.io/svgbob/svg/eNpdzLEJADEMA8A-U6j7PMFO71kMyga_gIeP3L5BUnFg4H_kWK4tfKAabj4bYo9CNtTkKyh7cGwhUoDcTQp5zPSmEMgLdawUdw==)
20 |
21 | ## Docker
22 |
23 | To start a demo site:
24 |
25 | ```
26 | docker run -d --rm=true -p 8017:80 ghcr.io/webgiss/niolesk
27 | ```
28 |
29 | Or using docker-compose:
30 |
31 | ```yaml
32 | version: "3.5"
33 | services:
34 | niolesk:
35 | image: "ghcr.io/webgiss/niolesk"
36 | ports:
37 | - "8017:80"
38 | hostname: "niolesk"
39 | restart: "always"
40 | ```
41 |
42 | Then go to http://127.0.0.1:8017/ and it's running.
43 |
44 | ### Unprivileged images
45 |
46 | Standard images are based on nginx:latest image. If you need unprivileged images, you can use
47 | * `ghcr.io/webgiss/niolesk:unprivileged` instead of `ghcr.io/webgiss/niolesk:latest`
48 | * `ghcr.io/webgiss/niolesk:unprivileged-`{version} instead of `ghcr.io/webgiss/niolesk:`{version}
49 |
50 | Those images are based on image provided by https://github.com/nginxinc/docker-nginx-unprivileged
51 |
52 | Note: The port in the container isn't 80 but 8080 (as 80 is only accessible to privileged user).
53 |
54 | So the standard demo site becomes:
55 |
56 | ```
57 | docker run -d --rm=true -p 8017:8080 -u 1037:1037 ghcr.io/webgiss/niolesk:unprivileged
58 | ```
59 |
60 | ### Docker platforms
61 |
62 | Image is currently available for various platforms:
63 | * linux/amd64
64 | * linux/arm64
65 | * linux/386
66 | * linux/arm/v7
67 |
68 | ### Advanced usage
69 |
70 | If you want your niolesk docker instance to be linked to your kroki docker instance (hosted at https://kroki.example.com/) just start with command line:
71 |
72 | ```
73 | docker run -d --rm=true -e "NIOLESK_KROKI_ENGINE=https://kroki.example.com/" -p 8017:80 ghcr.io/webgiss/niolesk
74 | ```
75 |
76 | Or using docker-compose:
77 |
78 | ```yaml
79 | version: "3.5"
80 | services:
81 | niolesk:
82 | image: "ghcr.io/webgiss/niolesk"
83 | ports:
84 | - "8017:80"
85 | hostname: "niolesk"
86 | restart: "always"
87 | environment:
88 | - "NIOLESK_KROKI_ENGINE=https://kroki.example.com/"
89 | ```
90 |
91 | ### Analytics links
92 |
93 | You can configure analytics provider using docker env var.
94 |
95 | #### Matomo
96 |
97 | You can use "matomo_js" or "matomo_image" as analytics providers, and then use matomo url as arg1 and matomo site id as arg2
98 |
99 | ```
100 | docker run -d --rm=true -e "NIOLESK_ANALYTICS_PROVIDER_NAME=matomo_js" -e "NIOLESK_ANALYTICS_PROVIDER_ARG1=https://matomo.example.com/" -e "NIOLESK_ANALYTICS_PROVIDER_ARG2=32" -p 8017:80 ghcr.io/webgiss/niolesk
101 | ```
102 |
103 | Or using docker-compose:
104 |
105 | ```yaml
106 | version: "3.5"
107 | services:
108 | niolesk:
109 | image: "ghcr.io/webgiss/niolesk"
110 | ports:
111 | - "8017:80"
112 | hostname: "niolesk"
113 | restart: "always"
114 | environment:
115 | - "NIOLESK_ANALYTICS_PROVIDER_NAME=matomo_js"
116 | - "NIOLESK_ANALYTICS_PROVIDER_ARG1=https://matomo.example.com/"
117 | - "NIOLESK_ANALYTICS_PROVIDER_ARG2=32"
118 | ```
119 |
120 | #### Google analytics 4
121 |
122 | You can use "google_ga4" as analytics providers, and then use the measurement id as arg1
123 |
124 | ```
125 | docker run -d --rm=true -e "NIOLESK_ANALYTICS_PROVIDER_NAME=google_ga4" -e "NIOLESK_ANALYTICS_PROVIDER_ARG1=G-XXX999XXXX" -p 8017:80 ghcr.io/webgiss/niolesk
126 | ```
127 |
128 | Or using docker-compose:
129 |
130 | ```yaml
131 | version: "3.5"
132 | services:
133 | niolesk:
134 | image: "ghcr.io/webgiss/niolesk"
135 | ports:
136 | - "8017:80"
137 | hostname: "niolesk"
138 | restart: "always"
139 | environment:
140 | - "NIOLESK_ANALYTICS_PROVIDER_NAME=google_ga4"
141 | - "NIOLESK_ANALYTICS_PROVIDER_ARG1=G-XXX999XXXX"
142 | ```
143 |
144 | #### Google tag manager
145 |
146 | You can use "google_tag" as analytics providers, and then use the tag id as arg1
147 |
148 | ```
149 | docker run -d --rm=true -e "NIOLESK_ANALYTICS_PROVIDER_NAME=google_tag" -e "NIOLESK_ANALYTICS_PROVIDER_ARG1=GTM-X9XXXXX" -p 8017:80 ghcr.io/webgiss/niolesk
150 | ```
151 |
152 | Or using docker-compose:
153 |
154 | ```yaml
155 | version: "3.5"
156 | services:
157 | niolesk:
158 | image: "ghcr.io/webgiss/niolesk"
159 | ports:
160 | - "8017:80"
161 | hostname: "niolesk"
162 | restart: "always"
163 | environment:
164 | - "NIOLESK_ANALYTICS_PROVIDER_NAME=google_tag"
165 | - "NIOLESK_ANALYTICS_PROVIDER_ARG1=GTM-X9XXXXX"
166 | ```
167 |
168 | #### Any analytics using only docker env vars
169 |
170 | You can use any analytics providers either by providing "just" type/content
171 |
172 | ```
173 | docker run -d --rm=true -e "NIOLESK_ANALYTICS_TYPE=html" -e 'NIOLESK_ANALYTICS_CONTENT=
' -p 8017:80 ghcr.io/webgiss/niolesk
174 | ```
175 |
176 | Or using docker-compose:
177 |
178 | ```yaml
179 | version: "3.5"
180 | services:
181 | niolesk:
182 | image: "ghcr.io/webgiss/niolesk"
183 | ports:
184 | - "8017:80"
185 | hostname: "niolesk"
186 | restart: "always"
187 | environment:
188 | - "NIOLESK_ANALYTICS_TYPE=html"
189 | - 'NIOLESK_ANALYTICS_CONTENT='
190 | ```
191 |
192 | Note that you can't provide direct html tag `` in your HTML content as there are [security restrictions](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#security_considerations). You have to specify explicit script content as type `js` by calling:
193 |
194 | ```
195 | docker run -d --rm=true -e "NIOLESK_ANALYTICS_TYPE=js" -e 'NIOLESK_ANALYTICS_CONTENT=console.log("This is analytics code")' -p 8017:80 ghcr.io/webgiss/niolesk
196 | ```
197 |
198 | Or using docker-compose:
199 |
200 | ```yaml
201 | version: "3.5"
202 | services:
203 | niolesk:
204 | image: "ghcr.io/webgiss/niolesk"
205 | ports:
206 | - "8017:80"
207 | hostname: "niolesk"
208 | restart: "always"
209 | environment:
210 | - "NIOLESK_ANALYTICS_TYPE=js"
211 | - 'NIOLESK_ANALYTICS_CONTENT=console.log("This is analytics code")'
212 | ```
213 |
214 | #### Any analytics by creating your own provider
215 |
216 | You can also create your own analytics provider by including your own version of file `/usr/share/nginx/html/config-analytic-providers.js` inside docker:
217 |
218 | Create a file where you want, for example `/opt/niolesk/config-analytic-providers.js`:
219 |
220 | ```js
221 | window.config_analytic_providers = {
222 | my_provider: [
223 | {
224 | type: 'js',
225 | content: `
226 | const _dataTracker = window._dataTracker = window._dataTracker || []
227 | const eTrack = (key,value) => _dataTracker.push([key,value])
228 | eTrack('now',new Date())
229 | eTrack('id','E-0145456533')
230 | `,
231 | },
232 | {
233 | type: 'js',
234 | content: 'https://example.com/analytics/script.js?id=E-0145456533',
235 | },
236 | ],
237 | }
238 | ```
239 |
240 | and then call
241 |
242 | ```
243 | docker run -d --rm=true -e "NIOLESK_ANALYTICS_PROVIDER_NAME=my_provider" -v "/opt/niolesk/config-analytic-providers.js:/usr/share/nginx/html/config-analytic-providers.js:ro" -p 8017:80 ghcr.io/webgiss/niolesk
244 | ```
245 |
246 | Or using docker-compose:
247 |
248 | ```yaml
249 | version: "3.5"
250 | services:
251 | niolesk:
252 | image: "ghcr.io/webgiss/niolesk"
253 | ports:
254 | - "8017:80"
255 | hostname: "niolesk"
256 | restart: "always"
257 | volumes:
258 | - "/opt/niolesk/config-analytic-providers.js:/usr/share/nginx/html/config-analytic-providers.js:ro"
259 | environment:
260 | - "NIOLESK_ANALYTICS_PROVIDER_NAME=my_provider"
261 | ```
262 |
263 | But you can also use providers args if you want:
264 |
265 | `/opt/niolesk/config-analytic-providers.js`:
266 |
267 | ```js
268 | window.config_analytic_providers = {
269 | my_provider: [
270 | {
271 | type: 'js',
272 | content: `
273 | const _dataTracker = window._dataTracker = window._dataTracker || []
274 | const eTrack = (key,value) => _dataTracker.push([key,value])
275 | eTrack('now',new Date())
276 | eTrack('id','{1}')
277 | `,
278 | },
279 | {
280 | type: 'js',
281 | content: 'https://example.com/analytics/script.js?id={1}',
282 | },
283 | ],
284 | }
285 | ```
286 |
287 | ```
288 | docker run -d --rm=true -e "NIOLESK_ANALYTICS_PROVIDER_NAME=my_provider" -e "NIOLESK_ANALYTICS_PROVIDER_ARG1=E-0145456533" -v "/opt/niolesk/config-analytic-providers.js:/usr/share/nginx/html/config-analytic-providers.js:ro" -p 8017:80 ghcr.io/webgiss/niolesk
289 | ```
290 |
291 | Or using docker-compose:
292 |
293 | ```yaml
294 | version: "3.5"
295 | services:
296 | niolesk:
297 | image: "ghcr.io/webgiss/niolesk"
298 | ports:
299 | - "8017:80"
300 | hostname: "niolesk"
301 | restart: "always"
302 | volumes:
303 | - "/opt/niolesk/config-analytic-providers.js:/usr/share/nginx/html/config-analytic-providers.js:ro"
304 | environment:
305 | - "NIOLESK_ANALYTICS_PROVIDER_NAME=my_provider"
306 | - "NIOLESK_ANALYTICS_PROVIDER_ARG1=E-0145456533"
307 | ```
308 |
309 | ## Deploying the pages as a static site on your own server without using docker
310 |
311 | You can download the static pages of the latest release using the file `niolesk-site`-{version}.{extension}
312 |
313 | Every docker variable described can be configurd by editing lines in `config.js`. `config-analytic-providers.js` can be edited by simply... editing `config-analytic-providers.js`.
314 |
315 | ## Development
316 |
317 | The storybook of the project from the latest tag is accessible at https://niolesk.top/storybook
318 |
319 | Help for [compilation](compilation.md) of the project.
320 |
--------------------------------------------------------------------------------
/src/reducers/editor.js:
--------------------------------------------------------------------------------
1 | import { COPY_BUTTON_HOVERED, DIAGRAM_CHANGED, DIAGRAM_CHANGED_UPDATE, DIAGRAM_TYPE_CHANGED, RENDERURL_CHANGED, TEXT_COPIED, IMPORT_URL, CLOSE_IMPORT_URL, OPEN_IMPORT_URL, UPDATE_IMPORT_URL, DIAGRAM_HAS_ERROR, ZEN_MODE_CHANGED, KEY_PRESSED, WINDOW_RESIZED, RENDER_EDIT_SIZE_CHANGED } from "../constants/editor";
2 | import { createReducer } from "./utils/createReducer";
3 | import { encode, decode } from "../kroki/coder";
4 | import diagramTypes from "../kroki/krokiInfo";
5 | import { IMPORT_EXAMPLE } from "../constants/example";
6 | import { createKrokiUrl } from "../kroki/utils";
7 | import { LOCATION_CHANGE } from "connected-react-router";
8 | import exampleData from '../examples/data';
9 |
10 | const defaultDiagramType = 'plantuml';
11 |
12 | export const initialState = {
13 | baseUrl: window.location.origin + window.location.pathname,
14 | hash: null,
15 | diagramType: defaultDiagramType,
16 | diagramText: decode(diagramTypes[defaultDiagramType].example),
17 | filetype: 'svg',
18 | defaultDiagram: true,
19 | diagramTypes,
20 | language: null,
21 | renderUrl: (window.config && window.config.krokiEngineUrl) || 'https://kroki.io/',
22 | scopes: {
23 | 'image': {
24 | isHover: false,
25 | isCopied: false,
26 | },
27 | 'edit': {
28 | isHover: false,
29 | isCopied: false,
30 | },
31 | 'markdown': {
32 | isHover: false,
33 | isCopied: false,
34 | },
35 | 'markdownsource': {
36 | isHover: false,
37 | isCopied: false,
38 | },
39 | },
40 | windowImportUrlOpened: false,
41 | windowImportUrl: '',
42 | diagramError: false,
43 | zenMode: false,
44 | height: null,
45 | width: null,
46 | renderHeight: 700,
47 | editorHeight: 700,
48 | renderWidth: 800,
49 | renderEditHeight: 0,
50 | redrawIndex: 0,
51 | };
52 |
53 | const setWindowWidthHeight = (state, width, height) => {
54 | const { zenMode } = state
55 | const editorHeight = zenMode ? (width<768 ? height/2-14 : height) : 700
56 | const renderHeight = editorHeight - state.renderEditHeight
57 | let redrawIndex = state.redrawIndex
58 | if (renderHeight !== state.renderHeight) {
59 | redrawIndex += 1
60 | }
61 | if (width !== state.width || height !== state.height || renderHeight !== state.renderHeight || editorHeight !== state.editorHeight || redrawIndex !== state.redrawIndex) {
62 | return { ...state, width, height, renderHeight, editorHeight, redrawIndex }
63 | }
64 | return state
65 | }
66 |
67 | const setRenderWidth = (state, renderEditWidth, renderEditHeight) => {
68 | const renderWidth = renderEditWidth
69 | const renderHeight = state.editorHeight - renderEditHeight
70 | let redrawIndex = state.redrawIndex
71 | if (renderWidth !== state.renderWidth || renderHeight !== state.renderHeight) {
72 | redrawIndex += 1
73 | }
74 | if (renderWidth !== state.renderWidth || renderHeight !== state.renderHeight || renderEditHeight !== state.renderEditHeight || redrawIndex !== state.redrawIndex) {
75 | return { ...state, renderWidth, renderHeight, renderEditHeight, redrawIndex }
76 | }
77 | return state
78 | }
79 |
80 | /**
81 | *
82 | * @param {State} state
83 | * @returns
84 | */
85 | export const updateDiagram = (state) => {
86 | let { diagramType, filetype, renderUrl, diagramText, baseUrl, diagramTypes } = state;
87 | if (!renderUrl || renderUrl === '') {
88 | renderUrl = initialState.renderUrl;
89 | }
90 | if (!filetype || filetype === '') {
91 | filetype = initialState.filetype;
92 | }
93 | if (!diagramType || diagramType === '') {
94 | diagramType = state.diagramType;
95 | }
96 | if (!diagramType || diagramType === '') {
97 | diagramType = initialState.diagramType;
98 | }
99 | const language = diagramTypes[diagramType]?.language;
100 | const codedDiagramTextText = encode(diagramText);
101 | const defaultDiagram = exampleData.filter(({ diagramType: type, example }) => (diagramType === type) && (example === codedDiagramTextText)).length > 0;
102 | const diagramUrl = createKrokiUrl(renderUrl, diagramType, filetype, codedDiagramTextText);
103 | if (state.diagramUrl !== diagramUrl) {
104 | state = { ...state, diagramUrl, diagramEditUrl: `${baseUrl}#${diagramUrl}`, diagramError: false, defaultDiagram, language }
105 | }
106 | return state;
107 | }
108 |
109 | /**
110 | *
111 | * @param {State} state
112 | * @param {string} hash
113 | * @returns
114 | * @template State
115 | */
116 | export const updateHash = (state, hash) => {
117 | let url = hash;
118 | if (url.startsWith('#')) {
119 | url = url.substr(1);
120 | }
121 | let protocol = null;
122 | let renderSite = null;
123 | let coded = null;
124 | let filetype = null;
125 | let diagramType = null;
126 | let renderUrl = null;
127 | let diagramText = null;
128 | const protocolSeparator = '://';
129 | const protocolSeparatorPosition = url.indexOf(protocolSeparator);
130 | if (protocolSeparatorPosition >= 0) {
131 | protocol = url.substr(0, protocolSeparatorPosition);
132 | url = url.substr(protocolSeparatorPosition + protocolSeparator.length)
133 | }
134 | const urlParts = url.split('/');
135 | if (urlParts.length >= 4) {
136 | coded = urlParts[urlParts.length - 1];
137 | filetype = urlParts[urlParts.length - 2];
138 | diagramType = urlParts[urlParts.length - 3];
139 | if (urlParts.length > 3) {
140 | renderSite = urlParts.slice(0, urlParts.length - 3).join('/')
141 | }
142 | }
143 | if (renderSite && protocol) {
144 | renderUrl = protocol + protocolSeparator + renderSite;
145 | }
146 | if (coded) {
147 | diagramText = decode(coded);
148 | } else {
149 | diagramText = state.diagramText;
150 | }
151 | if (filetype === null) {
152 | filetype = state.filetype
153 | }
154 | if (diagramType === null) {
155 | diagramType = state.diagramType
156 | }
157 | if (renderUrl === null) {
158 | renderUrl = state.renderUrl
159 | }
160 | if (diagramText === null) {
161 | diagramText = state.diagramText
162 | }
163 | if (state.hash !== hash || state.filetype !== filetype || state.renderUrl !== renderUrl || state.diagramText !== diagramText) {
164 | state = { ...state, hash, filetype, diagramType, renderUrl, diagramText };
165 | state = updateDiagram(state);
166 | }
167 | return state;
168 | }
169 |
170 | const updateDiagramTypeAndTextIfDefault = (state, diagramType) => {
171 | if ((state.diagramText === '') || (state.defaultDiagram)) {
172 | state = { ...state, diagramType, diagramText: decode(state.diagramTypes[diagramType].example), defaultDiagram: true, redrawIndex: state.redrawIndex + 1 };
173 | } else {
174 | state = { ...state, diagramType, redrawIndex: state.redrawIndex + 1 };
175 | }
176 | state = updateDiagram(state);
177 | return state;
178 | }
179 |
180 | export default createReducer({
181 | [LOCATION_CHANGE]: (state, action) => {
182 | const { location, isFirstRendering } = action.payload;
183 | let hash = location.hash;
184 | if (hash === undefined) {
185 | hash = location.location.hash;
186 | }
187 | if (state.hash !== hash || isFirstRendering) {
188 | state = updateHash(state, hash);
189 | }
190 | return state;
191 | },
192 | [COPY_BUTTON_HOVERED]: (state, action) => {
193 | const { scope, isHover } = action;
194 | if (isHover !== state.scopes[scope].isHover) {
195 | state = { ...state, scopes: { ...state.scopes, [scope]: { ...state.scopes[scope], isHover } } }
196 | }
197 | return state;
198 | },
199 | [TEXT_COPIED]: (state, action) => {
200 | const { scope, isCopied } = action;
201 | if (isCopied !== state.scopes[scope].isCopied) {
202 | state = { ...state, scopes: { ...state.scopes, [scope]: { ...state.scopes[scope], isCopied } } }
203 | }
204 | return state;
205 | },
206 | [RENDERURL_CHANGED]: (state, action) => {
207 | const { renderUrl } = action;
208 | if (renderUrl !== state.renderUrl || !state.diagramUrl) {
209 | state = { ...state, renderUrl };
210 | state = updateDiagram(state);
211 | }
212 | return state;
213 | },
214 | [DIAGRAM_CHANGED]: (state, action) => {
215 | const { diagramText } = action;
216 | if (diagramText !== state.diagramText) {
217 | state = { ...state, diagramText };
218 | // state = updateDiagram(state);
219 | }
220 | return state;
221 | },
222 | [DIAGRAM_CHANGED_UPDATE]: (state) => {
223 | state = updateDiagram(state);
224 | return state;
225 | },
226 | [DIAGRAM_TYPE_CHANGED]: (state, action) => {
227 | const { diagramType } = action;
228 | if (diagramType !== state.diagramType) {
229 | state = updateDiagramTypeAndTextIfDefault(state, diagramType);
230 | }
231 | return state;
232 | },
233 | [IMPORT_EXAMPLE]: (state, action) => {
234 | const { diagramText, diagramType } = action;
235 | if ((diagramText !== state.diagramText) || (diagramType !== state.diagramType)) {
236 | state = updateDiagram({ ...state, diagramText, diagramType })
237 | state = { ...state, redrawIndex: state.redrawIndex + 1 }
238 | }
239 | return state;
240 | },
241 | [IMPORT_URL]: (state, action) => {
242 | const { url } = action;
243 | if (url && url !== '') {
244 | state = { ...state, windowImportUrlOpened: false, windowImportUrl: '' };
245 | state = updateHash(state, url);
246 | }
247 | return state;
248 | },
249 | [CLOSE_IMPORT_URL]: (state) => {
250 | state = { ...state, windowImportUrlOpened: false, windowImportUrl: '' };
251 | return state;
252 | },
253 | [OPEN_IMPORT_URL]: (state) => {
254 | state = { ...state, windowImportUrlOpened: true, windowImportUrl: '' };
255 | return state;
256 | },
257 | [UPDATE_IMPORT_URL]: (state, action) => {
258 | const { url } = action;
259 | state = { ...state, windowImportUrl: url };
260 | return state;
261 | },
262 | [DIAGRAM_HAS_ERROR]: (state, action) => {
263 | const { url } = action;
264 | if (url === state.diagramUrl) {
265 | state = { ...state, diagramError: true }
266 | }
267 | return state;
268 | },
269 | [ZEN_MODE_CHANGED]: (state, action) => {
270 | const { zenMode } = action;
271 | if (zenMode !== state.zenMode) {
272 | state = { ...state, zenMode }
273 | }
274 | return state;
275 | },
276 | [KEY_PRESSED]: (state, action) => {
277 | const { key, ctrlKey, shiftKey, altKey, metaKey } = action
278 | if (key === 'Escape' && (!ctrlKey) && (!shiftKey) && (!altKey) && (!metaKey)) {
279 | if (state.zenMode) {
280 | state = { ...state, zenMode: false }
281 | }
282 | }
283 | if (key === 'z' && (!ctrlKey) && (!shiftKey) && (altKey) && (!metaKey)) {
284 | if (!state.zenMode) {
285 | state = { ...state, zenMode: true }
286 | }
287 | }
288 | if (key === 'i' && (!ctrlKey) && (!shiftKey) && (altKey) && (!metaKey)) {
289 | if (!state.windowImportUrlOpened) {
290 | state = { ...state, windowImportUrlOpened: true, windowImportUrl: '' };
291 | }
292 | }
293 | return state;
294 | },
295 | [WINDOW_RESIZED]: (state, action) => {
296 | const { width, height } = action
297 | return setWindowWidthHeight(state, width, height)
298 | },
299 | [RENDER_EDIT_SIZE_CHANGED]: (state, action) => {
300 | const { renderEditWidth, renderEditHeight } = action
301 | return setRenderWidth(state, renderEditWidth, renderEditHeight)
302 | },
303 | }, initialState);
304 |
--------------------------------------------------------------------------------