@gedit/editor-2d 0.1.92 → 0.1.98

package/src/browser/playground/playground-context.ts

@@ -2,7 +2,7 @@ import { inject, injectable } from 'inversify';
 import { RenderEngineIDEService } from '@gedit/render-engine-ide';
 import { SelectableTreeNode, TreeSelection } from '@gedit/tree';
 import { AppConfigService } from '@gedit/app-config';
-import { debounce, URI } from '@gedit/utils';
+import { debounce, Emitter, URI } from '@gedit/utils';
 import { Editor2dEntity } from './entities/editor2d-entity';
 import type { SelectionEntityManager } from './selection-entity-manager';
 import { Playground, Selectable } from '@gedit/playground';
@@ -16,10 +16,15 @@ import type { CanvasDraw } from './canvas-draw';
 
 export const Editor2dPlayGround = Symbol('Editor2dPlayGround');
 
-export type Editor2dPlayGround = Playground;
+export type Editor2dPlayGround = Playground<PlaygroundContext2d>;
 
 @injectable()
 export class PlaygroundContext2d {
+  readonly onCanvasDataChangedEmitter = new Emitter<CanvasDraw>();
+  /**
+   * 监听画布变化，可用于生成缩略图
+   */
+  readonly onCanvasDataChanged = this.onCanvasDataChangedEmitter.event;
   constructor(
     @inject(RenderEngineIDEService) readonly renderEngine: RenderEngineIDEService,
     @inject(Editor2dDocument) readonly document: Editor2dDocument,
@@ -29,12 +34,9 @@ export class PlaygroundContext2d {
     @inject(Editor2dModelOptions) readonly options: Editor2dModelOptions,
     @inject(Editor2dContextKeyService) readonly contextKeyService: Editor2dContextKeyService
   ) {
-  }
-
-  // 画布数据更新
-  onCanvasDataChanged(drawer: CanvasDraw): void {
-    if (this.options.onCanvasDataChanged) {
-      this.options.onCanvasDataChanged(drawer);
+    this.document.toDispose.push(this.onCanvasDataChangedEmitter);
+    if (options.onCanvasDataChanged) {
+      this.onCanvasDataChanged(drawer => options.onCanvasDataChanged!(drawer));
     }
   }
   /**

package/src/browser/playground/playground-contribution.ts

@@ -1,6 +1,8 @@
 import { inject, injectable } from 'inversify';
 import {
+  EditorStateConfigEntity,
   Playground,
+  PlaygroundConfig,
   PlaygroundContribution,
   PlaygroundRegistry,
   RulerConfigEntity,
@@ -12,13 +14,19 @@ import { CanvasDrawLayer } from './canvas-draw-layer';
 // import { SelectionLayer } from './selection-layer';
 import { AppConfigData, AppConfigService } from '@gedit/app-config';
 import { HistoryService } from '@gedit/history';
-import { Editor2dModelOptions } from '../model/editor2d';
+import { Editor2dModelOptions, Editor2dNode } from '../model/editor2d';
+import { ContextMenuRenderer } from '@gedit/layout';
+import { CommandService } from '@gedit/command';
+import { CommonCommands } from '@gedit/application-common/lib/browser';
 
 @injectable()
 export class PlaygroundContribution2d implements PlaygroundContribution {
   @inject(AppConfigService) readonly appConfig: AppConfigService;
   @inject(Editor2dModelOptions) readonly modelOpts: Editor2dModelOptions;
   @inject(HistoryService) readonly historyService: HistoryService;
+  @inject(PlaygroundConfig) readonly config: PlaygroundConfig;
+  @inject(CommandService) readonly commandService: CommandService;
+  @inject(ContextMenuRenderer) readonly menuRender: ContextMenuRenderer;
   registerPlayground(registry: PlaygroundRegistry): void {
     registry.registerLayer(CanvasLayer);
     registry.registerLayer(CanvasDrawLayer);
@@ -34,6 +42,7 @@ export class PlaygroundContribution2d implements PlaygroundContribution {
     // 开启缩放
     playground.zoomEnable = true;
     const rulerEntity = playground.entityManager.getEntity<RulerConfigEntity>(RulerConfigEntity);
+    const stateEntity = playground.entityManager.getEntity<EditorStateConfigEntity>(EditorStateConfigEntity);
     // 新版隐藏标尺
     if (rulerEntity) {
       rulerEntity.updateConfig({
@@ -41,6 +50,40 @@ export class PlaygroundContribution2d implements PlaygroundContribution {
         gridVisible: false,
       });
     }
+    if (stateEntity) {
+      stateEntity.registerState({
+        id: 'FULL_SCREEN',
+        icon: 'gedit-toolbar-full',
+        title: '全屏',
+        priority: 6,
+        cancelMode: 'once',
+        handle: () => {
+          this.commandService.executeCommand(CommonCommands.TOGGLE_MAXIMIZED.id);
+          setTimeout(() => {
+            playground.config.scrollPageBoundsToCenter();
+          }, 10);
+        }
+      });
+      stateEntity.registerState({
+        id: 'ADD_ELEMENT',
+        icon: 'gedit-toolbar-add',
+        title: '添加',
+        shortcut: '',
+        showTitle: true,
+        priority: 0,
+        cancelMode: 'once',
+        handle: (_: any, e: any) => {
+          const dom = e.event.target as HTMLElement;
+          const parentNode = (dom.className.match('gedit-toolbar-item') ? dom :  dom.parentNode) as HTMLDivElement;
+          const rect = parentNode.getBoundingClientRect();
+          this.menuRender.render({
+            menuPath: this.config.contextMenuPath!,
+            anchor: {x: rect.x + rect.width + 8, y: rect.y},
+            args: [Editor2dNode.GLOBAL_ADD_EVENT],
+          });
+        }
+      });
+    }
     // 模板编辑器模式
     if (this.modelOpts.isTemplate) {
       // playground.getConfigEntity<RulerConfigEntity>(RulerConfigEntity).updateConfig({

package/src/browser/playground/selection-entity-manager.tsx

@@ -12,6 +12,22 @@ import type { PlaygroundContext2d } from './playground-context';
 import { Rectangle } from '@gedit/math';
 import { GameObject } from '@gedit/render-engine';
 
+const numberToFixed4 = (data: {[key: string]: any}) => {
+  const d: any = {};
+  Object.keys(data).forEach(key => {
+    const value = data[key];
+    // 旋转不能四舍五入，不然属性面板旋转角度误差很大
+    if (typeof value === 'number' && key !== 'rotation') {
+      d[key] = parseFloat(value.toFixed(6));
+    } else if (typeof value === 'object') {
+      d[key] = numberToFixed4(value);
+    } else {
+      d[key] = value;
+    }
+  });
+  return d;
+};
+
 /**
  * 选择器实体相关逻辑
  */
@@ -95,6 +111,7 @@ export class SelectionEntityManager {
         lastTransform = newTransform;
         return;
       }; */
+      newTransform = numberToFixed4(newTransform);
       // const delta = TransformSchema.getDelta(lastTransform, newTransform);
       document.updateNode(entity.nodeId, newTransform, true);
       // lastTransform = newTransform;

package/src/browser/style/canvas-draw-layer.less

@@ -8,7 +8,7 @@
     position: absolute;
     width: 8px;
     height: 8px;
-    border-radius: 4px;
+    border-radius: var(--g-small-radius);
     margin-top: -4px;
     margin-left: -4px;
     background-color: var(--g-playground-select);

package/src/browser/style/index.less

@@ -17,7 +17,6 @@
     height: 16px;
     color: var(--g-foreground);
     background-color: var(--g-foreground);
-    margin-right: 4px;
     vertical-align: center;
     opacity: 0.7;
     background-repeat: no-repeat;

package/src/browser/utils/snapshot.ts

@@ -0,0 +1,203 @@
+import { CanvasDraw, CanvasDrawOpts } from '../playground/canvas-draw';
+import {
+  Disposable,
+  DisposableCollection,
+  DisposableImpl,
+  URI,
+  Emitter,
+  PromiseDeferred,
+  SizeSchema,
+  debounce
+} from '@gedit/utils';
+import type { Editor2dModel } from '../model/editor2d-model';
+import { Editor2dNode } from '../model';
+import { GameConfig } from '@gedit/render-engine/lib/common';
+
+export interface SnapshotOpts extends Omit<CanvasDrawOpts, 'host'> {
+  imageType?: string, // default image/webp
+  quility?: number, // default 0.8
+  limitSize?: SizeSchema // 生成的图片最大值
+  appConfig: GameConfig | (() => GameConfig),
+  engineName: string
+}
+
+export const SnapshotOptsDefault = {
+  quility: 0.8,
+  imageType: 'image/webp',
+};
+
+export interface Snapshot {
+  uri: string,
+  name?: string,
+  version?: string | number,
+  imageData: string // base64 data
+}
+
+export interface SnapshotInput {
+  uri: string,
+  name?: string,
+  version?: string | number,
+  content: Editor2dNode
+}
+
+function fixDrawerScale(drawer: CanvasDraw, limitSize: SizeSchema): void {
+  // const appConfig = drawer.getData()?.appConfig;
+  // if (!appConfig) return;
+  const currentSize = drawer.getSceneSize();
+  const scale = SizeSchema.fixSize(currentSize!, {
+    width: limitSize.width,
+    height: limitSize.height,
+  });
+  drawer.refreshScale(false, scale);
+}
+
+export async function createSnapshots(opts: SnapshotOpts, sceneDatas: SnapshotInput[]): Promise<Snapshot[]> {
+  const creator = new SnapshotCreator(opts);
+  const result = await creator.draw(sceneDatas);
+  creator.dispose();
+  return result;
+}
+
+let host: HTMLElement | undefined;
+
+export class SnapshotCreator extends DisposableImpl {
+  protected drawer: CanvasDraw;
+  protected processing?: PromiseDeferred<void>;
+  protected result: { [key: string]: Snapshot } = {};
+  protected processingData: SnapshotInput[] = [];
+  protected onUpdateEmitter = new Emitter<void>();
+  readonly onUpdate = this.onUpdateEmitter.event;
+  protected current?: SnapshotInput;
+  constructor(
+    protected readonly opts: SnapshotOpts
+  ) {
+    super();
+    if (!host) {
+      host = document.createElement('div');
+      host.className = 'gedit-editor-snapshots';
+      host.style.display = 'none';
+      document.body.appendChild(host);
+    }
+    this.drawer = new CanvasDraw({
+      host,
+      ...opts,
+    });
+    this.toDispose.pushAll([
+      this.drawer,
+      this.onUpdateEmitter,
+    ]);
+  }
+  /**
+   * 清楚缓存数据
+   */
+  clearResultCache(includeUris: string[]): void {
+    Object.keys(this.result).forEach(key => {
+      if (!includeUris.includes(key)) {
+        delete this.result[key];
+      }
+    });
+  }
+  getResultFromCache(): Snapshot[] {
+    return Object.keys(this.result).map(k => this.result[k]);
+  }
+  updateResultCache(data: Snapshot): void {
+    this.result[data.uri] = data;
+  }
+  getSnapshot(uri: string): Snapshot | undefined {
+    return this.result[uri];
+  }
+  async draw(scenes: SnapshotInput[]): Promise<Snapshot[]> {
+    this.processingData = scenes.filter(s => {
+      const result = this.result[s.uri];
+      if (result && s.version === result.version) return false;
+      if (this.current && this.current.version === s.version) return false;
+      return true;
+    });
+    await this.process();
+    return scenes.map(s => this.result[s.uri]!);
+  }
+  protected process(): Promise<void> {
+    if (this.processing) {
+      return this.processing.promise;
+    }
+    const deferred = this.processing = new PromiseDeferred<void>();
+    const { drawer } = this;
+    const dispose = new DisposableCollection();
+    dispose.push(Disposable.create(() => {
+      deferred.resolve();
+      this.current = undefined;
+      this.processing = undefined;
+    }));
+    dispose.push(
+      drawer!.onLoading(e => {
+        const {loaded, allCount, currentCount} = e;
+        if (loaded || allCount <= currentCount) {
+          const widget = drawer!.renderWidget!;
+
+          if (this.opts.limitSize) {
+            fixDrawerScale(drawer, this.opts.limitSize);
+          } else {
+            drawer.refreshScale(false, 1);
+          }
+          widget.createSnapShot(this.opts.imageType || SnapshotOptsDefault.imageType,
+            this.opts.quility || SnapshotOptsDefault.quility).then(imageData => {
+            const current = this.current;
+            if (current) {
+              this.result[current.uri] = {
+                uri: current.uri,
+                version: current.version,
+                name: current.name,
+                imageData
+              };
+              this.onUpdateEmitter.fire();
+            }
+            this.next(() => dispose.dispose());
+          });
+        }
+      }),
+    );
+    this.next(() => dispose.dispose());
+    return deferred.promise;
+  }
+  protected next(end: () => void): void {
+    const next = this.processingData.shift();
+    if (next) {
+      this.current = next;
+      this.drawer.renderWidget?.currentScene?.dispose();
+      const appConfig = typeof  this.opts.appConfig === 'function' ? this.opts.appConfig() : this.opts.appConfig;
+      let content: Editor2dNode = next.content;
+      // Empty
+      if (!content || !content.children || Object.keys(content).length === 0) {
+        content = Editor2dNode.createRootNode(new URI(next.uri));
+        const attrs = this.opts.renderEngine.getDisplayDefaultData(this.opts.engineName, content.displayType);
+        Object.assign(content, { ...attrs });
+      }
+      this.drawer.update({
+        visible: true,
+        uri: next.uri,
+        engineName: this.opts.engineName,
+        appConfig,
+        content,
+      });
+    } else {
+      end();
+    }
+  }
+  /**
+   * 监听变化，并自动刷新缩略图缓存
+   * @param model
+   * @param fn
+   * @param quility 缩略图质量
+   * @param delay 延迟生成
+   */
+  listenModelChanged(model: Editor2dModel, fn: (imageData: string) => void, quility = 0.1, delay = 1000): Disposable {
+    return model.playground.context.onCanvasDataChanged(debounce(drawer => {
+      const {content, visible} = drawer.getData() || {};
+      if (!content || drawer.loading) return;
+      if (visible) {
+        const widget = drawer.renderWidget!;
+        widget.createSnapShot(this.opts.imageType, quility).then((base64: string) => fn(base64));
+      }
+    }, delay));
+  }
+}