@vvfx/sdk 0.2.6 → 0.2.7

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: TODO
  * Author: Ant Group CO., Ltd.
  * Contributors: 赤芍,何即,不择,意绮
- * Version: v0.2.6
+ * Version: v0.2.7
  */
 
 import { spec, math, generateGUID, SpriteComponent, TextComponent, assertExist as assertExist$1, version, VFXItem, PrecompositionManager, AssetManager, FrameComponent, glContext, CompositionComponent, Texture as Texture$1, getStandardJSON, EffectComponent, Geometry as Geometry$1, Material, Player, EventEmitter as EventEmitter$1 } from '@galacean/effects';
@@ -69952,6 +69952,442 @@ function syncElementStackOrder(_container, elements) {
     });
 }
 
+var CAPTURE_TIMEOUT = 5000;
+var MOTION_PROPERTIES = /^(animation|transition)(?:-|$)/i;
+var RUNTIME_SELECTOR = [
+    '[data-hm-stream-runtime]',
+    '[data-vvfx-card-html-auto-height]',
+    '[data-vvfx-card-html-anchor-navigation-guard]',
+    'script',
+    'noscript',
+    'template'
+].join(',');
+function captureViewportSize(logicalSize, _displayedBounds) {
+    return {
+        width: Math.max(1, logicalSize.width),
+        height: Math.max(1, logicalSize.height)
+    };
+}
+function serializeComputedCaptureStyle(style) {
+    var declarations = [];
+    for(var _iterator = _create_for_of_iterator_helper_loose(style), _step; !(_step = _iterator()).done;){
+        var property = _step.value;
+        if (MOTION_PROPERTIES.test(property)) {
+            continue;
+        }
+        var value = style.getPropertyValue(property);
+        if (!value) {
+            continue;
+        }
+        var priority = style.getPropertyPriority(property);
+        declarations.push(property + ":" + value + (priority ? "!" + priority : ''));
+    }
+    declarations.push('animation:none!important', 'transition:none!important');
+    return declarations.join(';');
+}
+function createHTMLCaptureReplica(ownerDocument, html, logicalSize) {
+    return _async_to_generator(function() {
+        var size, iframe, loaded, sourceDocument, replica;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    size = captureViewportSize(logicalSize);
+                    iframe = ownerDocument.createElement('iframe');
+                    Object.assign(iframe.style, {
+                        position: 'fixed',
+                        left: '-100000px',
+                        top: '0',
+                        width: "" + size.width + "px",
+                        height: "" + size.height + "px",
+                        border: '0',
+                        pointerEvents: 'none',
+                        opacity: '1',
+                        zIndex: '-1'
+                    });
+                    iframe.srcdoc = html;
+                    loaded = waitForNextLoad(iframe);
+                    ownerDocument.body.appendChild(iframe);
+                    return [
+                        4,
+                        withCaptureTimeout(loaded)
+                    ];
+                case 1:
+                    _state.sent();
+                    sourceDocument = iframe.contentDocument;
+                    if (!(sourceDocument == null ? void 0 : sourceDocument.documentElement) || !sourceDocument.body) {
+                        iframe.remove();
+                        return [
+                            2,
+                            undefined
+                        ];
+                    }
+                    return [
+                        4,
+                        createHTMLCaptureReplicaFromDocument(ownerDocument, sourceDocument, size)
+                    ];
+                case 2:
+                    replica = _state.sent();
+                    if (!replica) {
+                        iframe.remove();
+                        return [
+                            2,
+                            undefined
+                        ];
+                    }
+                    return [
+                        2,
+                        {
+                            target: replica.target,
+                            cleanup: function cleanup() {
+                                replica.cleanup();
+                                iframe.remove();
+                            }
+                        }
+                    ];
+            }
+        });
+    })();
+}
+function createHTMLCaptureReplicaFromDocument(ownerDocument, sourceDocument, logicalSize) {
+    return _async_to_generator(function() {
+        var target;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    if (!sourceDocument.documentElement || !sourceDocument.body || !sourceDocument.defaultView) {
+                        return [
+                            2,
+                            undefined
+                        ];
+                    }
+                    return [
+                        4,
+                        withCaptureTimeout(waitForCaptureReady(sourceDocument))
+                    ];
+                case 1:
+                    _state.sent();
+                    target = createComputedCaptureTarget(ownerDocument, sourceDocument, captureViewportSize(logicalSize));
+                    return [
+                        2,
+                        {
+                            target: target,
+                            cleanup: function cleanup() {
+                                target.remove();
+                            }
+                        }
+                    ];
+            }
+        });
+    })();
+}
+function createComputedCaptureTarget(ownerDocument, sourceDocument, size) {
+    var sourceWindow = sourceDocument.defaultView;
+    if (!sourceWindow) {
+        throw new Error('HTML capture replica has no window');
+    }
+    var frame = ownerDocument.createElement('div');
+    frame.setAttribute('data-vvfx-html-capture-replica', 'true');
+    frame.style.cssText = serializeComputedCaptureStyle(sourceWindow.getComputedStyle(sourceDocument.documentElement));
+    Object.assign(frame.style, {
+        position: 'fixed',
+        left: '-100000px',
+        top: '0',
+        width: "" + size.width + "px",
+        height: "" + size.height + "px",
+        overflow: 'hidden',
+        pointerEvents: 'none',
+        opacity: '1',
+        zIndex: '-1',
+        transform: 'none'
+    });
+    appendDocumentFontSurface(frame, sourceDocument, ownerDocument);
+    var sourceBody = sourceDocument.body;
+    var bodyClone = sourceBody.cloneNode(true);
+    bodyClone.querySelectorAll(RUNTIME_SELECTOR).forEach(function(node) {
+        node.remove();
+    });
+    if (bodyClone.matches(RUNTIME_SELECTOR)) {
+        bodyClone.replaceChildren();
+    }
+    frame.appendChild(bodyClone);
+    ownerDocument.body.appendChild(frame);
+    var sources = [].concat([
+        sourceBody
+    ], Array.from(sourceBody.querySelectorAll('*'))).filter(isStylableElement).filter(function(node) {
+        return !node.matches(RUNTIME_SELECTOR) && !node.closest(RUNTIME_SELECTOR);
+    });
+    var clones = [].concat([
+        bodyClone
+    ], Array.from(bodyClone.querySelectorAll('*'))).filter(isStylableElement).filter(function(node) {
+        return !node.matches(RUNTIME_SELECTOR) && !node.closest(RUNTIME_SELECTOR);
+    });
+    var pseudoRules = [];
+    sources.forEach(function(source, index) {
+        var clone = clones[index];
+        if (!clone) {
+            return;
+        }
+        clone.style.cssText = serializeComputedCaptureStyle(sourceWindow.getComputedStyle(source));
+        freezeViewportPosition(source, clone, sourceWindow);
+        preserveLiveElementState(source, clone, ownerDocument);
+        appendPseudoRule(source, clone, sourceWindow, pseudoRules, index);
+    });
+    if (pseudoRules.length) {
+        var style = ownerDocument.createElement('style');
+        style.setAttribute('data-vvfx-html-capture-pseudo', 'true');
+        style.textContent = pseudoRules.join('\n');
+        frame.prepend(style);
+    }
+    return frame;
+}
+function appendDocumentFontSurface(frame, sourceDocument, ownerDocument) {
+    var _sourceDocument_defaultView;
+    var fontRules = [];
+    var SourceCSSFontFaceRule = (_sourceDocument_defaultView = sourceDocument.defaultView) == null ? void 0 : _sourceDocument_defaultView.CSSFontFaceRule;
+    Array.from(sourceDocument.styleSheets).forEach(function(sheet) {
+        try {
+            Array.from(sheet.cssRules).forEach(function(rule) {
+                if (SourceCSSFontFaceRule && _instanceof(rule, SourceCSSFontFaceRule)) {
+                    fontRules.push(rule.cssText);
+                }
+            });
+        } catch (unused) {
+        // Cross-origin font stylesheets are already loaded in the replica but cannot be read.
+        }
+    });
+    if (!fontRules.length) {
+        return;
+    }
+    var style = ownerDocument.createElement('style');
+    style.setAttribute('data-vvfx-html-capture-fonts', 'true');
+    style.textContent = fontRules.join('\n');
+    frame.appendChild(style);
+}
+function isStylableElement(element) {
+    return 'style' in element;
+}
+function freezeViewportPosition(source, clone, sourceWindow) {
+    if (sourceWindow.getComputedStyle(source).position !== 'fixed') {
+        return;
+    }
+    var rect = source.getBoundingClientRect();
+    Object.assign(clone.style, {
+        position: 'absolute',
+        left: "" + rect.left + "px",
+        top: "" + rect.top + "px",
+        right: 'auto',
+        bottom: 'auto',
+        width: "" + rect.width + "px",
+        height: "" + rect.height + "px"
+    });
+}
+function preserveLiveElementState(source, clone, ownerDocument) {
+    if (_instanceof(source, source.ownerDocument.defaultView.HTMLImageElement) && _instanceof(clone, ownerDocument.defaultView.HTMLImageElement)) {
+        clone.src = source.currentSrc || source.src;
+    }
+    if (_instanceof(source, source.ownerDocument.defaultView.HTMLInputElement) && _instanceof(clone, ownerDocument.defaultView.HTMLInputElement)) {
+        clone.value = source.value;
+        clone.checked = source.checked;
+    }
+    if (_instanceof(source, source.ownerDocument.defaultView.HTMLTextAreaElement) && _instanceof(clone, ownerDocument.defaultView.HTMLTextAreaElement)) {
+        clone.value = source.value;
+        clone.textContent = source.value;
+    }
+    if (_instanceof(source, source.ownerDocument.defaultView.HTMLCanvasElement) && _instanceof(clone, ownerDocument.defaultView.HTMLCanvasElement)) {
+        clone.width = source.width;
+        clone.height = source.height;
+        try {
+            var _clone_getContext;
+            (_clone_getContext = clone.getContext('2d')) == null ? void 0 : _clone_getContext.drawImage(source, 0, 0);
+        } catch (unused) {
+        // Tainted canvases remain empty; snapdom cannot legally read them either.
+        }
+    }
+}
+function appendPseudoRule(source, clone, sourceWindow, rules, index) {
+    var attribute = "capture-" + index;
+    clone.setAttribute('data-vvfx-capture-node', attribute);
+    [
+        '::before',
+        '::after'
+    ].forEach(function(pseudo) {
+        var style = sourceWindow.getComputedStyle(source, pseudo);
+        if (!style.content || style.content === 'none' || style.content === 'normal') {
+            return;
+        }
+        rules.push('[data-vvfx-capture-node="' + attribute + '"]' + pseudo + "{" + serializeComputedCaptureStyle(style) + "}");
+    });
+}
+function waitForCaptureReady(document) {
+    return _async_to_generator(function() {
+        var _document_fonts;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    return [
+                        4,
+                        (_document_fonts = document.fonts) == null ? void 0 : _document_fonts.ready
+                    ];
+                case 1:
+                    _state.sent();
+                    return [
+                        4,
+                        Promise.all(Array.from(document.images).map(function(image) {
+                            return _async_to_generator(function() {
+                                return _ts_generator(this, function(_state) {
+                                    switch(_state.label){
+                                        case 0:
+                                            _state.trys.push([
+                                                0,
+                                                4,
+                                                ,
+                                                5
+                                            ]);
+                                            if (!!image.complete) return [
+                                                3,
+                                                2
+                                            ];
+                                            return [
+                                                4,
+                                                new Promise(function(resolve) {
+                                                    image.addEventListener('load', function() {
+                                                        resolve();
+                                                    }, {
+                                                        once: true
+                                                    });
+                                                    image.addEventListener('error', function() {
+                                                        resolve();
+                                                    }, {
+                                                        once: true
+                                                    });
+                                                })
+                                            ];
+                                        case 1:
+                                            _state.sent();
+                                            _state.label = 2;
+                                        case 2:
+                                            return [
+                                                4,
+                                                image.decode == null ? void 0 : image.decode.call(image)
+                                            ];
+                                        case 3:
+                                            _state.sent();
+                                            return [
+                                                3,
+                                                5
+                                            ];
+                                        case 4:
+                                            _state.sent();
+                                            return [
+                                                3,
+                                                5
+                                            ];
+                                        case 5:
+                                            return [
+                                                2
+                                            ];
+                                    }
+                                });
+                            })();
+                        }))
+                    ];
+                case 2:
+                    _state.sent();
+                    return [
+                        4,
+                        waitForStableLayout(document)
+                    ];
+                case 3:
+                    _state.sent();
+                    return [
+                        2
+                    ];
+            }
+        });
+    })();
+}
+function waitForStableLayout(document) {
+    return _async_to_generator(function() {
+        var view, startedAt, previous, stableFrames, _ref, _ref1, _document_body, _document_body1, current;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    view = document.defaultView;
+                    if (!view) {
+                        return [
+                            2
+                        ];
+                    }
+                    startedAt = performance.now();
+                    previous = '';
+                    stableFrames = 0;
+                    _state.label = 1;
+                case 1:
+                    if (!(performance.now() - startedAt < CAPTURE_TIMEOUT && stableFrames < 3)) return [
+                        3,
+                        3
+                    ];
+                    return [
+                        4,
+                        new Promise(function(resolve) {
+                            return view.requestAnimationFrame(function() {
+                                resolve();
+                            });
+                        })
+                    ];
+                case 2:
+                    _state.sent();
+                    current = [
+                        document.documentElement.scrollWidth,
+                        document.documentElement.scrollHeight,
+                        (_ref = (_document_body = document.body) == null ? void 0 : _document_body.scrollWidth) != null ? _ref : 0,
+                        (_ref1 = (_document_body1 = document.body) == null ? void 0 : _document_body1.scrollHeight) != null ? _ref1 : 0,
+                        document.styleSheets.length,
+                        document.querySelectorAll('style').length
+                    ].join(':');
+                    stableFrames = current === previous ? stableFrames + 1 : 0;
+                    previous = current;
+                    return [
+                        3,
+                        1
+                    ];
+                case 3:
+                    return [
+                        2
+                    ];
+            }
+        });
+    })();
+}
+function waitForNextLoad(iframe) {
+    return new Promise(function(resolve) {
+        iframe.addEventListener('load', function() {
+            resolve();
+        }, {
+            once: true
+        });
+        iframe.addEventListener('error', function() {
+            resolve();
+        }, {
+            once: true
+        });
+    });
+}
+function withCaptureTimeout(promise) {
+    return new Promise(function(resolve) {
+        var timer = globalThis.setTimeout(function() {
+            resolve(undefined);
+        }, CAPTURE_TIMEOUT);
+        promise.then(function(value) {
+            globalThis.clearTimeout(timer);
+            resolve(value);
+        }, function() {
+            globalThis.clearTimeout(timer);
+            resolve(undefined);
+        });
+    });
+}
+
 function getCardOverlayBoxStyle(box, width, height, offsetX, offsetY, _autoScale) {
     if (offsetX === void 0) offsetX = 0;
     if (offsetY === void 0) offsetY = 0;
@@ -70347,7 +70783,10 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                         _state.sent();
                         return [
                             4,
-                            createCardCaptureTarget(contentOverlay, this.state.contents.get(id))
+                            createCardCaptureTarget(contentOverlay, this.state.contents.get(id), {
+                                width: options.width,
+                                height: options.height
+                            })
                         ];
                     case 3:
                         capture = _state.sent();
@@ -70364,9 +70803,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                             I.toPng(capture.target, _extends({
                                 embedFonts: true,
                                 backgroundColor: 'transparent',
-                                dpr: (_ref = (_options_pixelRatio = options.pixelRatio) != null ? _options_pixelRatio : window.devicePixelRatio) != null ? _ref : 2,
-                                width: options.width,
-                                height: options.height
+                                dpr: (_ref = (_options_pixelRatio = options.pixelRatio) != null ? _options_pixelRatio : window.devicePixelRatio) != null ? _ref : 2
                             }, options.snapdomOptions))
                         ];
                     case 5:
