chrome-devtools-frontend
Version:
Chrome DevTools UI
181 lines (156 loc) • 5.97 kB
text/typescript
// Copyright (c) 2020 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/* eslint-disable rulesdir/no-lit-render-outside-of-view */
import * as Common from '../../../../core/common/common.js';
import * as Lit from '../../../lit/lit.js';
import * as VisualLogging from '../../../visual_logging/visual_logging.js';
import cssAngleEditorStyles from './cssAngleEditor.css.js';
import {
type Angle,
AngleUnit,
get2DTranslationsForAngle,
getAngleFromRadians,
getNewAngleFromEvent,
getRadiansFromAngle,
} from './CSSAngleUtils.js';
const {render, html} = Lit;
const styleMap = Lit.Directives.styleMap;
const CLOCK_DIAL_LENGTH = 6;
export interface CSSAngleEditorData {
angle: Angle;
onAngleUpdate: (angle: Angle) => void;
background: string;
}
export class CSSAngleEditor extends HTMLElement {
private readonly shadow = this.attachShadow({mode: 'open'});
private angle: Angle = {
value: 0,
unit: AngleUnit.RAD,
};
private onAngleUpdate?: (angle: Angle) => void;
private background = '';
private clockRadius = 77 / 2; // By default the clock is 77 * 77.
private dialTemplates?: Lit.TemplateResult[];
private mousemoveThrottler = new Common.Throttler.Throttler(16.67 /* 60fps */);
private mousemoveListener = this.onMousemove.bind(this);
connectedCallback(): void {
this.style.setProperty('--clock-dial-length', `${CLOCK_DIAL_LENGTH}px`);
}
set data(data: CSSAngleEditorData) {
this.angle = data.angle;
this.onAngleUpdate = data.onAngleUpdate;
this.background = data.background;
this.render();
}
private updateAngleFromMousePosition(mouseX: number, mouseY: number, shouldSnapToMultipleOf15Degrees: boolean): void {
const clock = this.shadow.querySelector('.clock');
if (!clock || !this.onAngleUpdate) {
return;
}
const {top, right, bottom, left} = clock.getBoundingClientRect();
this.clockRadius = (right - left) / 2;
const clockCenterX = (left + right) / 2;
const clockCenterY = (bottom + top) / 2;
const radian = -Math.atan2(mouseX - clockCenterX, mouseY - clockCenterY) + Math.PI;
if (shouldSnapToMultipleOf15Degrees) {
const multipleInRadian = getRadiansFromAngle({
value: 15,
unit: AngleUnit.DEG,
});
const closestMultipleOf15Degrees = Math.round(radian / multipleInRadian) * multipleInRadian;
this.onAngleUpdate(getAngleFromRadians(closestMultipleOf15Degrees, this.angle.unit));
} else {
this.onAngleUpdate(getAngleFromRadians(radian, this.angle.unit));
}
}
private onEditorMousedown(event: MouseEvent): void {
event.stopPropagation();
this.updateAngleFromMousePosition(event.pageX, event.pageY, event.shiftKey);
const targetDocument = event.target instanceof Node && event.target.ownerDocument;
const editor = this.shadow.querySelector<HTMLElement>('.editor');
if (targetDocument && editor) {
targetDocument.addEventListener('mousemove', this.mousemoveListener, {capture: true});
editor.classList.add('interacting');
targetDocument.addEventListener('mouseup', () => {
targetDocument.removeEventListener('mousemove', this.mousemoveListener, {capture: true});
editor.classList.remove('interacting');
}, {once: true});
}
}
private onMousemove(event: MouseEvent): void {
const isPressed = event.buttons === 1;
if (!isPressed) {
return;
}
event.preventDefault();
void this.mousemoveThrottler.schedule(() => {
this.updateAngleFromMousePosition(event.pageX, event.pageY, event.shiftKey);
return Promise.resolve();
});
}
private onEditorWheel(event: WheelEvent): void {
if (!this.onAngleUpdate) {
return;
}
const newAngle = getNewAngleFromEvent(this.angle, event);
if (newAngle) {
this.onAngleUpdate(newAngle);
}
event.preventDefault();
}
private render(): void {
const clockStyles = {
background: this.background,
};
const {translateX, translateY} = get2DTranslationsForAngle(this.angle, this.clockRadius / 2);
const handStyles = {
transform: `translate(${translateX}px, ${translateY}px) rotate(${this.angle.value}${this.angle.unit})`,
};
// Disabled until https://crbug.com/1079231 is fixed.
// clang-format off
render(html`
<style>${cssAngleEditorStyles}</style>
<div class="editor" jslog=${VisualLogging.dialog('cssAngleEditor').track({click: true, drag: true, resize: true, keydown: 'Enter|Escape'})}>
<span class="pointer"></span>
<div
class="clock"
style=${styleMap(clockStyles)}
=${this.onEditorMousedown}
=${this.onEditorWheel}>
${this.renderDials()}
<div class="hand" style=${styleMap(handStyles)}></div>
<span class="center"></span>
</div>
</div>
`, this.shadow, {
host: this,
});
// clang-format on
}
private renderDials(): Lit.TemplateResult[] {
if (!this.dialTemplates) {
// Disabled until https://crbug.com/1079231 is fixed.
// clang-format off
this.dialTemplates = [0, 45, 90, 135, 180, 225, 270, 315].map(deg => {
const radius = this.clockRadius - CLOCK_DIAL_LENGTH - 3 /* clock border */;
const {translateX, translateY} = get2DTranslationsForAngle({
value: deg,
unit: AngleUnit.DEG,
}, radius);
const dialStyles = {
transform: `translate(${translateX}px, ${translateY}px) rotate(${deg}deg)`,
};
return html`<span class="dial" style=${styleMap(dialStyles)}></span>`;
});
// clang-format on
}
return this.dialTemplates;
}
}
customElements.define('devtools-css-angle-editor', CSSAngleEditor);
declare global {
interface HTMLElementTagNameMap {
'devtools-css-angle-editor': CSSAngleEditor;
}
}