my-openlayer 2.4.12 → 2.5.1

package/README.md

@@ -1,89 +1,89 @@
-# my-openlayer
-
-my-openlayer 是一个基于 [OpenLayers](https://openlayers.org/) 的现代地图组件库，专为 Web GIS 应用开发者设计。提供完整的 TypeScript 支持、模块化的类型定义、强大的错误处理和事件管理系统，支持天地图底图加载、要素绘制、图层管理、事件监听等丰富功能，极大提升地图开发效率。
-
-[![npm version](https://img.shields.io/npm/v/my-openlayer.svg)](https://www.npmjs.com/package/my-openlayer)
-[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-
----
-
-## 项目概述
-
-- **项目名称**：`my-openlayer`
-- **用途**：基于 OpenLayers 的 TypeScript 地图组件库，提供点/线/面要素、底图切换、热力图、事件与配置管理等能力。
-- **目标用户**：Web GIS 开发者、可视化工程师、前端开发者
-
-## 功能亮点
-
-- **🗺️ 底图管理 (MapBaseLayers)**
-  - 支持天地图矢量、影像、地形底图切换
-  - 动态切换底图与注记图层管理
-  - 地图裁剪与自定义范围显示
-  - 支持 GeoServer WMS 图层
-
+# my-openlayer
+
+my-openlayer 是一个基于 [OpenLayers](https://openlayers.org/) 的现代地图组件库，专为 Web GIS 应用开发者设计。提供完整的 TypeScript 支持、模块化的类型定义、强大的错误处理和事件管理系统，支持天地图底图加载、要素绘制、图层管理、事件监听等丰富功能，极大提升地图开发效率。
+
+[![npm version](https://img.shields.io/npm/v/my-openlayer.svg)](https://www.npmjs.com/package/my-openlayer)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+---
+
+## 项目概述
+
+- **项目名称**：`my-openlayer`
+- **用途**：基于 OpenLayers 的 TypeScript 地图组件库，提供点/线/面要素、底图切换、热力图、事件与配置管理等能力。
+- **目标用户**：Web GIS 开发者、可视化工程师、前端开发者
+
+## 功能亮点
+
+- **🗺️ 底图管理 (MapBaseLayers)**
+  - 支持天地图矢量、影像、地形底图切换
+  - 动态切换底图与注记图层管理
+  - 地图裁剪与自定义范围显示
+  - 支持 GeoServer WMS 图层
+
 - **📍 要素操作**
   - **点位管理 (Point)**：点位标注（自定义图标、聚合、DOM 闪烁、高性能矢量闪烁）
-  - **线要素绘制 (Line)**：线要素绘制（虚线、样式自定义）
-  - **面要素 (Polygon)**：面要素绘制、分区高亮、遮罩层
-  - **Vue组件支持 (VueTemplatePoint)**：支持将 Vue 组件作为地图点位渲染
-  - **河流图层 (RiverLayerManager)**：支持分级显示的河流图层管理
-
-- **🛠️ 地图工具**
-  - **测量工具 (MeasureHandler)**：距离和面积测量
-  - **要素选择 (SelectHandler)**：支持点击、悬停、多选等交互选择
-  - **地图工具 (MapTools)**：图层管理、定位、视图自适应
-  - **事件管理 (EventManager)**：统一的地图事件监听与管理
-
-- **⚡ 高级特性**
-  - **TypeScript 完全支持**：提供完整的类型定义
-  - **错误处理 (ErrorHandler)**：统一的错误捕获与日志
-  - **配置管理 (ConfigManager)**：集中管理默认配置
-  - **坐标系支持**：内置 CGCS2000 坐标系支持
-
-## 安装
-
-```bash
-npm install my-openlayer
-# 或
-yarn add my-openlayer
-# 或
-pnpm add my-openlayer
-```
-
-### 依赖要求
-
-- **Node.js**: >= 18
-- **OpenLayers**: ^10.6.1
-- **proj4**: ^2.7.5
-- **@turf/turf**: ^7.2.0
-
-## 快速上手
-
-### 1. 初始化地图
-
-```typescript
-import MyOl, { MapInitType } from 'my-openlayer';
-
-const mapConfig: MapInitType = {
-  center: [119.81, 29.969],
-  zoom: 10,
-  token: import.meta.env.VITE_TIANDITU_TOKEN, // 天地图 Token
-  annotation: true
-};
-
-const map = new MyOl('map-container', mapConfig);
-```
-
-### 2. 使用功能模块
-
-```typescript
-// 获取模块实例
-const point = map.getPoint();
-const line = map.getLine();
-const polygon = map.getPolygon();
-
-// 添加点位
+  - **线要素绘制 (Line)**：支持静态线、流光线、流动线图标动画，详见 [Line 动画文档](docs/Line.md#流动线--动态图标线)
+  - **面要素 (Polygon)**：面要素绘制、分区高亮、遮罩层
+  - **Vue组件支持 (VueTemplatePoint)**：支持将 Vue 组件作为地图点位渲染
+  - **河流图层 (RiverLayerManager)**：支持分级显示的河流图层管理
+
+- **🛠️ 地图工具**
+  - **测量工具 (MeasureHandler)**：距离和面积测量
+  - **要素选择 (SelectHandler)**：支持点击、悬停、多选等交互选择
+  - **地图工具 (MapTools)**：图层管理、定位、视图自适应
+  - **事件管理 (EventManager)**：统一的地图事件监听与管理
+
+- **⚡ 高级特性**
+  - **TypeScript 完全支持**：提供完整的类型定义
+  - **错误处理 (ErrorHandler)**：统一的错误捕获与日志
+  - **配置管理 (ConfigManager)**：集中管理默认配置
+  - **坐标系支持**：内置 CGCS2000 坐标系支持
+
+## 安装
+
+```bash
+npm install my-openlayer
+# 或
+yarn add my-openlayer
+# 或
+pnpm add my-openlayer
+```
+
+### 依赖要求
+
+- **Node.js**: >= 18
+- **OpenLayers**: ^10.6.1
+- **proj4**: ^2.7.5
+- **@turf/turf**: ^7.2.0
+
+## 快速上手
+
+### 1. 初始化地图
+
+```typescript
+import MyOl, { MapInitType } from 'my-openlayer';
+
+const mapConfig: MapInitType = {
+  center: [119.81, 29.969],
+  zoom: 10,
+  token: import.meta.env.VITE_TIANDITU_TOKEN, // 天地图 Token
+  annotation: true
+};
+
+const map = new MyOl('map-container', mapConfig);
+```
+
+### 2. 使用功能模块
+
+```typescript
+// 获取模块实例
+const point = map.getPoint();
+const line = map.getLine();
+const polygon = map.getPolygon();
+
+// 添加点位
 point.addPoint([{ lgtd: 119.81, lttd: 29.969, name: '示例点' }], {
   layerName: 'example-point',
   img: 'marker.png'
@@ -124,68 +124,94 @@ pulseLayer?.stop();
 pulseLayer?.start();
 pulseLayer?.remove();
 ```
-
-## 文档索引
-
-为了提供更详细的说明，我们将文档拆分为独立的模块文件：
-
-### 核心类库
-- **[MyOl](docs/MyOl.md)**: 地图入口类，负责初始化和模块访问。
-- **[MapBaseLayers](docs/MapBaseLayers.md)**: 底图与注记管理。
-- **[ConfigManager](docs/ConfigManager.md)**: 配置管理。
-- **[EventManager](docs/EventManager.md)**: 事件管理。
-- **[ErrorHandler](docs/ErrorHandler.md)**: 错误处理。
-
-### 要素操作
+
+### 4. 添加流动线
+
+`Line` 模块现在支持流光线与流动线图标动画，调用方式与 `Point.addPulsePointLayer()` 保持一致，返回可控 handle。
+
+```typescript
+const flow = map.getLine().addFlowLine(lineData, {
+  layerName: 'river-flow',
+  animationMode: 'icon+dash',
+  strokeColor: '#19b1ff',
+  strokeWidth: 3,
+  lineDash: [18, 12],
+  flowSymbol: {
+    src: '/symbols/boat.svg',
+    scale: 0.9,
+    color: '#19b1ff',
+    rotateWithView: true,
+    count: 2,
+    spacing: 0.2
+  }
+});
+
+flow?.pause();
+flow?.resume();
+flow?.remove();
+```
+
+## 文档索引
+
+为了提供更详细的说明，我们将文档拆分为独立的模块文件：
+
+### 核心类库
+- **[MyOl](docs/MyOl.md)**: 地图入口类，负责初始化和模块访问。
+- **[MapBaseLayers](docs/MapBaseLayers.md)**: 底图与注记管理。
+- **[ConfigManager](docs/ConfigManager.md)**: 配置管理。
+- **[EventManager](docs/EventManager.md)**: 事件管理。
+- **[ErrorHandler](docs/ErrorHandler.md)**: 错误处理。
+
+### 要素操作
 - **[Point](docs/Point.md)**: 点要素（含聚合、DOM 点位、高性能闪烁点）。
-- **[Line](docs/Line.md)**: 线要素。
-- **[Polygon](docs/Polygon.md)**: 面要素（含热力图、图片层）。
-- **[VueTemplatePoint](docs/VueTemplatePoint.md)**: Vue 组件点位。
-- **[RiverLayerManager](docs/RiverLayerManager.md)**: 河流图层管理。
-
-### 交互与工具
-- **[SelectHandler](docs/SelectHandler.md)**: 要素选择交互（支持独立样式渲染、多选隔离）。
-- **[MeasureHandler](docs/MeasureHandler.md)**: 测量工具。
-- **[MapTools](docs/MapTools.md)**: 通用地图工具。
-- **[ValidationUtils](docs/ValidationUtils.md)**: 验证工具。
-
-## 详细用法示例
-
-### 底图切换
-
-```typescript
-const baseLayers = map.getMapBaseLayers();
-baseLayers.switchBaseLayer('img_c'); // 切换到影像底图
-```
-
-### 测量工具
-
-```typescript
-import { MeasureHandler } from 'my-openlayer';
-
-// 需要传入原生的 OpenLayers map 实例
-const measure = new MeasureHandler(map.map);
-
-measure.start('LineString'); // 开始测距
-measure.end(); // 结束测量
-```
-
-> 注意：部分高级功能（如 SelectHandler）可以通过 `map.getSelectHandler()` 访问。
-
-## 贡献指南
-
-欢迎提交 Issue 或 Pull Request！
-
-1. Fork 本仓库
-2. 新建分支：`git checkout -b feature/your-feature`
-3. 提交更改：`git commit -m 'feat: 新功能描述'`
-4. 推送分支：`git push origin feature/your-feature`
-5. 提交 Pull Request
-
-## 许可证
-
-[MIT](LICENSE)
-
----
-
-**联系方式**: 2364184627@qq.com | [GitHub Issues](https://github.com/cuteyuchen/my-openlayer/issues)
+- **[Line](docs/Line.md)**: 线要素。
+- **[Polygon](docs/Polygon.md)**: 面要素（含热力图、图片层）。
+- **[VueTemplatePoint](docs/VueTemplatePoint.md)**: Vue 组件点位。
+- **[RiverLayerManager](docs/RiverLayerManager.md)**: 河流图层管理。
+
+### 交互与工具
+- **[SelectHandler](docs/SelectHandler.md)**: 要素选择交互（支持独立样式渲染、多选隔离）。
+- **[MeasureHandler](docs/MeasureHandler.md)**: 测量工具。
+- **[MapTools](docs/MapTools.md)**: 通用地图工具。
+- **[ValidationUtils](docs/ValidationUtils.md)**: 验证工具。
+
+## 详细用法示例
+
+### 底图切换
+
+```typescript
+const baseLayers = map.getMapBaseLayers();
+baseLayers.switchBaseLayer('img_c'); // 切换到影像底图
+```
+
+### 测量工具
+
+```typescript
+import { MeasureHandler } from 'my-openlayer';
+
+// 需要传入原生的 OpenLayers map 实例
+const measure = new MeasureHandler(map.map);
+
+measure.start('LineString'); // 开始测距
+measure.end(); // 结束测量
+```
+
+> 注意：部分高级功能（如 SelectHandler）可以通过 `map.getSelectHandler()` 访问。
+
+## 贡献指南
+
+欢迎提交 Issue 或 Pull Request！
+
+1. Fork 本仓库
+2. 新建分支：`git checkout -b feature/your-feature`
+3. 提交更改：`git commit -m 'feat: 新功能描述'`
+4. 推送分支：`git push origin feature/your-feature`
+5. 提交 Pull Request
+
+## 许可证
+
+[MIT](LICENSE)
+
+---
+
+**联系方式**: 2364184627@qq.com | [GitHub Issues](https://github.com/cuteyuchen/my-openlayer/issues)

package/core/line/Line.d.ts

@@ -0,0 +1,40 @@
+import Map from "ol/Map";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import type { FlowLineLayerHandle, FlowLineOptions, LineOptions, MapJSONData } from "../../types";
+/**
+ * 线要素管理类
+ * 用于在地图上添加和管理静态线与流动线要素。
+ */
+export default class Line {
+    private readonly map;
+    private readonly flowLineRegistry;
+    private readonly styleFactory;
+    constructor(map: Map);
+    /**
+     * 合并静态线默认配置。
+     */
+    private mergeDefaultOptions;
+    /**
+     * 合并流动线默认配置。
+     */
+    private mergeFlowLineOptions;
+    /**
+     * 创建静态线图层。
+     */
+    private createStaticLayer;
+    /**
+     * 注册流动线句柄。
+     */
+    private registerFlowLineHandle;
+    /**
+     * 注销流动线句柄。
+     */
+    private unregisterFlowLineHandle;
+    addLine(data: MapJSONData, options?: LineOptions): VectorLayer<VectorSource>;
+    addLineByUrl(url: string, options?: LineOptions): VectorLayer<VectorSource>;
+    removeLineLayer(layerName: string): void;
+    addFlowLine(data: MapJSONData, options?: FlowLineOptions): FlowLineLayerHandle | null;
+    addFlowLineByUrl(url: string, options?: FlowLineOptions): Promise<FlowLineLayerHandle | null>;
+    removeFlowLineLayer(layerName: string): void;
+}

package/core/line/Line.js

@@ -0,0 +1,144 @@
+import GeoJSON from "ol/format/GeoJSON";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import { ErrorHandler } from "../../utils/ErrorHandler";
+import ProjectionUtils from "../../utils/ProjectionUtils";
+import ValidationUtils from "../../utils/ValidationUtils";
+import { ConfigManager, MapTools } from "../map";
+import LineFlowAnimator from "./LineFlowAnimator";
+import LineStyleFactory from "./LineStyleFactory";
+/**
+ * 线要素管理类
+ * 用于在地图上添加和管理静态线与流动线要素。
+ */
+export default class Line {
+    constructor(map) {
+        this.flowLineRegistry = new globalThis.Map();
+        this.styleFactory = new LineStyleFactory();
+        ValidationUtils.validateMapInstance(map);
+        this.map = map;
+    }
+    /**
+     * 合并静态线默认配置。
+     */
+    mergeDefaultOptions(options) {
+        const layerName = options?.layerName || ConfigManager.DEFAULT_LINE_OPTIONS.layerName;
+        return {
+            ...ConfigManager.DEFAULT_LINE_OPTIONS,
+            ...options,
+            layerName
+        };
+    }
+    /**
+     * 合并流动线默认配置。
+     */
+    mergeFlowLineOptions(options) {
+        const layerName = options?.layerName || ConfigManager.DEFAULT_LINE_OPTIONS.layerName;
+        return {
+            ...ConfigManager.DEFAULT_FLOW_LINE_OPTIONS,
+            ...options,
+            flowSymbol: {
+                ...ConfigManager.DEFAULT_FLOW_LINE_OPTIONS.flowSymbol,
+                ...options?.flowSymbol
+            },
+            layerName
+        };
+    }
+    /**
+     * 创建静态线图层。
+     */
+    createStaticLayer(source, options) {
+        const layer = new VectorLayer({
+            properties: {
+                name: options.layerName,
+                layerName: options.layerName
+            },
+            source,
+            style: this.styleFactory.createBaseLineStyleResolver(options),
+            zIndex: options.zIndex
+        });
+        layer.setVisible(options.visible ?? true);
+        this.map.addLayer(layer);
+        return layer;
+    }
+    /**
+     * 注册流动线句柄。
+     */
+    registerFlowLineHandle(layerName, handle) {
+        this.flowLineRegistry.set(layerName, handle);
+    }
+    /**
+     * 注销流动线句柄。
+     */
+    unregisterFlowLineHandle(layerName) {
+        this.flowLineRegistry.delete(layerName);
+    }
+    addLine(data, options) {
+        ValidationUtils.validateRequired(data, 'GeoJSON data is required');
+        const mergedOptions = this.mergeDefaultOptions(options);
+        const features = new GeoJSON().readFeatures(data, ProjectionUtils.getGeoJSONReadOptions(mergedOptions));
+        return this.createStaticLayer(new VectorSource({ features }), mergedOptions);
+    }
+    addLineByUrl(url, options = {}) {
+        ValidationUtils.validateNonEmptyString(url, 'Line url is required');
+        const mergedOptions = this.mergeDefaultOptions(options);
+        const source = new VectorSource({
+            url,
+            format: new GeoJSON(ProjectionUtils.getGeoJSONReadOptions(mergedOptions))
+        });
+        return this.createStaticLayer(source, mergedOptions);
+    }
+    removeLineLayer(layerName) {
+        ValidationUtils.validateLayerName(layerName);
+        MapTools.removeLayer(this.map, layerName);
+    }
+    addFlowLine(data, options = {}) {
+        const mergedOptions = this.mergeFlowLineOptions(options);
+        const layerName = mergedOptions.layerName;
+        try {
+            ValidationUtils.validateLayerName(layerName);
+            this.flowLineRegistry.get(layerName)?.remove();
+            const animator = new LineFlowAnimator(this.map, data, mergedOptions, name => {
+                this.unregisterFlowLineHandle(name);
+            });
+            const handle = animator.createHandle();
+            if (!handle) {
+                return null;
+            }
+            this.registerFlowLineHandle(layerName, handle);
+            return handle;
+        }
+        catch (error) {
+            ErrorHandler.getInstance().error('[Line] 添加流动线失败:', error);
+            return null;
+        }
+    }
+    async addFlowLineByUrl(url, options = {}) {
+        const mergedOptions = this.mergeFlowLineOptions(options);
+        try {
+            ValidationUtils.validateNonEmptyString(url, 'Flow line url is required');
+            const response = await fetch(url);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch flow line data: ${response.status}`);
+            }
+            const jsonData = await response.json();
+            if (!jsonData || typeof jsonData !== 'object') {
+                throw new Error('Flow line JSON data is invalid');
+            }
+            return this.addFlowLine(jsonData, mergedOptions);
+        }
+        catch (error) {
+            ErrorHandler.getInstance().error('[Line] 从 URL 添加流动线失败:', error);
+            return null;
+        }
+    }
+    removeFlowLineLayer(layerName) {
+        ValidationUtils.validateLayerName(layerName);
+        const handle = this.flowLineRegistry.get(layerName);
+        if (handle) {
+            handle.remove();
+            return;
+        }
+        MapTools.removeLayer(this.map, [layerName, `${layerName}__flow-animation`]);
+    }
+}

package/core/line/LineFeatureFactory.d.ts

@@ -0,0 +1,17 @@
+import Feature from 'ol/Feature';
+import { LineString } from 'ol/geom';
+import type { FlowLineOptions } from '../../types';
+/**
+ * 线要素工厂
+ * 负责流动线数据标准化、过滤与克隆。
+ */
+export default class LineFeatureFactory {
+    /**
+     * 标准化线要素，兼容 FeatureCollection / Feature / LineString / MultiLineString。
+     */
+    static normalizeLineFeatures(data: unknown, options: FlowLineOptions): Feature<LineString>[];
+    /**
+     * 克隆线要素，用于基础线与动画线共用独立 source。
+     */
+    static cloneLineFeatures(features: Feature<LineString>[]): Feature<LineString>[];
+}

package/core/line/LineFeatureFactory.js

@@ -0,0 +1,75 @@
+import Feature from 'ol/Feature';
+import GeoJSON from 'ol/format/GeoJSON';
+import { LineString, MultiLineString } from 'ol/geom';
+import { ErrorHandler } from '../../utils/ErrorHandler';
+import ProjectionUtils from '../../utils/ProjectionUtils';
+/**
+ * 线要素工厂
+ * 负责流动线数据标准化、过滤与克隆。
+ */
+export default class LineFeatureFactory {
+    /**
+     * 标准化线要素，兼容 FeatureCollection / Feature / LineString / MultiLineString。
+     */
+    static normalizeLineFeatures(data, options) {
+        if (!data) {
+            ErrorHandler.getInstance().error('[LineFeatureFactory] 流动线数据不能为空');
+            return [];
+        }
+        try {
+            const readOptions = ProjectionUtils.getGeoJSONReadOptions(options);
+            const features = new GeoJSON().readFeatures(data, readOptions);
+            const normalizedFeatures = [];
+            features.forEach(feature => {
+                const geometry = feature.getGeometry();
+                if (!geometry) {
+                    return;
+                }
+                const properties = { ...feature.getProperties() };
+                delete properties.geometry;
+                if (geometry instanceof LineString) {
+                    if (geometry.getCoordinates().length >= 2) {
+                        normalizedFeatures.push(new Feature({
+                            ...properties,
+                            geometry: geometry.clone()
+                        }));
+                    }
+                    return;
+                }
+                if (geometry instanceof MultiLineString) {
+                    geometry.getLineStrings().forEach((lineString, index) => {
+                        if (lineString.getCoordinates().length < 2) {
+                            return;
+                        }
+                        normalizedFeatures.push(new Feature({
+                            ...properties,
+                            __segmentIndex: index,
+                            geometry: lineString.clone()
+                        }));
+                    });
+                }
+            });
+            if (normalizedFeatures.length === 0) {
+                ErrorHandler.getInstance().error('[LineFeatureFactory] 未找到可用于流动线动画的线要素');
+            }
+            return normalizedFeatures;
+        }
+        catch (error) {
+            ErrorHandler.getInstance().error('[LineFeatureFactory] 标准化流动线数据失败:', error);
+            return [];
+        }
+    }
+    /**
+     * 克隆线要素，用于基础线与动画线共用独立 source。
+     */
+    static cloneLineFeatures(features) {
+        return features.map(feature => {
+            const properties = { ...feature.getProperties() };
+            delete properties.geometry;
+            return new Feature({
+                ...properties,
+                geometry: feature.getGeometry()?.clone()
+            });
+        });
+    }
+}

package/core/line/LineFlowAnimator.d.ts

@@ -0,0 +1,53 @@
+import Map from 'ol/Map';
+import { LineString } from 'ol/geom';
+import type { FlowLineLayerHandle, FlowLineOptions } from '../../types';
+/**
+ * 流动线动画器
+ * 负责动画生命周期、postrender 与 RAF 驱动。
+ */
+export default class LineFlowAnimator {
+    private readonly map;
+    private readonly onRemove?;
+    private readonly maxSymbolCount;
+    private readonly styleFactory;
+    private readonly animationPointGeometry;
+    private readonly animationPointFeature;
+    private options;
+    private normalizedFeatures;
+    private baseSource;
+    private animationSource;
+    private baseLayer;
+    private animationLayer;
+    private dashStyle;
+    private state;
+    private startTime;
+    private pausedAt;
+    private pausedDuration;
+    private frozenProgress;
+    private rafId;
+    private postrenderKey;
+    constructor(map: Map, data: unknown, options?: FlowLineOptions, onRemove?: (layerName: string) => void);
+    createHandle(): FlowLineLayerHandle | null;
+    getProgressByTime(now: number, startTime: number, duration: number, speed: number, loop: boolean): number;
+    getCoordinateAndRotation(line: LineString, progress: number): {
+        coordinate: number[];
+        rotation: number;
+    };
+    start(): void;
+    pause(): void;
+    resume(): void;
+    stop(): void;
+    setVisible(visible: boolean): void;
+    updateData(data: unknown): void;
+    remove(): void;
+    private createBaseLayer;
+    private createAnimationLayer;
+    private normalizeOptions;
+    private updateSources;
+    private bindPostrender;
+    private unbindPostrender;
+    private startRafLoop;
+    private stopRafLoop;
+    private getCurrentProgress;
+    private getNow;
+}