From 69e39c5c970eef38041ba6e760bacd9d042e2c33 Mon Sep 17 00:00:00 2001 From: leonardo tessaro Date: Sun, 7 Mar 2021 13:10:42 -0300 Subject: [PATCH 1/6] set background color method --- public/index.html | 12 ++++++ .../QWebEnginePage/qwebenginepage_wrap.cpp | 12 ++++++ src/cpp/QWebEnginePage/qwebenginepage_wrap.h | 1 + src/demo-transparent.ts | 38 +++++++++++++++++++ src/lib/QWebEnginePage.ts | 5 +++ 5 files changed, 68 insertions(+) create mode 100644 public/index.html create mode 100644 src/demo-transparent.ts diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..87d36a6 --- /dev/null +++ b/public/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + Transparent Background + + \ No newline at end of file diff --git a/src/cpp/QWebEnginePage/qwebenginepage_wrap.cpp b/src/cpp/QWebEnginePage/qwebenginepage_wrap.cpp index 1b59377..09c8071 100644 --- a/src/cpp/QWebEnginePage/qwebenginepage_wrap.cpp +++ b/src/cpp/QWebEnginePage/qwebenginepage_wrap.cpp @@ -2,6 +2,8 @@ #include "Extras/Utils/nutils.h" #include "src/cpp/QWebChannel/qwebchannel_wrap.h" +#include + Napi::FunctionReference QWebEnginePageWrap::constructor; @@ -13,6 +15,7 @@ Napi::Object QWebEnginePageWrap::init(Napi::Env env, Napi::Object exports) { {InstanceMethod("setWebChannel", &QWebEnginePageWrap::setWebChannel), InstanceMethod("webChannel", &QWebEnginePageWrap::webChannel), InstanceMethod("runJavaScript", &QWebEnginePageWrap::runJavaScript), + InstanceMethod("setBackgroundColor", &QWebEnginePageWrap::setBackgroundColor), COMPONENT_WRAPPED_METHODS_EXPORT_DEFINE(QWebEnginePageWrap)}); constructor = Napi::Persistent(func); exports.Set(CLASSNAME, func); @@ -67,3 +70,12 @@ Napi::Value QWebEnginePageWrap::webChannel(const Napi::CallbackInfo& info) { return QWebChannelWrap::constructor.New( {Napi::External::New(env, webChannel)}); } + +Napi::Value QWebEnginePageWrap::setBackgroundColor(const Napi::CallbackInfo& info) { + Napi::Env env = info.Env(); + Napi::HandleScope scope(env); + Napi::Object colorObject = info[0].As(); + QColorWrap* colorWrap = Napi::ObjectWrap::Unwrap(colorObject); + this->instance->setBackgroundColor(*colorWrap->getInternalInstance()); + return env.Null(); +} diff --git a/src/cpp/QWebEnginePage/qwebenginepage_wrap.h b/src/cpp/QWebEnginePage/qwebenginepage_wrap.h index 5064d05..c95dc3f 100644 --- a/src/cpp/QWebEnginePage/qwebenginepage_wrap.h +++ b/src/cpp/QWebEnginePage/qwebenginepage_wrap.h @@ -19,4 +19,5 @@ class QWebEnginePageWrap : public Napi::ObjectWrap { Napi::Value runJavaScript(const Napi::CallbackInfo& info); Napi::Value setWebChannel(const Napi::CallbackInfo& info); Napi::Value webChannel(const Napi::CallbackInfo& info); + Napi::Value setBackgroundColor(const Napi::CallbackInfo& info); }; diff --git a/src/demo-transparent.ts b/src/demo-transparent.ts new file mode 100644 index 0000000..8b207f9 --- /dev/null +++ b/src/demo-transparent.ts @@ -0,0 +1,38 @@ +import path from 'path'; +import { WidgetAttribute, WidgetEventTypes, QColor } from "@nodegui/nodegui"; +import { QWebEngineView, QWebChannel } from "./index"; + +const webview = new QWebEngineView(); + +const index = 'file://' + path.resolve(__dirname, '..', 'public/index.html'); + +webview.setAttribute(WidgetAttribute.WA_TranslucentBackground, true); +webview.setAttribute(WidgetAttribute.WA_OpaquePaintEvent, true); + +webview.load(index); + +webview.addEventListener("urlChanged", (url) => { + console.log("changed to", url); +}); + +webview.addEventListener("selectionChanged", () => { + console.log("selection", webview.property("selectedText").toString()); +}); + +webview.addEventListener("loadFinished", () => { + const js = `alert('nodeui');`; + const page = webview.page(); + page.runJavaScript(js); +}); + +webview.addEventListener(WidgetEventTypes.Paint, () => { + webview.setStyleSheet('background:transparent'); + webview.setInlineStyle("align-self:'stretch';"); +}); + +const channel = new QWebChannel(); +webview.page().setWebChannel(channel); +webview.page().setBackgroundColor(new QColor(255,0,0,0)); + +webview.show(); +(global as any).wv = webview; \ No newline at end of file diff --git a/src/lib/QWebEnginePage.ts b/src/lib/QWebEnginePage.ts index a954b56..1938d57 100644 --- a/src/lib/QWebEnginePage.ts +++ b/src/lib/QWebEnginePage.ts @@ -2,6 +2,7 @@ import { Component, NativeElement, checkIfNativeElement, + QColor } from "@nodegui/nodegui"; import { QWebChannel } from "./QWebChannel"; @@ -27,4 +28,8 @@ export class QWebEnginePage extends Component { webChannel(): QWebChannel { return new QWebChannel(this.native.webChannel()); } + + setBackgroundColor(color: QColor): void { + this.native.setBackgroundColor(color.native); + } } From a3178b7ede7ae29244b3909ccb509b966687289c Mon Sep 17 00:00:00 2001 From: leonardo tessaro Date: Sun, 7 Mar 2021 15:17:39 -0300 Subject: [PATCH 2/6] add demo transparent image --- public/index.html | 15 ++++++++++++++- src/demo-transparent.ts | 16 +++++++++------- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/public/index.html b/public/index.html index 87d36a6..949e38a 100644 --- a/public/index.html +++ b/public/index.html @@ -5,8 +5,21 @@ Document + - Transparent Background +

