@univerjs/sheets-crosshair-highlight 0.25.0 → 1.0.0-alpha.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.
Files changed (18) hide show
  1. package/lib/cjs/facade.js +0 -24
  2. package/lib/cjs/index.js +75 -82
  3. package/lib/es/facade.js +1 -25
  4. package/lib/es/index.js +72 -83
  5. package/lib/facade.js +1 -25
  6. package/lib/index.js +72 -83
  7. package/lib/types/commands/operations/operation.d.ts +3 -5
  8. package/lib/types/controllers/crosshair.controller.d.ts +4 -2
  9. package/lib/types/facade/f-event.d.ts +0 -30
  10. package/lib/types/facade/f-univer.d.ts +0 -28
  11. package/lib/types/index.d.ts +3 -2
  12. package/lib/types/locale/types.d.ts +18 -0
  13. package/lib/types/menu/crosshair.menu.d.ts +2 -1
  14. package/lib/types/services/crosshair.service.d.ts +13 -6
  15. package/lib/types/views/components/CrosshairHighlight.d.ts +1 -1
  16. package/lib/umd/facade.js +1 -1
  17. package/lib/umd/index.js +1 -1
  18. package/package.json +10 -10
package/lib/cjs/facade.js CHANGED
@@ -23,36 +23,15 @@ var FUniverSheetsCrosshairHighlightMixin = class extends _univerjs_core_facade.F
23
23
  this.fireEvent(this.Event.CrosshairHighlightEnabledChanged, eventParams);
24
24
  }
25
25
  })));
26
- this.disposeWithMe(this.registerEventHandler(this.Event.CrosshairHighlightColorChanged, () => commandService.onCommandExecuted((commandInfo) => {
27
- if (commandInfo.id === _univerjs_sheets_crosshair_highlight.SetCrosshairHighlightColorOperation.id) {
28
- const activeSheet = this.getActiveSheet();
29
- if (!activeSheet) return;
30
- const eventParams = {
31
- color: this.getCrosshairHighlightColor(),
32
- ...activeSheet
33
- };
34
- this.fireEvent(this.Event.CrosshairHighlightColorChanged, eventParams);
35
- }
36
- })));
37
26
  }
38
27
  setCrosshairHighlightEnabled(enabled) {
39
28
  if (enabled) this._commandService.syncExecuteCommand(_univerjs_sheets_crosshair_highlight.EnableCrosshairHighlightOperation.id);
40
29
  else this._commandService.syncExecuteCommand(_univerjs_sheets_crosshair_highlight.DisableCrosshairHighlightOperation.id);
41
30
  return this;
42
31
  }
43
- setCrosshairHighlightColor(color) {
44
- this._commandService.syncExecuteCommand(_univerjs_sheets_crosshair_highlight.SetCrosshairHighlightColorOperation.id, { value: color });
45
- return this;
46
- }
47
32
  getCrosshairHighlightEnabled() {
48
33
  return this._injector.get(_univerjs_sheets_crosshair_highlight.SheetsCrosshairHighlightService).enabled;
49
34
  }
50
- getCrosshairHighlightColor() {
51
- return this._injector.get(_univerjs_sheets_crosshair_highlight.SheetsCrosshairHighlightService).color;
52
- }
53
- get CROSSHAIR_HIGHLIGHT_COLORS() {
54
- return _univerjs_sheets_crosshair_highlight.CROSSHAIR_HIGHLIGHT_COLORS;
55
- }
56
35
  };
57
36
  _univerjs_core_facade.FUniver.extend(FUniverSheetsCrosshairHighlightMixin);
58
37
 
@@ -65,9 +44,6 @@ var FSheetsCrosshairHighlightEventNameMixin = class extends _univerjs_core_facad
65
44
  get CrosshairHighlightEnabledChanged() {
66
45
  return "CrosshairHighlightEnabledChanged";
67
46
  }
68
- get CrosshairHighlightColorChanged() {
69
- return "CrosshairHighlightColorChanged";
70
- }
71
47
  };
72
48
  _univerjs_core_facade.FEventName.extend(FSheetsCrosshairHighlightEventNameMixin);
73
49
 
package/lib/cjs/index.js CHANGED
@@ -10,7 +10,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
10
10
  let _univerjs_sheets = require("@univerjs/sheets");
11
11
  let _univerjs_sheets_ui = require("@univerjs/sheets-ui");
12
12
 
