@flowgram-vue/core 0.2.0

package/src/common/playground-decorators.ts

@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  // ABLES_DECO_KEY,
+  ENTITIES_DECO_KEY,
+  // HANDLE_DECO_KEY,
+  // PAYLOAD_DECO_KEY,
+  createRegistryDecorator,
+  ENTITIES_BY_DATA_DECO_KEY,
+  type RegistryValueGetter,
+} from './playground-decorator-helper';
+// import type { AbleRegistry } from './able';
+import type { Entity, EntityDataRegistry, EntityRegistry } from '.';
+// import type { Layer } from './layer';
+
+// export function observeAble(registry: AbleRegistry): any {
+//   const getValue: RegistryValueGetter<Entity[]> = (target: any) =>
+//     target.observeManager.getEntitiesByAble(registry);
+//   return createRegistryDecorator(ABLES_DECO_KEY, [registry], getValue);
+// }
+
+// /**
+//  * @param andAbles - 多个 able，条件且
+//  * @param orAbles - 多个 able，条件或
+//  */
+// export function observeAbles(andAbles: AbleRegistry[], orAbles: AbleRegistry[] = []): any {
+//   const getValue: RegistryValueGetter<Entity[]> = (target: any) =>
+//     target.observeManager.getEntitiesByAbles(andAbles, orAbles);
+//   return createRegistryDecorator(ABLES_DECO_KEY, andAbles.concat(orAbles), getValue);
+// }
+export function observeEntity(registry: EntityRegistry): any {
+  const getValue: RegistryValueGetter<Entity> = (target: any) =>
+    target.observeManager.get(registry)!;
+  return createRegistryDecorator(ENTITIES_DECO_KEY, registry, getValue);
+}
+
+/**
+ * 监听 entity 变化
+ * @param registry
+ */
+export function observeEntities(registry: EntityRegistry): any {
+  const getValue: RegistryValueGetter<Entity[]> = (target: any) =>
+    target.observeManager.getEntities(registry);
+  return createRegistryDecorator(ENTITIES_DECO_KEY, registry, getValue);
+}
+
+// export function payload(payloadKey: string | symbol): any {
+//   const check = (target: any, method: string) => {
+//     if (method !== 'payload')
+//       throw new Error(`@payload() should be used by "payload" method but get "${method}".`);
+//   };
+//   // @ts-ignore
+//   return createRegistryDecorator(PAYLOAD_DECO_KEY, payloadKey, undefined, check);
+// }
+
+// export function params(...registries: EntityDataRegistry[]): any {
+//   const check = (target: any, method: string) => {
+//     if (method !== 'handle')
+//       throw new Error(`@params() should be used by "handle" method but get "${method}".`);
+//   };
+//   // @ts-ignore
+//   return createRegistryDecorator(HANDLE_DECO_KEY, registries, undefined, check);
+// }
+
+/**
+ * 监听 entity 对应的 data 数据变化
+ *
+ * @param entityRegistry
+ * @param dataRegistry
+ */
+export function observeEntityDatas(
+  entityRegistry: EntityRegistry,
+  dataRegistry: EntityDataRegistry,
+): any {
+  const getValue: RegistryValueGetter<Entity[]> = (target: any) =>
+    target.observeManager.getEntityDatas(entityRegistry, dataRegistry);
+  return createRegistryDecorator(
+    ENTITIES_BY_DATA_DECO_KEY,
+    { entity: entityRegistry, data: dataRegistry },
+    getValue,
+  );
+}

package/src/common/playground-schedule.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { throttle } from 'lodash-es';
+import { type Disposable } from '@flowgram-vue/utils';
+
+// TODO 先用 throttle 替代
+export class PlaygroundSchedule implements Disposable {
+  protected execMap: Map<any, () => void> = new Map();
+
+  push(key: any, fn: () => void): void {
+    const { execMap } = this;
+    if (process.env.NODE_ENV === 'test') {
+      fn();
+      return;
+    }
+    let schedule = execMap.get(key);
+    if (!schedule) {
+      schedule = throttle(fn, 0) as () => void;
+      execMap.set(key, schedule);
+    }
+    schedule();
+  }
+
+  dispose(): void {
+    this.execMap.clear();
+  }
+}

package/src/common/protect-wheel-area.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * 保护区域不被画布劫持滚动事件
+ */
+export const ProtectWheelArea = Symbol('ProtectWheelArea');
+
+export type ProtectWheelArea = (dom: Element) => boolean;

package/src/common/schema/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './node';
+export * from './origin-schema';
+export * from './opacity-schema';
+export * from './position-schema';
+export * from './rotation-schema';
+export * from './scale-schema';
+export * from './size-schema';
+export * from './skew-schema';
+export * from './transform-schema';

package/src/common/schema/node.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type TransformSchema } from './transform-schema';
+
+export interface NodeSchema {
+  id: string;
+  name?: string;
+}
+
+export interface TransformNodeSchema extends NodeSchema {
+  transform: TransformSchema;
+}

