feffery_utils_components 0.2.0-rc10 → 0.2.0-rc11

package/feffery_utils_components/metadata.json

@@ -5944,7 +5944,7 @@
     }
   },
   "src/lib/components/FefferyDiv.react.js": {
-    "description": "",
+    "description": "\u8fdb\u9636div\u5bb9\u5668\u7ec4\u4ef6FefferyDiv",
     "displayName": "FefferyDiv",
     "methods": [],
     "props": {
@@ -6468,6 +6468,115 @@
       }
     }
   },
+  "src/lib/components/FefferyDom2Image.react.js": {
+    "description": "",
+    "displayName": "FefferyDom2Image",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u7ec4\u4ef6id"
+      },
+      "key": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u5f3a\u5236\u5237\u65b0\u7528"
+      },
+      "targetSelector": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u8bbe\u7f6e\u76ee\u6807\u5143\u7d20\u9009\u62e9\u5668\uff0c\u6bcf\u6b21\u6267\u884c\u8f6c\u6362\u64cd\u4f5c\u540e\u90fd\u4f1a\u91cd\u7f6e\u4e3a\u7a7a\u503c"
+      },
+      "scale": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "\u7cbe\u5ea6\u7f29\u653e\u6bd4\u4f8b\uff0c\u9ed8\u8ba4\u4e3a1",
+        "defaultValue": {
+          "value": "1",
+          "computed": false
+        }
+      },
+      "screenshotResult": {
+        "type": {
+          "name": "exact",
+          "value": {
+            "selector": {
+              "name": "string",
+              "description": "\u8bb0\u5f55\u672c\u6b21\u8f6c\u6362\u7ed3\u679c\u5bf9\u5e94\u7684\u9009\u62e9\u5668",
+              "required": false
+            },
+            "status": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'success'",
+                  "computed": false
+                },
+                {
+                  "value": "'failed'",
+                  "computed": false
+                }
+              ],
+              "description": "\u8bb0\u5f55\u672c\u6b21\u8f6c\u6362\u4efb\u52a1\u7684\u6267\u884c\u72b6\u6001\uff0c\u53ef\u9009\u7684\u6709'success'\u3001'failed'",
+              "required": false
+            },
+            "dataUrl": {
+              "name": "string",
+              "description": "\u82e5\u672c\u6b21\u8f6c\u6362\u6210\u529f\uff0c\u5219\u8bb0\u5f55\u8f6c\u6362\u540e\u7684\u56fe\u7247dataUrl\u4fe1\u606f",
+              "required": false
+            },
+            "timestamp": {
+              "name": "number",
+              "description": "\u5bf9\u5e94\u5f53\u524d\u4efb\u52a1\u5b8c\u6210\u7684\u65f6\u95f4\u6233",
+              "required": false
+            }
+          }
+        },
+        "required": false,
+        "description": "\u76d1\u542c\u6700\u8fd1\u4e00\u6b21\u5143\u7d20\u8f6c\u56fe\u7247\u7684\u7ed3\u679c\u6570\u636e"
+      },
+      "setProps": {
+        "type": {
+          "name": "func"
+        },
+        "required": false,
+        "description": "Dash-assigned callback that should be called to report property changes\r\nto Dash, to make them available for callbacks."
+      },
+      "loading_state": {
+        "type": {
+          "name": "shape",
+          "value": {
+            "is_loading": {
+              "name": "bool",
+              "description": "Determines if the component is loading or not",
+              "required": false
+            },
+            "prop_name": {
+              "name": "string",
+              "description": "Holds which property is loading",
+              "required": false
+            },
+            "component_name": {
+              "name": "string",
+              "description": "Holds the name of the component that is loading",
+              "required": false
+            }
+          }
+        },
+        "required": false,
+        "description": ""
+      }
+    }
+  },
   "src/lib/components/FefferyEmojiPicker.react.js": {
     "description": "",
     "displayName": "FefferyEmojiPicker",

package/feffery_utils_components/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.2.0-rc10",
+  "version": "0.2.0-rc11",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",
@@ -54,6 +54,7 @@
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "mathjax": "^3.2.2",
+    "modern-screenshot": "^4.4.38",
     "nano-css": "^5.3.5",
     "ninja-keys": "^1.1.12",
     "nprogress": "^0.2.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.2.0-rc10",
+  "version": "0.2.0-rc11",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",
@@ -54,6 +54,7 @@
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "mathjax": "^3.2.2",
+    "modern-screenshot": "^4.4.38",
     "nano-css": "^5.3.5",
     "ninja-keys": "^1.1.12",
     "nprogress": "^0.2.0",

package/src/lib/components/FefferyDiv.react.js

@@ -75,7 +75,9 @@ const scrollbarVirtualClassName = new Map(
     ]
 )
 