13
- //#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
13
+ //#region \0@oxc-project+runtime@0.137.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.133.0/helpers/esm/toPrimitive.js
24
+ //#region \0@oxc-project+runtime@0.137.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.133.0/helpers/esm/toPropertyKey.js
37
+ //#region \0@oxc-project+runtime@0.137.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.133.0/helpers/esm/defineProperty.js
44
+ //#region \0@oxc-project+runtime@0.137.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,
@@ -51,65 +51,64 @@ function _defineProperty(e, r, t) {
51
51
  }) : e[r] = t, e;
52
52
  }
53
53
 
54
+ //#endregion
55
+ //#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
56
+ function __decorateParam(paramIndex, decorator) {
57
+ return function(target, key) {
58
+ decorator(target, key, paramIndex);
59
+ };
60
+ }
61
+
62
+ //#endregion
63
+ //#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
64
+ function __decorate(decorators, target, key, desc) {
65
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
66
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
67
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
68
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
69
+ }
70
+
54
71
  //#endregion
55
72
  //#region src/services/crosshair.service.ts
56
- /**
57
- * Copyright 2023-present DreamNum Co., Ltd.
58
- *
59
- * Licensed under the Apache License, Version 2.0 (the "License");
60
- * you may not use this file except in compliance with the License.
61
- * You may obtain a copy of the License at
62
- *
63
- * http://www.apache.org/licenses/LICENSE-2.0
64
- *
65
- * Unless required by applicable law or agreed to in writing, software
66
- * distributed under the License is distributed on an "AS IS" BASIS,
67
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
68
- * See the License for the specific language governing permissions and
69
- * limitations under the License.
70
- */
71
- const CROSSHAIR_HIGHLIGHT_COLORS = [
72
- "rgba(158, 109, 227, 0.3)",
73
- "rgba(254, 75, 75, 0.3)",
74
- "rgba(255, 140, 81, 0.3)",
75
- "rgba(164, 220, 22, 0.3)",
76
- "rgba(45, 174, 255, 0.3)",
77
- "rgba(58, 96, 247, 0.3)",
78
- "rgba(242, 72, 166, 0.3)",
79
- "rgba(153, 153, 153, 0.3)",
80
- "rgba(158, 109, 227, 0.15)",
81
- "rgba(254, 75, 75, 0.15)",
82
- "rgba(255, 140, 81, 0.15)",
83
- "rgba(164, 220, 22, 0.15)",
84
- "rgba(45, 174, 255, 0.15)",
85
- "rgba(58, 96, 247, 0.15)",
86
- "rgba(242, 72, 166, 0.15)",
87
- "rgba(153, 153, 153, 0.15)"
88
- ];
89
- var SheetsCrosshairHighlightService = class extends _univerjs_core.Disposable {
90
- constructor(..._args) {
91
- super(..._args);
92
- _defineProperty(this, "_enabled$", new rxjs.BehaviorSubject(false));
93
- _defineProperty(this, "enabled$", this._enabled$.asObservable());
94
- _defineProperty(this, "_color$", new rxjs.BehaviorSubject(CROSSHAIR_HIGHLIGHT_COLORS[0]));
95
- _defineProperty(this, "color$", this._color$.asObservable());
96
- }
73
+ const CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATHS = Array.from({ length: 16 }, (_, index) => `highlight.background.${index + 1}`);
74
+ const DEFAULT_CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATH = CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATHS[0];
75
+ function resolveCrosshairHighlightColor(themeService, tokenPath) {
76
+ var _themeService$getColo;
77
+ const token = themeService.getColorFromTheme(tokenPath);
78
+ 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((_themeService$getColo = themeService.getColorFromTheme(token.color)) !== null && _themeService$getColo !== void 0 ? _themeService$getColo : token.color).setAlpha(token.alpha).toRgbString();
80
+ }
81
+ function resolveCrosshairHighlightColors(themeService) {
82
+ return CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATHS.map((tokenPath) => resolveCrosshairHighlightColor(themeService, tokenPath));
83
+ }
84
+ let SheetsCrosshairHighlightService = class SheetsCrosshairHighlightService extends _univerjs_core.Disposable {
97
85
  get enabled() {
98
86
  return this._enabled$.getValue();
99
87
  }
100
- get color() {
101
- return this._color$.getValue();
88
+ constructor(_themeService) {
89
+ super();
90
+ this._themeService = _themeService;
91
+ _defineProperty(this, "_enabled$", new rxjs.BehaviorSubject(false));
92
+ _defineProperty(this, "enabled$", this._enabled$.asObservable());
93
+ _defineProperty(this, "_colorToken$", new rxjs.BehaviorSubject(DEFAULT_CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATH));
94
+ _defineProperty(this, "colorToken$", this._colorToken$.asObservable());
95
+ _defineProperty(this, "color$", void 0);
96
+ _defineProperty(this, "highlightColor$", void 0);
97
+ this.color$ = (0, rxjs.combineLatest)([this._colorToken$, this._themeService.currentTheme$]).pipe((0, rxjs.map)(([tokenPath]) => resolveCrosshairHighlightColor(this._themeService, tokenPath)));
98
+ this.highlightColor$ = this.color$;
102
99
  }
103
100
  dispose() {
104
101
  this._enabled$.complete();
102
+ this._colorToken$.complete();
105
103
  }
106
104
  setEnabled(value) {
107
105
  this._enabled$.next(value);
108
106
  }
109
107
  setColor(value) {
110
- this._color$.next(value);
108
+ this._colorToken$.next(value);
111
109
  }
112
110
  };
111
+ SheetsCrosshairHighlightService = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.ThemeService))], SheetsCrosshairHighlightService);
113
112
 
