optimize prefab and spine view logic, add reset camera view

editor/i18n/en/assets.js

@@ -10,6 +10,7 @@ module.exports = {
         cloneToDirectoryIllegal: 'Please limit the saved path to the current project assets path',
         preview: {
             header: 'Preview',
+            resetCameraView: 'Reset camera view',
         },
         spine: {
             skin: 'Skin',

editor/i18n/zh/assets.js

@@ -10,6 +10,7 @@ module.exports = {
         cloneToDirectoryIllegal: '保存路径请限制在当前项目 /assets 路径内',
         preview: {
             header: '预览',
+            resetCameraView: '复位摄像机视图',
         },
         spine: {
             skin: '皮肤',

editor/inspector/assets/prefab-preview.js

@@ -1,12 +1,10 @@
 'use strict';
 
+const { PreviewControl, hideElement } = require("../utils/preview");
+
 exports.template = /* html */`
 <ui-section header="i18n:ENGINE.inspector.preview.header" class="preview-section config no-padding" expand>
-    <div class="preview">
-        <div class="image">
-            <canvas class="canvas"></canvas>
-        </div>
-    </div>
+    <div class="preview"></div>
 </ui-section>
 `;
 
@@ -15,164 +13,30 @@ exports.style = /* css */`
         margin-top: 0px;
     }
     .preview { }
-    .preview > .image {
-        height: var(--inspector-footer-preview-height, 200px);
-        overflow: hidden;
-        display: flex;
-        flex: 1;
-    }
-    .preview >.image > .canvas {
-        flex: 1;
-    }
 `;
 
-
 exports.$ = {
     container: '.preview',
-    canvas: '.canvas',
-    image: '.image',
 };
 
-async function callFunction(funcName, ...args) {
-    return await Editor.Message.request('scene', 'call-preview-function', 'scene:prefab-preview', funcName, ...args);
-}
-
 const Elements = {
     preview: {
-        ready() {
-            const panel = this;
-
-            let _isPreviewDataDirty = false;
-            Object.defineProperty(panel, 'isPreviewDataDirty', {
-                get() {
-                    return _isPreviewDataDirty;
-                },
-                set(value) {
-                    if (value !== _isPreviewDataDirty) {
-                        _isPreviewDataDirty = value;
-                        value && panel.refreshPreview();
-                    }
-                },
-            });
-            panel.$.canvas.addEventListener('mousedown', async (event) => {
-                await callFunction('onMouseDown', { x: event.x, y: event.y, button: event.button });
-
-                async function mousemove(event) {
-                    await callFunction('onMouseMove', {
-                        movementX: event.movementX,
-                        movementY: event.movementY,
-                    });
-
-                    panel.isPreviewDataDirty = true;
-                }
-
-                async function mouseup(event) {
-                    await callFunction('onMouseUp', {
-                        x: event.x,
-                        y: event.y,
-                    });
-
-                    document.removeEventListener('mousemove', mousemove);
-                    document.removeEventListener('mouseup', mouseup);
-
-                    panel.isPreviewDataDirty = false;
-                }
-
-                document.addEventListener('mousemove', mousemove);
-                document.addEventListener('mouseup', mouseup);
-
-
-                panel.isPreviewDataDirty = true;
-            });
-
-            panel.$.canvas.addEventListener('wheel', async (event) => {
-                await callFunction('onMouseWheel', {
-                    wheelDeltaY: event.wheelDeltaY,
-                    wheelDeltaX: event.wheelDeltaX,
-                });
-                panel.isPreviewDataDirty = true;
-            });
-
-
-            const GlPreview = Editor._Module.require('PreviewExtends').default;
-            panel.glPreview = new GlPreview('scene:prefab-preview', 'query-prefab-preview-data');
-
-            function observer() {
-                panel.isPreviewDataDirty = true;
-            }
-
-            panel.resizeObserver = new window.ResizeObserver(observer);
-            panel.resizeObserver.observe(panel.$.image);
-            observer();
+        ready(panel) {
+            panel.preview.init();
         },
-        async update() {
-            const panel = this;
-
-            if (!panel.$.canvas) {
-                return;
-            }
-
-            await panel.glPreview.init({ width: panel.$.canvas.clientWidth, height: panel.$.canvas.clientHeight });
-            await callFunction('setPrefab', panel.asset.uuid);
-            this.isPreviewDataDirty = true;
-        },
-        close() {
-            const panel = this;
-
-            panel.resizeObserver.unobserve(panel.$.image);
+        async update(panel) {
+            await panel.preview.callPreviewFunction('setPrefab', panel.asset.uuid);
         },
+        close(panel) {},
     },
 };
 
-exports.methods = {
-    async refreshPreview() {
-        const panel = this;
-
-        // After await, the panel no longer exists
-        if (!panel.$.canvas) {
-            return;
-        }
-
-        const doDraw = async () => {
-            try {
-                const canvas = panel.$.canvas;
-                const image = panel.$.image;
-
-                const width = image.clientWidth;
-                const height = image.clientHeight;
-                if (canvas.width !== width || canvas.height !== height) {
-                    canvas.width = width;
-                    canvas.height = height;
-
-                    await panel.glPreview.initGL(canvas, { width, height });
-                    await panel.glPreview.resizeGL(width, height);
-                }
-
-                const info = await panel.glPreview.queryPreviewData({
-                    width: canvas.width,
-                    height: canvas.height,
-                });
-
-                panel.glPreview.drawGL(info);
-            } catch (e) {
-                console.warn(e);
-            }
-        };
-
-        requestAnimationFrame(async () => {
-            await doDraw();
-            panel.isPreviewDataDirty = false;
-        });
-    },
-};
+exports.methods = {};
 
 exports.ready = function() {
-    for (const prop in Elements) {
-        const element = Elements[prop];
-        if (element.ready) {
-            element.ready.call(this);
-        }
-    }
+    this.preview = new PreviewControl('scene:prefab-preview', 'query-prefab-preview-data', this.$.container);
+
+    Object.values(Elements).forEach((element) => element.ready && element.ready(this));
 };
 
 exports.update = function(assetList, metaList) {
@@ -182,25 +46,13 @@ exports.update = function(assetList, metaList) {
     this.meta = metaList[0];
 
     // 如何多选就隐藏预览
-    if (assetList.length > 1) {
-        this.$.container.style.display = 'none';
-    } else {
-        this.$.container.style.display = 'block';
-    }
+    hideElement(this.$.container, assetList.length > 1);
 
-    for (const prop in Elements) {
-        const element = Elements[prop];
-        if (element.update) {
-            element.update.call(this);
-        }
-    }
+    Object.values(Elements).forEach((element) => element.update && element.update(this));
 };
 
 exports.close = function() {
-    for (const prop in Elements) {
-        const element = Elements[prop];
-        if (element.close) {
-            element.close.call(this);
-        }
-    }
+    this.preview.close();
+
+    Object.values(Elements).forEach((element) => element.close && element.close(this));
 };

editor/inspector/assets/spine-preview.js

@@ -77,9 +77,6 @@ exports.template = /* html */`
             </div>
             <ui-scale-plate class="duration"></ui-scale-plate>    
         </div>
-        <div class="image">
-            <canvas class="canvas"></canvas>
-        </div>
     </div>
 </ui-section>
 `;
@@ -126,18 +123,6 @@ exports.style = /* css */`
                 }
             }
         }
-        & > .image {
-            height: var(--inspector-footer-preview-height, 200px);
-            overflow: hidden;
-            display: flex;
-            flex: 1;
-            position: relative;
-
-            & > .canvas {
-                position: absolute;
-                inset: 0;
-            }
-        }
     }
 }
 `;
@@ -153,8 +138,6 @@ const Properties = [...Config.CHECKBOX, ...Config.SLIDER, ...Config.OTHER, ...Co
 
 exports.$ = {
     container: '.preview',
-    canvas: '.canvas',
-    image: '.image',
 
     ...Object.fromEntries(Properties.map((key) => [key, `.${key}`])),
 
@@ -167,11 +150,8 @@ const Elements = {
             panel.preview.init();
         },
         async update(panel) {
-            if (!panel.$.canvas) { return; }
-
             const spineData = await panel.preview.callPreviewFunction('setSpine', panel.asset.uuid);
             panel.spinUpdate(panel, spineData);
-            panel.preview.doRefreshDirty();
         },
         close(panel) {
             panel.preview.callPreviewFunction('stop');
@@ -228,7 +208,6 @@ const Elements = {
             Elements.spine.updateDuration(panel, 0, Elements.spine.getDurations(panel, info));
             Elements.control.update(panel, false);
             Elements.control.updateInfo(panel, info);
-            panel.preview.doRefreshDirty();
         },
         updateDuration(panel, time, duration) {
             panel.$.duration.setConfig({
@@ -249,9 +228,7 @@ const Elements = {
 
             Config.CHECKBOX.forEach((key) => {
                 panel.$[key].addEventListener('confirm', (event) => {
-                    panel.preview.callPreviewFunction('setProperties', key, Boolean(event.target.value)).then((() => {
-                        panel.preview.doRefreshDirty();
-                    }));
+                    panel.preview.callPreviewFunction('setProperties', key, Boolean(event.target.value));
                 });
             });
 
@@ -299,7 +276,7 @@ exports.ready = function() {
 
     Editor.Message.__protected__.addBroadcastListener('scene:spine-preview-animation-time-change', this.onAnimationUpdateBind);
 
-    this.preview = new PreviewControl('scene:spine-preview', 'query-spine-preview-data', this.$.canvas, this.$.image);
+    this.preview = new PreviewControl('scene:spine-preview', 'query-spine-preview-data', this.$.container);
 
     Object.values(Elements).forEach((element) => element.ready && element.ready(this));
 };