@univerjs/sheets-crosshair-highlight 1.0.0-alpha.7 → 1.0.0-beta.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/lib/cjs/index.js +17 -16
- package/lib/es/index.js +19 -18
- package/lib/index.css +4 -0
- package/lib/index.js +19 -18
- package/lib/umd/index.js +1 -1
- package/package.json +10 -10
- package/lib/types/controllers/crosshair.controller.spec.d.ts +0 -16
- package/lib/types/views/components/CrosshairHighlight.spec.d.ts +0 -16
package/lib/cjs/index.js
CHANGED
|
@@ -3,14 +3,14 @@ let _univerjs_core = require("@univerjs/core");
|
|
|
3
3
|
let rxjs = require("rxjs");
|
|
4
4
|
let _univerjs_ui = require("@univerjs/ui");
|
|
5
5
|
let _univerjs_engine_render = require("@univerjs/engine-render");
|
|
6
|
+
let _univerjs_sheets = require("@univerjs/sheets");
|
|
7
|
+
let _univerjs_sheets_ui = require("@univerjs/sheets-ui");
|
|
6
8
|
let _univerjs_icons = require("@univerjs/icons");
|
|
7
9
|
let _univerjs_design = require("@univerjs/design");
|
|
8
10
|
let react = require("react");
|
|
9
11
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
10
|
-
let _univerjs_sheets = require("@univerjs/sheets");
|
|
11
|
-
let _univerjs_sheets_ui = require("@univerjs/sheets-ui");
|
|
12
12
|
|
|
13
|
-
//#region \0@oxc-project+runtime@0.
|
|
13
|
+
//#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
|
|
14
14
|
function _typeof(o) {
|
|
15
15
|
"@babel/helpers - typeof";
|
|
16
16
|
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
|
|
@@ -21,7 +21,7 @@ function _typeof(o) {
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
//#endregion
|
|
24
|
-
//#region \0@oxc-project+runtime@0.
|
|
24
|
+
//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
|
|
25
25
|
function toPrimitive(t, r) {
|
|
26
26
|
if ("object" != _typeof(t) || !t) return t;
|
|
27
27
|
var e = t[Symbol.toPrimitive];
|
|
@@ -34,14 +34,14 @@ function toPrimitive(t, r) {
|
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
//#endregion
|
|
37
|
-
//#region \0@oxc-project+runtime@0.
|
|
37
|
+
//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPropertyKey.js
|
|
38
38
|
function toPropertyKey(t) {
|
|
39
39
|
var i = toPrimitive(t, "string");
|
|
40
40
|
return "symbol" == _typeof(i) ? i : i + "";
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
//#endregion
|
|
44
|
-
//#region \0@oxc-project+runtime@0.
|
|
44
|
+
//#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
|
|
45
45
|
function _defineProperty(e, r, t) {
|
|
46
46
|
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
47
47
|
value: t,
|
|
@@ -52,7 +52,7 @@ function _defineProperty(e, r, t) {
|
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
//#endregion
|
|
55
|
-
//#region \0@oxc-project+runtime@0.
|
|
55
|
+
//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
|
|
56
56
|
function __decorateParam(paramIndex, decorator) {
|
|
57
57
|
return function(target, key) {
|
|
58
58
|
decorator(target, key, paramIndex);
|
|
@@ -60,7 +60,7 @@ function __decorateParam(paramIndex, decorator) {
|
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
//#endregion
|
|
63
|
-
//#region \0@oxc-project+runtime@0.
|
|
63
|
+
//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorate.js
|
|
64
64
|
function __decorate(decorators, target, key, desc) {
|
|
65
65
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
66
66
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
@@ -73,10 +73,9 @@ function __decorate(decorators, target, key, desc) {
|
|
|
73
73
|
const CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATHS = Array.from({ length: 16 }, (_, index) => `highlight.background.${index + 1}`);
|
|
74
74
|
const DEFAULT_CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATH = CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATHS[0];
|
|
75
75
|
function resolveCrosshairHighlightColor(themeService, tokenPath) {
|
|
76
|
-
var _themeService$getColo;
|
|
77
76
|
const token = themeService.getColorFromTheme(tokenPath);
|
|
78
77
|
if (token == null || typeof token.color !== "string" || typeof token.alpha !== "number") throw new Error(`Theme token ${tokenPath} is required.`);
|
|
79
|
-
return new _univerjs_core.ColorKit(
|
|
78
|
+
return new _univerjs_core.ColorKit(themeService.getColorFromTheme(token.color) ?? token.color).setAlpha(token.alpha).toRgbString();
|
|
80
79
|
}
|
|
81
80
|
function resolveCrosshairHighlightColors(themeService) {
|
|
82
81
|
return CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATHS.map((tokenPath) => resolveCrosshairHighlightColor(themeService, tokenPath));
|
|
@@ -179,7 +178,8 @@ function CrosshairHighlightMenuItemFactory(accessor) {
|
|
|
179
178
|
selections: [{ label: {
|
|
180
179
|
name: CROSSHAIR_HIGHLIGHT_OVERLAY_COMPONENT,
|
|
181
180
|
hoverable: false,
|
|
182
|
-
selectable: false
|
|
181
|
+
selectable: false,
|
|
182
|
+
props: { embedded: true }
|
|
183
183
|
} }],
|
|
184
184
|
selectionsCommandId: SetCrosshairHighlightColorOperation.id,
|
|
185
185
|
activated$: crosshairHighlightService.enabled$,
|
|
@@ -208,7 +208,7 @@ const menuSchema = {
|
|
|
208
208
|
//#endregion
|
|
209
209
|
//#region package.json
|
|
210
210
|
var name = "@univerjs/sheets-crosshair-highlight";
|
|
211
|
-
var version = "1.0.0-
|
|
211
|
+
var version = "1.0.0-beta.0";
|
|
212
212
|
|
|
213
213
|
//#endregion
|
|
214
214
|
//#region src/config/config.ts
|
|
@@ -243,7 +243,7 @@ function CrosshairOverlay(props) {
|
|
|
243
243
|
onChange === null || onChange === void 0 || onChange(tokenPath);
|
|
244
244
|
}, [onChange]);
|
|
245
245
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
246
|
-
className: "univer-grid univer-grid-cols-8 univer-gap-x-2 univer-gap-y-3",
|
|
246
|
+
className: "univer-grid univer-grid-cols-8 univer-gap-x-2 univer-gap-y-3 univer-p-1.5",
|
|
247
247
|
children: colors.map((color, index) => {
|
|
248
248
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
249
249
|
className: (0, _univerjs_design.clsx)("hover:univer-ring-primary-600/40 univer-box-border univer-size-5 univer-cursor-pointer univer-rounded univer-ring-offset-1 univer-transition-shadow hover:univer-ring-[1.5px]", _univerjs_design.borderClassName, { "univer-ring-[1.5px] univer-ring-primary-600 hover:univer-ring-primary-600": color === currentColor }),
|
|
@@ -358,7 +358,7 @@ var CrossHairRangeCollection = class {
|
|
|
358
358
|
_getIntersects(addRange) {
|
|
359
359
|
const intersects = [];
|
|
360
360
|
for (const range of this._ranges) {
|
|
361
|
-
const intersect = _univerjs_core.
|
|
361
|
+
const intersect = (0, _univerjs_core.getIntersectRange)(range, addRange);
|
|
362
362
|
if (intersect) intersects.push(intersect);
|
|
363
363
|
}
|
|
364
364
|
return intersects;
|
|
@@ -388,8 +388,8 @@ var SheetCrossHairHighlightShape = class extends _univerjs_engine_render.Shape {
|
|
|
388
388
|
});
|
|
389
389
|
}
|
|
390
390
|
_draw(ctx) {
|
|
391
|
-
var _this$_color
|
|
392
|
-
const color = `rgba(${this._color.r}, ${this._color.g}, ${this._color.b}, ${(
|
|
391
|
+
var _this$_color;
|
|
392
|
+
const color = `rgba(${this._color.r}, ${this._color.g}, ${this._color.b}, ${((_this$_color = this._color) === null || _this$_color === void 0 ? void 0 : _this$_color.a) ?? .5})`;
|
|
393
393
|
_univerjs_engine_render.Rect.drawWith(ctx, {
|
|
394
394
|
width: this.width,
|
|
395
395
|
height: this.height,
|
|
@@ -565,6 +565,7 @@ _defineProperty(UniverSheetsCrosshairHighlightPlugin, "packageName", name);
|
|
|
565
565
|
_defineProperty(UniverSheetsCrosshairHighlightPlugin, "version", version);
|
|
566
566
|
_defineProperty(UniverSheetsCrosshairHighlightPlugin, "type", _univerjs_core.UniverInstanceType.UNIVER_SHEET);
|
|
567
567
|
UniverSheetsCrosshairHighlightPlugin = __decorate([
|
|
568
|
+
(0, _univerjs_core.DependentOn)(_univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_sheets.UniverSheetsPlugin, _univerjs_sheets_ui.UniverSheetsUIPlugin),
|
|
568
569
|
__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
|
|
569
570
|
__decorateParam(2, _univerjs_engine_render.IRenderManagerService),
|
|
570
571
|
__decorateParam(3, _univerjs_core.IConfigService)
|
package/lib/es/index.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { ColorKit, CommandType, Disposable, ICommandService, IConfigService, IContextService, Inject, Injector, Plugin, RANGE_TYPE, Rectangle, ThemeService, UniverInstanceType, merge } from "@univerjs/core";
|
|
1
|
+
import { ColorKit, CommandType, DependentOn, Disposable, ICommandService, IConfigService, IContextService, Inject, Injector, Plugin, RANGE_TYPE, Rectangle, ThemeService, UniverInstanceType, getIntersectRange, merge } from "@univerjs/core";
|
|
2
2
|
import { BehaviorSubject, combineLatest, map, merge as merge$1, startWith, tap } from "rxjs";
|
|
3
3
|
import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IMenuManagerService, IconManager, MenuItemType, RibbonViewGroup, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
|
|
4
|
-
import { IRenderManagerService, Rect, Shape } from "@univerjs/engine-render";
|
|
4
|
+
import { IRenderManagerService, Rect, Shape, UniverRenderEnginePlugin } from "@univerjs/engine-render";
|
|
5
|
+
import { IRefSelectionsService, REF_SELECTIONS_ENABLED, SheetsSelectionsService, UniverSheetsPlugin } from "@univerjs/sheets";
|
|
6
|
+
import { SheetSkeletonManagerService, UniverSheetsUIPlugin, getCoordByCell } from "@univerjs/sheets-ui";
|
|
5
7
|
import { CrossHighlightingIcon } from "@univerjs/icons";
|
|
6
8
|
import { borderClassName, clsx } from "@univerjs/design";
|
|
7
9
|
import { useCallback } from "react";
|
|
8
10
|
import { jsx } from "react/jsx-runtime";
|
|
9
|
-
import { IRefSelectionsService, REF_SELECTIONS_ENABLED, SheetsSelectionsService } from "@univerjs/sheets";
|
|
10
|
-
import { SheetSkeletonManagerService, getCoordByCell } from "@univerjs/sheets-ui";
|
|
11
11
|
|
|
12
|
-
//#region \0@oxc-project+runtime@0.
|
|
12
|
+
//#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
|
|
13
13
|
function _typeof(o) {
|
|
14
14
|
"@babel/helpers - typeof";
|
|
15
15
|
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
|
|
@@ -20,7 +20,7 @@ function _typeof(o) {
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
//#endregion
|
|
23
|
-
//#region \0@oxc-project+runtime@0.
|
|
23
|
+
//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
|
|
24
24
|
function toPrimitive(t, r) {
|
|
25
25
|
if ("object" != _typeof(t) || !t) return t;
|
|
26
26
|
var e = t[Symbol.toPrimitive];
|
|
@@ -33,14 +33,14 @@ function toPrimitive(t, r) {
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
//#endregion
|
|
36
|
-
//#region \0@oxc-project+runtime@0.
|
|
36
|
+
//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPropertyKey.js
|
|
37
37
|
function toPropertyKey(t) {
|
|
38
38
|
var i = toPrimitive(t, "string");
|
|
39
39
|
return "symbol" == _typeof(i) ? i : i + "";
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
//#endregion
|
|
43
|
-
//#region \0@oxc-project+runtime@0.
|
|
43
|
+
//#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
|
|
44
44
|
function _defineProperty(e, r, t) {
|
|
45
45
|
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
46
46
|
value: t,
|
|
@@ -51,7 +51,7 @@ function _defineProperty(e, r, t) {
|
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
//#endregion
|
|
54
|
-
//#region \0@oxc-project+runtime@0.
|
|
54
|
+
//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
|
|
55
55
|
function __decorateParam(paramIndex, decorator) {
|
|
56
56
|
return function(target, key) {
|
|
57
57
|
decorator(target, key, paramIndex);
|
|
@@ -59,7 +59,7 @@ function __decorateParam(paramIndex, decorator) {
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
//#endregion
|
|
62
|
-
//#region \0@oxc-project+runtime@0.
|
|
62
|
+
//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorate.js
|
|
63
63
|
function __decorate(decorators, target, key, desc) {
|
|
64
64
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
65
65
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
@@ -72,10 +72,9 @@ function __decorate(decorators, target, key, desc) {
|
|
|
72
72
|
const CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATHS = Array.from({ length: 16 }, (_, index) => `highlight.background.${index + 1}`);
|
|
73
73
|
const DEFAULT_CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATH = CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATHS[0];
|
|
74
74
|
function resolveCrosshairHighlightColor(themeService, tokenPath) {
|
|
75
|
-
var _themeService$getColo;
|
|
76
75
|
const token = themeService.getColorFromTheme(tokenPath);
|
|
77
76
|
if (token == null || typeof token.color !== "string" || typeof token.alpha !== "number") throw new Error(`Theme token ${tokenPath} is required.`);
|
|
78
|
-
return new ColorKit(
|
|
77
|
+
return new ColorKit(themeService.getColorFromTheme(token.color) ?? token.color).setAlpha(token.alpha).toRgbString();
|
|
79
78
|
}
|
|
80
79
|
function resolveCrosshairHighlightColors(themeService) {
|
|
81
80
|
return CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATHS.map((tokenPath) => resolveCrosshairHighlightColor(themeService, tokenPath));
|
|
@@ -178,7 +177,8 @@ function CrosshairHighlightMenuItemFactory(accessor) {
|
|
|
178
177
|
selections: [{ label: {
|
|
179
178
|
name: CROSSHAIR_HIGHLIGHT_OVERLAY_COMPONENT,
|
|
180
179
|
hoverable: false,
|
|
181
|
-
selectable: false
|
|
180
|
+
selectable: false,
|
|
181
|
+
props: { embedded: true }
|
|
182
182
|
} }],
|
|
183
183
|
selectionsCommandId: SetCrosshairHighlightColorOperation.id,
|
|
184
184
|
activated$: crosshairHighlightService.enabled$,
|
|
@@ -207,7 +207,7 @@ const menuSchema = {
|
|
|
207
207
|
//#endregion
|
|
208
208
|
//#region package.json
|
|
209
209
|
var name = "@univerjs/sheets-crosshair-highlight";
|
|
210
|
-
var version = "1.0.0-
|
|
210
|
+
var version = "1.0.0-beta.0";
|
|
211
211
|
|
|
212
212
|
//#endregion
|
|
213
213
|
//#region src/config/config.ts
|
|
@@ -242,7 +242,7 @@ function CrosshairOverlay(props) {
|
|
|
242
242
|
onChange === null || onChange === void 0 || onChange(tokenPath);
|
|
243
243
|
}, [onChange]);
|
|
244
244
|
return /* @__PURE__ */ jsx("div", {
|
|
245
|
-
className: "univer-grid univer-grid-cols-8 univer-gap-x-2 univer-gap-y-3",
|
|
245
|
+
className: "univer-grid univer-grid-cols-8 univer-gap-x-2 univer-gap-y-3 univer-p-1.5",
|
|
246
246
|
children: colors.map((color, index) => {
|
|
247
247
|
return /* @__PURE__ */ jsx("div", {
|
|
248
248
|
className: clsx("hover:univer-ring-primary-600/40 univer-box-border univer-size-5 univer-cursor-pointer univer-rounded univer-ring-offset-1 univer-transition-shadow hover:univer-ring-[1.5px]", borderClassName, { "univer-ring-[1.5px] univer-ring-primary-600 hover:univer-ring-primary-600": color === currentColor }),
|
|
@@ -357,7 +357,7 @@ var CrossHairRangeCollection = class {
|
|
|
357
357
|
_getIntersects(addRange) {
|
|
358
358
|
const intersects = [];
|
|
359
359
|
for (const range of this._ranges) {
|
|
360
|
-
const intersect =
|
|
360
|
+
const intersect = getIntersectRange(range, addRange);
|
|
361
361
|
if (intersect) intersects.push(intersect);
|
|
362
362
|
}
|
|
363
363
|
return intersects;
|
|
@@ -387,8 +387,8 @@ var SheetCrossHairHighlightShape = class extends Shape {
|
|
|
387
387
|
});
|
|
388
388
|
}
|
|
389
389
|
_draw(ctx) {
|
|
390
|
-
var _this$_color
|
|
391
|
-
const color = `rgba(${this._color.r}, ${this._color.g}, ${this._color.b}, ${(
|
|
390
|
+
var _this$_color;
|
|
391
|
+
const color = `rgba(${this._color.r}, ${this._color.g}, ${this._color.b}, ${((_this$_color = this._color) === null || _this$_color === void 0 ? void 0 : _this$_color.a) ?? .5})`;
|
|
392
392
|
Rect.drawWith(ctx, {
|
|
393
393
|
width: this.width,
|
|
394
394
|
height: this.height,
|
|
@@ -564,6 +564,7 @@ _defineProperty(UniverSheetsCrosshairHighlightPlugin, "packageName", name);
|
|
|
564
564
|
_defineProperty(UniverSheetsCrosshairHighlightPlugin, "version", version);
|
|
565
565
|
_defineProperty(UniverSheetsCrosshairHighlightPlugin, "type", UniverInstanceType.UNIVER_SHEET);
|
|
566
566
|
UniverSheetsCrosshairHighlightPlugin = __decorate([
|
|
567
|
+
DependentOn(UniverRenderEnginePlugin, UniverSheetsPlugin, UniverSheetsUIPlugin),
|
|
567
568
|
__decorateParam(1, Inject(Injector)),
|
|
568
569
|
__decorateParam(2, IRenderManagerService),
|
|
569
570
|
__decorateParam(3, IConfigService)
|
package/lib/index.css
CHANGED
|
@@ -32,6 +32,10 @@
|
|
|
32
32
|
border-radius: .25rem;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
.univer-p-1\.5 {
|
|
36
|
+
padding: .375rem;
|
|
37
|
+
}
|
|
38
|
+
|
|
35
39
|
.univer-ring-\[1\.5px\] {
|
|
36
40
|
--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);
|
|
37
41
|
--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(1.5px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);
|
package/lib/index.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { ColorKit, CommandType, Disposable, ICommandService, IConfigService, IContextService, Inject, Injector, Plugin, RANGE_TYPE, Rectangle, ThemeService, UniverInstanceType, merge } from "@univerjs/core";
|
|
1
|
+
import { ColorKit, CommandType, DependentOn, Disposable, ICommandService, IConfigService, IContextService, Inject, Injector, Plugin, RANGE_TYPE, Rectangle, ThemeService, UniverInstanceType, getIntersectRange, merge } from "@univerjs/core";
|
|
2
2
|
import { BehaviorSubject, combineLatest, map, merge as merge$1, startWith, tap } from "rxjs";
|
|
3
3
|
import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IMenuManagerService, IconManager, MenuItemType, RibbonViewGroup, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
|
|
4
|
-
import { IRenderManagerService, Rect, Shape } from "@univerjs/engine-render";
|
|
4
|
+
import { IRenderManagerService, Rect, Shape, UniverRenderEnginePlugin } from "@univerjs/engine-render";
|
|
5
|
+
import { IRefSelectionsService, REF_SELECTIONS_ENABLED, SheetsSelectionsService, UniverSheetsPlugin } from "@univerjs/sheets";
|
|
6
|
+
import { SheetSkeletonManagerService, UniverSheetsUIPlugin, getCoordByCell } from "@univerjs/sheets-ui";
|
|
5
7
|
import { CrossHighlightingIcon } from "@univerjs/icons";
|
|
6
8
|
import { borderClassName, clsx } from "@univerjs/design";
|
|
7
9
|
import { useCallback } from "react";
|
|
8
10
|
import { jsx } from "react/jsx-runtime";
|
|
9
|
-
import { IRefSelectionsService, REF_SELECTIONS_ENABLED, SheetsSelectionsService } from "@univerjs/sheets";
|
|
10
|
-
import { SheetSkeletonManagerService, getCoordByCell } from "@univerjs/sheets-ui";
|
|
11
11
|
|
|
12
|
-
//#region \0@oxc-project+runtime@0.
|
|
12
|
+
//#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
|
|
13
13
|
function _typeof(o) {
|
|
14
14
|
"@babel/helpers - typeof";
|
|
15
15
|
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
|
|
@@ -20,7 +20,7 @@ function _typeof(o) {
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
//#endregion
|
|
23
|
-
//#region \0@oxc-project+runtime@0.
|
|
23
|
+
//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
|
|
24
24
|
function toPrimitive(t, r) {
|
|
25
25
|
if ("object" != _typeof(t) || !t) return t;
|
|
26
26
|
var e = t[Symbol.toPrimitive];
|
|
@@ -33,14 +33,14 @@ function toPrimitive(t, r) {
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
//#endregion
|
|
36
|
-
//#region \0@oxc-project+runtime@0.
|
|
36
|
+
//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPropertyKey.js
|
|
37
37
|
function toPropertyKey(t) {
|
|
38
38
|
var i = toPrimitive(t, "string");
|
|
39
39
|
return "symbol" == _typeof(i) ? i : i + "";
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
//#endregion
|
|
43
|
-
//#region \0@oxc-project+runtime@0.
|
|
43
|
+
//#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
|
|
44
44
|
function _defineProperty(e, r, t) {
|
|
45
45
|
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
46
46
|
value: t,
|
|
@@ -51,7 +51,7 @@ function _defineProperty(e, r, t) {
|
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
//#endregion
|
|
54
|
-
//#region \0@oxc-project+runtime@0.
|
|
54
|
+
//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
|
|
55
55
|
function __decorateParam(paramIndex, decorator) {
|
|
56
56
|
return function(target, key) {
|
|
57
57
|
decorator(target, key, paramIndex);
|
|
@@ -59,7 +59,7 @@ function __decorateParam(paramIndex, decorator) {
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
//#endregion
|
|
62
|
-
//#region \0@oxc-project+runtime@0.
|
|
62
|
+
//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorate.js
|
|
63
63
|
function __decorate(decorators, target, key, desc) {
|
|
64
64
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
65
65
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
@@ -72,10 +72,9 @@ function __decorate(decorators, target, key, desc) {
|
|
|
72
72
|
const CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATHS = Array.from({ length: 16 }, (_, index) => `highlight.background.${index + 1}`);
|
|
73
73
|
const DEFAULT_CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATH = CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATHS[0];
|
|
74
74
|
function resolveCrosshairHighlightColor(themeService, tokenPath) {
|
|
75
|
-
var _themeService$getColo;
|
|
76
75
|
const token = themeService.getColorFromTheme(tokenPath);
|
|
77
76
|
if (token == null || typeof token.color !== "string" || typeof token.alpha !== "number") throw new Error(`Theme token ${tokenPath} is required.`);
|
|
78
|
-
return new ColorKit(
|
|
77
|
+
return new ColorKit(themeService.getColorFromTheme(token.color) ?? token.color).setAlpha(token.alpha).toRgbString();
|
|
79
78
|
}
|
|
80
79
|
function resolveCrosshairHighlightColors(themeService) {
|
|
81
80
|
return CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATHS.map((tokenPath) => resolveCrosshairHighlightColor(themeService, tokenPath));
|
|
@@ -178,7 +177,8 @@ function CrosshairHighlightMenuItemFactory(accessor) {
|
|
|
178
177
|
selections: [{ label: {
|
|
179
178
|
name: CROSSHAIR_HIGHLIGHT_OVERLAY_COMPONENT,
|
|
180
179
|
hoverable: false,
|
|
181
|
-
selectable: false
|
|
180
|
+
selectable: false,
|
|
181
|
+
props: { embedded: true }
|
|
182
182
|
} }],
|
|
183
183
|
selectionsCommandId: SetCrosshairHighlightColorOperation.id,
|
|
184
184
|
activated$: crosshairHighlightService.enabled$,
|
|
@@ -207,7 +207,7 @@ const menuSchema = {
|
|
|
207
207
|
//#endregion
|
|
208
208
|
//#region package.json
|
|
209
209
|
var name = "@univerjs/sheets-crosshair-highlight";
|
|
210
|
-
var version = "1.0.0-
|
|
210
|
+
var version = "1.0.0-beta.0";
|
|
211
211
|
|
|
212
212
|
//#endregion
|
|
213
213
|
//#region src/config/config.ts
|
|
@@ -242,7 +242,7 @@ function CrosshairOverlay(props) {
|
|
|
242
242
|
onChange === null || onChange === void 0 || onChange(tokenPath);
|
|
243
243
|
}, [onChange]);
|
|
244
244
|
return /* @__PURE__ */ jsx("div", {
|
|
245
|
-
className: "univer-grid univer-grid-cols-8 univer-gap-x-2 univer-gap-y-3",
|
|
245
|
+
className: "univer-grid univer-grid-cols-8 univer-gap-x-2 univer-gap-y-3 univer-p-1.5",
|
|
246
246
|
children: colors.map((color, index) => {
|
|
247
247
|
return /* @__PURE__ */ jsx("div", {
|
|
248
248
|
className: clsx("hover:univer-ring-primary-600/40 univer-box-border univer-size-5 univer-cursor-pointer univer-rounded univer-ring-offset-1 univer-transition-shadow hover:univer-ring-[1.5px]", borderClassName, { "univer-ring-[1.5px] univer-ring-primary-600 hover:univer-ring-primary-600": color === currentColor }),
|
|
@@ -357,7 +357,7 @@ var CrossHairRangeCollection = class {
|
|
|
357
357
|
_getIntersects(addRange) {
|
|
358
358
|
const intersects = [];
|
|
359
359
|
for (const range of this._ranges) {
|
|
360
|
-
const intersect =
|
|
360
|
+
const intersect = getIntersectRange(range, addRange);
|
|
361
361
|
if (intersect) intersects.push(intersect);
|
|
362
362
|
}
|
|
363
363
|
return intersects;
|
|
@@ -387,8 +387,8 @@ var SheetCrossHairHighlightShape = class extends Shape {
|
|
|
387
387
|
});
|
|
388
388
|
}
|
|
389
389
|
_draw(ctx) {
|
|
390
|
-
var _this$_color
|
|
391
|
-
const color = `rgba(${this._color.r}, ${this._color.g}, ${this._color.b}, ${(
|
|
390
|
+
var _this$_color;
|
|
391
|
+
const color = `rgba(${this._color.r}, ${this._color.g}, ${this._color.b}, ${((_this$_color = this._color) === null || _this$_color === void 0 ? void 0 : _this$_color.a) ?? .5})`;
|
|
392
392
|
Rect.drawWith(ctx, {
|
|
393
393
|
width: this.width,
|
|
394
394
|
height: this.height,
|
|
@@ -564,6 +564,7 @@ _defineProperty(UniverSheetsCrosshairHighlightPlugin, "packageName", name);
|
|
|
564
564
|
_defineProperty(UniverSheetsCrosshairHighlightPlugin, "version", version);
|
|
565
565
|
_defineProperty(UniverSheetsCrosshairHighlightPlugin, "type", UniverInstanceType.UNIVER_SHEET);
|
|
566
566
|
UniverSheetsCrosshairHighlightPlugin = __decorate([
|
|
567
|
+
DependentOn(UniverRenderEnginePlugin, UniverSheetsPlugin, UniverSheetsUIPlugin),
|
|
567
568
|
__decorateParam(1, Inject(Injector)),
|
|
568
569
|
__decorateParam(2, IRenderManagerService),
|
|
569
570
|
__decorateParam(3, IConfigService)
|
package/lib/umd/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("@univerjs/core"),require("rxjs"),require("@univerjs/ui"),require("@univerjs/engine-render"),require("react"),require("@univerjs/design"),require("react/jsx-runtime"),require("@univerjs/sheets"),require("@univerjs/sheets-ui")):typeof define==`function`&&define.amd?define([`exports`,`@univerjs/core`,`rxjs`,`@univerjs/ui`,`@univerjs/engine-render`,`react`,`@univerjs/design`,`react/jsx-runtime`,`@univerjs/sheets`,`@univerjs/sheets-ui`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.UniverSheetsCrosshairHighlight={},e.UniverCore,e.rxjs,e.UniverUi,e.UniverEngineRender,e.React,e.UniverDesign,e.React,e.UniverSheets,e.UniverSheetsUi))})(this,function(e,t,n,r,i,a,o,s,c,l){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function u(e){"@babel/helpers - typeof";return u=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},u(e)}function d(e,t){if(u(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(u(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function f(e){var t=d(e,`string`);return u(t)==`symbol`?t:t+``}function p(e,t,n){return(t=f(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function m(e,t){return function(n,r){t(n,r,e)}}function h(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}let g=Array.from({length:16},(e,t)=>`highlight.background.${t+1}`),_=g[0];function v(e,n){var r;let i=e.getColorFromTheme(n);if(i==null||typeof i.color!=`string`||typeof i.alpha!=`number`)throw Error(`Theme token ${n} is required.`);return new t.ColorKit((r=e.getColorFromTheme(i.color))==null?i.color:r).setAlpha(i.alpha).toRgbString()}function y(e){return g.map(t=>v(e,t))}let b=class extends t.Disposable{get enabled(){return this._enabled$.getValue()}constructor(e){super(),this._themeService=e,p(this,`_enabled$`,new n.BehaviorSubject(!1)),p(this,`enabled$`,this._enabled$.asObservable()),p(this,`_colorToken$`,new n.BehaviorSubject(_)),p(this,`colorToken$`,this._colorToken$.asObservable()),p(this,`color$`,void 0),p(this,`highlightColor$`,void 0),this.color$=(0,n.combineLatest)([this._colorToken$,this._themeService.currentTheme$]).pipe((0,n.map)(([e])=>v(this._themeService,e))),this.highlightColor$=this.color$}dispose(){this._enabled$.complete(),this._colorToken$.complete()}setEnabled(e){this._enabled$.next(e)}setColor(e){this._colorToken$.next(e)}};b=h([m(0,(0,t.Inject)(t.ThemeService))],b);let x={id:`sheet.operation.toggle-crosshair-highlight`,type:t.CommandType.OPERATION,handler(e){let t=e.get(b),n=t.enabled;return t.setEnabled(!n),!0}},S={id:`sheet.operation.set-crosshair-highlight-color`,type:t.CommandType.OPERATION,handler(e,{value:t}){let n=e.get(b);return n.enabled||n.setEnabled(!0),n.setColor(t),!0}},C={id:`sheet.operation.enable-crosshair-highlight`,type:t.CommandType.OPERATION,handler(e){let t=e.get(b);return t.enabled?!1:(t.setEnabled(!0),!0)}},w={id:`sheet.operation.disable-crosshair-highlight`,type:t.CommandType.OPERATION,handler(e){let t=e.get(b);return t.enabled?(t.setEnabled(!1),!0):!1}},T=`CROSSHAIR_HIGHLIGHT_OVERLAY_COMPONENT`;function E(e){let n=e.get(b);return{id:x.id,tooltip:`sheets-crosshair-highlight.button.tooltip`,type:r.MenuItemType.BUTTON_SELECTOR,icon:`CrossHighlightingIcon`,selections:[{label:{name:T,hoverable:!1,selectable:!1}}],selectionsCommandId:S.id,activated$:n.enabled$,hidden$:(0,r.getMenuHiddenObservable)(e,t.UniverInstanceType.UNIVER_SHEET)}}let D={[r.RibbonViewGroup.VISIBILITY]:{[x.id]:{order:1,gridLayout:{row:2,column:1,showLabel:!0},menuItemFactory:E}},[r.ContextMenuPosition.FOOTER_MENU]:{[r.ContextMenuGroup.OTHERS]:{[x.id]:{order:0,menuItemFactory:E}}}};var O=`@univerjs/sheets-crosshair-highlight`,k=`1.0.0-alpha.7`;let A={};function j({ref:e,...t}){let{icon:n,id:r,className:i,extend:o,...s}=t,c=`univerjs-icon univerjs-icon-${r} ${i||``}`.trim(),l=(0,a.useRef)(`_${F()}`);return M(n,`${r}`,{defIds:n.defIds,idSuffix:l.current},{ref:e,className:c,...s},o)}function M(e,t,n,r,i){return(0,a.createElement)(e.tag,{key:t,...N(e,n,i),...r},(P(e,n).children||[]).map((r,a)=>M(r,`${t}-${e.tag}-${a}`,n,void 0,i)))}function N(e,t,n){let r={...e.attrs};n!=null&&n.colorChannel1&&r.fill===`colorChannel1`&&(r.fill=n.colorChannel1),n!=null&&n.colorChannel1&&r.stroke===`colorChannel1`&&(r.stroke=n.colorChannel1),e.tag===`mask`&&r.id&&(r.id+=t.idSuffix),Object.entries(r).forEach(([e,n])=>{e===`mask`&&typeof n==`string`&&(r[e]=n.replace(/url\(#(.*)\)/,`url(#$1${t.idSuffix})`))});let{defIds:i}=t;return!i||i.length===0?r:(e.tag===`use`&&r[`xlink:href`]&&(r[`xlink:href`]+=t.idSuffix),Object.entries(r).forEach(([e,n])=>{typeof n==`string`&&(r[e]=n.replace(/url\(#(.*)\)/,`url(#$1${t.idSuffix})`))}),r)}function P(e,t){var n;let{defIds:r}=t;return!r||r.length===0?e:e.tag===`defs`&&(n=e.children)!=null&&n.length?{...e,children:e.children.map(e=>typeof e.attrs.id==`string`&&r&&r.includes(e.attrs.id)?{...e,attrs:{...e.attrs,id:e.attrs.id+t.idSuffix}}:e)}:e}function F(){return Math.random().toString(36).substring(2,8)}j.displayName=`UniverIcon`;let I={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 16 16`,width:`1em`,height:`1em`},children:[{tag:`path`,attrs:{stroke:`currentColor`,d:`M5 2H2V5M11 2H14V5M14 11V14H11M5 14H2V11`,strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:1.3}},{tag:`path`,attrs:{stroke:`currentColor`,d:`M6.6 3.8H9.4V6.6H12.2V9.4H9.4V12.2H6.6V9.4H3.8V6.6H6.6V3.8Z`,strokeLinejoin:`round`,strokeWidth:1.15}},{tag:`rect`,attrs:{width:2.6,height:2.6,x:6.7,y:6.7,fill:`currentColor`,rx:.35}}]},L=(0,a.forwardRef)(function(e,t){return(0,a.createElement)(j,Object.assign({},e,{id:`cross-highlighting-icon`,ref:t,icon:I}))});L.displayName=`CrossHighlightingIcon`;function R(e){let{onChange:i}=e,c=(0,r.useDependency)(b),l=(0,r.useDependency)(t.ThemeService),u=(0,r.useObservable)(c.color$),d=(0,r.useObservable)(()=>l.currentTheme$.pipe((0,n.map)(()=>y(l))),y(l),!1,[l]),f=(0,a.useCallback)(e=>{i==null||i(e)},[i]);return(0,s.jsx)(`div`,{className:`univer-grid univer-grid-cols-8 univer-gap-x-2 univer-gap-y-3`,children:d.map((e,t)=>(0,s.jsx)(`div`,{className:(0,o.clsx)(`hover:univer-ring-primary-600/40 univer-box-border univer-size-5 univer-cursor-pointer univer-rounded univer-ring-offset-1 univer-transition-shadow hover:univer-ring-[1.5px]`,o.borderClassName,{"univer-ring-[1.5px] univer-ring-primary-600 hover:univer-ring-primary-600":e===u}),style:{backgroundColor:e},onClick:()=>f(g[t])},g[t]))})}let z=class extends t.Disposable{constructor(e,t){super(),this._componentManager=e,this._iconManager=t,this._registerComponents(),this._registerIcons()}_registerComponents(){this.disposeWithMe(this._componentManager.register(T,R))}_registerIcons(){this.disposeWithMe(this._iconManager.register({CrossHighlightingIcon:L}))}};z=h([m(0,(0,t.Inject)(r.ComponentManager)),m(1,(0,t.Inject)(r.IconManager))],z);let B=class extends t.Disposable{constructor(e,t){super(),this._menuManagerService=e,this._cmdSrv=t,this._initCommands(),this._initMenus()}_initCommands(){[x,S,C,w].forEach(e=>this._cmdSrv.registerCommand(e))}_initMenus(){this._menuManagerService.mergeMenu(D)}};B=h([m(0,r.IMenuManagerService),m(1,t.ICommandService)],B);var V=class{constructor(){p(this,`_selectedRanges`,[]),p(this,`_ranges`,[])}addRange(e){if(e.rangeType===t.RANGE_TYPE.COLUMN||e.rangeType===t.RANGE_TYPE.ROW||e.rangeType===t.RANGE_TYPE.ALL)return;let n=this._getIntersects(e),r=this._getSplitRanges(e,n);r.length>0&&this._ranges.push(...r)}setSelectedRanges(e){this._selectedRanges=e}_getSplitRanges(e,n){let r=[e];for(let e of n.concat(this._selectedRanges)){let n=[];for(let i of r){let r=t.Rectangle.subtract(i,e);r&&r.length>0&&n.push(...r)}r=n}return r.filter(e=>e.startRow<=e.endRow&&e.startColumn<=e.endColumn)}_getIntersects(e){let n=[];for(let r of this._ranges){let i=t.Rectangle.getIntersects(r,e);i&&n.push(i)}return n}getRanges(){return this._ranges}reset(){this._ranges=[],this._selectedRanges=[]}},H=class extends i.Shape{constructor(e,t){super(e,t),p(this,`_color`,void 0),t&&this.setShapeProps(t)}setShapeProps(e){e.color!==void 0&&(this._color=e.color),this.transformByState({width:e.width,height:e.height})}_draw(e){var t,n;let r=`rgba(${this._color.r}, ${this._color.g}, ${this._color.b}, ${(t=(n=this._color)==null?void 0:n.a)==null?.5:t})`;i.Rect.drawWith(e,{width:this.width,height:this.height,fill:r,stroke:void 0,strokeWidth:0,evented:!1})}};let U=class extends t.Disposable{constructor(e,t,n,r,i,a){super(),this._context=e,this._sheetSkeletonManagerService=t,this._sheetsSelectionsService=n,this._sheetsCrosshairHighlightService=r,this._contextService=i,this._refSelectionsService=a,p(this,`_shapes`,[]),p(this,`_rangeCollection`,new V),p(this,`_color`,`rgba(255,0,0,0.5)`),this._initRenderListener()}_transformSelection(e,t){if(!e)return;let n=t.getRowCount(),r=t.getColumnCount(),i=[];for(let t of e){let{startRow:e,endRow:a,startColumn:o,endColumn:s}=t.range;a-e+1===n||s-o+1===r||i.push(t.range)}this._rangeCollection.setSelectedRanges(i);for(let e of i)this.addSelection(e,t)}_initRenderListener(){let e=this._context.unit;this.disposeWithMe((0,n.combineLatest)([this._contextService.subscribeContextValue$(c.REF_SELECTIONS_ENABLED).pipe((0,n.startWith)(!1)),this._sheetSkeletonManagerService.currentSkeleton$,this._sheetsCrosshairHighlightService.enabled$,this._sheetsCrosshairHighlightService.highlightColor$.pipe((0,n.tap)(e=>this._color=e)),(0,n.merge)(this._sheetsSelectionsService.selectionMoveStart$,this._sheetsSelectionsService.selectionMoving$,this._sheetsSelectionsService.selectionMoveEnd$,this._sheetsSelectionsService.selectionSet$,e.activeSheet$.pipe((0,n.map)(()=>this._sheetsSelectionsService.getCurrentSelections()))),(0,n.merge)(this._refSelectionsService.selectionMoveStart$,this._refSelectionsService.selectionMoving$,this._refSelectionsService.selectionMoveEnd$,this._sheetsSelectionsService.selectionSet$,e.activeSheet$.pipe((0,n.map)(()=>this._refSelectionsService.getCurrentSelections())))]).subscribe(([t,n,r,i,a,o])=>{if(this._clear(),!r)return;let s=t?o:a;this._rangeCollection.reset(),this._transformSelection(s,e.getActiveSheet()),this.render(this._rangeCollection.getRanges())}))}addSelection(e,n){if(e.rangeType===t.RANGE_TYPE.COLUMN||e.rangeType===t.RANGE_TYPE.ROW||e.rangeType===t.RANGE_TYPE.ALL)return;let r=n.getRowCount(),i=n.getColumnCount(),{startRow:a,endRow:o,startColumn:s,endColumn:c}=e,l={startRow:a,endRow:o,startColumn:0,endColumn:s-1},u={startRow:a,endRow:o,startColumn:c+1,endColumn:i},d={startRow:0,endRow:a-1,startColumn:s,endColumn:c},f={startRow:o+1,endRow:r,startColumn:s,endColumn:c};for(let e of[l,u,d,f])e.startRow<=e.endRow&&e.startColumn<=e.endColumn&&this._rangeCollection.addRange(e)}_clear(){this._shapes.forEach(e=>{e.dispose()}),this._shapes=[]}_addShapes(e,n,r,i){let{startRow:a,endRow:o,startColumn:s,endColumn:c}=e,u=(0,l.getCoordByCell)(a,s,r,i),d=(0,l.getCoordByCell)(o,c,r,i),{startX:f,startY:p}=u,{endX:m,endY:h}=d,g=m-f,_=h-p,v={left:f,top:p,color:new t.ColorKit(this._color).toRgb(),width:g,height:_,zIndex:1,evented:!1},y=new H(`crosshair-${n}`,v);this._shapes.push(y),r.addObject(y)}render(e){let t=this._sheetSkeletonManagerService.getCurrentSkeleton();if(!t)return;let{scene:n}=this._context;this._clear();for(let r=0;r<e.length;r++){let i=e[r];this._addShapes(i,r,n,t)}n.makeDirty(!0)}async dispose(){super.dispose()}};U=h([m(1,(0,t.Inject)(l.SheetSkeletonManagerService)),m(2,(0,t.Inject)(c.SheetsSelectionsService)),m(3,(0,t.Inject)(b)),m(4,(0,t.Inject)(t.IContextService)),m(5,c.IRefSelectionsService)],U);let W=class extends t.Plugin{constructor(e=A,n,r,i){super(),this._config=e,this._injector=n,this._renderManagerService=r,this._configService=i;let{...a}=(0,t.merge)({},A,this._config);this._configService.setConfig(`sheets-crosshair-highlight.config`,a)}onStarting(){[[z],[b],[B]].forEach(e=>this._injector.add(e))}onReady(){[[U]].forEach(e=>this._injector.add(e)),this._injector.get(z),this._injector.get(B),this._renderManagerService.registerRenderModule(t.UniverInstanceType.UNIVER_SHEET,[U])}};p(W,`pluginName`,`SHEET_CROSSHAIR_HIGHLIGHT_PLUGIN`),p(W,`packageName`,O),p(W,`version`,k),p(W,`type`,t.UniverInstanceType.UNIVER_SHEET),W=h([m(1,(0,t.Inject)(t.Injector)),m(2,i.IRenderManagerService),m(3,t.IConfigService)],W),e.DisableCrosshairHighlightOperation=w,e.EnableCrosshairHighlightOperation=C,e.SetCrosshairHighlightColorOperation=S,e.SheetsCrosshairHighlightMenuSchema=D,Object.defineProperty(e,"SheetsCrosshairHighlightService",{enumerable:!0,get:function(){return b}}),e.ToggleCrosshairHighlightOperation=x,Object.defineProperty(e,"UniverSheetsCrosshairHighlightPlugin",{enumerable:!0,get:function(){return W}})});
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("@univerjs/core"),require("rxjs"),require("@univerjs/ui"),require("@univerjs/engine-render"),require("@univerjs/sheets"),require("@univerjs/sheets-ui"),require("react"),require("@univerjs/design"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`@univerjs/core`,`rxjs`,`@univerjs/ui`,`@univerjs/engine-render`,`@univerjs/sheets`,`@univerjs/sheets-ui`,`react`,`@univerjs/design`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.UniverSheetsCrosshairHighlight={},e.UniverCore,e.rxjs,e.UniverUi,e.UniverEngineRender,e.UniverSheets,e.UniverSheetsUi,e.React,e.UniverDesign,e.React))})(this,function(e,t,n,r,i,a,o,s,c,l){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function u(e){"@babel/helpers - typeof";return u=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},u(e)}function d(e,t){if(u(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(u(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function f(e){var t=d(e,`string`);return u(t)==`symbol`?t:t+``}function p(e,t,n){return(t=f(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function m(e,t){return function(n,r){t(n,r,e)}}function h(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}let g=Array.from({length:16},(e,t)=>`highlight.background.${t+1}`),_=g[0];function v(e,n){let r=e.getColorFromTheme(n);if(r==null||typeof r.color!=`string`||typeof r.alpha!=`number`)throw Error(`Theme token ${n} is required.`);return new t.ColorKit(e.getColorFromTheme(r.color)??r.color).setAlpha(r.alpha).toRgbString()}function y(e){return g.map(t=>v(e,t))}let b=class extends t.Disposable{get enabled(){return this._enabled$.getValue()}constructor(e){super(),this._themeService=e,p(this,`_enabled$`,new n.BehaviorSubject(!1)),p(this,`enabled$`,this._enabled$.asObservable()),p(this,`_colorToken$`,new n.BehaviorSubject(_)),p(this,`colorToken$`,this._colorToken$.asObservable()),p(this,`color$`,void 0),p(this,`highlightColor$`,void 0),this.color$=(0,n.combineLatest)([this._colorToken$,this._themeService.currentTheme$]).pipe((0,n.map)(([e])=>v(this._themeService,e))),this.highlightColor$=this.color$}dispose(){this._enabled$.complete(),this._colorToken$.complete()}setEnabled(e){this._enabled$.next(e)}setColor(e){this._colorToken$.next(e)}};b=h([m(0,(0,t.Inject)(t.ThemeService))],b);let x={id:`sheet.operation.toggle-crosshair-highlight`,type:t.CommandType.OPERATION,handler(e){let t=e.get(b),n=t.enabled;return t.setEnabled(!n),!0}},S={id:`sheet.operation.set-crosshair-highlight-color`,type:t.CommandType.OPERATION,handler(e,{value:t}){let n=e.get(b);return n.enabled||n.setEnabled(!0),n.setColor(t),!0}},C={id:`sheet.operation.enable-crosshair-highlight`,type:t.CommandType.OPERATION,handler(e){let t=e.get(b);return t.enabled?!1:(t.setEnabled(!0),!0)}},w={id:`sheet.operation.disable-crosshair-highlight`,type:t.CommandType.OPERATION,handler(e){let t=e.get(b);return t.enabled?(t.setEnabled(!1),!0):!1}},T=`CROSSHAIR_HIGHLIGHT_OVERLAY_COMPONENT`;function E(e){let n=e.get(b);return{id:x.id,tooltip:`sheets-crosshair-highlight.button.tooltip`,type:r.MenuItemType.BUTTON_SELECTOR,icon:`CrossHighlightingIcon`,selections:[{label:{name:T,hoverable:!1,selectable:!1,props:{embedded:!0}}}],selectionsCommandId:S.id,activated$:n.enabled$,hidden$:(0,r.getMenuHiddenObservable)(e,t.UniverInstanceType.UNIVER_SHEET)}}let D={[r.RibbonViewGroup.VISIBILITY]:{[x.id]:{order:1,gridLayout:{row:2,column:1,showLabel:!0},menuItemFactory:E}},[r.ContextMenuPosition.FOOTER_MENU]:{[r.ContextMenuGroup.OTHERS]:{[x.id]:{order:0,menuItemFactory:E}}}};var O=`@univerjs/sheets-crosshair-highlight`,k=`1.0.0-beta.0`;let A={};function j({ref:e,...t}){let{icon:n,id:r,className:i,extend:a,...o}=t,c=`univerjs-icon univerjs-icon-${r} ${i||``}`.trim(),l=(0,s.useRef)(`_${F()}`);return M(n,`${r}`,{defIds:n.defIds,idSuffix:l.current},{ref:e,className:c,...o},a)}function M(e,t,n,r,i){return(0,s.createElement)(e.tag,{key:t,...N(e,n,i),...r},(P(e,n).children||[]).map((r,a)=>M(r,`${t}-${e.tag}-${a}`,n,void 0,i)))}function N(e,t,n){let r={...e.attrs};n!=null&&n.colorChannel1&&r.fill===`colorChannel1`&&(r.fill=n.colorChannel1),n!=null&&n.colorChannel1&&r.stroke===`colorChannel1`&&(r.stroke=n.colorChannel1),e.tag===`mask`&&r.id&&(r.id+=t.idSuffix),Object.entries(r).forEach(([e,n])=>{e===`mask`&&typeof n==`string`&&(r[e]=n.replace(/url\(#(.*)\)/,`url(#$1${t.idSuffix})`))});let{defIds:i}=t;return!i||i.length===0?r:(e.tag===`use`&&r[`xlink:href`]&&(r[`xlink:href`]+=t.idSuffix),Object.entries(r).forEach(([e,n])=>{typeof n==`string`&&(r[e]=n.replace(/url\(#(.*)\)/,`url(#$1${t.idSuffix})`))}),r)}function P(e,t){var n;let{defIds:r}=t;return!r||r.length===0?e:e.tag===`defs`&&(n=e.children)!=null&&n.length?{...e,children:e.children.map(e=>typeof e.attrs.id==`string`&&r&&r.includes(e.attrs.id)?{...e,attrs:{...e.attrs,id:e.attrs.id+t.idSuffix}}:e)}:e}function F(){return Math.random().toString(36).substring(2,8)}j.displayName=`UniverIcon`;let I={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 16 16`,width:`1em`,height:`1em`},children:[{tag:`path`,attrs:{stroke:`currentColor`,d:`M5 2H2V5M11 2H14V5M14 11V14H11M5 14H2V11`,strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:1.3}},{tag:`path`,attrs:{stroke:`currentColor`,d:`M6.6 3.8H9.4V6.6H12.2V9.4H9.4V12.2H6.6V9.4H3.8V6.6H6.6V3.8Z`,strokeLinejoin:`round`,strokeWidth:1.15}},{tag:`rect`,attrs:{width:2.6,height:2.6,x:6.7,y:6.7,fill:`currentColor`,rx:.35}}]},L=(0,s.forwardRef)(function(e,t){return(0,s.createElement)(j,Object.assign({},e,{id:`cross-highlighting-icon`,ref:t,icon:I}))});L.displayName=`CrossHighlightingIcon`;function R(e){let{onChange:i}=e,a=(0,r.useDependency)(b),o=(0,r.useDependency)(t.ThemeService),u=(0,r.useObservable)(a.color$),d=(0,r.useObservable)(()=>o.currentTheme$.pipe((0,n.map)(()=>y(o))),y(o),!1,[o]),f=(0,s.useCallback)(e=>{i==null||i(e)},[i]);return(0,l.jsx)(`div`,{className:`univer-grid univer-grid-cols-8 univer-gap-x-2 univer-gap-y-3 univer-p-1.5`,children:d.map((e,t)=>(0,l.jsx)(`div`,{className:(0,c.clsx)(`hover:univer-ring-primary-600/40 univer-box-border univer-size-5 univer-cursor-pointer univer-rounded univer-ring-offset-1 univer-transition-shadow hover:univer-ring-[1.5px]`,c.borderClassName,{"univer-ring-[1.5px] univer-ring-primary-600 hover:univer-ring-primary-600":e===u}),style:{backgroundColor:e},onClick:()=>f(g[t])},g[t]))})}let z=class extends t.Disposable{constructor(e,t){super(),this._componentManager=e,this._iconManager=t,this._registerComponents(),this._registerIcons()}_registerComponents(){this.disposeWithMe(this._componentManager.register(T,R))}_registerIcons(){this.disposeWithMe(this._iconManager.register({CrossHighlightingIcon:L}))}};z=h([m(0,(0,t.Inject)(r.ComponentManager)),m(1,(0,t.Inject)(r.IconManager))],z);let B=class extends t.Disposable{constructor(e,t){super(),this._menuManagerService=e,this._cmdSrv=t,this._initCommands(),this._initMenus()}_initCommands(){[x,S,C,w].forEach(e=>this._cmdSrv.registerCommand(e))}_initMenus(){this._menuManagerService.mergeMenu(D)}};B=h([m(0,r.IMenuManagerService),m(1,t.ICommandService)],B);var V=class{constructor(){p(this,`_selectedRanges`,[]),p(this,`_ranges`,[])}addRange(e){if(e.rangeType===t.RANGE_TYPE.COLUMN||e.rangeType===t.RANGE_TYPE.ROW||e.rangeType===t.RANGE_TYPE.ALL)return;let n=this._getIntersects(e),r=this._getSplitRanges(e,n);r.length>0&&this._ranges.push(...r)}setSelectedRanges(e){this._selectedRanges=e}_getSplitRanges(e,n){let r=[e];for(let e of n.concat(this._selectedRanges)){let n=[];for(let i of r){let r=t.Rectangle.subtract(i,e);r&&r.length>0&&n.push(...r)}r=n}return r.filter(e=>e.startRow<=e.endRow&&e.startColumn<=e.endColumn)}_getIntersects(e){let n=[];for(let r of this._ranges){let i=(0,t.getIntersectRange)(r,e);i&&n.push(i)}return n}getRanges(){return this._ranges}reset(){this._ranges=[],this._selectedRanges=[]}},H=class extends i.Shape{constructor(e,t){super(e,t),p(this,`_color`,void 0),t&&this.setShapeProps(t)}setShapeProps(e){e.color!==void 0&&(this._color=e.color),this.transformByState({width:e.width,height:e.height})}_draw(e){var t;let n=`rgba(${this._color.r}, ${this._color.g}, ${this._color.b}, ${((t=this._color)==null?void 0:t.a)??.5})`;i.Rect.drawWith(e,{width:this.width,height:this.height,fill:n,stroke:void 0,strokeWidth:0,evented:!1})}};let U=class extends t.Disposable{constructor(e,t,n,r,i,a){super(),this._context=e,this._sheetSkeletonManagerService=t,this._sheetsSelectionsService=n,this._sheetsCrosshairHighlightService=r,this._contextService=i,this._refSelectionsService=a,p(this,`_shapes`,[]),p(this,`_rangeCollection`,new V),p(this,`_color`,`rgba(255,0,0,0.5)`),this._initRenderListener()}_transformSelection(e,t){if(!e)return;let n=t.getRowCount(),r=t.getColumnCount(),i=[];for(let t of e){let{startRow:e,endRow:a,startColumn:o,endColumn:s}=t.range;a-e+1!==n&&s-o+1!==r&&i.push(t.range)}this._rangeCollection.setSelectedRanges(i);for(let e of i)this.addSelection(e,t)}_initRenderListener(){let e=this._context.unit;this.disposeWithMe((0,n.combineLatest)([this._contextService.subscribeContextValue$(a.REF_SELECTIONS_ENABLED).pipe((0,n.startWith)(!1)),this._sheetSkeletonManagerService.currentSkeleton$,this._sheetsCrosshairHighlightService.enabled$,this._sheetsCrosshairHighlightService.highlightColor$.pipe((0,n.tap)(e=>this._color=e)),(0,n.merge)(this._sheetsSelectionsService.selectionMoveStart$,this._sheetsSelectionsService.selectionMoving$,this._sheetsSelectionsService.selectionMoveEnd$,this._sheetsSelectionsService.selectionSet$,e.activeSheet$.pipe((0,n.map)(()=>this._sheetsSelectionsService.getCurrentSelections()))),(0,n.merge)(this._refSelectionsService.selectionMoveStart$,this._refSelectionsService.selectionMoving$,this._refSelectionsService.selectionMoveEnd$,this._sheetsSelectionsService.selectionSet$,e.activeSheet$.pipe((0,n.map)(()=>this._refSelectionsService.getCurrentSelections())))]).subscribe(([t,n,r,i,a,o])=>{if(this._clear(),!r)return;let s=t?o:a;this._rangeCollection.reset(),this._transformSelection(s,e.getActiveSheet()),this.render(this._rangeCollection.getRanges())}))}addSelection(e,n){if(e.rangeType===t.RANGE_TYPE.COLUMN||e.rangeType===t.RANGE_TYPE.ROW||e.rangeType===t.RANGE_TYPE.ALL)return;let r=n.getRowCount(),i=n.getColumnCount(),{startRow:a,endRow:o,startColumn:s,endColumn:c}=e,l={startRow:a,endRow:o,startColumn:0,endColumn:s-1},u={startRow:a,endRow:o,startColumn:c+1,endColumn:i},d={startRow:0,endRow:a-1,startColumn:s,endColumn:c},f={startRow:o+1,endRow:r,startColumn:s,endColumn:c};for(let e of[l,u,d,f])e.startRow<=e.endRow&&e.startColumn<=e.endColumn&&this._rangeCollection.addRange(e)}_clear(){this._shapes.forEach(e=>{e.dispose()}),this._shapes=[]}_addShapes(e,n,r,i){let{startRow:a,endRow:s,startColumn:c,endColumn:l}=e,u=(0,o.getCoordByCell)(a,c,r,i),d=(0,o.getCoordByCell)(s,l,r,i),{startX:f,startY:p}=u,{endX:m,endY:h}=d,g=m-f,_=h-p,v={left:f,top:p,color:new t.ColorKit(this._color).toRgb(),width:g,height:_,zIndex:1,evented:!1},y=new H(`crosshair-${n}`,v);this._shapes.push(y),r.addObject(y)}render(e){let t=this._sheetSkeletonManagerService.getCurrentSkeleton();if(!t)return;let{scene:n}=this._context;this._clear();for(let r=0;r<e.length;r++){let i=e[r];this._addShapes(i,r,n,t)}n.makeDirty(!0)}async dispose(){super.dispose()}};U=h([m(1,(0,t.Inject)(o.SheetSkeletonManagerService)),m(2,(0,t.Inject)(a.SheetsSelectionsService)),m(3,(0,t.Inject)(b)),m(4,(0,t.Inject)(t.IContextService)),m(5,a.IRefSelectionsService)],U);let W=class extends t.Plugin{constructor(e=A,n,r,i){super(),this._config=e,this._injector=n,this._renderManagerService=r,this._configService=i;let{...a}=(0,t.merge)({},A,this._config);this._configService.setConfig(`sheets-crosshair-highlight.config`,a)}onStarting(){[[z],[b],[B]].forEach(e=>this._injector.add(e))}onReady(){[[U]].forEach(e=>this._injector.add(e)),this._injector.get(z),this._injector.get(B),this._renderManagerService.registerRenderModule(t.UniverInstanceType.UNIVER_SHEET,[U])}};p(W,`pluginName`,`SHEET_CROSSHAIR_HIGHLIGHT_PLUGIN`),p(W,`packageName`,O),p(W,`version`,k),p(W,`type`,t.UniverInstanceType.UNIVER_SHEET),W=h([(0,t.DependentOn)(i.UniverRenderEnginePlugin,a.UniverSheetsPlugin,o.UniverSheetsUIPlugin),m(1,(0,t.Inject)(t.Injector)),m(2,i.IRenderManagerService),m(3,t.IConfigService)],W),e.DisableCrosshairHighlightOperation=w,e.EnableCrosshairHighlightOperation=C,e.SetCrosshairHighlightColorOperation=S,e.SheetsCrosshairHighlightMenuSchema=D,Object.defineProperty(e,"SheetsCrosshairHighlightService",{enumerable:!0,get:function(){return b}}),e.ToggleCrosshairHighlightOperation=x,Object.defineProperty(e,"UniverSheetsCrosshairHighlightPlugin",{enumerable:!0,get:function(){return W}})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@univerjs/sheets-crosshair-highlight",
|
|
3
|
-
"version": "1.0.0-
|
|
3
|
+
"version": "1.0.0-beta.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Crosshair highlight plugin for Univer Sheets.",
|
|
6
6
|
"author": "DreamNum Co., Ltd. <developer@univer.ai>",
|
|
@@ -68,22 +68,22 @@
|
|
|
68
68
|
"rxjs": ">=7.0.0"
|
|
69
69
|
},
|
|
70
70
|
"dependencies": {
|
|
71
|
-
"@univerjs/icons": "1.
|
|
72
|
-
"@univerjs/core": "1.0.0-
|
|
73
|
-
"@univerjs/
|
|
74
|
-
"@univerjs/
|
|
75
|
-
"@univerjs/
|
|
76
|
-
"@univerjs/sheets": "1.0.0-
|
|
77
|
-
"@univerjs/
|
|
71
|
+
"@univerjs/icons": "1.35.0",
|
|
72
|
+
"@univerjs/core": "1.0.0-beta.0",
|
|
73
|
+
"@univerjs/engine-render": "1.0.0-beta.0",
|
|
74
|
+
"@univerjs/design": "1.0.0-beta.0",
|
|
75
|
+
"@univerjs/sheets": "1.0.0-beta.0",
|
|
76
|
+
"@univerjs/sheets-ui": "1.0.0-beta.0",
|
|
77
|
+
"@univerjs/ui": "1.0.0-beta.0"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
|
-
"postcss": "^8.5.
|
|
80
|
+
"postcss": "^8.5.25",
|
|
81
81
|
"react": "18.3.1",
|
|
82
82
|
"rxjs": "^7.8.2",
|
|
83
83
|
"tailwindcss": "3.4.18",
|
|
84
84
|
"typescript": "^6.0.3",
|
|
85
85
|
"vitest": "^4.1.10",
|
|
86
|
-
"@univerjs-infra/shared": "1.0.0-
|
|
86
|
+
"@univerjs-infra/shared": "1.0.0-beta.0"
|
|
87
87
|
},
|
|
88
88
|
"scripts": {
|
|
89
89
|
"test": "vitest run",
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright 2023-present DreamNum Co., Ltd.
|
|
3
|
-
*
|
|
4
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
-
* you may not use this file except in compliance with the License.
|
|
6
|
-
* You may obtain a copy of the License at
|
|
7
|
-
*
|
|
8
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
-
*
|
|
10
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
-
* See the License for the specific language governing permissions and
|
|
14
|
-
* limitations under the License.
|
|
15
|
-
*/
|
|
16
|
-
export {};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright 2023-present DreamNum Co., Ltd.
|
|
3
|
-
*
|
|
4
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
-
* you may not use this file except in compliance with the License.
|
|
6
|
-
* You may obtain a copy of the License at
|
|
7
|
-
*
|
|
8
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
-
*
|
|
10
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
-
* See the License for the specific language governing permissions and
|
|
14
|
-
* limitations under the License.
|
|
15
|
-
*/
|
|
16
|
-
export {};
|