114
113
  //#endregion
115
114
  //#region src/commands/operations/operation.ts
@@ -127,10 +126,8 @@ const ToggleCrosshairHighlightOperation = {
127
126
  }
128
127
  };
129
128
  /**
130
- * A {@link CommandType.OPERATION} to set the crosshair highlight color. It the crosshair highlight is not enabled,
129
+ * A {@link CommandType.OPERATION} to set the crosshair highlight color. If the crosshair highlight is not enabled,
131
130
  * it will be enabled.
132
- *
133
- * Its params {@link ISetCrosshairHighlightColorOperationParams} contains the color value to set as and is required.
134
131
  */
135
132
  const SetCrosshairHighlightColorOperation = {
136
133
  id: "sheet.operation.set-crosshair-highlight-color",
@@ -172,7 +169,7 @@ const DisableCrosshairHighlightOperation = {
172
169
  //#endregion
173
170
  //#region package.json
174
171
  var name = "@univerjs/sheets-crosshair-highlight";
175
- var version = "0.25.0";
172
+ var version = "1.0.0-alpha.0";
176
173
 
177
174
  //#endregion
178
175
  //#region src/config/config.ts
@@ -227,39 +224,26 @@ const menuSchema = { [_univerjs_ui.ContextMenuPosition.FOOTER_MENU]: { [_univerj
227
224
  */
228
225
  function CrosshairOverlay(props) {
229
226
  const { onChange } = props;
230
- const currentColor = (0, _univerjs_ui.useObservable)((0, _univerjs_ui.useDependency)(SheetsCrosshairHighlightService).color$);
231
- const handleColorPicked = (0, react.useCallback)((color) => {
232
- onChange === null || onChange === void 0 || onChange(color);
227
+ const crosshairSrv = (0, _univerjs_ui.useDependency)(SheetsCrosshairHighlightService);
228
+ const themeService = (0, _univerjs_ui.useDependency)(_univerjs_core.ThemeService);
229
+ const currentColor = (0, _univerjs_ui.useObservable)(crosshairSrv.color$);
230
+ (0, _univerjs_ui.useObservable)(themeService.currentTheme$);
231
+ const colors = resolveCrosshairHighlightColors(themeService);
232
+ const handleColorPicked = (0, react.useCallback)((tokenPath) => {
233
+ onChange === null || onChange === void 0 || onChange(tokenPath);
233
234
  }, [onChange]);
234
235
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
235
236
  className: "univer-grid univer-grid-cols-8 univer-gap-x-2 univer-gap-y-3",
236
- children: CROSSHAIR_HIGHLIGHT_COLORS.map((color) => {
237
+ children: colors.map((color, index) => {
237
238
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
238
239
  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 }),
239
240
  style: { backgroundColor: color },
240
- onClick: () => handleColorPicked(color)
241
- }, color);
241
+ onClick: () => handleColorPicked(CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATHS[index])
242
+ }, CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATHS[index]);
242
243
  })
243
244
  });
244
245
  }
245
246
 
246
- //#endregion
247
- //#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateParam.js
248
- function __decorateParam(paramIndex, decorator) {
249
- return function(target, key) {
250
- decorator(target, key, paramIndex);
251
- };
252
- }
253
-
254
- //#endregion
255
- //#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
256
- function __decorate(decorators, target, key, desc) {
257
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
258
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
259
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
260
- return c > 3 && r && Object.defineProperty(target, key, r), r;
261
- }
262
-
263
247
  //#endregion
264
248
  //#region src/controllers/crosshair.controller.ts
265
249
  /**
@@ -278,14 +262,16 @@ function __decorate(decorators, target, key, desc) {
278
262
  * limitations under the License.
279
263
  */
280
264
  let SheetsCrosshairHighlightController = class SheetsCrosshairHighlightController extends _univerjs_core.Disposable {
281
- constructor(_componentMgr, _menuManagerService, _cmdSrv) {
265
+ constructor(_componentMgr, _iconMgr, _menuManagerService, _cmdSrv) {
282
266
  super();
283
267
  this._componentMgr = _componentMgr;
268
+ this._iconMgr = _iconMgr;
284
269
  this._menuManagerService = _menuManagerService;
285
270
  this._cmdSrv = _cmdSrv;
286
271
  this._initCommands();
287
272
  this._initMenus();
288
273
  this._initComponents();
274
+ this._registerIcons();
289
275
  }
290
276
  _initCommands() {
291
277
  [
@@ -300,13 +286,16 @@ let SheetsCrosshairHighlightController = class SheetsCrosshairHighlightControlle
300
286
  }
301
287
  _initComponents() {
302
288
  this._componentMgr.register(CROSSHAIR_HIGHLIGHT_OVERLAY_COMPONENT, CrosshairOverlay);
303
- this._componentMgr.register("CrossHighlightingIcon", _univerjs_icons.CrossHighlightingIcon);
289
+ }
290
+ _registerIcons() {
291
+ this.disposeWithMe(this._iconMgr.register({ CrossHighlightingIcon: _univerjs_icons.CrossHighlightingIcon }));
304
292
  }
305
293
  };
306
294
  SheetsCrosshairHighlightController = __decorate([
307
295
  __decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)),
308
- __decorateParam(1, _univerjs_ui.IMenuManagerService),
309
- __decorateParam(2, _univerjs_core.ICommandService)
296
+ __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.IconManager)),
297
+ __decorateParam(2, _univerjs_ui.IMenuManagerService),
298
+ __decorateParam(3, _univerjs_core.ICommandService)
310
299
  ], SheetsCrosshairHighlightController);
