ex4nicegui 0.6.5__py3-none-any.whl → 0.6.7__py3-none-any.whl

ex4nicegui/__init__.py

@@ -20,7 +20,7 @@ from ex4nicegui.utils.signals import (
     is_reactive,
 )
 from ex4nicegui.utils.asyncComputed import async_computed
-
+from ex4nicegui.utils.clientScope import new_scope
 
 __all__ = [
     "async_computed",
@@ -43,6 +43,7 @@ __all__ = [
     "batch",
     "to_raw",
     "is_setter_ref",
+    "new_scope",
 ]
 
-__version__ = "0.6.5"
+__version__ = "0.6.6"

ex4nicegui/bi/elements/ui_echarts.py

@@ -2,10 +2,7 @@ from __future__ import annotations
 from typing import TYPE_CHECKING, Any, Callable, Dict, Union, cast
 from nicegui.events import UiEventArguments
 from ex4nicegui.reactive import rxui
-from ex4nicegui.reactive.EChartsComponent.ECharts import (
-    EChartsMouseEventArguments,
-    echarts,
-)
+from ex4nicegui.reactive.EChartsComponent.ECharts import echarts
 from nicegui import ui
 from ex4nicegui.bi.dataSource import DataSource
 from .models import UiResult
@@ -21,7 +18,7 @@ class EChartsResult(UiResult[echarts]):
         super().__init__(element, dataSource)
         self.chart_update = chart_update
 
-    def on_chart_click(self, handler: Callable[[EChartsMouseEventArguments], Any]):
+    def on_chart_click(self, handler: Callable[[UiEventArguments], Any]):
         return self.element.echarts_on("click", handler)
 
     def on_chart_click_blank(self, handler: Callable[[UiEventArguments], Any]):

ex4nicegui/libs/gsap/gsap.mjs

@@ -0,0 +1,6 @@
+import { gsap, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ, TweenLite, TimelineLite, TimelineMax } from "./gsap-core.js";
+import { CSSPlugin } from "./CSSPlugin.js";
+var gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap,
+    // to protect from tree shaking
+TweenMaxWithCSS = gsapWithCSS.core.Tween;
+export { gsapWithCSS as gsap, gsapWithCSS as default, CSSPlugin, TweenMaxWithCSS as TweenMax, TweenLite, TimelineMax, TimelineLite, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ };

ex4nicegui/reactive/EChartsComponent/ECharts.js

@@ -1,83 +1,89 @@
 import { convertDynamicProperties } from "../../static/utils/dynamic_properties.js";
 
+function collectMapRegisterTask() {
+  const tasks = new Map();
+
+  if (typeof window.ex4ngEchartsMapTasks !== "undefined") {
+
+    for (const [mapName, opt] of window.ex4ngEchartsMapTasks.entries()) {
+      const { src, type: mapDataType, specialAreas } = opt;
+      const registerPromise = new Promise((resolve, reject) => {
+        fetch(src)
+          .then((response) => {
+            if (mapDataType === "genJSON") {
+              return response.json();
+            }
 
-function retry(fn, options = {}) {
+            return response.text();
+          })
+          .then((data) => {
+            if (mapDataType === "svg") {
+              data = { svg: data }
+            }
 
-  options = {
-    error: 'Maximum number of tries exceeded',
-    tryMaxTimes: 5,
-    intervalMs: 800,
-    ...options
-  }
+            echarts.registerMap(mapName, data, specialAreas);
+            resolve();
+          });
 
-  let tryTimes = 0
-  let isDone = false
+      });
 
-  const doneFn = () => {
-    isDone = true
+      tasks.set(mapName, registerPromise);
+    }
   }
 
-  function callback() {
-    tryTimes += 1
-
-    if (tryTimes <= options.tryMaxTimes) {
-      fn(doneFn)
+  return tasks;
+}
 
-      if (isDone) {
-        clearInterval(task)
-      }
+function hasMapOrGeo(options) {
+  if (options) {
+    const hasMapSeries = options.series && Array.isArray(options.series) &&
+      options.series.some(seriesItem =>
+        seriesItem.type === 'map' ||
+        seriesItem.type === 'lines'
+      );
 
-    } else {
-      console.error(options.error)
-      clearInterval(task)
-    }
+    const hasGeoConfig = options.geo && (typeof options.geo === 'object' || Array.isArray(options.geo));
 
+    return hasMapSeries || hasGeoConfig;
   }
-
-  callback();
-  const task = setInterval(callback, options.intervalMs);
+  return false;
 }
 
+const mapRegisterTasks = collectMapRegisterTask();
 
 export default {
   template: "<div></div>",
-  mounted() {
+  async mounted() {
+    await this.$nextTick(); // wait for Tailwind classes to be applied
 
-    function initChart() {
-      this.chart = echarts.init(this.$el, this.theme);
+    this.chart = echarts.init(this.$el, this.theme);
 
-      if (this.options) {
-        this.update_chart();
-      } else {
-        const fn = new Function('return ' + this.code)()
-        fn(this.chart)
-        this.$emit("__update_options_from_client", this.chart.getOption())
-      }
-      this.chart.getZr().on("click", (e) => {
-        if (!e.target) {
-          this.$emit("clickBlank")
-        }
-      });
-      this.resizeObs = new ResizeObserver(this.chart.resize)
+    this.resizeObs = new ResizeObserver(this.chart.resize)
+
+    // Prevent interruption of chart animations due to resize operations.
+    // It is recommended to register the callbacks for such an event before setOption.
+    const createResizeObserver = () => {
       this.resizeObs.observe(this.$el);
-    }
+      this.chart.off("finished", createResizeObserver);
+    };
+    this.chart.on("finished", createResizeObserver);
 
-    initChart = initChart.bind(this)
-
-    retry((done) => {
-      try {
-        initChart()
-        done()
-      } catch (e) {
-        if (e instanceof TypeError && e.message === `Cannot read properties of undefined (reading 'regions')`) {
-          echarts.dispose(this.chart)
-          return
-        } else {
-          done()
-          throw e;
-        }
+    if (this.options) {
+      if (hasMapOrGeo(this.options)) {
+        await Promise.all(Array.from(mapRegisterTasks.values()));
       }
-    }, { error: 'Maximum number of retries echart init' })
+      this.update_chart();
+    } else {
+      const fn = new Function('return ' + this.code)()
+      await Promise.all(Array.from(mapRegisterTasks.values()));
+      fn(this.chart, echarts)
+      this.$emit("__update_options_from_client", this.chart.getOption())
+    }
+    this.chart.getZr().on("click", (e) => {
+      if (!e.target) {
+        this.$emit("clickBlank")
+      }
+    });
 
   },
   beforeDestroy() {
@@ -94,33 +100,10 @@ export default {
       this.chart.setOption(this.options, opts ?? { notMerge: this.chart.options?.series.length != this.options.series.length });
     },
 
-
-    echarts_on(eventName, query, callbackId) {
-
-      retry((done) => {
-        if (this.chart) {
-
-          this.chart.on(eventName, query, (e) => {
-            const eventParams = {
-              componentType: e.componentType,
-              seriesType: e.seriesType,
-              seriesIndex: e.seriesIndex,
-              seriesName: e.seriesName,
-              name: e.name,
-              dataIndex: e.dataIndex,
-              data: e.data,
-              dataType: e.dataType,
-              value: e.value,
-              color: e.color,
-            }
-
-            this.$emit('event_on', { params: eventParams, callbackId })
-          })
-
-          done()
-        }
-      }, { error: 'Maximum number of retries on echarts event' })
-
+    echarts_on(eventName, query) {
+      this.chart.on(eventName.replace(/^chart:/, ''), query, (e) => {
+        this.$emit(eventName, e);
+      });
     },
 
     run_chart_method(name, ...args) {
@@ -128,7 +111,7 @@ export default {
         name = name.slice(1);
         args = args.map((arg) => new Function("return " + arg)());
       }
-      return this.chart[name](...args);
+      return runMethod(this.chart, name, args);
     },
   },
   props: {

ex4nicegui/reactive/EChartsComponent/ECharts.py

@@ -3,70 +3,26 @@ from typing import (
     Any,
     Callable,
     Dict,
-    List,
     Optional,
     Union,
 )
-from typing_extensions import Literal
-from dataclasses import dataclass
-from nicegui.dataclasses import KWONLY_SLOTS
-from nicegui.events import (
-    handle_event,
-    UiEventArguments,
-)
+
+from nicegui.events import handle_event, UiEventArguments, GenericEventArguments
 from nicegui.element import Element
 from nicegui.awaitable_response import AwaitableResponse
-from nicegui import ui
 from pathlib import Path
 import nicegui
-import uuid
+
+from .types import (
+    _T_event_name,
+)
+from ex4nicegui.reactive.deferredTask import DeferredTask
+from .utils import get_bound_event_args, create_event_handler_args
 
 NG_ROOT = Path(nicegui.__file__).parent / "elements"
 libraries = [NG_ROOT / "lib/echarts/echarts.min.js"]
 
 
-_Chart_Click_Args = [
-    "componentType",
-    "seriesType",
-    "seriesIndex",
-    "seriesName",
-    "name",
-    "dataIndex",
-    "data",
-    "dataType",
-    "value",
-    "color",
-]
-
-
-@dataclass(**KWONLY_SLOTS)
-class EChartsMouseEventArguments(UiEventArguments):
-    componentType: str
-    seriesType: str
-    seriesIndex: int
-    seriesName: str
-    name: str
-    dataIndex: int
-    data: dict
-    dataType: Optional[str]
-    value: Any
-    color: str
-
-
-_T_echats_on_callback = Callable[[EChartsMouseEventArguments], Any]
-_T_mouse_event_name = Literal[
-    "click",
-    "dblclick",
-    "mousedown",
-    "mousemove",
-    "mouseup",
-    "mouseover",
-    "mouseout",
-    "globalout",
-    "contextmenu",
-]
-
-
 class echarts(Element, component="ECharts.js", libraries=libraries):  # type: ignore
     def __init__(
         self,
@@ -74,6 +30,7 @@ class echarts(Element, component="ECharts.js", libraries=libraries):  # type: ig
         code: Optional[str] = None,
     ) -> None:
         super().__init__()
+        self.__deferred_task = DeferredTask()
 
         if (options is None) and (bool(code) is False):
             raise ValueError("At least one of options and code must be valid.")
@@ -89,36 +46,6 @@ class echarts(Element, component="ECharts.js", libraries=libraries):  # type: ig
         self._props["options"] = options
         self._props["code"] = code
 
-        self._echarts_on_tasks: List[Callable] = []
-        self._echarts_on_callback_map: Dict[str, _T_echats_on_callback] = {}
-
-        async def on_client_connect(
-            client: nicegui.Client,
-        ) -> Any:
-            await client.connected()
-
-            for func in self._echarts_on_tasks:
-                func()
-
-            client.connect_handlers.remove(on_client_connect)  # type: ignore
-
-        ui.context.client.on_connect(on_client_connect)
-
-        def echartsOn_handler(e):
-            callbackId = e.args["callbackId"]
-            params: Dict = e.args["params"]
-            params["dataType"] = params.get("dataType")
-
-            if callbackId in self._echarts_on_callback_map:
-                event_args = EChartsMouseEventArguments(
-                    sender=e.sender, client=e.client, **params
-                )
-                handler = self._echarts_on_callback_map[callbackId]
-
-                handle_event(handler, event_args)
-
-        self.on("event_on", echartsOn_handler)
-
     def update_chart(
         self,
         merge_opts: Optional[dict] = None,
@@ -164,34 +91,24 @@ class echarts(Element, component="ECharts.js", libraries=libraries):  # type: ig
                 ),
             )
 
-        self.on(
-            "clickBlank",
-            inner_handler,
-            _Chart_Click_Args,
-        )
+        self.on("clickBlank", inner_handler)
 
     def echarts_on(
         self,
-        event_name: _T_mouse_event_name,
-        handler: _T_echats_on_callback,
+        event_name: _T_event_name,
+        handler: Callable[[UiEventArguments], None],
         query: Optional[Union[str, Dict]] = None,
     ):
-        if not ui.context.client.has_socket_connection:
+        def org_handler(e: GenericEventArguments) -> None:
+            event_args = create_event_handler_args(event_name, e)
+            handle_event(handler, event_args)
 
-            def task_func():
-                self.echarts_on(event_name, handler, query)
+        ui_event_name = f"chart:{event_name}"
+        super().on(ui_event_name, org_handler, args=get_bound_event_args(event_name))
 
-            self._echarts_on_tasks.append(task_func)
-            return
-
-        callback_id = uuid.uuid4().hex
-        self.run_method(
-            "echarts_on",
-            event_name,
-            query,
-            callback_id,
-        )
-        self._echarts_on_callback_map[callback_id] = handler
+        @self.__deferred_task.register
+        def _():
+            self.run_method("echarts_on", ui_event_name, query)
 
     def run_chart_method(
         self, name: str, *args, timeout: float = 1, check_interval: float = 0.01

ex4nicegui/reactive/EChartsComponent/events.py

@@ -0,0 +1,26 @@
+from typing import (
+    Any,
+    Optional,
+)
+from dataclasses import dataclass, fields
+from nicegui.dataclasses import KWONLY_SLOTS
+from nicegui.events import (
+    UiEventArguments,
+)
+
+
+@dataclass(**KWONLY_SLOTS)
+class EChartsMouseEventArguments(UiEventArguments):
+    componentType: str
+    seriesType: str
+    seriesIndex: int
+    seriesName: str
+    name: str
+    dataIndex: int
+    data: dict
+    dataType: Optional[str]
+    value: Any
+    color: str
+
+
+_Mouse_Event_Arguments_Fields = [f.name for f in fields(EChartsMouseEventArguments)]

ex4nicegui/reactive/EChartsComponent/types.py

@@ -0,0 +1,51 @@
+from typing import (
+    Union,
+)
+from typing_extensions import Literal
+
+
+_T_mouse_event_name = Literal[
+    "click",
+    "dblclick",
+    "mousedown",
+    "mousemove",
+    "mouseup",
+    "mouseover",
+    "mouseout",
+    "globalout",
+    "contextmenu",
+]
+
+_T_generic_event_name = Literal[
+    "highlight",
+    "downplay",
+    "selectchanged",
+    "legendselectchanged",
+    "legendselected",
+    "legendunselected",
+    "legendselectall",
+    "legendinverseselect",
+    "legendscroll",
+    "datazoom",
+    "datarangeselected",
+    "graphroam",
+    "georoam",
+    "treeroam",
+    "timelinechanged",
+    "timelineplaychanged",
+    "restore",
+    "dataviewchanged",
+    "magictypechanged",
+    "geoselectchanged",
+    "geoselected",
+    "geounselected",
+    "axisareaselected",
+    "brush",
+    "brushEnd",
+    "brushselected",
+    "globalcursortaken",
+    "rendered",
+    "finished",
+]
+
+_T_event_name = Union[_T_mouse_event_name, _T_generic_event_name]

ex4nicegui/reactive/EChartsComponent/utils.py

@@ -0,0 +1,44 @@
+from typing import List, Optional
+import typing
+from .types import _T_event_name, _T_mouse_event_name
+from .events import EChartsMouseEventArguments, _Mouse_Event_Arguments_Fields
+from nicegui.events import UiEventArguments, GenericEventArguments
+from functools import lru_cache
+
+
+@lru_cache(maxsize=1)
+def _get_mouse_event_names():
+    return set(typing.get_args(_T_mouse_event_name))
+
+
+def is_mouse_event(event_name: _T_event_name) -> bool:
+    return event_name in _get_mouse_event_names()
+
+
+def get_bound_event_args(event_name: _T_event_name) -> Optional[List[str]]:
+    if is_mouse_event(event_name):
+        return _Mouse_Event_Arguments_Fields
+
+    return None
+
+
+def create_event_handler_args(
+    event_name: _T_event_name, e: GenericEventArguments
+) -> UiEventArguments:
+    if is_mouse_event(event_name):
+        return EChartsMouseEventArguments(
+            sender=e.sender,
+            client=e.client,
+            componentType=e.args["componentType"],
+            seriesType=e.args["seriesType"],
+            seriesIndex=e.args["seriesIndex"],
+            seriesName=e.args["seriesName"],
+            name=e.args["name"],
+            dataIndex=e.args["dataIndex"],
+            data=e.args["data"],
+            dataType=e.args.get("dataType"),
+            value=e.args["value"],
+            color=e.args["color"],
+        )
+
+    return GenericEventArguments(sender=e.sender, client=e.client, args=e.args)

ex4nicegui/reactive/deferredTask.py

@@ -0,0 +1,29 @@
+from typing import Callable
+from nicegui import ui, Client as ng_client
+
+
+class DeferredTask:
+    def __init__(self):
+        self._tasks = []
+
+        async def on_client_connect(
+            client: ng_client,
+        ):
+            await client.connected()
+
+            for task in self._tasks:
+                task()
+
+            self._tasks.clear()
+
+            # Avoid events becoming ineffective due to page refresh when sharing the client.
+            if not client.shared:
+                client.connect_handlers.remove(on_client_connect)  # type: ignore
+
+        ui.context.client.on_connect(on_client_connect)
+
+    def register(self, task: Callable[..., None]):
+        if ui.context.client.has_socket_connection:
+            task()
+        else:
+            self._tasks.append(task)

ex4nicegui/reactive/officials/aggrid.py

@@ -6,11 +6,11 @@ from typing import (
     Optional,
 )
 from ex4nicegui.utils.signals import (
-    ReadonlyRef,
     is_ref,
     ref_computed,
     to_value,
     _TMaybeRef as TMaybeRef,
+    TGetterOrReadonlyRef,
 )
 from ex4nicegui.utils.apiEffect import ui_effect
 from nicegui import ui
@@ -78,13 +78,13 @@ class AggridBindableUi(BindableUi[ui.aggrid]):
         options = {"columnDefs": columnDefs, "rowData": rowData}
         return cls(options, **org_kws)
 
-    def bind_prop(self, prop: str, ref_ui: ReadonlyRef[Any]):
+    def bind_prop(self, prop: str, ref_ui: TGetterOrReadonlyRef[Any]):
         if prop == "options":
             return self.bind_options(ref_ui)
 
         return super().bind_prop(prop, ref_ui)
 
-    def bind_options(self, ref_ui: ReadonlyRef[List[Dict]]):
+    def bind_options(self, ref_ui: TGetterOrReadonlyRef[List[Dict]]):
         @ui_effect
         def _():
             ele = self.element

ex4nicegui/reactive/officials/base.py

@@ -128,6 +128,16 @@ class BindableUi(Generic[TWidget]):
         return self.element.remove(element)
 
     def bind_prop(self, prop: str, ref_ui: TGetterOrReadonlyRef[Any]):
+        """data binding is manipulating an element's property
+
+        @see - https://github.com/CrystalWindSnake/ex4nicegui/blob/main/README.en.md#bind_prop
+        @中文文档 - https://gitee.com/carson_add/ex4nicegui/tree/main/#bind_prop
+
+        Args:
+            prop (str): property name
+            ref_ui (TGetterOrReadonlyRef[Any]): a reference to the value to bind to
+
+        """
         if prop == "visible":
             return self.bind_visible(ref_ui)
 

ex4nicegui/reactive/officials/button.py

@@ -5,7 +5,7 @@ from typing import (
 )
 from ex4nicegui.reactive.utils import ParameterClassifier
 from ex4nicegui.utils.signals import (
-    ReadonlyRef,
+    TGetterOrReadonlyRef,
     _TMaybeRef as TMaybeRef,
     to_value,
 )
@@ -33,7 +33,7 @@ class ButtonBindableUi(BindableUi[ui.button], DisableableMixin):
         for key, value in pc.get_bindings().items():
             self.bind_prop(key, value)  # type: ignore
 
-    def bind_prop(self, prop: str, ref_ui: ReadonlyRef):
+    def bind_prop(self, prop: str, ref_ui: TGetterOrReadonlyRef):
         if prop == "text":
             return self.bind_text(ref_ui)
         if prop == "icon":
@@ -41,7 +41,7 @@ class ButtonBindableUi(BindableUi[ui.button], DisableableMixin):
 
         return super().bind_prop(prop, ref_ui)
 
-    def bind_text(self, ref_ui: ReadonlyRef):
+    def bind_text(self, ref_ui: TGetterOrReadonlyRef):
         @self._ui_effect
         def _():
             ele = self.element
@@ -50,7 +50,7 @@ class ButtonBindableUi(BindableUi[ui.button], DisableableMixin):
 
         return self
 
-    def bind_icon(self, ref_ui: ReadonlyRef):
+    def bind_icon(self, ref_ui: TGetterOrReadonlyRef[str]):
         @self._ui_effect
         def _():
             ele = self.element

ex4nicegui/reactive/officials/checkbox.py

@@ -7,7 +7,7 @@ from typing import (
 from ex4nicegui.reactive.utils import ParameterClassifier
 from ex4nicegui.utils.apiEffect import ui_effect
 from ex4nicegui.utils.signals import (
-    ReadonlyRef,
+    TGetterOrReadonlyRef,
     _TMaybeRef as TMaybeRef,
     to_value,
 )
@@ -44,13 +44,13 @@ class CheckboxBindableUi(BindableUi[ui.checkbox], DisableableMixin):
     def value(self):
         return self.element.value
 
-    def bind_prop(self, prop: str, ref_ui: ReadonlyRef):
+    def bind_prop(self, prop: str, ref_ui: TGetterOrReadonlyRef):
         if prop == "value":
             return self.bind_value(ref_ui)
 
         return super().bind_prop(prop, ref_ui)
 
-    def bind_value(self, ref_ui: ReadonlyRef[bool]):
+    def bind_value(self, ref_ui: TGetterOrReadonlyRef[bool]):
         @ui_effect
         def _():
             self.element.set_value(to_value(ref_ui))