feat(editor,stage): 新增标尺配置props

re #558

packages/editor/src/Editor.vue

@@ -176,6 +176,7 @@ provide(
     containerHighlightType: props.containerHighlightType,
     disabledDragStart: props.disabledDragStart,
     renderType: props.renderType,
+    guidesOptions: props.guidesOptions,
   }),
 );
 

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<string, any> | Promise<Record<string, any>>;
   /** 自定义依赖收集器，复制组件时会将关联依赖一并复制 */
   collectorOptions?: CustomTargetOptions;
+  guidesOptions?: Partial<GuidesOptions>;
 }
 
 export const defaultEditorProps = {

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([

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<boolean>;
   updateDragEl: UpdateDragEl;
   renderType: RenderType;
+  guidesOptions: Partial<GuidesOptions>;
 }
 
 export interface StoreState {

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',

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';
 
 /**

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<GuidesOptions>;
 
-  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 = {

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();

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;
 

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',
+}

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';

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<GuidesOptions>;
 }
 
 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<GuidesOptions>;
 }