311
300
 
312
301
  //#endregion
@@ -418,7 +407,7 @@ let SheetCrosshairHighlightRenderController = class SheetCrosshairHighlightRende
418
407
  this._contextService.subscribeContextValue$(_univerjs_sheets.REF_SELECTIONS_ENABLED).pipe((0, rxjs.startWith)(false)),
419
408
  this._sheetSkeletonManagerService.currentSkeleton$,
420
409
  this._sheetsCrosshairHighlightService.enabled$,
421
- this._sheetsCrosshairHighlightService.color$.pipe((0, rxjs.tap)((color) => this._color = color)),
410
+ this._sheetsCrosshairHighlightService.highlightColor$.pipe((0, rxjs.tap)((color) => this._color = color)),
422
411
  (0, rxjs.merge)(this._sheetsSelectionsService.selectionMoveStart$, this._sheetsSelectionsService.selectionMoving$, this._sheetsSelectionsService.selectionMoveEnd$, this._sheetsSelectionsService.selectionSet$, workbook.activeSheet$.pipe((0, rxjs.map)(() => this._sheetsSelectionsService.getCurrentSelections()))),
423
412
  (0, rxjs.merge)(this._refSelectionsService.selectionMoveStart$, this._refSelectionsService.selectionMoving$, this._refSelectionsService.selectionMoveEnd$, this._sheetsSelectionsService.selectionSet$, workbook.activeSheet$.pipe((0, rxjs.map)(() => this._refSelectionsService.getCurrentSelections())))