Transparent Background

+
+ \ No newline at end of file diff --git a/src/demo-transparent.ts b/src/demo-transparent.ts index 8b207f9..e1a6c01 100644 --- a/src/demo-transparent.ts +++ b/src/demo-transparent.ts @@ -1,13 +1,14 @@ import path from 'path'; -import { WidgetAttribute, WidgetEventTypes, QColor } from "@nodegui/nodegui"; -import { QWebEngineView, QWebChannel } from "./index"; - -const webview = new QWebEngineView(); +import { WidgetAttribute, WidgetEventTypes, QPainter, QColor, PenStyle, WindowType } from "@nodegui/nodegui"; +import { QWebEngineView, QWebChannel } from "nodegui-plugin-webview"; const index = 'file://' + path.resolve(__dirname, '..', 'public/index.html'); +const webview = new QWebEngineView(); + webview.setAttribute(WidgetAttribute.WA_TranslucentBackground, true); webview.setAttribute(WidgetAttribute.WA_OpaquePaintEvent, true); +webview.setAttribute(WidgetAttribute.WA_AlwaysStackOnTop, true); webview.load(index); @@ -25,14 +26,15 @@ webview.addEventListener("loadFinished", () => { page.runJavaScript(js); }); +const color = new QColor('transparent'); + webview.addEventListener(WidgetEventTypes.Paint, () => { - webview.setStyleSheet('background:transparent'); - webview.setInlineStyle("align-self:'stretch';"); + webview.page().setBackgroundColor(color); }); const channel = new QWebChannel(); webview.page().setWebChannel(channel); -webview.page().setBackgroundColor(new QColor(255,0,0,0)); +webview.page().setBackgroundColor(color); webview.show(); (global as any).wv = webview; \ No newline at end of file From b0283c8b405b547eeecfb7573977e57b7c235668 Mon Sep 17 00:00:00 2001 From: leonardo tessaro Date: Sun, 7 Mar 2021 15:19:05 -0300 Subject: [PATCH 3/6] add new line --- src/demo-transparent.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/demo-transparent.ts b/src/demo-transparent.ts index e1a6c01..a55d1f6 100644 --- a/src/demo-transparent.ts +++ b/src/demo-transparent.ts @@ -37,4 +37,4 @@ webview.page().setWebChannel(channel); webview.page().setBackgroundColor(color); webview.show(); -(global as any).wv = webview; \ No newline at end of file +(global as any).wv = webview; From 64b581ce83e3e6c04c42a678be417a1499d4a562 Mon Sep 17 00:00:00 2001 From: leonardo tessaro Date: Mon, 8 Mar 2021 20:22:06 -0300 Subject: [PATCH 4/6] backgroundColor property --- src/cpp/QWebEnginePage/qwebenginepage_wrap.cpp | 10 ++++++++++ src/cpp/QWebEnginePage/qwebenginepage_wrap.h | 1 + src/lib/QWebEnginePage.ts | 4 ++++ 3 files changed, 15 insertions(+) diff --git a/src/cpp/QWebEnginePage/qwebenginepage_wrap.cpp b/src/cpp/QWebEnginePage/qwebenginepage_wrap.cpp index 09c8071..364c137 100644 --- a/src/cpp/QWebEnginePage/qwebenginepage_wrap.cpp +++ b/src/cpp/QWebEnginePage/qwebenginepage_wrap.cpp @@ -16,6 +16,7 @@ Napi::Object QWebEnginePageWrap::init(Napi::Env env, Napi::Object exports) { InstanceMethod("webChannel", &QWebEnginePageWrap::webChannel), InstanceMethod("runJavaScript", &QWebEnginePageWrap::runJavaScript), InstanceMethod("setBackgroundColor", &QWebEnginePageWrap::setBackgroundColor), + InstanceMethod("backgroundColor", &QWebEnginePageWrap::backgroundColor), COMPONENT_WRAPPED_METHODS_EXPORT_DEFINE(QWebEnginePageWrap)}); constructor = Napi::Persistent(func); exports.Set(CLASSNAME, func); @@ -79,3 +80,12 @@ Napi::Value QWebEnginePageWrap::setBackgroundColor(const Napi::CallbackInfo& inf this->instance->setBackgroundColor(*colorWrap->getInternalInstance()); return env.Null(); } + +Napi::Value QWebEnginePageWrap::backgroundColor(const Napi::CallbackInfo& info) { + Napi::Env env = info.Env(); + Napi::HandleScope scope(env); + QColor color = this->instance->backgroundColor(); + auto instance = QColorWrap::constructor.New( + {Napi::External::New(env, new QColor(color))}); + return instance; +} diff --git a/src/cpp/QWebEnginePage/qwebenginepage_wrap.h b/src/cpp/QWebEnginePage/qwebenginepage_wrap.h index c95dc3f..5126cbe 100644 --- a/src/cpp/QWebEnginePage/qwebenginepage_wrap.h +++ b/src/cpp/QWebEnginePage/qwebenginepage_wrap.h @@ -20,4 +20,5 @@ class QWebEnginePageWrap : public Napi::ObjectWrap { Napi::Value setWebChannel(const Napi::CallbackInfo& info); Napi::Value webChannel(const Napi::CallbackInfo& info); Napi::Value setBackgroundColor(const Napi::CallbackInfo& info); + Napi::Value backgroundColor(const Napi::CallbackInfo& info); }; diff --git a/src/lib/QWebEnginePage.ts b/src/lib/QWebEnginePage.ts index 1938d57..9c39f99 100644 --- a/src/lib/QWebEnginePage.ts +++ b/src/lib/QWebEnginePage.ts @@ -32,4 +32,8 @@ export class QWebEnginePage extends Component { setBackgroundColor(color: QColor): void { this.native.setBackgroundColor(color.native); } + + backgroundColor(): QColor { + return this.native.backgroundColor() + } } From b88f7eeabe2a546f4bf6e24a4567609b6216d22b Mon Sep 17 00:00:00 2001 From: leonardo tessaro Date: Mon, 8 Mar 2021 20:27:42 -0300 Subject: [PATCH 5/6] demo imports --- src/demo-transparent.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/demo-transparent.ts b/src/demo-transparent.ts index f604f02..9edb88d 100644 --- a/src/demo-transparent.ts +++ b/src/demo-transparent.ts @@ -1,8 +1,8 @@ -import path from 'path'; -import { WidgetAttribute, WidgetEventTypes, QPainter, QColor, PenStyle, WindowType } from "@nodegui/nodegui"; +import path from "path"; +import { WidgetAttribute, WidgetEventTypes, QColor } from "@nodegui/nodegui"; import { QWebEngineView, QWebChannel } from "."; -const index = 'file://' + path.resolve(__dirname, '..', 'public/index.html'); +const index = "file://" + path.resolve(__dirname, "..", "public/index.html"); const webview = new QWebEngineView(); @@ -23,7 +23,7 @@ webview.addEventListener("selectionChanged", () => { webview.addEventListener("loadFinished", () => { const js = `alert('nodeui');`; const page = webview.page(); - page.runJavaScript(js); + page.runJavaScript(js); }); const color = new QColor('transparent'); From 59ef7181a8fbdebe5118c75695fde359143a3e7a Mon Sep 17 00:00:00 2001 From: leonardo tessaro Date: Mon, 8 Mar 2021 20:31:00 -0300 Subject: [PATCH 6/6] fix string --- src/demo-transparent.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/demo-transparent.ts b/src/demo-transparent.ts index 9edb88d..6c8fd7c 100644 --- a/src/demo-transparent.ts +++ b/src/demo-transparent.ts @@ -26,7 +26,7 @@ webview.addEventListener("loadFinished", () => { page.runJavaScript(js); }); -const color = new QColor('transparent'); +const color = new QColor("transparent"); webview.addEventListener(WidgetEventTypes.Paint, () => { webview.page().setBackgroundColor(color);