tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Refactor ShowOffset

typed-command-runs
Artur Arseniev 5 months ago
parent
90d4c033a3
commit
0f7b49cd55
3 changed files with 121 additions and 84 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      packages/core/src/commands/registry.ts
  2. 168
      packages/core/src/commands/view/ShowOffset.ts
  3. 34
      packages/core/test/specs/commands/view/ShowOffset.ts

3
packages/core/src/commands/registry.ts
View File

@ -17,6 +17,7 @@ import type { ExportTemplateCommandRegistryRun, ExportTemplateCommandRegistrySto
import type { OpenAssetsCommandRegistryRun, OpenAssetsCommandRegistryStop } from './view/OpenAssets'; import type { OpenAssetsCommandRegistryRun, OpenAssetsCommandRegistryStop } from './view/OpenAssets';
import type { OpenLayersCommandRegistryRun, OpenLayersCommandRegistryStop } from './view/OpenLayers'; import type { OpenLayersCommandRegistryRun, OpenLayersCommandRegistryStop } from './view/OpenLayers';
import type { OpenBlocksCommandRegistryRun, OpenBlocksCommandRegistryStop } from './view/OpenBlocks'; import type { OpenBlocksCommandRegistryRun, OpenBlocksCommandRegistryStop } from './view/OpenBlocks';
import type { ShowOffsetCommandRegistryRun, ShowOffsetCommandRegistryStop } from './view/ShowOffset';
import type { SwitchVisibilityCommandRegistryRun, SwitchVisibilityCommandRegistryStop } from './view/SwitchVisibility'; import type { SwitchVisibilityCommandRegistryRun, SwitchVisibilityCommandRegistryStop } from './view/SwitchVisibility';
import type { import type {
OpenStyleManagerCommandRegistryRun, OpenStyleManagerCommandRegistryRun,
@ -48,6 +49,7 @@ export interface CommandRegistryRun
OpenLayersCommandRegistryRun, OpenLayersCommandRegistryRun,
OpenStyleManagerCommandRegistryRun, OpenStyleManagerCommandRegistryRun,
OpenTraitManagerCommandRegistryRun, OpenTraitManagerCommandRegistryRun,
ShowOffsetCommandRegistryRun,
SwitchVisibilityCommandRegistryRun {} SwitchVisibilityCommandRegistryRun {}
export interface CommandRegistryStop export interface CommandRegistryStop
@ -61,6 +63,7 @@ export interface CommandRegistryStop
OpenLayersCommandRegistryStop, OpenLayersCommandRegistryStop,
OpenStyleManagerCommandRegistryStop, OpenStyleManagerCommandRegistryStop,
OpenTraitManagerCommandRegistryStop, OpenTraitManagerCommandRegistryStop,
ShowOffsetCommandRegistryStop,
SwitchVisibilityCommandRegistryStop {} SwitchVisibilityCommandRegistryStop {}
export type CommandRunKnownId = Extract<keyof CommandRegistryRun, string>; export type CommandRunKnownId = Extract<keyof CommandRegistryRun, string>;

168
packages/core/src/commands/view/ShowOffset.ts
View File

@ -1,15 +1,29 @@
import { isUndefined } from 'underscore'; import { isUndefined } from 'underscore';
import { CanvasSpotBuiltInTypes } from '../../canvas/model/CanvasSpot'; import { CanvasSpotBuiltInTypes } from '../../canvas/model/CanvasSpot';
import { $ } from '../../common'; import { $ } from '../../common';
import { CommandObject } from './CommandAbstract'; import Editor from '../../editor';
import type { CommandPublicFnFromHandler } from '../registryHelpers';
import CommandAbstract from './CommandAbstract';
export interface ShowOffsetCommandRegistryRun {
'core:component-offset': CommandPublicFnFromHandler<CommandShowOffset['run']>;
'show-offset': CommandPublicFnFromHandler<CommandShowOffset['run']>;
}
export interface ShowOffsetCommandRegistryStop {
'core:component-offset': CommandPublicFnFromHandler<CommandShowOffset['stop']>;
'show-offset': CommandPublicFnFromHandler<CommandShowOffset['stop']>;
}
export default class CommandShowOffset extends CommandAbstract {
[key: string]: any;
export default {
getOffsetMethod(state: string) { getOffsetMethod(state: string) {
var method = state || ''; const method = state || '';
return 'get' + method + 'OffsetViewerEl'; return `get${method}OffsetViewerEl`;
}, }
run(editor, sender, opts) { run(editor: Editor, sender: any, opts: any) {
const { canvas } = this; const { canvas } = this;
const opt = opts || {}; const opt = opts || {};
const state = opt.state || ''; const state = opt.state || '';
@ -26,7 +40,7 @@ export default {
return; return;
} }
var pos = { ...(opt.elPos || canvas.getElementPos(el)) }; const pos = { ...(opt.elPos || canvas.getElementPos(el)) };
if (!isUndefined(opt.top)) { if (!isUndefined(opt.top)) {
pos.top = opt.top; pos.top = opt.top;
@ -35,22 +49,21 @@ export default {
pos.left = opt.left; pos.left = opt.left;
} }
var style = window.getComputedStyle(el); const style = window.getComputedStyle(el);
var ppfx = this.ppfx; const ppfx = this.ppfx;
var stateVar = state + 'State'; const stateVar = `${state}State`;
var method = this.getOffsetMethod(state); const method = this.getOffsetMethod(state);
// @ts-ignore const offsetViewer = (canvas as any)[method](opts.view);
var offsetViewer = canvas[method](opts.view);
offsetViewer.style.opacity = ''; offsetViewer.style.opacity = '';
let marginT = this['marginT' + state]; let marginT = this[`marginT${state}`];
let marginB = this['marginB' + state]; let marginB = this[`marginB${state}`];
let marginL = this['marginL' + state]; let marginL = this[`marginL${state}`];
let marginR = this['marginR' + state]; let marginR = this[`marginR${state}`];
let padT = this['padT' + state]; let padT = this[`padT${state}`];
let padB = this['padB' + state]; let padB = this[`padB${state}`];
let padL = this['padL' + state]; let padL = this[`padL${state}`];
let padR = this['padR' + state]; let padR = this[`padR${state}`];
if (offsetViewer.childNodes.length) { if (offsetViewer.childNodes.length) {
this[stateVar] = '1'; this[stateVar] = '1';
@ -65,15 +78,15 @@ export default {
} }
if (!this[stateVar]) { if (!this[stateVar]) {
var stateLow = state.toLowerCase(); const stateLow = state.toLowerCase();
var marginName = stateLow + 'margin-v'; const marginName = `${stateLow}margin-v`;
var paddingName = stateLow + 'padding-v'; const paddingName = `${stateLow}padding-v`;
var marginV = $(`<div class="${ppfx}marginName">`).get(0) as HTMLElement; const marginV = $(`<div class="${ppfx}marginName">`).get(0) as HTMLElement;
var paddingV = $(`<div class="${ppfx}paddingName">`).get(0) as HTMLElement; const paddingV = $(`<div class="${ppfx}paddingName">`).get(0) as HTMLElement;
var marginEls = ppfx + marginName + '-el'; const marginEls = `${ppfx}${marginName}-el`;
var paddingEls = ppfx + paddingName + '-el'; const paddingEls = `${ppfx}${paddingName}-el`;
const fullMargName = `${marginEls} ${ppfx + marginName}`; const fullMargName = `${marginEls} ${ppfx}${marginName}`;
const fullPadName = `${paddingEls} ${ppfx + paddingName}`; const fullPadName = `${paddingEls} ${ppfx}${paddingName}`;
marginT = $(`<div class="${fullMargName}-top"></div>`).get(0); marginT = $(`<div class="${fullMargName}-top"></div>`).get(0);
marginB = $(`<div class="${fullMargName}-bottom"></div>`).get(0); marginB = $(`<div class="${fullMargName}-bottom"></div>`).get(0);
marginL = $(`<div class="${fullMargName}-left"></div>`).get(0); marginL = $(`<div class="${fullMargName}-left"></div>`).get(0);
@ -82,14 +95,14 @@ export default {
padB = $(`<div class="${fullPadName}-bottom"></div>`).get(0); padB = $(`<div class="${fullPadName}-bottom"></div>`).get(0);
padL = $(`<div class="${fullPadName}-left"></div>`).get(0); padL = $(`<div class="${fullPadName}-left"></div>`).get(0);
padR = $(`<div class="${fullPadName}-right"></div>`).get(0); padR = $(`<div class="${fullPadName}-right"></div>`).get(0);
this['marginT' + state] = marginT; this[`marginT${state}`] = marginT;
this['marginB' + state] = marginB; this[`marginB${state}`] = marginB;
this['marginL' + state] = marginL; this[`marginL${state}`] = marginL;
this['marginR' + state] = marginR; this[`marginR${state}`] = marginR;
this['padT' + state] = padT; this[`padT${state}`] = padT;
this['padB' + state] = padB; this[`padB${state}`] = padB;
this['padL' + state] = padL; this[`padL${state}`] = padL;
this['padR' + state] = padR; this[`padR${state}`] = padR;
marginV.appendChild(marginT); marginV.appendChild(marginT);
marginV.appendChild(marginB); marginV.appendChild(marginB);
marginV.appendChild(marginL); marginV.appendChild(marginL);
@ -103,23 +116,22 @@ export default {
this[stateVar] = '1'; this[stateVar] = '1';
} }
var unit = 'px'; const unit = 'px';
var marginLeftSt = parseFloat(style.marginLeft.replace(unit, '')) * zoom; const marginLeftSt = parseFloat(style.marginLeft.replace(unit, '')) * zoom;
var marginRightSt = parseFloat(style.marginRight.replace(unit, '')) * zoom; const marginRightSt = parseFloat(style.marginRight.replace(unit, '')) * zoom;
var marginTopSt = parseFloat(style.marginTop.replace(unit, '')) * zoom; const marginTopSt = parseFloat(style.marginTop.replace(unit, '')) * zoom;
var marginBottomSt = parseFloat(style.marginBottom.replace(unit, '')) * zoom; const marginBottomSt = parseFloat(style.marginBottom.replace(unit, '')) * zoom;
var mtStyle = marginT.style; const mtStyle = marginT.style;
var mbStyle = marginB.style; const mbStyle = marginB.style;
var mlStyle = marginL.style; const mlStyle = marginL.style;
var mrStyle = marginR.style; const mrStyle = marginR.style;
var ptStyle = padT.style; const ptStyle = padT.style;
var pbStyle = padB.style; const pbStyle = padB.style;
var plStyle = padL.style; const plStyle = padL.style;
var prStyle = padR.style; const prStyle = padR.style;
var posLeft = parseFloat(pos.left); const posLeft = parseFloat(pos.left);
var widthEl = parseFloat(style.width) * zoom + unit; const widthEl = parseFloat(style.width) * zoom + unit;
// Margin style
mtStyle.height = marginTopSt + unit; mtStyle.height = marginTopSt + unit;
mtStyle.width = widthEl; mtStyle.width = widthEl;
mtStyle.top = pos.top - marginTopSt + unit; mtStyle.top = pos.top - marginTopSt + unit;
@ -130,8 +142,8 @@ export default {
mbStyle.top = pos.top + pos.height + unit; mbStyle.top = pos.top + pos.height + unit;
mbStyle.left = posLeft + unit; mbStyle.left = posLeft + unit;
var marginSideH = pos.height + marginTopSt + marginBottomSt + unit; const marginSideH = pos.height + marginTopSt + marginBottomSt + unit;
var marginSideT = pos.top - marginTopSt + unit; const marginSideT = pos.top - marginTopSt + unit;
mlStyle.height = marginSideH; mlStyle.height = marginSideH;
mlStyle.width = marginLeftSt + unit; mlStyle.width = marginLeftSt + unit;
mlStyle.top = marginSideT; mlStyle.top = marginSideT;
@ -142,43 +154,31 @@ export default {
mrStyle.top = marginSideT; mrStyle.top = marginSideT;
mrStyle.left = posLeft + pos.width + unit; mrStyle.left = posLeft + pos.width + unit;
// Padding style const padTop = parseFloat(style.paddingTop) * zoom;
var padTop = parseFloat(style.paddingTop) * zoom;
ptStyle.height = padTop + unit; ptStyle.height = padTop + unit;
// ptStyle.width = widthEl;
// ptStyle.top = pos.top + unit;
// ptStyle.left = posLeft + unit;
var padBot = parseFloat(style.paddingBottom) * zoom; const padBot = parseFloat(style.paddingBottom) * zoom;
pbStyle.height = padBot + unit; pbStyle.height = padBot + unit;
// pbStyle.width = widthEl;
// pbStyle.top = pos.top + pos.height - padBot + unit;
// pbStyle.left = posLeft + unit;
var padSideH = pos.height - padBot - padTop + unit; const padSideH = pos.height - padBot - padTop + unit;
var padSideT = pos.top + padTop + unit; const padSideT = pos.top + padTop + unit;
plStyle.height = padSideH; plStyle.height = padSideH;
plStyle.width = parseFloat(style.paddingLeft) * zoom + unit; plStyle.width = parseFloat(style.paddingLeft) * zoom + unit;
plStyle.top = padSideT; plStyle.top = padSideT;
// plStyle.left = pos.left + unit;
// plStyle.right = 0;
var padRight = parseFloat(style.paddingRight) * zoom; const padRight = parseFloat(style.paddingRight) * zoom;
prStyle.height = padSideH; prStyle.height = padSideH;
prStyle.width = padRight + unit; prStyle.width = padRight + unit;
prStyle.top = padSideT; prStyle.top = padSideT;
// prStyle.left = pos.left + pos.width - padRight + unit; }
// prStyle.left = 0;
}, stop(editor: Editor, sender: any, opts: any = {}) {
const opt = opts || {};
stop(editor, sender, opts = {}) { const state = opt.state || '';
var opt = opts || {}; const method = this.getOffsetMethod(state);
var state = opt.state || '';
var method = this.getOffsetMethod(state);
const { view } = opts; const { view } = opts;
const canvas = this.canvas; const { canvas } = this;
// @ts-ignore const offsetViewer = (canvas as any)[method](view);
var offsetViewer = canvas[method](view);
offsetViewer.style.opacity = 0; offsetViewer.style.opacity = 0;
}, }
} as CommandObject<any, { [k: string]: any }>; }

34
packages/core/test/specs/commands/view/ShowOffset.ts
View File

@ -0,0 +1,34 @@
import ShowOffset from '../../../../src/commands/view/ShowOffset';
describe('ShowOffset command', () => {
test('getOffsetMethod should build the method name from state', () => {
const command = new ShowOffset({});
expect(command.getOffsetMethod('Fixed')).toBe('getFixedOffsetViewerEl');
});
test('run should stop the command when offsets are disabled', () => {
const command = new ShowOffset({ em: { getZoomDecimal: jest.fn(() => 1) } });
command.id = 'core:component-offset';
const editor = {
getConfig: jest.fn(() => ({ showOffsets: false, showOffsetsSelected: true })),
stopCommand: jest.fn(),
};
command.run(editor as any, null, { el: document.createElement('div') });
expect(editor.stopCommand).toHaveBeenCalledWith('core:component-offset', { el: expect.any(HTMLElement) });
});
test('stop should hide the offset viewer', () => {
const command = new ShowOffset({});
const viewer = document.createElement('div');
command.canvas = {
getFixedOffsetViewerEl: jest.fn(() => viewer),
} as any;
command.stop({} as any, null, { state: 'Fixed' });
expect(viewer.style.opacity).toBe('0');
});
});
Write Preview
Loading…
Cancel
Save