424
413
  ]).subscribe(([refSelectionEnabled, _, enabled, _color, normalSelections, refSelection]) => {
@@ -548,11 +537,15 @@ UniverSheetsCrosshairHighlightPlugin = __decorate([
548
537
  ], UniverSheetsCrosshairHighlightPlugin);
549
538
 
550
539
  //#endregion
551
- exports.CROSSHAIR_HIGHLIGHT_COLORS = CROSSHAIR_HIGHLIGHT_COLORS;
552
540
  exports.DisableCrosshairHighlightOperation = DisableCrosshairHighlightOperation;
553
541
  exports.EnableCrosshairHighlightOperation = EnableCrosshairHighlightOperation;
554
542
  exports.SetCrosshairHighlightColorOperation = SetCrosshairHighlightColorOperation;
555
- exports.SheetsCrosshairHighlightService = SheetsCrosshairHighlightService;
543
+ Object.defineProperty(exports, 'SheetsCrosshairHighlightService', {
544
+ enumerable: true,
545
+ get: function () {
546
+ return SheetsCrosshairHighlightService;
547
+ }
548
+ });
556
549
  exports.ToggleCrosshairHighlightOperation = ToggleCrosshairHighlightOperation;
557
550
  Object.defineProperty(exports, 'UniverSheetsCrosshairHighlightPlugin', {
558
551
  enumerable: true,
package/lib/es/facade.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ICommandService } from "@univerjs/core";
2
2
  import { FEventName, FUniver } from "@univerjs/core/facade";
3
- import { CROSSHAIR_HIGHLIGHT_COLORS, DisableCrosshairHighlightOperation, EnableCrosshairHighlightOperation, SetCrosshairHighlightColorOperation, SheetsCrosshairHighlightService, ToggleCrosshairHighlightOperation } from "@univerjs/sheets-crosshair-highlight";
3
+ import { DisableCrosshairHighlightOperation, EnableCrosshairHighlightOperation, SheetsCrosshairHighlightService, ToggleCrosshairHighlightOperation } from "@univerjs/sheets-crosshair-highlight";
4
4
 
5
5
  //#region src/facade/f-univer.ts
6
6
  /**
@@ -23,36 +23,15 @@ var FUniverSheetsCrosshairHighlightMixin = class extends FUniver {
23
23
  this.fireEvent(this.Event.CrosshairHighlightEnabledChanged, eventParams);
24
24
  }
25
25
  })));
26
- this.disposeWithMe(this.registerEventHandler(this.Event.CrosshairHighlightColorChanged, () => commandService.onCommandExecuted((commandInfo) => {
27
- if (commandInfo.id === SetCrosshairHighlightColorOperation.id) {
28
- const activeSheet = this.getActiveSheet();
29
- if (!activeSheet) return;
30
- const eventParams = {
31
- color: this.getCrosshairHighlightColor(),
32
- ...activeSheet
33
- };
34
- this.fireEvent(this.Event.CrosshairHighlightColorChanged, eventParams);
35
- }
36
- })));
37
26
  }
38
27
  setCrosshairHighlightEnabled(enabled) {
39
28
  if (enabled) this._commandService.syncExecuteCommand(EnableCrosshairHighlightOperation.id);
40
29
  else this._commandService.syncExecuteCommand(DisableCrosshairHighlightOperation.id);
41
30
  return this;
42
31
  }
43
- setCrosshairHighlightColor(color) {
44
- this._commandService.syncExecuteCommand(SetCrosshairHighlightColorOperation.id, { value: color });
45
- return this;
46
- }
47
32
  getCrosshairHighlightEnabled() {
48
33
  return this._injector.get(SheetsCrosshairHighlightService).enabled;
49
34
  }
50
- getCrosshairHighlightColor() {
51
- return this._injector.get(SheetsCrosshairHighlightService).color;
52
- }
53
- get CROSSHAIR_HIGHLIGHT_COLORS() {
54
- return CROSSHAIR_HIGHLIGHT_COLORS;
55
- }
56
35
  };
57
36
  FUniver.extend(FUniverSheetsCrosshairHighlightMixin);
58
37
 
@@ -65,9 +44,6 @@ var FSheetsCrosshairHighlightEventNameMixin = class extends FEventName {
65
44
  get CrosshairHighlightEnabledChanged() {
66
45
  return "CrosshairHighlightEnabledChanged";
67
46
  }
68
- get CrosshairHighlightColorChanged() {
69
- return "CrosshairHighlightColorChanged";
70
- }
71
47
  };
72
48
  FEventName.extend(FSheetsCrosshairHighlightEventNameMixin);
73
49
 
package/lib/es/index.js CHANGED
@@ -1,15 +1,15 @@
1
- import { ColorKit, CommandType, Disposable, ICommandService, IConfigService, IContextService, Inject, Injector, Plugin, RANGE_TYPE, Rectangle, UniverInstanceType, merge } from "@univerjs/core";
1
+ import { ColorKit, CommandType, Disposable, ICommandService, IConfigService, IContextService, Inject, Injector, Plugin, RANGE_TYPE, Rectangle, ThemeService, UniverInstanceType, merge } from "@univerjs/core";
2
2
  import { BehaviorSubject, combineLatest, map, merge as merge$1, startWith, tap } from "rxjs";
3
3
  import { IRenderManagerService, Rect, Shape } from "@univerjs/engine-render";
4
4
  import { CrossHighlightingIcon } from "@univerjs/icons";
5
- import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IMenuManagerService, MenuItemType, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
5
+ import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IMenuManagerService, IconManager, MenuItemType, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
6
6
  import { borderClassName, clsx } from "@univerjs/design";
7
7
  import { useCallback } from "react";
8
8
  import { jsx } from "react/jsx-runtime";
9
9
  import { IRefSelectionsService, REF_SELECTIONS_ENABLED, SheetsSelectionsService } from "@univerjs/sheets";
10
10
  import { SheetSkeletonManagerService, getCoordByCell } from "@univerjs/sheets-ui";
11
11
 
12
- //#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
12
+ //#region \0@oxc-project+runtime@0.137.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.133.0/helpers/esm/toPrimitive.js
23
+ //#region \0@oxc-project+runtime@0.137.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.133.0/helpers/esm/toPropertyKey.js
36
+ //#region \0@oxc-project+runtime@0.137.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.133.0/helpers/esm/defineProperty.js
43
+ //#region \0@oxc-project+runtime@0.137.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,
@@ -50,65 +50,64 @@ function _defineProperty(e, r, t) {
50
50
  }) : e[r] = t, e;
51
51
  }
52
52
 
53
+ //#endregion
54
+ //#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
55
+ function __decorateParam(paramIndex, decorator) {
56
+ return function(target, key) {
57
+ decorator(target, key, paramIndex);
58
+ };
59
+ }
60
+
61
+ //#endregion
62
+ //#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
63
+ function __decorate(decorators, target, key, desc) {
64
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
65
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
66
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
67
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
68
+ }
69
+
53
70
  //#endregion
54
71
  //#region src/services/crosshair.service.ts
55
- /**
56
- * Copyright 2023-present DreamNum Co., Ltd.
57
- *
58
- * Licensed under the Apache License, Version 2.0 (the "License");
59
- * you may not use this file except in compliance with the License.
60
- * You may obtain a copy of the License at
61
- *
62
- * http://www.apache.org/licenses/LICENSE-2.0
63
- *
64
- * Unless required by applicable law or agreed to in writing, software
65
- * distributed under the License is distributed on an "AS IS" BASIS,
66
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
67
- * See the License for the specific language governing permissions and
68
- * limitations under the License.
69
- */
70
- const CROSSHAIR_HIGHLIGHT_COLORS = [
71
- "rgba(158, 109, 227, 0.3)",
72
- "rgba(254, 75, 75, 0.3)",
73
- "rgba(255, 140, 81, 0.3)",
74
- "rgba(164, 220, 22, 0.3)",
75
- "rgba(45, 174, 255, 0.3)",
76
- "rgba(58, 96, 247, 0.3)",
77
- "rgba(242, 72, 166, 0.3)",
78
- "rgba(153, 153, 153, 0.3)",
79
- "rgba(158, 109, 227, 0.15)",
80
- "rgba(254, 75, 75, 0.15)",
81
- "rgba(255, 140, 81, 0.15)",
82
- "rgba(164, 220, 22, 0.15)",
83
- "rgba(45, 174, 255, 0.15)",
84
- "rgba(58, 96, 247, 0.15)",
85
- "rgba(242, 72, 166, 0.15)",
86
- "rgba(153, 153, 153, 0.15)"
87
- ];
88
- var SheetsCrosshairHighlightService = class extends Disposable {
89
- constructor(..._args) {
90
- super(..._args);
91
- _defineProperty(this, "_enabled$", new BehaviorSubject(false));
92
- _defineProperty(this, "enabled$", this._enabled$.asObservable());
93
- _defineProperty(this, "_color$", new BehaviorSubject(CROSSHAIR_HIGHLIGHT_COLORS[0]));
94
- _defineProperty(this, "color$", this._color$.asObservable());
95
- }
72
+ const CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATHS = Array.from({ length: 16 }, (_, index) => `highlight.background.${index + 1}`);
73
+ const DEFAULT_CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATH = CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATHS[0];
74
+ function resolveCrosshairHighlightColor(themeService, tokenPath) {
75
+ var _themeService$getColo;
76
+ const token = themeService.getColorFromTheme(tokenPath);
77
+ if (token == null || typeof token.color !== "string" || typeof token.alpha !== "number") throw new Error(`Theme token ${tokenPath} is required.`);
78
+ return new ColorKit((_themeService$getColo = themeService.getColorFromTheme(token.color)) !== null && _themeService$getColo !== void 0 ? _themeService$getColo : token.color).setAlpha(token.alpha).toRgbString();
79
+ }
80
+ function resolveCrosshairHighlightColors(themeService) {
81
+ return CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATHS.map((tokenPath) => resolveCrosshairHighlightColor(themeService, tokenPath));
82
+ }
83
+ let SheetsCrosshairHighlightService = class SheetsCrosshairHighlightService extends Disposable {
96
84
  get enabled() {
97
85
  return this._enabled$.getValue();
98
86
  }
99
- get color() {
100
- return this._color$.getValue();
87
+ constructor(_themeService) {
88
+ super();
89
+ this._themeService = _themeService;
90
+ _defineProperty(this, "_enabled$", new BehaviorSubject(false));
91
+ _defineProperty(this, "enabled$", this._enabled$.asObservable());
92
+ _defineProperty(this, "_colorToken$", new BehaviorSubject(DEFAULT_CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATH));
93
+ _defineProperty(this, "colorToken$", this._colorToken$.asObservable());
94
+ _defineProperty(this, "color$", void 0);
95
+ _defineProperty(this, "highlightColor$", void 0);
96
+ this.color$ = combineLatest([this._colorToken$, this._themeService.currentTheme$]).pipe(map(([tokenPath]) => resolveCrosshairHighlightColor(this._themeService, tokenPath)));
97
+ this.highlightColor$ = this.color$;
101
98
  }
102
99
  dispose() {
103
100
  this._enabled$.complete();
101
+ this._colorToken$.complete();
104
102
  }
105
103
  setEnabled(value) {
106
104
  this._enabled$.next(value);
107
105
  }
108
106
  setColor(value) {
109
- this._color$.next(value);
107
+ this._colorToken$.next(value);
110
108
  }
111
109
  };
110
+ SheetsCrosshairHighlightService = __decorate([__decorateParam(0, Inject(ThemeService))], SheetsCrosshairHighlightService);
112
111
 
113
112
  //#endregion
114
113
  //#region src/commands/operations/operation.ts
@@ -126,10 +125,8 @@ const ToggleCrosshairHighlightOperation = {
126
125
  }
127
126
  };
128
127
  /**
129
- * A {@link CommandType.OPERATION} to set the crosshair highlight color. It the crosshair highlight is not enabled,
128
+ * A {@link CommandType.OPERATION} to set the crosshair highlight color. If the crosshair highlight is not enabled,
130
129
  * it will be enabled.
131
- *
132
- * Its params {@link ISetCrosshairHighlightColorOperationParams} contains the color value to set as and is required.
133
130
  */
134
131
  const SetCrosshairHighlightColorOperation = {
135
132
  id: "sheet.operation.set-crosshair-highlight-color",
@@ -171,7 +168,7 @@ const DisableCrosshairHighlightOperation = {
171
168
  //#endregion
172
169
  //#region package.json
173
170
  var name = "@univerjs/sheets-crosshair-highlight";
174
- var version = "0.25.0";
171
+ var version = "1.0.0-alpha.0";
175
172
 
176
173
  //#endregion
177
174
  //#region src/config/config.ts
@@ -226,39 +223,26 @@ const menuSchema = { [ContextMenuPosition.FOOTER_MENU]: { [ContextMenuGroup.OTHE
226
223
  */
227
224
  function CrosshairOverlay(props) {
228
225
  const { onChange } = props;
229
- const currentColor = useObservable(useDependency(SheetsCrosshairHighlightService).color$);
230
- const handleColorPicked = useCallback((color) => {
231
- onChange === null || onChange === void 0 || onChange(color);
226
+ const crosshairSrv = useDependency(SheetsCrosshairHighlightService);
227
+ const themeService = useDependency(ThemeService);
228
+ const currentColor = useObservable(crosshairSrv.color$);
229
+ useObservable(themeService.currentTheme$);
230
+ const colors = resolveCrosshairHighlightColors(themeService);
231
+ const handleColorPicked = useCallback((tokenPath) => {
232
+ onChange === null || onChange === void 0 || onChange(tokenPath);
232
233
  }, [onChange]);
233
234
  return /* @__PURE__ */ jsx("div", {
234
235
  className: "univer-grid univer-grid-cols-8 univer-gap-x-2 univer-gap-y-3",
235
- children: CROSSHAIR_HIGHLIGHT_COLORS.map((color) => {
236
+ children: colors.map((color, index) => {
236
237
  return /* @__PURE__ */ jsx("div", {
237
238
  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 }),
238
239
  style: { backgroundColor: color },
239
- onClick: () => handleColorPicked(color)
240
- }, color);
240
+ onClick: () => handleColorPicked(CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATHS[index])
241
+ }, CROSSHAIR_HIGHLIGHT_COLOR_THEME_PATHS[index]);
241
242
  })
242
243
  });
243
244
  }
244
245
 
245
- //#endregion
246
- //#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateParam.js
247
- function __decorateParam(paramIndex, decorator) {
248
- return function(target, key) {
249
- decorator(target, key, paramIndex);
250
- };
251
- }
252
-
253
- //#endregion
254
- //#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
255
- function __decorate(decorators, target, key, desc) {
256
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
257
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
258
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
259
- return c > 3 && r && Object.defineProperty(target, key, r), r;
260
- }
261
-
262
246
  //#endregion
263
247
  //#region src/controllers/crosshair.controller.ts
264
248
  /**
@@ -277,14 +261,16 @@ function __decorate(decorators, target, key, desc) {
277
261
  * limitations under the License.
278
262
  */
279
263
  let SheetsCrosshairHighlightController = class SheetsCrosshairHighlightController extends Disposable {
280
- constructor(_componentMgr, _menuManagerService, _cmdSrv) {
264
+ constructor(_componentMgr, _iconMgr, _menuManagerService, _cmdSrv) {
281
265
  super();
282
266
  this._componentMgr = _componentMgr;
267
+ this._iconMgr = _iconMgr;
283
268
  this._menuManagerService = _menuManagerService;
284
269
  this._cmdSrv = _cmdSrv;
285
270
  this._initCommands();
286
271
  this._initMenus();
287
272
  this._initComponents();
273
+ this._registerIcons();
288
274
  }
289
275
  _initCommands() {
290
276
  [
@@ -299,13 +285,16 @@ let SheetsCrosshairHighlightController = class SheetsCrosshairHighlightControlle
299
285
  }
300
286
  _initComponents() {
301
287
  this._componentMgr.register(CROSSHAIR_HIGHLIGHT_OVERLAY_COMPONENT, CrosshairOverlay);
302
- this._componentMgr.register("CrossHighlightingIcon", CrossHighlightingIcon);
288
+ }
289
+ _registerIcons() {
290
+ this.disposeWithMe(this._iconMgr.register({ CrossHighlightingIcon }));
303
291
  }
304
292
  };
305
293
  SheetsCrosshairHighlightController = __decorate([
306
294
  __decorateParam(0, Inject(ComponentManager)),
307
- __decorateParam(1, IMenuManagerService),
308
- __decorateParam(2, ICommandService)
295
+ __decorateParam(1, Inject(IconManager)),
296
+ __decorateParam(2, IMenuManagerService),
297
+ __decorateParam(3, ICommandService)
309
298
  ], SheetsCrosshairHighlightController);
310
299
 
311
300
  //#endregion
@@ -417,7 +406,7 @@ let SheetCrosshairHighlightRenderController = class SheetCrosshairHighlightRende
417
406
  this._contextService.subscribeContextValue$(REF_SELECTIONS_ENABLED).pipe(startWith(false)),
418
407
  this._sheetSkeletonManagerService.currentSkeleton$,
419
408
  this._sheetsCrosshairHighlightService.enabled$,
420
- this._sheetsCrosshairHighlightService.color$.pipe(tap((color) => this._color = color)),
409
+ this._sheetsCrosshairHighlightService.highlightColor$.pipe(tap((color) => this._color = color)),
421
410
  merge$1(this._sheetsSelectionsService.selectionMoveStart$, this._sheetsSelectionsService.selectionMoving$, this._sheetsSelectionsService.selectionMoveEnd$, this._sheetsSelectionsService.selectionSet$, workbook.activeSheet$.pipe(map(() => this._sheetsSelectionsService.getCurrentSelections()))),
422
411
  merge$1(this._refSelectionsService.selectionMoveStart$, this._refSelectionsService.selectionMoving$, this._refSelectionsService.selectionMoveEnd$, this._sheetsSelectionsService.selectionSet$, workbook.activeSheet$.pipe(map(() => this._refSelectionsService.getCurrentSelections())))
423
412
  ]).subscribe(([refSelectionEnabled, _, enabled, _color, normalSelections, refSelection]) => {
@@ -547,4 +536,4 @@ UniverSheetsCrosshairHighlightPlugin = __decorate([
547
536
  ], UniverSheetsCrosshairHighlightPlugin);
548
537
 
549
538
  //#endregion
550
- export { CROSSHAIR_HIGHLIGHT_COLORS, DisableCrosshairHighlightOperation, EnableCrosshairHighlightOperation, SetCrosshairHighlightColorOperation, SheetsCrosshairHighlightService, ToggleCrosshairHighlightOperation, UniverSheetsCrosshairHighlightPlugin };
539
+ export { DisableCrosshairHighlightOperation, EnableCrosshairHighlightOperation, SetCrosshairHighlightColorOperation, SheetsCrosshairHighlightService, ToggleCrosshairHighlightOperation, UniverSheetsCrosshairHighlightPlugin };