implement fill color option for boxes, start wx integration
This commit is contained in:
louisnw
@ -22,7 +22,9 @@ export class ColorPicker {
|
||||
private _opacityLabel: HTMLDivElement;
|
||||
private rgba: number[] | undefined;
|
||||
|
||||
constructor(saveDrawings: Function) {
|
||||
constructor(saveDrawings: Function,
|
||||
private colorOption: string,
|
||||
) {
|
||||
this.saveDrawings = saveDrawings
|
||||
|
||||
this._div = document.createElement('div');
|
||||
@ -114,12 +116,12 @@ export class ColorPicker {
|
||||
updateColor() {
|
||||
if (!Drawing.lastHoveredObject || !this.rgba) return;
|
||||
const oColor = `rgba(${this.rgba[0]}, ${this.rgba[1]}, ${this.rgba[2]}, ${this.opacity})`
|
||||
Drawing.lastHoveredObject.applyOptions({lineColor: oColor})
|
||||
Drawing.lastHoveredObject.applyOptions({[this.colorOption]: oColor})
|
||||
this.saveDrawings()
|
||||
}
|
||||
openMenu(rect: DOMRect) {
|
||||
if (!Drawing.lastHoveredObject) return;
|
||||
this.rgba = ColorPicker.extractRGBA(Drawing.lastHoveredObject._options.lineColor)
|
||||
this.rgba = ColorPicker.extractRGBA(Drawing.lastHoveredObject._options[this.colorOption])
|
||||
this.opacity = this.rgba[3];
|
||||
this._updateOpacitySlider();
|
||||
this._div.style.top = (rect.top-30)+'px'
|
||||
|
||||
@ -1,5 +1,21 @@
|
||||
import { Drawing } from "../drawing/drawing";
|
||||
import { DrawingTool } from "../drawing/drawing-tool";
|
||||
import { GlobalParams } from "../general/global-params";
|
||||
import { ColorPicker } from "./color-picker";
|
||||
import { StylePicker } from "./style-picker";
|
||||
|
||||
|
||||
export function camelToTitle(inputString: string) {
|
||||
const result = [];
|
||||
for (const c of inputString) {
|
||||
if (result.length == 0) {
|
||||
result.push(c.toUpperCase());
|
||||
} else if (c == c.toUpperCase()) {
|
||||
result.push(' '+c);
|
||||
} else result.push(c);
|
||||
}
|
||||
return result.join('');
|
||||
}
|
||||
|
||||
interface Item {
|
||||
elem: HTMLSpanElement;
|
||||
@ -13,8 +29,12 @@ declare const window: GlobalParams;
|
||||
export class ContextMenu {
|
||||
private div: HTMLDivElement
|
||||
private hoverItem: Item | null;
|
||||
private items: HTMLElement[] = []
|
||||
|
||||
constructor() {
|
||||
constructor(
|
||||
private saveDrawings: Function,
|
||||
private drawingTool: DrawingTool,
|
||||
) {
|
||||
this._onRightClick = this._onRightClick.bind(this);
|
||||
this.div = document.createElement('div');
|
||||
this.div.classList.add('context-menu');
|
||||
@ -35,6 +55,50 @@ export class ContextMenu {
|
||||
|
||||
private _onRightClick(ev: MouseEvent) {
|
||||
if (!Drawing.hoveredObject) return;
|
||||
|
||||
for (const item of this.items) {
|
||||
this.div.removeChild(item);
|
||||
}
|
||||
this.items = [];
|
||||
|
||||
for (const optionName of Object.keys(Drawing.hoveredObject._options)) {
|
||||
let subMenu;
|
||||
if (optionName.toLowerCase().includes('color')) {
|
||||
subMenu = new ColorPicker(this.saveDrawings, optionName);
|
||||
} else if (optionName === 'lineStyle') {
|
||||
subMenu = new StylePicker(this.saveDrawings)
|
||||
} else continue;
|
||||
|
||||
let onClick = (rect: DOMRect) => subMenu.openMenu(rect)
|
||||
this.menuItem(camelToTitle(optionName), onClick, () => {
|
||||
document.removeEventListener('click', subMenu.closeMenu)
|
||||
subMenu._div.style.display = 'none'
|
||||
})
|
||||
}
|
||||
|
||||
let onClickDelete = () => this.drawingTool.delete(Drawing.lastHoveredObject);
|
||||
this.separator()
|
||||
this.menuItem('Delete Drawing', onClickDelete)
|
||||
|
||||
// const colorPicker = new ColorPicker(this.saveDrawings)
|
||||
// const stylePicker = new StylePicker(this.saveDrawings)
|
||||
|
||||
// let onClickDelete = () => this._drawingTool.delete(Drawing.lastHoveredObject);
|
||||
// let onClickColor = (rect: DOMRect) => colorPicker.openMenu(rect)
|
||||
// let onClickStyle = (rect: DOMRect) => stylePicker.openMenu(rect)
|
||||
|
||||
// contextMenu.menuItem('Color Picker', onClickColor, () => {
|
||||
// document.removeEventListener('click', colorPicker.closeMenu)
|
||||
// colorPicker._div.style.display = 'none'
|
||||
// })
|
||||
// contextMenu.menuItem('Style', onClickStyle, () => {
|
||||
// document.removeEventListener('click', stylePicker.closeMenu)
|
||||
// stylePicker._div.style.display = 'none'
|
||||
// })
|
||||
// contextMenu.separator()
|
||||
// contextMenu.menuItem('Delete Drawing', onClickDelete)
|
||||
|
||||
|
||||
ev.preventDefault();
|
||||
this.div.style.left = ev.clientX + 'px';
|
||||
this.div.style.top = ev.clientY + 'px';
|
||||
@ -70,6 +134,9 @@ export class ContextMenu {
|
||||
item.addEventListener('mouseover', () => timeout = setTimeout(() => action(item.getBoundingClientRect()), 100))
|
||||
item.addEventListener('mouseout', () => clearTimeout(timeout))
|
||||
}
|
||||
|
||||
this.items.push(item);
|
||||
|
||||
}
|
||||
public separator() {
|
||||
const separator = document.createElement('div')
|
||||
@ -78,6 +145,8 @@ export class ContextMenu {
|
||||
separator.style.margin = '3px 0px'
|
||||
separator.style.backgroundColor = window.pane.borderColor
|
||||
this.div.appendChild(separator)
|
||||
|
||||
this.items.push(separator);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -4,8 +4,6 @@ import { Box } from "../box/box";
|
||||
import { Drawing } from "../drawing/drawing";
|
||||
import { ContextMenu } from "../context-menu/context-menu";
|
||||
import { GlobalParams } from "./global-params";
|
||||
import { StylePicker } from "../context-menu/style-picker";
|
||||
import { ColorPicker } from "../context-menu/color-picker";
|
||||
import { IChartApi, ISeriesApi, SeriesType } from "lightweight-charts";
|
||||
import { HorizontalLine } from "../horizontal-line/horizontal-line";
|
||||
import { RayLine } from "../horizontal-line/ray-line";
|
||||
@ -42,7 +40,7 @@ export class ToolBox {
|
||||
this._commandFunctions = commandFunctions;
|
||||
this._drawingTool = new DrawingTool(chart, series, () => this.removeActiveAndSave());
|
||||
this.div = this._makeToolBox()
|
||||
this._makeContextMenu();
|
||||
new ContextMenu(this.saveDrawings, this._drawingTool);
|
||||
|
||||
commandFunctions.push((event: KeyboardEvent) => {
|
||||
if ((event.metaKey || event.ctrlKey) && event.code === 'KeyZ') {
|
||||
@ -130,27 +128,6 @@ export class ToolBox {
|
||||
this.saveDrawings()
|
||||
}
|
||||
|
||||
private _makeContextMenu() {
|
||||
const contextMenu = new ContextMenu()
|
||||
const colorPicker = new ColorPicker(this.saveDrawings)
|
||||
const stylePicker = new StylePicker(this.saveDrawings)
|
||||
|
||||
let onClickDelete = () => this._drawingTool.delete(Drawing.lastHoveredObject);
|
||||
let onClickColor = (rect: DOMRect) => colorPicker.openMenu(rect)
|
||||
let onClickStyle = (rect: DOMRect) => stylePicker.openMenu(rect)
|
||||
|
||||
contextMenu.menuItem('Color Picker', onClickColor, () => {
|
||||
document.removeEventListener('click', colorPicker.closeMenu)
|
||||
colorPicker._div.style.display = 'none'
|
||||
})
|
||||
contextMenu.menuItem('Style', onClickStyle, () => {
|
||||
document.removeEventListener('click', stylePicker.closeMenu)
|
||||
stylePicker._div.style.display = 'none'
|
||||
})
|
||||
contextMenu.separator()
|
||||
contextMenu.menuItem('Delete Drawing', onClickDelete)
|
||||
}
|
||||
|
||||
// renderDrawings() {
|
||||
// if (this.mouseDown) return
|
||||
// this.drawings.forEach((item) => {
|
||||
|
||||
@ -1,62 +0,0 @@
|
||||
// import { Handler } from "../general/handler"
|
||||
|
||||
|
||||
|
||||
// interface Command {
|
||||
// type: string,
|
||||
// id: string,
|
||||
// method: string,
|
||||
// args: string,
|
||||
|
||||
// }
|
||||
|
||||
// class Interpreter {
|
||||
// private _tokens: string[];
|
||||
// private cwd: string;
|
||||
// private _i: number;
|
||||
|
||||
// private objects = {};
|
||||
|
||||
// constructor() {
|
||||
|
||||
// }
|
||||
|
||||
// private _next() {
|
||||
// this._i++;
|
||||
// this.cwd = this._tokens[this._i];
|
||||
// return this.cwd;
|
||||
// }
|
||||
|
||||
// private _handleCommand(command: string[]) {
|
||||
// const type = this.cwd;
|
||||
// switch (this.cwd) {
|
||||
// case "auth":
|
||||
// break;
|
||||
// case "create":
|
||||
// return this._create();
|
||||
// case "obj":
|
||||
// break;
|
||||
// case "":
|
||||
// }
|
||||
// }
|
||||
|
||||
// private static readonly createMap = {
|
||||
// "Handler": Handler,
|
||||
// }
|
||||
|
||||
|
||||
// // create, HorizontalLine, id
|
||||
// private _create() {
|
||||
// const type = this.cwd;
|
||||
// this._next();
|
||||
|
||||
// Interpreter.createMap[type](...this.cwd)
|
||||
// }
|
||||
|
||||
// private _obj() {
|
||||
// const id = this._next();
|
||||
// const method = this._next();
|
||||
// const args = this._next();
|
||||
// this.objects[id][method](args);
|
||||
// }
|
||||
// }
|
||||
Reference in New Issue
Block a user