sample-ui-component-library 0.0.65-dev → 0.0.67-dev
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.
- package/dist/cjs/index.js +3 -3
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Editor/MonacoInstance/MonacoInstance.jsx +4 -2
- package/src/components/Editor/MonacoInstance/OverlayRow/OverlayRow.jsx +2 -2
- package/src/components/Editor/MonacoInstance/OverlayRow/OverlayRow.scss +1 -1
- package/src/stories/Editor.stories.js +5 -2
package/package.json
CHANGED
|
@@ -37,6 +37,9 @@ export const MonacoInstance = forwardRef(({ onSelectAbstraction }, ref) => {
|
|
|
37
37
|
editorRef.current && editorRef.current.setModel(getModel(state.activeTab));
|
|
38
38
|
updateOverlays();
|
|
39
39
|
setShowEditor(true);
|
|
40
|
+
editorRef.current?.onDidScrollChange((e) => {
|
|
41
|
+
updateOverlays();
|
|
42
|
+
});
|
|
40
43
|
} else {
|
|
41
44
|
activeTabRef.current = null;
|
|
42
45
|
setShowEditor(false);
|
|
@@ -83,7 +86,6 @@ export const MonacoInstance = forwardRef(({ onSelectAbstraction }, ref) => {
|
|
|
83
86
|
const deltaY = e.deltaY;
|
|
84
87
|
const currentScrollTop = editorRef.current.getScrollTop();
|
|
85
88
|
editorRef.current.setScrollTop(currentScrollTop + deltaY);
|
|
86
|
-
updateOverlays();
|
|
87
89
|
}, [state.activeTab, updateOverlays]);
|
|
88
90
|
|
|
89
91
|
|
|
@@ -155,7 +157,7 @@ export const MonacoInstance = forwardRef(({ onSelectAbstraction }, ref) => {
|
|
|
155
157
|
const layoutModel = useCallback(() => {
|
|
156
158
|
editorRef.current?.layout();
|
|
157
159
|
updateOverlays();
|
|
158
|
-
}, []);
|
|
160
|
+
}, [editorRef, state.activeTab, state.mode, onSelectAbstraction]);
|
|
159
161
|
|
|
160
162
|
const api = useMemo(() => {
|
|
161
163
|
return {
|
|
@@ -12,9 +12,9 @@ export const OverlayRow =({ entry, top, bottom, onSelectAbstraction }) => {
|
|
|
12
12
|
|
|
13
13
|
let className = "line-block-overlay";
|
|
14
14
|
if (entry.isMappedCurrent) {
|
|
15
|
-
style["backgroundColor"] = "rgba(
|
|
15
|
+
style["backgroundColor"] = "rgba(189, 56, 56, 0.3)";
|
|
16
16
|
} else if (entry.isMappedOther) {
|
|
17
|
-
style["backgroundColor"] = "rgba(138, 138, 138, 0.
|
|
17
|
+
style["backgroundColor"] = "rgba(138, 138, 138, 0.1)";
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
// If entry is not mapped, add hover effect.
|
|
@@ -145,8 +145,11 @@ const Template = (args) => {
|
|
|
145
145
|
if (tool === "mapping-mode") {
|
|
146
146
|
editorRef.current.setMode(EDITOR_MODES.MAPPING);
|
|
147
147
|
} else if (tool === "implementation-mode") {
|
|
148
|
-
|
|
149
|
-
|
|
148
|
+
console.log("draing");
|
|
149
|
+
editorRef.current.layoutEditor();
|
|
150
|
+
// editorRef.current.setMode(EDITOR_MODES.MAPPING);
|
|
151
|
+
// editorRef.current.setMode(EDITOR_MODES.DESIGN);
|
|
152
|
+
}
|
|
150
153
|
}, [editorRef]);
|
|
151
154
|
|
|
152
155
|
const onSelectAbstraction = useCallback((entry) => {
|