@@ -71809,52 +72246,56 @@ function waitForIframeLoad(iframe) {
         });
     });
 }
-function createCardCaptureTarget(root, html) {
+function createCardCaptureTarget(root, html, logicalSize) {
     return _async_to_generator(function() {
-        var previewHTML, preview, isDirectIframe, directTarget, shellTarget, flattenedTarget;
+        var _root_querySelector, liveDocument, liveReplica, previewHTML, preview, flattenedTarget;
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
-                    previewHTML = createCardPreviewHTML(html == null ? void 0 : html.content);
-                    if (!previewHTML) return [
+                    liveDocument = (_root_querySelector = root.querySelector('iframe')) == null ? void 0 : _root_querySelector.contentDocument;
+                    if (!liveDocument) return [
                         3,
                         2
                     ];
                     return [
                         4,
-                        createPreviewDocumentCaptureTarget(root, previewHTML)
+                        createHTMLCaptureReplicaFromDocument(root.ownerDocument, liveDocument, logicalSize)
                     ];
                 case 1:
-                    preview = _state.sent();
-                    if (preview) {
-                        isDirectIframe = root.children.length === 1 && _instanceof(root.children[0], HTMLIFrameElement);
-                        if (isDirectIframe) {
-                            directTarget = createDirectCaptureTarget(root, preview.target);
-                            return [
-                                2,
-                                {
-                                    target: directTarget,
-                                    cleanup: function cleanup() {
-                                        directTarget.remove();
-                                        preview.cleanup();
-                                    }
-                                }
-                            ];
-                        }
-                        shellTarget = createShellCaptureTarget(root, preview.target);
+                    liveReplica = _state.sent();
+                    if (liveReplica) {
                         return [
                             2,
                             {
-                                target: shellTarget,
-                                cleanup: function cleanup() {
-                                    shellTarget.remove();
-                                    preview.cleanup();
-                                }
+                                target: liveReplica.target,
+                                cleanup: liveReplica.cleanup
                             }
                         ];
                     }
                     _state.label = 2;
                 case 2:
+                    previewHTML = createCardPreviewHTML(html == null ? void 0 : html.content);
+                    if (!previewHTML) return [
+                        3,
+                        4
+                    ];
+                    return [
+                        4,
+                        createHTMLCaptureReplica(root.ownerDocument, previewHTML, logicalSize)
+                    ];
+                case 3:
+                    preview = _state.sent();
+                    if (preview) {
+                        return [
+                            2,
+                            {
+                                target: preview.target,
+                                cleanup: preview.cleanup
+                            }
+                        ];
+                    }
+                    _state.label = 4;
+                case 4:
                     flattenedTarget = createFlattenedExistingIframeTarget(root);
                     return [
                         2,
@@ -71912,182 +72353,6 @@ function createCardPreviewHTML(content) {
     }
     return undefined;
 }
-function createPreviewDocumentCaptureTarget(root, html) {
-    return _async_to_generator(function() {
-        var _ref, iframe, rect, loadPromise, doc, target;
-        return _ts_generator(this, function(_state) {
-            switch(_state.label){
-                case 0:
-                    iframe = root.ownerDocument.createElement('iframe');
-                    rect = root.getBoundingClientRect();
-                    iframe.style.position = 'fixed';
-                    iframe.style.left = '-100000px';
-                    iframe.style.top = '0';
-                    iframe.style.width = "" + Math.max(1, rect.width) + "px";
-                    iframe.style.height = "" + Math.max(1, rect.height) + "px";
-                    iframe.style.border = '0';
-                    iframe.style.pointerEvents = 'none';
-                    iframe.style.opacity = '1';
-                    iframe.style.zIndex = '-1';
-                    loadPromise = waitForNextIframeLoad(iframe);
-                    root.ownerDocument.body.appendChild(iframe);
-                    iframe.srcdoc = html;
-                    return [
-                        4,
-                        loadPromise
-                    ];
-                case 1:
-                    _state.sent();
-                    return [
-                        4,
-                        waitForIframeContent(iframe)
-                    ];
-                case 2:
-                    _state.sent();
-                    doc = iframe.contentDocument;
-                    target = (_ref = doc == null ? void 0 : doc.body) != null ? _ref : doc == null ? void 0 : doc.documentElement;
-                    if (!target) {
-                        iframe.remove();
-                        return [
-                            2,
-                            undefined
-                        ];
-                    }
-                    return [
-                        4,
-                        waitForDocumentFonts(target.ownerDocument)
-                    ];
-                case 3:
-                    _state.sent();
-                    return [
-                        4,
-                        waitForImages(target)
-                    ];
-                case 4:
-                    _state.sent();
-                    return [
-                        4,
-                        nextAnimationFrame()
-                    ];
-                case 5:
-                    _state.sent();
-                    return [
-                        2,
-                        {
-                            target: target,
-                            cleanup: function cleanup() {
-                                iframe.remove();
-                            }
-                        }
-                    ];
-            }
-        });
-    })();
-}
-function waitForNextIframeLoad(iframe) {
-    return new Promise(function(resolve) {
-        iframe.addEventListener('load', function() {
-            resolve();
-        }, {
-            once: true
-        });
-        iframe.addEventListener('error', function() {
-            resolve();
-        }, {
-            once: true
-        });
-    });
-}
-function waitForIframeContent(iframe) {
-    return _async_to_generator(function() {
-        var start, doc;
-        return _ts_generator(this, function(_state) {
-            switch(_state.label){
-                case 0:
-                    start = performance.now();
-                    _state.label = 1;
-                case 1:
-                    if (!(performance.now() - start < CARD_RASTERIZE_READY_TIMEOUT)) return [
-                        3,
-                        3
-                    ];
-                    doc = iframe.contentDocument;
-                    if ((doc == null ? void 0 : doc.body) && doc.body.children.length > 0) {
-                        return [
-                            2
-                        ];
-                    }
-                    return [
-                        4,
-                        nextAnimationFrame()
-                    ];
-                case 2:
-                    _state.sent();
-                    return [
-                        3,
-                        1
-                    ];
-                case 3:
-                    return [
-                        2
-                    ];
-            }
-        });
-    })();
-}
-function createShellCaptureTarget(root, contentTarget) {
-    var clone = root.cloneNode(true);
-    clone.style.position = 'fixed';
-    clone.style.left = '-100000px';
-    clone.style.top = '0';
-    clone.style.pointerEvents = 'none';
-    clone.style.opacity = '1';
-    clone.style.zIndex = '-1';
-    var clonedIframe = clone.querySelector('iframe');
-    if (clonedIframe) {
-        clonedIframe.replaceWith(createFlattenedContent(contentTarget, getComputedStyle(clonedIframe), root.ownerDocument));
-    }
-    root.ownerDocument.body.appendChild(clone);
-    return clone;
-}
-function createDirectCaptureTarget(root, contentTarget) {
-    var rect = root.getBoundingClientRect();
-    var frame = root.ownerDocument.createElement('div');
-    frame.style.position = 'fixed';
-    frame.style.left = '-100000px';
-    frame.style.top = '0';
-    frame.style.width = "" + Math.max(1, rect.width) + "px";
-    frame.style.height = "" + Math.max(1, rect.height) + "px";
-    frame.style.pointerEvents = 'none';
-    frame.style.opacity = '1';
-    frame.style.zIndex = '-1';
-    frame.style.overflow = 'hidden';
-    var flattenedContent = createFlattenedContent(contentTarget, getComputedStyle(contentTarget), root.ownerDocument);
-    flattenedContent.style.width = '100%';
-    flattenedContent.style.height = '100%';
-    frame.appendChild(flattenedContent);
-    root.ownerDocument.body.appendChild(frame);
-    return frame;
-}
-function createFlattenedContent(target, frameStyle, ownerDocument) {
-    var replacement = ownerDocument.createElement('div');
-    Object.assign(replacement.style, {
-        width: frameStyle.width,
-        height: frameStyle.height,
-        display: frameStyle.display === 'none' ? 'block' : frameStyle.display,
-        overflow: 'hidden',
-        border: frameStyle.border,
-        boxSizing: frameStyle.boxSizing,
-        background: frameStyle.background
-    });
-    Array.from(target.ownerDocument.head.children).forEach(function(child) {
-        replacement.appendChild(child.cloneNode(true));
-    });
-    Array.from(target.children).forEach(function(child) {
-        replacement.appendChild(child.cloneNode(true));
-    });
-    return replacement;
-}
 function isMouseEventInsideRect(event, rect) {
     return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
 }