@stocksharp/diagram 1.2.2 → 1.3.0
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/esm/canvas-renderer.js +9 -3
- package/dist/esm/canvas-renderer.js.map +1 -1
- package/dist/esm/color.js +23 -0
- package/dist/esm/color.js.map +1 -1
- package/dist/esm/diagram/palette.js +5 -0
- package/dist/esm/diagram/palette.js.map +1 -1
- package/dist/ssdiagram-headless.js +14 -2
- package/dist/ssdiagram-headless.js.map +2 -2
- package/dist/ssdiagram.js +15 -2
- package/dist/ssdiagram.js.map +2 -2
- package/dist/types/canvas-renderer.d.ts +1 -0
- package/dist/types/canvas-renderer.d.ts.map +1 -1
- package/dist/types/color.d.ts +1 -0
- package/dist/types/color.d.ts.map +1 -1
- package/dist/types/diagram/palette.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/canvas-renderer.ts +9 -3
- package/src/color.ts +26 -0
- package/src/diagram/palette.ts +4 -0
package/dist/ssdiagram.js
CHANGED
|
@@ -865,6 +865,14 @@ var SSDiagram = (() => {
|
|
|
865
865
|
return DARK_TEXT;
|
|
866
866
|
return contrast(background, relativeLuminance(LIGHT_TEXT)) > contrast(background, relativeLuminance(DARK_TEXT)) ? LIGHT_TEXT : DARK_TEXT;
|
|
867
867
|
}
|
|
868
|
+
var DARK_OUTLINE = "#3a3d45";
|
|
869
|
+
var LIGHT_OUTLINE = "#c8ccd4";
|
|
870
|
+
function readableOutlineOn(surface) {
|
|
871
|
+
const background = relativeLuminance(surface);
|
|
872
|
+
if (background < 0)
|
|
873
|
+
return DARK_OUTLINE;
|
|
874
|
+
return contrast(background, relativeLuminance(LIGHT_OUTLINE)) > contrast(background, relativeLuminance(DARK_OUTLINE)) ? LIGHT_OUTLINE : DARK_OUTLINE;
|
|
875
|
+
}
|
|
868
876
|
|
|
869
877
|
// src/core/history.ts
|
|
870
878
|
var DiagramCommandHistory = class {
|
|
@@ -1267,6 +1275,8 @@ var SSDiagram = (() => {
|
|
|
1267
1275
|
}
|
|
1268
1276
|
var Diagram = class {
|
|
1269
1277
|
constructor(opts) {
|
|
1278
|
+
/// Outline every socket is edged with, refreshed from the background each draw.
|
|
1279
|
+
this.portOutline = readableOutlineOn("#1b1b1f");
|
|
1270
1280
|
this.nodes = [];
|
|
1271
1281
|
this.links = [];
|
|
1272
1282
|
this.zones = [];
|
|
@@ -3416,8 +3426,10 @@ var SSDiagram = (() => {
|
|
|
3416
3426
|
draw(options = SCREEN_RENDER_OPTIONS) {
|
|
3417
3427
|
const ctx = this.ctx;
|
|
3418
3428
|
ctx.clearRect(0, 0, this.width, this.height);
|
|
3419
|
-
|
|
3429
|
+
const background = this.opts.background ?? "#1b1b1f";
|
|
3430
|
+
ctx.fillStyle = background;
|
|
3420
3431
|
ctx.fillRect(0, 0, this.width, this.height);
|
|
3432
|
+
this.portOutline = readableOutlineOn(background);
|
|
3421
3433
|
let introDy = 0;
|
|
3422
3434
|
let introAlpha = 1;
|
|
3423
3435
|
if (options.transient && this.introStart !== null) {
|
|
@@ -3742,7 +3754,7 @@ ${runtime.error}`;
|
|
|
3742
3754
|
ctx.fillStyle = this.portColor(this.portFillType(p));
|
|
3743
3755
|
ctx.fill();
|
|
3744
3756
|
ctx.lineWidth = magnet ? 1.5 : 1;
|
|
3745
|
-
ctx.strokeStyle = magnet ? "#ffffff" :
|
|
3757
|
+
ctx.strokeStyle = magnet ? "#ffffff" : this.portOutline;
|
|
3746
3758
|
ctx.stroke();
|
|
3747
3759
|
const runtimeSelected = runtime?.selected === true || options.selection && this.selectedPort?.port === p;
|
|
3748
3760
|
const breakpoint = runtime?.breakpoint === true;
|
|
@@ -6150,6 +6162,7 @@ ${runtime.error}`;
|
|
|
6150
6162
|
this.emit("nodeActivated", { node: item.clone() });
|
|
6151
6163
|
});
|
|
6152
6164
|
li.addEventListener("contextmenu", (event) => {
|
|
6165
|
+
if (!this.hasHandlers("contextMenuRequested")) return;
|
|
6153
6166
|
event.preventDefault();
|
|
6154
6167
|
this.selectNodeType(item.id);
|
|
6155
6168
|
this.emit("contextMenuRequested", {
|