@itfin/components 1.3.6 → 1.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/src/assets/scss/_dark-theme.scss +1 -1
  3. package/src/components/editor/Editor.vue +0 -12
  4. package/src/components/editor/index.stories.js +377 -26
  5. package/src/components/editor/tools/drawing/drawing.js +14 -6
  6. package/src/components/editor/tools/drawing/index.html +57 -0
package/src/components/editor/tools/drawing/drawing.js CHANGED
@@ -6,7 +6,7 @@ const icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-8 -8 40 40">\n'
6
6
  '</svg>';
7
7
 
8
8
  const content = '' +
9
- '<!DOCTYPE html><html><head> <meta charset="UTF-8"/> <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <script type="text/javascript" src="https://unpkg.com/@excalidraw/excalidraw@0.16.1/dist/excalidraw.production.min.js"></script></head><body class="excalidraw-container"><div id="app"></div><style> body { display: flex; width: 100vw; height: 100vh; padding: 0; margin: 0;}#app { flex-grow: 1;}.excalidraw .App-menu_top > .Stack.Stack_vertical > div:first-child, .excalidraw .disable-zen-mode, .excalidraw .layer-ui__wrapper__footer-right, .excalidraw .layer-ui__wrapper__github-corner, .excalidraw button.ToolIcon_type_button.ToolIcon.ToolIcon_size_m.Shape.ToolIcon_type_button--show, .excalidraw .library-menu-items-container__items .library-menu-items-container__header, .excalidraw .library-menu-control-buttons, .excalidraw .ToolIcon__library { display: none;} </style><script type="text/javascript"> const App = () => { const data = window.saveData || {}; return React.createElement(React.Fragment, null, React.createElement("div", {style: {height: "100%"},}, React.createElement(ExcalidrawLib.Excalidraw, { initialData: { elements: data.elements || [], libraryItems: data.libraryItems || [], appState: {zenModeEnabled: false}, scrollToContent: false }, onChange: (elements, state, files) => { window.saveData = window.saveData || {}; window.saveData.elements = elements; window.saveData.files = files; ExcalidrawLib.exportToSvg({ elements, state, files }).then(svg => { svg.removeAttribute(\'width\'); svg.removeAttribute(\'height\'); window.saveData.svg = svg.outerHTML; }); }, onLibraryChange: (items) => { window.saveData = window.saveData || {}; window.saveData.libraryItems = items; } })));};const excalidrawWrapper = document.getElementById("app");const root = ReactDOM.createRoot(excalidrawWrapper);root.render(React.createElement(App)); </script></body></html>';
9
+ '<!DOCTYPE html><html><head> <meta charset="UTF-8"/> <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <script type="text/javascript" src="https://unpkg.com/@excalidraw/excalidraw@0.16.1/dist/excalidraw.production.min.js"></script></head><body class="excalidraw-container"><div id="app"></div><style> body { display: flex; width: 100vw; height: 100vh; padding: 0; margin: 0;}#app { flex-grow: 1;}.excalidraw .App-menu_top > .Stack.Stack_vertical > div:first-child, .excalidraw .disable-zen-mode, .excalidraw .layer-ui__wrapper__footer-right, .excalidraw .layer-ui__wrapper__github-corner, .excalidraw button.ToolIcon_type_button.ToolIcon.ToolIcon_size_m.Shape.ToolIcon_type_button--show, .excalidraw .library-menu-items-container__items .library-menu-items-container__header, .excalidraw .library-menu-control-buttons, .excalidraw .ToolIcon__library { display: none;} </style><script type="text/javascript"> const App = () => { const data = window.saveData || {}; return React.createElement(React.Fragment, null, React.createElement("div", {style: {height: "100%"},}, React.createElement(ExcalidrawLib.Excalidraw, { initialData: { elements: data.elements || [], files: data.files || [], libraryItems: data.libraryItems || [], appState: {zenModeEnabled: false, theme: localStorage.itfTheme}, scrollToContent: false }, onChange: (elements, state, files) => { window.saveData = window.saveData || {}; window.saveData.elements = elements; window.saveData.files = files; ExcalidrawLib.exportToSvg({ elements, state, files }).then(svg => { svg.removeAttribute(\'width\'); svg.removeAttribute(\'height\'); window.saveData.svg = svg.outerHTML; }); }, onLibraryChange: (items) => { window.saveData = window.saveData || {}; window.saveData.libraryItems = items; } })));};const excalidrawWrapper = document.getElementById("app");const root = ReactDOM.createRoot(excalidrawWrapper);root.render(React.createElement(App)); </script></body></html>';
10
10
 