package/src/common/schema/opacity-schema.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { OpacitySchemaDecoration, Schema } from '@flowgram-vue/utils';
+import type { OpacitySchema } from '@flowgram-vue/utils';
+
+import { EntityData } from '../entity-data';
+
+export { OpacitySchema, OpacitySchemaDecoration };
+
+export class OpacityData extends EntityData<OpacitySchema> {
+  static type = 'OpacityData';
+
+  getDefaultData(): OpacitySchema {
+    return Schema.createDefault<OpacitySchema>(OpacitySchemaDecoration);
+  }
+}

package/src/common/schema/origin-schema.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { OriginSchemaDecoration, Schema } from '@flowgram-vue/utils';
+import type { OriginSchema } from '@flowgram-vue/utils';
+
+import { EntityData } from '../entity-data';
+
+export { OriginSchema, OriginSchemaDecoration };
+
+export class OriginData extends EntityData<OriginSchema> implements OriginSchema {
+  static type = 'OriginData';
+
+  getDefaultData(): OriginSchema {
+    return Schema.createDefault<OriginSchema>(OriginSchemaDecoration);
+  }
+
+  get x(): number {
+    return this.data.x;
+  }
+
+  get y(): number {
+    return this.data.y;
+  }
+
+  set x(x: number) {
+    this.update('x', x);
+  }
+
+  set y(y: number) {
+    this.update('y', y);
+  }
+}

package/src/common/schema/position-schema.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { PositionSchemaDecoration, Schema } from '@flowgram-vue/utils';
+import type { PositionSchema } from '@flowgram-vue/utils';
+
+import { EntityData } from '../entity-data';
+
+export { PositionSchema, PositionSchemaDecoration };
+
+export class PositionData extends EntityData<PositionSchema> implements PositionSchema {
+  static type = 'PositionData';
+
+  getDefaultData(): PositionSchema {
+    return Schema.createDefault<PositionSchema>(PositionSchemaDecoration);
+  }
+
+  get x(): number {
+    return this.data.x;
+  }
+
+  get y(): number {
+    return this.data.y;
+  }
+
+  set x(x: number) {
+    this.update('x', x);
+  }
+
+  set y(y: number) {
+    this.update('y', y);
+  }
+}

package/src/common/schema/rotation-schema.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { RotationSchemaDecoration, Schema } from '@flowgram-vue/utils';
+import type { RotationSchema } from '@flowgram-vue/utils';
+
+import { EntityData } from '../entity-data';
+
+export { RotationSchema, RotationSchemaDecoration };
+
+export class RotationData extends EntityData<RotationSchema> {
+  static type = 'RotationData';
+
+  getDefaultData(): RotationSchema {
+    return Schema.createDefault<RotationSchema>(RotationSchemaDecoration);
+  }
+}

package/src/common/schema/scale-schema.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ScaleSchemaDecoration, Schema } from '@flowgram-vue/utils';
+import type { ScaleSchema } from '@flowgram-vue/utils';
+
+import { EntityData } from '../entity-data';
+
+export { ScaleSchema, ScaleSchemaDecoration };
+
+export class ScaleData extends EntityData<ScaleSchema> implements ScaleSchema {
+  static type = 'ScaleData';
+
+  getDefaultData(): ScaleSchema {
+    return Schema.createDefault(ScaleSchemaDecoration);
+  }
+
+  get x(): number {
+    return this.data.x;
+  }
+
+  get y(): number {
+    return this.data.y;
+  }
+
+  set x(x: number) {
+    this.update('x', x);
+  }
+
+  set y(y: number) {
+    this.update('y', y);
+  }
+}

package/src/common/schema/size-schema.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { SizeSchema, SizeSchemaDecoration, Schema } from '@flowgram-vue/utils';
+
+import { EntityData } from '../entity-data';
+
+export { SizeSchema, SizeSchemaDecoration };
+
+export class SizeData extends EntityData<SizeSchema> implements SizeSchema {
+  static type = 'SizeData';
+
+  getDefaultData(): SizeSchema {
+    return Schema.createDefault<SizeSchema>(SizeSchemaDecoration);
+  }
+
+  get width(): number {
+    return this.data.width;
+  }
+
+  get height(): number {
+    return this.data.height;
+  }
+
+  set width(width: number) {
+    this.update('width', width);
+  }
+
+  set height(height: number) {
+    this.update('height', height);
+  }
+
+  get locked(): boolean {
+    return !!this.data.locked;
+  }
+
+  set locked(locked: boolean) {
+    this.update('locked', locked);
+  }
+}

package/src/common/schema/skew-schema.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { SkewSchemaDecoration, Schema } from '@flowgram-vue/utils';
+import type { SkewSchema } from '@flowgram-vue/utils';
+
+import { EntityData } from '../entity-data';
+
+export { SkewSchema, SkewSchemaDecoration };
+
+export class SkewData extends EntityData<SkewSchema> implements SkewSchema {
+  static type = 'SkewData';
+
+  getDefaultData(): SkewSchema {
+    return Schema.createDefault<SkewSchema>(SkewSchemaDecoration);
+  }
+
+  get x(): number {
+    return this.data.x;
+  }
+
+  get y(): number {
+    return this.data.y;
+  }
+
+  set x(x: number) {
+    this.update('x', x);
+  }
+
+  set y(y: number) {
+    this.update('y', y);
+  }
+}