1 |
|
2 |
|
3 |
|
4 |
|
5 | import type {PathCommands} from './common.js';
|
6 | import {buildPath, emptyBounds, fillPathWithBoxStyle} from './highlight_common.js';
|
7 |
|
8 | export interface IsolatedElementHighlight {
|
9 | widthResizerBorder: PathCommands;
|
10 | heightResizerBorder: PathCommands;
|
11 | bidirectionResizerBorder: PathCommands;
|
12 | currentX: number;
|
13 | currentY: number;
|
14 | currentWidth: number;
|
15 | currentHeight: number;
|
16 | highlightIndex: number;
|
17 | isolationModeHighlightConfig: {
|
18 | resizerColor: string,
|
19 | resizerHandleColor: string,
|
20 | maskColor: string,
|
21 | };
|
22 | }
|
23 |
|
24 | export function drawIsolatedElementHighlight(
|
25 | highlight: IsolatedElementHighlight, context: CanvasRenderingContext2D, canvasWidth: number, canvasHeight: number,
|
26 | emulationScaleFactor: number) {
|
27 | const {currentX, currentY, currentWidth, currentHeight, highlightIndex} = highlight;
|
28 |
|
29 | context.save();
|
30 | context.fillStyle = highlight.isolationModeHighlightConfig.maskColor;
|
31 | context.fillRect(0, 0, canvasWidth, canvasHeight);
|
32 | context.clearRect(currentX, currentY, currentWidth, currentHeight);
|
33 | context.restore();
|
34 |
|
35 |
|
36 | const bounds = emptyBounds();
|
37 | const widthPath = buildPath(highlight.widthResizerBorder, bounds, emulationScaleFactor);
|
38 | fillPathWithBoxStyle(context, widthPath, bounds, 0 , {
|
39 | fillColor: highlight.isolationModeHighlightConfig.resizerColor,
|
40 | });
|
41 |
|
42 |
|
43 | const heightPath = buildPath(highlight.heightResizerBorder, bounds, emulationScaleFactor);
|
44 | fillPathWithBoxStyle(context, heightPath, bounds, 0 , {
|
45 | fillColor: highlight.isolationModeHighlightConfig.resizerColor,
|
46 | });
|
47 |
|
48 |
|
49 | const bidirectionPath = buildPath(highlight.bidirectionResizerBorder, bounds, emulationScaleFactor);
|
50 | fillPathWithBoxStyle(context, bidirectionPath, bounds, 0 , {
|
51 | fillColor: highlight.isolationModeHighlightConfig.resizerColor,
|
52 | });
|
53 |
|
54 | return {
|
55 | widthPath,
|
56 | heightPath,
|
57 | bidirectionPath,
|
58 | currentWidth,
|
59 | currentHeight,
|
60 | highlightIndex,
|
61 | };
|
62 | }
|