11
11
  export default class Drawing {
12
12
  data = null;
@@ -15,6 +15,7 @@ export default class Drawing {
15
15
  static get sanitize(){
16
16
  return {
17
17
  svg: true,
18
+ files: true,
18
19
  caption: {} // only tags from Inline Toolbar
19
20
  }
20
21
  }
@@ -85,19 +86,22 @@ export default class Drawing {
85
86
  const {default: Modal} = await import('../../../modal/modalSrc');
86
87
  const modalEl = new Modal(modal, {context: document.body, backdrop: 'static'});
87
88
  modalEl.show();
89
+ modal.addEventListener('hidden.bs.modal', () => {
90
+ document.body.removeChild(modal);
91
+ });
88
92
 
89
93
  iframe.classList.add('modal-body-content');
90
94
  iframe.contentWindow.document.open();
91
95
  iframe.contentWindow.document.write(content);
92
96
  iframe.contentWindow.document.close();
93
97
 
94
- iframe.contentWindow.saveData = this.data;
98
+ iframe.contentWindow.saveData = cloneDeep(this.data);
99
+ console.info(this.data, iframe.contentWindow.saveData);
95
100
  modalSaveBtn.addEventListener('click', () => {
96
101
  this.data = iframe.contentWindow.saveData;
97
102
  if (this.data.svg) {
98
103
  createSvg(wrapper, this.data, this.readOnly);
99
104
  }
100
-
101
105
  modalEl.hide();
102
106
  });
103
107
  modalCancelBtn.addEventListener('click', () => {
@@ -115,7 +119,7 @@ export default class Drawing {
115
119
  if (data.svg) {
116
120
  wrapper.classList.remove('empty');
117
121
  createSvg(wrapper, data, readOnly);
118
- } else {
122
+ } else if (!readOnly) {
119
123
  wrapper.classList.add('empty');
120
124
  wrapper.innerHTML = `<div class="text-muted icon">${icon}</div><div class="text-muted text">Double click to start sketching out your thoughts.</div>`;
121
125
  }
@@ -124,11 +128,15 @@ export default class Drawing {
124
128
 
125
129
  function createSvg(wrapper, { svg, caption }, readOnly) {
126
130
  const svgContainer = document.createElement('div');
127
- svgContainer.innerHTML = svg;
131
+ svgContainer.innerHTML = svg.replace('@undefined', '@0.16.1'); // глючить версія в excalidraw
128
132
 
133
+ const divSvg = document.createElement('div');
129
134
  wrapper.innerHTML = '';
130
135
  wrapper.classList.remove('empty');
131
- wrapper.appendChild(svgContainer.childNodes[0]);
136
+ wrapper.appendChild(divSvg);
137
+
138
+ const shadow = divSvg.attachShadow({ mode: "open" });
139
+ shadow.appendChild(svgContainer.childNodes[0]);
132
140
 
133
141
  const captionEl = document.createElement('div');
134
142
  captionEl.contentEditable = !readOnly;
package/src/components/editor/tools/drawing/index.html ADDED
@@ -0,0 +1,57 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8"/>
5
+ <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
6
+ <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
7
+ <script type="text/javascript"
8
+ src="https://unpkg.com/@excalidraw/excalidraw@0.16.1/dist/excalidraw.production.min.js"></script>
9
+ </head>
10
+ <body class="excalidraw-container">
11
+ <div id="app"></div>
12
+ <style> body {
13
+ display: flex;
14
+ width: 100vw;
15
+ height: 100vh;
16
+ padding: 0;
17
+ margin: 0;
18
+ }
19
+
20
+ #app {
21
+ flex-grow: 1;
22
+ }
23
+
24
+ .excalidraw .App-menu_top > .Stack.Stack_vertical > div:first-child, .excalidraw .disable-zen-mode, .excalidraw .layer-ui__wrapper__footer-right, .excalidraw .layer-ui__wrapper__github-corner, .excalidraw button.ToolIcon_type_button.ToolIcon.ToolIcon_size_m.Shape.ToolIcon_type_button--show, .excalidraw .library-menu-items-container__items .library-menu-items-container__header, .excalidraw .library-menu-control-buttons, .excalidraw .ToolIcon__library {
25
+ display: none;
26
+ } </style>
27
+ <script type="text/javascript"> const App = () => {
28
+ const data = window.saveData || {};
29
+ return React.createElement(React.Fragment, null, React.createElement("div", {style: {height: "100%"},}, React.createElement(ExcalidrawLib.Excalidraw, {
30
+ initialData: {
31
+ elements: data.elements || [],
32
+ files: data.files || [],
33
+ libraryItems: data.libraryItems || [],
34
+ appState: {zenModeEnabled: false},
35
+ scrollToContent: false
36
+ },
37
+ onChange: (elements, state, files) => {
38
+ window.saveData = window.saveData || {};
39
+ window.saveData.elements = elements;
40
+ window.saveData.files = files;
41
+ ExcalidrawLib.exportToSvg({elements, appState: state, files}).then(svg => {
42
+ svg.removeAttribute('width');
43
+ svg.removeAttribute('height');
44
+ window.saveData.svg = svg.outerHTML;
45
+ });
46
+ },
47
+ onLibraryChange: (items) => {
48
+ window.saveData = window.saveData || {};
49
+ window.saveData.libraryItems = items;
50
+ }
51
+ })));
52
+ };
53
+ const excalidrawWrapper = document.getElementById("app");
54
+ const root = ReactDOM.createRoot(excalidrawWrapper);
55
+ root.render(React.createElement(App)); </script>
56
+ </body>
57
+ </html>