sample-ui-component-library 0.0.62-dev → 0.0.64-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.62-dev",
+  "version": "0.0.64-dev",
   "description": "A library which contains sample UI elements that can be used for populating layouts.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/Editor/Editor.jsx

@@ -100,6 +100,10 @@ export const Editor = forwardRef(({ onSelectAbstraction, onSelectTab, onUpdateCo
         dispatch({ type: "SAVE_ALL", payload: {} });
     }, []);
 
+    const layoutEditor = useCallback(() => {
+        editorRef.current && editorRef.current.layoutModel();
+    }, []);
+
     const api_entries = {
         state,
         addTab,
@@ -115,7 +119,8 @@ export const Editor = forwardRef(({ onSelectAbstraction, onSelectTab, onUpdateCo
         getActiveTab,
         setUpdatedContent,
         setContent,
-        saveAll
+        saveAll,
+        layoutEditor
     }
 
     const api = useMemo(() => {

package/src/components/Editor/MonacoInstance/MonacoInstance.jsx

@@ -151,11 +151,16 @@ export const MonacoInstance = forwardRef(({ onSelectAbstraction }, ref) => {
             }
         }, []);
 
+        const layoutModel = useCallback(() => {
+            editorRef.current?.layout();
+        }, []);
+
         const api = useMemo(() => {
             return {
                 clearModel,
+                layoutModel,
             };
-        }, [clearModel]);
+        }, [clearModel, layoutModel]);
 
         useImperativeHandle(ref, () => api, [api]);
 

package/src/components/Editor/MonacoInstance/OverlayRow/OverlayRow.jsx

@@ -8,12 +8,17 @@ export const OverlayRow =({ entry, top, bottom, onSelectAbstraction }) => {
     const style= {
         "top": top + "px",
         "height": (bottom - top) + "px",
-        "backgroundColor": entry?.backgroundColor || "none"
     };
 
-    // If entry doesn't have background color, add hover effect.
     let className = "line-block-overlay";
-    if (!entry.backgroundColor) {
+    if (entry.isMappedCurrent) {
+        style["backgroundColor"] = "rgba(123, 255, 0, 0.2)";
+    } else if (entry.isMappedOther) {
+        style["backgroundColor"] = "rgba(138, 138, 138, 0.2)";
+    }
+
+    // If entry is not mapped, add hover effect.
+    if (!entry.isMappedCurrent && !entry.isMappedOther) {
         className += " line-block-overlay-hover";
     }   
 

package/src/components/Editor/MonacoInstance/OverlayRow/OverlayRow.scss

@@ -3,9 +3,9 @@
     position: absolute;
     left: 0px;
     right: 0px;
+    cursor: pointer;
 }
 
 .line-block-overlay-hover:hover {
     background-color: rgba(123, 255, 0, 0.2);
-    cursor: pointer;
 }

package/src/stories/data/FileBrowser/workspace_sample.json

@@ -260,6 +260,7 @@
                 "uid": "915ae10a-aab9-4003-9dbc-45772015b366",
                 "start_line": 71,
                 "end_line": 71,
+                "isMappedOther": true,
                 "source": "book_shelf = place_books_on_shelf_from_basket(book_shelf, basket)"
             },
             {
@@ -287,7 +288,7 @@
                 "uid": "f9fff770-f748-407e-99ac-e94246a9d4d3",
                 "start_line": 75,
                 "end_line": 75,
-                "backgroundColor": "#33000033",
+                "isMappedCurrent": true,
                 "source": "print(\"\\nLibrary Audit:\", json.dumps(audit[\"value\"], indent=2))"
             },
             {