Skip to content

Commit

Permalink
Fix the library view display issues introduced by MS WebBrowser (#10316)
Browse files Browse the repository at this point in the history
* Disable the context menu on the library viewer.

* Zoom the libarary view to adapt the current DPI scale.

* Disable the horizontal scroll bar on the bottom of the library view.

* Disable the library view is zoomed by keyboard or mouse wheel.

* Zoom the library bar to adapt the current DPI scale.

* Hide the extra search text bar close button.
  • Loading branch information
CoolStarLee authored Jan 29, 2020
1 parent 01c1ab2 commit 333f55c
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 18 deletions.
24 changes: 11 additions & 13 deletions src/LibraryViewExtensionMSWebBrowser/LibraryViewController.cs
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ public void GetBase64StringFromPath(string iconurl)

private void scriptNotifyHandler(string dataFromjs)
{

if (string.IsNullOrEmpty(dataFromjs))
{
return;
Expand Down Expand Up @@ -231,6 +230,7 @@ public void ImportLibrary()
dynamoViewModel.ImportLibraryCommand.Execute(null)
));
}

/// <summary>
/// This function logs events to instrumentation if it matches a set of known events
/// </summary>
Expand All @@ -243,35 +243,32 @@ public void LogEventsToInstrumentation(string eventName, string data)
Analytics.LogPiiInfo(eventName, data);
}
}

internal void RefreshLibraryView(WebBrowser browser)
{
dynamoWindow.Dispatcher.BeginInvoke(
new Action(() =>
{

var ext1 = string.Empty;
var ext2 = string.Empty;
//read the full loadedTypes and LayoutSpec json strings.
var reader = new StreamReader(nodeProvider.GetResource(null, out ext1));
//read the full loadedTypes and LayoutSpec json strings.
var reader = new StreamReader(nodeProvider.GetResource(null, out ext1));
var loadedTypes = reader.ReadToEnd();

var reader2 = new StreamReader(layoutProvider.GetResource(null, out ext2));
var layoutSpec = reader2.ReadToEnd();

try
{
browser.InvokeScript
("refreshLibViewFromData", loadedTypes, layoutSpec);
browser.InvokeScript("refreshLibViewFromData", loadedTypes, layoutSpec);
}
catch (Exception e)
{
this.dynamoViewModel.Model.Logger.Log(e);
}
reader.Dispose();
reader2.Dispose();

}));

}

#endregion
Expand Down Expand Up @@ -344,7 +341,6 @@ internal void AddLibraryView()
var libminstring = "LIBJS";
var libraryHTMLPage = "LIBRARY HTML WAS NOT FOUND";


using (var reader = new StreamReader(libminstream))
{
libminstring = reader.ReadToEnd();
Expand All @@ -354,7 +350,6 @@ internal void AddLibraryView()
{
libminstring = ReplaceUrlWithBase64Image(libminstring, path.Item1, path.Item2);
});

}

using (var reader = new StreamReader(stream))
Expand All @@ -373,9 +368,14 @@ internal void AddLibraryView()
browser.Loaded += Browser_Loaded;
browser.SizeChanged += Browser_SizeChanged;
LibraryViewController.SetupSearchModelEventsObserver(browser, dynamoViewModel.Model.SearchModel, this, this.customization);
}

browser.DpiChanged += Browser_DpiChanged;
}

private void Browser_DpiChanged(object sender, DpiChangedEventArgs e)
{
browser.InvokeScript("adaptDPI");
}

private void Browser_Loaded(object sender, RoutedEventArgs e)
{
Expand Down Expand Up @@ -473,7 +473,6 @@ internal static IDisposable SetupSearchModelEventsObserver(WebBrowser webview, N
controller.CloseNodeTooltip(true);
};


var observer = new EventObserver<NodeSearchElement, IEnumerable<NodeSearchElement>>(
elements => NotifySearchModelUpdate(customization, elements), CollectToList
).Throttle(TimeSpan.FromMilliseconds(throttleTime));
Expand Down Expand Up @@ -539,7 +538,6 @@ private static void NotifySearchModelUpdate(ILibraryViewCustomization customizat
.Select(p => new LayoutIncludeInfo() { path = p });

customization.AddIncludeInfo(includes, "Add-ons");

}
}

Expand Down
74 changes: 69 additions & 5 deletions src/LibraryViewExtensionMSWebBrowser/web/library/library.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@
margin: 0;
background-color: #353535;
}
input::-ms-clear {
display: none;
}
</style>
</head>

Expand All @@ -27,6 +30,37 @@
var replaceImageDelayTime = 100;
var currentImage;

// Disable the context menu
document.oncontextmenu = function () {
return false;
}

// Disable zoom by keyboard
document.addEventListener("keydown",
function(event) {
if ((event.ctrlKey === true || event.metaKey === true) &&
(event.which === 61 ||
event.which === 107 ||
event.which === 173 ||
event.which === 109 ||
event.which === 187 ||
event.which === 189)) {
event.preventDefault();
}
},
false
);

// Disable zoom by mouse wheel
document.addEventListener("mousewheel",
function(event) {
if (event.ctrlKey === true || event.metaKey) {
event.preventDefault();
}
},
false
);

function replaceImages() {
var allimages = document.getElementsByTagName("img");

Expand All @@ -44,7 +78,6 @@
window.external.GetBase64StringFromPath(src);

});

}

function completeReplaceImages(base64String) {
Expand All @@ -55,24 +88,23 @@
// we'll break out later instead of trying to reload it.
//TODO don't cache the string if it is the default icon.
// currentImage.orgSrc = base64String;
}

}
}


function refreshLibViewFromData(loadedTypes,layoutSpec){
var append = false; // Replace existing contents instead of appending.
libController.setLoadedTypesJson(JSON.parse(loadedTypes) , append);
libController.setLayoutSpecsJson(JSON.parse(layoutSpec) , append);
libController.refreshLibraryView(); // Refresh library view.

adaptDPI();

//update image src properties after dom is updated.
setTimeout(function () {
replaceImages();
}, replaceImageDelayTime);
}


//Create library controller
var libController = LibraryEntryPoint.CreateLibraryController();
//Create library view
Expand All @@ -82,6 +114,7 @@
function completeSearch(searchLoadedTypes){
searchCallback(JSON.parse(searchLoadedTypes));
}

//set a custom search handler
libController.searchLibraryItemsHandler = function (text, callback) {
var encodedText = encodeURIComponent(text);
Expand Down Expand Up @@ -129,6 +162,37 @@
//Update the view with contents the first time.
window.external.notify("requestUpdateLibrary");

function getDPIScale() {
var dpi = 96.0;
if (window.screen.deviceXDPI != undefined) {
dpi = window.screen.deviceXDPI;
}
else {
var tmpNode = document.createElement("DIV");
tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
document.body.appendChild(tmpNode);
dpi = parseInt(tmpNode.offsetWidth);
tmpNode.parentNode.removeChild(tmpNode);   
}

return dpi / 96.0;
}

function adaptDPI() {
document.body.style.overflowX = 'hidden';

var dpiScale = getDPIScale();

var libraryHeader = document.getElementsByClassName("LibraryHeader")[0];
libraryHeader.style.zoom = dpiScale;

var widthPercentage = (100.0 / dpiScale).toString() + '%';
libraryHeader.style.width = widthPercentage;

var libraryItemsContainer = document.getElementsByClassName("LibraryItemContainer")[0];
libraryItemsContainer.style.zoom = dpiScale;
}

</script>

</body>
Expand Down

0 comments on commit 333f55c

Please sign in to comment.