Elgato_dark/idraw
1
0
Fork 0
mirror of https://github.com/idrawjs/idraw synced 2026-05-24 10:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add disable options of middlewares

Browse source
This commit is contained in:
chenshenhai 2023-12-16 10:11:49 +08:00
parent ffe0c95459
commit e310c06e2a
4 changed files with 31 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/core/src/middleware/selector/config.ts
View file

@ -20,5 +20,7 @@ export const keyDebugStartHorizontal = Symbol(`${key}_debug_startHorizontal`);
export const keyDebugEndHorizontal = Symbol(`${key}_debug_endHorizontal`);
export const keyDebugEnd0 = Symbol(`${key}_debug_end0`);
export const resizeControllerBorderWidth = 2;
export const selectWrapperBorderWidth = 2;
export const resizeControllerBorderWidth = 4;
export const areaBorderWidth = 1;
export const wrapperColor = '#1973ba';

12
packages/core/src/middleware/selector/draw-wrapper.ts
View file

@ -12,7 +12,7 @@ import type {
import { rotateElementVertexes, calcViewVertexes } from '@idraw/util';
import type { AreaSize } from './types';
import { resizeControllerBorderWidth, wrapperColor } from './config';
import { resizeControllerBorderWidth, areaBorderWidth, wrapperColor, selectWrapperBorderWidth } from './config';
function drawVertexes(
ctx: ViewContext2D,
@ -59,9 +59,9 @@ export function drawSelectedElementControllersVertexes(
if (!controller) {
return;
}
const { elementWrapper, left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight } = controller;
const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight } = controller;
// const wrapperColor = 'red'; // TODO
const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: 'transparent', lineDash: [] };
const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [] };
const ctrlOpts = { ...wrapperOpts, borderWidth: resizeControllerBorderWidth, background: '#FFFFFF' };
drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
@ -109,7 +109,7 @@ export function drawElementListShadows(ctx: ViewContext2D, elements: Element<Ele
export function drawArea(ctx: ViewContext2D, opts: { start: PointSize; end: PointSize }) {
const { start, end } = opts;
ctx.setLineDash([]);
ctx.lineWidth = 1;
ctx.lineWidth = areaBorderWidth;
ctx.strokeStyle = wrapperColor;
ctx.fillStyle = '#1976d24f';
ctx.beginPath();
@ -126,7 +126,7 @@ export function drawListArea(ctx: ViewContext2D, opts: { areaSize: AreaSize }) {
const { areaSize } = opts;
const { x, y, w, h } = areaSize;
ctx.setLineDash([]);
ctx.lineWidth = 1;
ctx.lineWidth = areaBorderWidth;
ctx.strokeStyle = wrapperColor;
ctx.fillStyle = '#1976d21c';
ctx.beginPath();
@ -149,7 +149,7 @@ export function drawGroupQueueVertexesWrappers(
) {
for (let i = 0; i < vertexesList.length; i++) {
const vertexes = vertexesList[i];
const wrapperOpts = { borderColor: wrapperColor, borderWidth: 2, background: 'transparent', lineDash: [4, 4] };
const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [4, 4] };
drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
}
}

23
packages/idraw/src/idraw.ts
View file

@ -12,17 +12,24 @@ import {
export class iDraw {
#core: Core<IDrawEvent>;
// private #opts: IDrawOptions;
#opts: IDrawOptions;
constructor(mount: HTMLDivElement, opts: IDrawOptions) {
const core = new Core<IDrawEvent>(mount, opts);
const { width, height, devicePixelRatio } = opts;
const core = new Core<IDrawEvent>(mount, { width, height, devicePixelRatio });
this.#core = core;
// this.#opts = opts;
core.use(MiddlewareScroller);
core.use(MiddlewareSelector);
core.use(MiddlewareScaler);
core.use(MiddlewareRuler);
core.use(MiddlewareTextEditor);
this.#opts = opts;
this.#init();
}
#init() {
const { disableRuler, disableScale, disableScroll, disableSelect, disableTextEdit } = this.#opts;
const core = this.#core;
disableScroll !== true && core.use(MiddlewareScroller);
disableSelect !== true && core.use(MiddlewareSelector);
disableScale !== true && core.use(MiddlewareScaler);
disableRuler !== true && core.use(MiddlewareRuler);
disableTextEdit !== true && core.use(MiddlewareTextEditor);
}
setData(data: Data) {

8
packages/types/src/lib/idraw.ts
View file

@ -1,3 +1,9 @@
import type { CoreOptions } from './core';
export type IDrawOptions = CoreOptions;
export type IDrawOptions = CoreOptions & {
disableScroll?: boolean;
disableSelect?: boolean;
disableScale?: boolean;
disableRuler?: boolean;
disableTextEdit?: boolean;
};