@gedit/editor-2d 0.1.91 → 0.1.97

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

@@ -96,7 +96,22 @@ export class SelectionEntityManager {
         return;
       }; */
       // const delta = TransformSchema.getDelta(lastTransform, newTransform);
-      document.updateNode(entity.nodeId, newTransform, true);
+      const numberToFixed4 = (data: {[key: string]: any}) => {
+        const d: any = {};
+        Object.keys(data).forEach(key => {
+          const value = data[key];
+          if (typeof value === 'number') {
+            d[key] = parseFloat(value.toFixed(6));
+          } else if (typeof value === 'object') {
+            d[key] = numberToFixed4(value);
+          } else {
+            d[key] = key;
+          }
+        });
+        return d;
+      };
+
+      document.updateNode(entity.nodeId, numberToFixed4(newTransform), true);
       // lastTransform = newTransform;
     });
     // 设置控制key

package/src/browser/style/canvas-layer.css

@@ -36,5 +36,5 @@
 }
 
 .gedit-canvas-transparent {
-  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAADKADAAQAAAABAAAADAAAAAATDPpdAAAAfUlEQVQoFbVQQQ7AIAgD7Sf8/8s8+gd1s0vIptMlHkZiUGyBVmOMRwux4B2AhBDEOWflK6uqgICRYLVn3Zh9C6t+5G3CcqXVkKYPnQYCvfdSSpFaa8ejaM05N223S0QQmFJ6NeIfaN1I4JtnNmFb9L8Ergm6MWrg7jP36NIJC0BbmAiDWGoAAAAASUVORK5CYII=');
+  background-image: var(--g-mask-transparent);
 }

package/src/browser/style/index.less

@@ -3,6 +3,7 @@
 @import './canvas-draw-layer.less';
 
 :root {
+    --g-mask-transparent: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAADKADAAQAAAABAAAADAAAAAATDPpdAAAAfUlEQVQoFbVQQQ7AIAgD7Sf8/8s8+gd1s0vIptMlHkZiUGyBVmOMRwux4B2AhBDEOWflK6uqgICRYLVn3Zh9C6t+5G3CcqXVkKYPnQYCvfdSSpFaa8ejaM05N223S0QQmFJ6NeIfaN1I4JtnNmFb9L8Ergm6MWrg7jP36NIJC0BbmAiDWGoAAAAASUVORK5CYII=');;
     --g-icon-2d-origin: url('../svg/origin.svg');
     --g-icon-2d-fullscreen: url('../svg/fullscreen.svg');
     --g-icon-2d-zoomin: url('../svg/zoomin.svg');

package/src/browser/utils/snapshot.ts

@@ -0,0 +1,157 @@
+import { CanvasDraw, CanvasDrawOpts } from '../playground/canvas-draw';
+import { Disposable, DisposableCollection, DisposableImpl, Emitter, PromiseDeferred, SizeSchema } from '@gedit/utils';
+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,
+    ]);
+  }
+
+  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]!);
+  }
+  getResult(): Snapshot[] {
+    return Object.keys(this.result).map(k => this.result[k]);
+  }
+  protected async 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;
+      this.drawer.update({
+        visible: true,
+        uri: next.uri,
+        engineName: this.opts.engineName,
+        appConfig,
+        content: next.content,
+      });
+    } else {
+      end();
+    }
+  }
+}