@edv4h/usketch-plugin-bg-grid 2.1.7 → 2.2.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/plugin.d.ts.map +1 -1
- package/dist/plugin.js +37 -7
- package/dist/plugin.js.map +1 -1
- package/package.json +3 -3
package/dist/plugin.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAqC,aAAa,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAqC,aAAa,EAAE,MAAM,uBAAuB,CAAC;AA2F9F,wBAAgB,kBAAkB,IAAI,aAAa,CAuDlD"}
|
package/dist/plugin.js
CHANGED
|
@@ -3,14 +3,29 @@ import { useId, useSyncExternalStore } from "react";
|
|
|
3
3
|
const GRID_SIZE = 20;
|
|
4
4
|
const GRID_COLOR = "#e0e0e0";
|
|
5
5
|
const GRID_OPACITY = 0.5;
|
|
6
|
-
// ── Shared visibility state ──
|
|
6
|
+
// ── Shared visibility + overscan state ──
|
|
7
7
|
let visible = true;
|
|
8
|
+
// How far BEYOND the viewport box (in CSS px, all sides) to render the grid. Normally
|
|
9
|
+
// 0 (grid fills the viewport). A consumer that reveals off-screen area — e.g. the Mode
|
|
10
|
+
// 7 tilt, which shows content past the box — drives this via the `bg-grid:set-overscan`
|
|
11
|
+
// event so the grid extends under that far content instead of stopping at the box edge.
|
|
12
|
+
let overscan = 0;
|
|
8
13
|
const listeners = new Set();
|
|
9
|
-
function
|
|
10
|
-
visible = v;
|
|
14
|
+
function notify() {
|
|
11
15
|
for (const fn of listeners)
|
|
12
16
|
fn();
|
|
13
17
|
}
|
|
18
|
+
function setVisible(v) {
|
|
19
|
+
visible = v;
|
|
20
|
+
notify();
|
|
21
|
+
}
|
|
22
|
+
function setOverscan(px) {
|
|
23
|
+
const next = Number.isFinite(px) && px > 0 ? Math.ceil(px) : 0;
|
|
24
|
+
if (next === overscan)
|
|
25
|
+
return;
|
|
26
|
+
overscan = next;
|
|
27
|
+
notify();
|
|
28
|
+
}
|
|
14
29
|
function subscribe(cb) {
|
|
15
30
|
listeners.add(cb);
|
|
16
31
|
return () => listeners.delete(cb);
|
|
@@ -18,16 +33,24 @@ function subscribe(cb) {
|
|
|
18
33
|
function getVisible() {
|
|
19
34
|
return visible;
|
|
20
35
|
}
|
|
36
|
+
function getOverscan() {
|
|
37
|
+
return overscan;
|
|
38
|
+
}
|
|
21
39
|
// ── React component ──
|
|
22
40
|
function GridBackground({ viewport }) {
|
|
23
41
|
const show = useSyncExternalStore(subscribe, getVisible);
|
|
42
|
+
const pad = useSyncExternalStore(subscribe, getOverscan);
|
|
24
43
|
const patternId = useId();
|
|
25
44
|
if (!show)
|
|
26
45
|
return null;
|
|
27
46
|
const size = GRID_SIZE * viewport.zoom;
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
47
|
+
// The grid box is inset by `-pad` on every side (extends past the viewport). Its
|
|
48
|
+
// user-space origin therefore sits at box(-pad,-pad), so a world-0 line that is at
|
|
49
|
+
// box `viewport.x` is at grid-space `viewport.x + pad`; keep the pattern phase on
|
|
50
|
+
// world multiples by shifting the offset accordingly (mod size). `pad = 0` → current.
|
|
51
|
+
const offsetX = (viewport.x + pad) % size;
|
|
52
|
+
const offsetY = (viewport.y + pad) % size;
|
|
53
|
+
return (_jsx("div", { style: { position: "absolute", inset: -pad, pointerEvents: "none" }, children: _jsxs("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("defs", { children: _jsx("pattern", { id: patternId, x: offsetX, y: offsetY, width: size, height: size, patternUnits: "userSpaceOnUse", children: _jsx("path", { d: `M ${size} 0 L 0 0 0 ${size}`, fill: "none", stroke: GRID_COLOR, strokeWidth: 1, opacity: GRID_OPACITY }) }) }), _jsx("rect", { width: "100%", height: "100%", fill: `url(#${patternId})` })] }) }));
|
|
31
54
|
}
|
|
32
55
|
// ── Plugin ──
|
|
33
56
|
export function createGridBgPlugin() {
|
|
@@ -35,8 +58,9 @@ export function createGridBgPlugin() {
|
|
|
35
58
|
id: "usketch-plugin-bg-grid",
|
|
36
59
|
name: "Grid Background",
|
|
37
60
|
setup(ctx) {
|
|
38
|
-
// Reset to
|
|
61
|
+
// Reset to defaults
|
|
39
62
|
visible = true;
|
|
63
|
+
overscan = 0;
|
|
40
64
|
ctx.layers.register({
|
|
41
65
|
id: "bg-grid",
|
|
42
66
|
order: 10,
|
|
@@ -46,6 +70,11 @@ export function createGridBgPlugin() {
|
|
|
46
70
|
const off = ctx.events.on("bg:set", ({ type }) => {
|
|
47
71
|
setVisible(type === "grid");
|
|
48
72
|
});
|
|
73
|
+
// Let a consumer (e.g. the Mode 7 tilt) extend the grid past the viewport so
|
|
74
|
+
// it stays under off-screen content instead of stopping at the box edge.
|
|
75
|
+
const offOverscan = ctx.events.on("bg-grid:set-overscan", ({ px }) => {
|
|
76
|
+
setOverscan(px);
|
|
77
|
+
});
|
|
49
78
|
// ── 背景切替を Action として公開（grid/dots プラグイン共通の bg:set を emit） ──
|
|
50
79
|
const offAction = ctx.actions.register({
|
|
51
80
|
id: "bg:set",
|
|
@@ -67,6 +96,7 @@ export function createGridBgPlugin() {
|
|
|
67
96
|
});
|
|
68
97
|
return () => {
|
|
69
98
|
off();
|
|
99
|
+
offOverscan();
|
|
70
100
|
offAction();
|
|
71
101
|
ctx.layers.unregister("bg-grid");
|
|
72
102
|
};
|
package/dist/plugin.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAEpD,MAAM,SAAS,GAAG,EAAE,CAAC;AACrB,MAAM,UAAU,GAAG,SAAS,CAAC;AAC7B,MAAM,YAAY,GAAG,GAAG,CAAC;AAEzB,
|
|
1
|
+
{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@edv4h/usketch-plugin-bg-grid",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
}
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@edv4h/usketch-core": "2.4.
|
|
16
|
-
"@edv4h/usketch-shared": "4.
|
|
15
|
+
"@edv4h/usketch-core": "2.4.3",
|
|
16
|
+
"@edv4h/usketch-shared": "4.13.0"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
19
|
"react": ">=19"
|