diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue index 7d36b5b2..4024119e 100644 --- a/packages/editor/src/Editor.vue +++ b/packages/editor/src/Editor.vue @@ -176,6 +176,7 @@ provide( containerHighlightType: props.containerHighlightType, disabledDragStart: props.disabledDragStart, renderType: props.renderType, + guidesOptions: props.guidesOptions, }), ); diff --git a/packages/editor/src/editorProps.ts b/packages/editor/src/editorProps.ts index 488e4512..ecbda680 100644 --- a/packages/editor/src/editorProps.ts +++ b/packages/editor/src/editorProps.ts @@ -1,14 +1,15 @@ import type { EventOption } from '@tmagic/core'; -import { CustomTargetOptions } from '@tmagic/dep'; +import type { CustomTargetOptions } from '@tmagic/dep'; import type { FormConfig, FormState } from '@tmagic/form'; import type { DataSourceSchema, Id, MApp, MNode } from '@tmagic/schema'; import StageCore, { CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, - CustomizeMoveableOptionsCallbackConfig, - MoveableOptions, + type CustomizeMoveableOptionsCallbackConfig, + type GuidesOptions, + type MoveableOptions, RenderType, - UpdateDragEl, + type UpdateDragEl, } from '@tmagic/stage'; import type { @@ -71,6 +72,7 @@ export interface EditorProps { extendFormState?: (state: FormState) => Record | Promise>; /** 自定义依赖收集器,复制组件时会将关联依赖一并复制 */ collectorOptions?: CustomTargetOptions; + guidesOptions?: Partial; } export const defaultEditorProps = { diff --git a/packages/editor/src/hooks/use-stage.ts b/packages/editor/src/hooks/use-stage.ts index 442d9531..bed9f94e 100644 --- a/packages/editor/src/hooks/use-stage.ts +++ b/packages/editor/src/hooks/use-stage.ts @@ -44,6 +44,7 @@ export const useStage = (stageOptions: StageOptions) => { }, moveableOptions: stageOptions.moveableOptions, updateDragEl: stageOptions.updateDragEl, + guidesOptions: stageOptions.guidesOptions, }); stage.mask.setGuides([ diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts index 291527a4..4589109b 100644 --- a/packages/editor/src/type.ts +++ b/packages/editor/src/type.ts @@ -24,6 +24,7 @@ import type StageCore from '@tmagic/stage'; import type { ContainerHighlightType, CustomizeMoveableOptionsCallbackConfig, + GuidesOptions, MoveableOptions, RenderType, UpdateDragEl, @@ -131,6 +132,7 @@ export interface StageOptions { isContainer: (el: HTMLElement) => boolean | Promise; updateDragEl: UpdateDragEl; renderType: RenderType; + guidesOptions: Partial; } export interface StoreState { diff --git a/packages/stage/src/MoveableActionsAble.ts b/packages/stage/src/MoveableActionsAble.ts index 7326e687..281a2ade 100644 --- a/packages/stage/src/MoveableActionsAble.ts +++ b/packages/stage/src/MoveableActionsAble.ts @@ -1,7 +1,7 @@ import { MoveableManagerInterface, Renderer } from 'moveable'; +import { AbleActionEventType } from './const'; import ableCss from './moveable-able.css?raw'; -import { AbleActionEventType } from './types'; export default (handler: (type: AbleActionEventType) => void) => ({ name: 'actions', diff --git a/packages/stage/src/MoveableOptionsManager.ts b/packages/stage/src/MoveableOptionsManager.ts index 8c6e26ca..d343b7a0 100644 --- a/packages/stage/src/MoveableOptionsManager.ts +++ b/packages/stage/src/MoveableOptionsManager.ts @@ -21,9 +21,9 @@ import EventEmitter from 'events'; import { merge } from 'lodash-es'; import type { ElementGuidelineValueOption, MoveableOptions, MoveableRefType } from 'moveable'; -import { GuidesType, Mode } from './const'; +import { AbleActionEventType, GuidesType, Mode } from './const'; import MoveableActionsAble from './MoveableActionsAble'; -import { AbleActionEventType, GetRootContainer, MoveableOptionsManagerConfig } from './types'; +import type { GetRootContainer, MoveableOptionsManagerConfig } from './types'; import { getOffset } from './util'; /** diff --git a/packages/stage/src/Rule.ts b/packages/stage/src/Rule.ts index ddf9dbf8..f6259981 100644 --- a/packages/stage/src/Rule.ts +++ b/packages/stage/src/Rule.ts @@ -1,8 +1,9 @@ import EventEmitter from 'events'; -import Guides, { GuidesEvents } from '@scena/guides'; +import Guides, { type GuidesEvents, type GuidesOptions } from '@scena/guides'; import { GuidesType } from './const'; +import type { RuleOptions } from './types'; export default class Rule extends EventEmitter { public hGuides: Guides; @@ -13,10 +14,13 @@ export default class Rule extends EventEmitter { private container: HTMLDivElement; private containerResizeObserver: ResizeObserver; private isShowGuides = true; + private guidesOptions?: Partial; - constructor(container: HTMLDivElement) { + constructor(container: HTMLDivElement, options?: RuleOptions) { super(); + this.guidesOptions = options?.guidesOptions || {}; + this.container = container; this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines); this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines); @@ -136,6 +140,7 @@ export default class Rule extends EventEmitter { textColor: '#000', style: this.getGuidesStyle(type), showGuides: this.isShowGuides, + ...this.guidesOptions, }); const changEventHandler = { diff --git a/packages/stage/src/StageCore.ts b/packages/stage/src/StageCore.ts index e0c29d6d..4c799503 100644 --- a/packages/stage/src/StageCore.ts +++ b/packages/stage/src/StageCore.ts @@ -69,7 +69,9 @@ export default class StageCore extends EventEmitter { return null; }, }); - this.mask = new StageMask(); + this.mask = new StageMask({ + guidesOptions: config.guidesOptions, + }); this.actionManager = new ActionManager(this.getActionManagerConfig(config)); this.initRenderEvent(); diff --git a/packages/stage/src/StageMask.ts b/packages/stage/src/StageMask.ts index 45c5998d..e52802a6 100644 --- a/packages/stage/src/StageMask.ts +++ b/packages/stage/src/StageMask.ts @@ -20,6 +20,7 @@ import { createDiv, getDocument, injectStyle } from '@tmagic/utils'; import { Mode, ZIndex } from './const'; import Rule from './Rule'; +import type { RuleOptions } from './types'; import { getScrollParent, isFixedParent } from './util'; const wrapperClassName = 'editor-mask-wrapper'; @@ -80,9 +81,9 @@ export default class StageMask extends Rule { private intersectionObserver: IntersectionObserver | null = null; private wrapperResizeObserver: ResizeObserver | null = null; - constructor() { + constructor(options?: RuleOptions) { const wrapper = createWrapper(); - super(wrapper); + super(wrapper, options); this.wrapper = wrapper; diff --git a/packages/stage/src/const.ts b/packages/stage/src/const.ts index 80ab229d..40a6d461 100644 --- a/packages/stage/src/const.ts +++ b/packages/stage/src/const.ts @@ -73,3 +73,8 @@ export enum Mode { /** 选中节点的class name */ export const SELECTED_CLASS = 'tmagic-stage-selected-area'; + +export enum AbleActionEventType { + SELECT_PARENT = 'select-parent', + REMOVE = 'remove', +} diff --git a/packages/stage/src/index.ts b/packages/stage/src/index.ts index 0b49aa72..03e64b2a 100644 --- a/packages/stage/src/index.ts +++ b/packages/stage/src/index.ts @@ -19,6 +19,7 @@ import StageCore from './StageCore'; export type { MoveableOptions, OnDragStart } from 'moveable'; +export type { GuidesOptions } from '@scena/guides'; export { default as StageRender } from './StageRender'; export { default as StageMask } from './StageMask'; export { default as StageDragResize } from './StageDragResize'; diff --git a/packages/stage/src/types.ts b/packages/stage/src/types.ts index 59490015..e93ac382 100644 --- a/packages/stage/src/types.ts +++ b/packages/stage/src/types.ts @@ -16,6 +16,7 @@ * limitations under the License. */ +import type { GuidesOptions } from '@scena/guides'; import type { MoveableOptions } from 'moveable'; import Core from '@tmagic/core'; @@ -77,6 +78,7 @@ export interface StageCoreConfig { updateDragEl?: UpdateDragEl; disabledDragStart?: boolean; renderType?: RenderType; + guidesOptions?: Partial; } export interface ActionManagerConfig { @@ -264,7 +266,6 @@ export interface TargetShadowConfig { idPrefix?: string; } -export enum AbleActionEventType { - SELECT_PARENT = 'select-parent', - REMOVE = 'remove', +export interface RuleOptions { + guidesOptions?: Partial; }