-// 定义进阶div容器组件FefferyDiv
+/**
+ * 进阶div容器组件FefferyDiv
+ */
 const FefferyDiv = (props) => {
     // 取得必要属性或参数
     let {

package/src/lib/components/FefferyDom2Image.react.js

@@ -0,0 +1,88 @@
+import React, { Suspense } from 'react';
+import PropTypes from 'prop-types';
+
+const LazyFefferyDom2Image = React.lazy(() => import(/* webpackChunkName: "feffery_dom2image" */ '../fragments/FefferyDom2Image.react'));
+
+const FefferyDom2Image = (props) => {
+    return (
+        <Suspense fallback={null}>
+            <LazyFefferyDom2Image {...props} />
+        </Suspense>
+    );
+}
+
+// 定义参数或属性
+FefferyDom2Image.propTypes = {
+    /**
+     * 组件id
+     */
+    id: PropTypes.string,
+
+    /**
+     * 强制刷新用
+     */
+    key: PropTypes.string,
+
+    /**
+     * 设置目标元素选择器，每次执行转换操作后都会重置为空值
+     */
+    targetSelector: PropTypes.string,
+
+    /**
+     * 精度缩放比例，默认为1
+     */
+    scale: PropTypes.number,
+
+    /**
+     * 监听最近一次元素转图片的结果数据
+     */
+    screenshotResult: PropTypes.exact({
+        /**
+         * 记录本次转换结果对应的选择器
+         */
+        selector: PropTypes.string,
+        /**
+         * 记录本次转换任务的执行状态，可选的有'success'、'failed'
+         */
+        status: PropTypes.oneOf(['success', 'failed']),
+        /**
+         * 若本次转换成功，则记录转换后的图片dataUrl信息
+         */
+        dataUrl: PropTypes.string,
+        /**
+         * 对应当前任务完成的时间戳
+         */
+        timestamp: PropTypes.number
+    }),
+
+    /**
+     * Dash-assigned callback that should be called to report property changes
+     * to Dash, to make them available for callbacks.
+     */
+    setProps: PropTypes.func,
+
+    loading_state: PropTypes.shape({
+        /**
+         * Determines if the component is loading or not
+         */
+        is_loading: PropTypes.bool,
+        /**
+         * Holds which property is loading
+         */
+        prop_name: PropTypes.string,
+        /**
+         * Holds the name of the component that is loading
+         */
+        component_name: PropTypes.string
+    })
+};
+
+// 设置默认参数
+FefferyDom2Image.defaultProps = {
+    scale: 1
+}
+
+export default FefferyDom2Image;
+
+export const propTypes = FefferyDom2Image.propTypes;
+export const defaultProps = FefferyDom2Image.defaultProps;

package/src/lib/fragments/FefferyDom2Image.react.js

@@ -0,0 +1,59 @@
+import { useAsyncEffect } from 'ahooks';
+import { domToPng } from 'modern-screenshot';
+import { propTypes, defaultProps } from '../components/FefferyDom2Image.react';
+
+/**
+ * 元素转图片组件FefferyDom2Image
+ */
+const FefferyDom2Image = (props) => {
+    const {
+        targetSelector,
+        scale,
+        setProps,
+        loading_state
+    } = props;
+
+    // 每次targetSelector更新时，异步进行目标元素转图片操作
+    useAsyncEffect(async () => {
+        if (targetSelector) {
+            // 检查目标元素是否有效
+            let target = document.querySelector(targetSelector);
+            if (target) {
+                domToPng(
+                    target,
+                    {
+                        scale: scale
+                    }
+                ).then(
+                    dataUrl => {
+                        setProps({
+                            screenshotResult: {
+                                selector: targetSelector,
+                                status: 'success',
+                                dataUrl: dataUrl,
+                                timestamp: new Date().getTime()
+                            }
+                        })
+                    }
+                )
+            } else {
+                setProps({
+                    screenshotResult: {
+                        selector: targetSelector,
+                        status: 'failed',
+                        dataUrl: null,
+                        timestamp: new Date().getTime()
+                    }
+                })
+            }
+            setProps({ targetSelector: null })
+        }
+    }, [targetSelector])
+
+    return <></>;
+}
+
+export default FefferyDom2Image;
+
+FefferyDom2Image.defaultProps = defaultProps;
+FefferyDom2Image.propTypes = propTypes;

package/src/lib/index.js

@@ -102,6 +102,7 @@ import FefferyRND from "./components/draggable/FefferyRND.react";
 import FefferySortable from "./components/sortable/FefferySortable.react";
 import FefferyAnimatedImage from "./components/FefferyAnimatedImage.react";
 import FefferyDebugGuardian from "./components/security/FefferyDebugGuardian.react";
+import FefferyDom2Image from "./components/FefferyDom2Image.react";
 import './components/styles.css';
 
 // 自定义sessionStorage事件监听
@@ -228,5 +229,6 @@ export {
     FefferyRND,
     FefferySortable,
     FefferyAnimatedImage,
-    FefferyDebugGuardian
+    FefferyDebugGuardian,
+    FefferyDom2Image
 };

package/usage.py

@@ -2,25 +2,40 @@ import dash
 import json
 from dash import html
 import feffery_utils_components as fuc
-from dash.dependencies import Input, Output, State
+from dash.dependencies import Input, Output
 
 app = dash.Dash(__name__)
 
 app.layout = html.Div(
     [
+        # 测试元素
         fuc.FefferyDiv(
-            id='div-demo',
+            '测试内容',
+            id='demo-target',
+            shadow='always-shadow-light',
             style={
-                'minHeight': 300,
-                'background': '#d9d9d9',
-                'padding': 12
+                'width': 300,
+                'height': 200,
+                'display': 'flex',
+                'justifyContent': 'center',
+                'alignItems': 'center',
+                'fontSize': 18,
+                'fontWeight': 'bold',
+                'color': 'white',
+                'background': 'linear-gradient(135deg,#17ead9,#6078ea)'
             }
         ),
-        # fuc.FefferyDebugGuardian(
-        #     strategy='debugger-then-execute-js',
-        #     # jsString='alert("禁止调试")',
-        #     jsString='document.write('')'
-        # )
+        # 测试激活元素转图片
+        html.Button(
+            '打印',
+            id='execute-screenshot'
+        ),
+        # 测试元素转图片组件
+        fuc.FefferyDom2Image(
+            id='demo-dom2image',
+            scale=2
+        ),
+        html.Div(id='demo-dom2image-output')
     ],
     style={
         'padding': '50px 50px 0 50px'
@@ -29,23 +44,34 @@ app.layout = html.Div(
 
 
 @app.callback(
-    Output('div-demo', 'children'),
-    [Input('div-demo', 'clickEvent'),
-     Input('div-demo', 'doubleClickEvent')],
+    Output('demo-dom2image', 'targetSelector'),
+    Input('execute-screenshot', 'n_clicks'),
+    prevent_initial_call=True
+)
+def demo(n_clicks):
+
+    return '#demo-target'
+
+
+@app.callback(
+    Output('demo-dom2image-output', 'children'),
+    Input('demo-dom2image', 'screenshotResult'),
     prevent_initial_call=True
 )
-def demo(clickEvent, doubleClickEvent):
-
-    return html.Pre(
-        json.dumps(
-            dict(
-                clickEvent=clickEvent,
-                doubleClickEvent=doubleClickEvent
-            ),
-            indent=4,
-            ensure_ascii=False
+def update_result(screenshotResult):
+
+    return [
+        html.Pre(
+            json.dumps(
+                screenshotResult,
+                ensure_ascii=False,
+                indent=4
+            )
+        ),
+        html.Img(
+            src=screenshotResult['dataUrl']
         )
-    )
+    ]
 
 
 if __name__ == '__main__':