Merge pull request #512 from vizzuhq/rendering-fix

Rendering fixed, update separated to update and render on wasm api

project/cmake/weblib/emcc.txt

@@ -20,6 +20,7 @@ set(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} \
 '_vizzu_pointerLeave',\
 '_vizzu_wheel',\
 '_vizzu_update',\
+'_vizzu_render',\
 '_vizzu_setLogging',\
 '_vizzu_errorMessage',\
 '_vizzu_version',\

src/apps/weblib/cinterface.cpp

@@ -180,15 +180,20 @@ void vizzu_wheel(APIHandles::Chart chart,
 	return Interface::getInstance().wheel(chart, canvas, delta);
 }
 
-void vizzu_update(APIHandles::Chart chart,
+void vizzu_update(APIHandles::Chart chart, double timeInMSecs)
+{
+	return Interface::getInstance().update(chart, timeInMSecs);
+}
+
+void vizzu_render(APIHandles::Chart chart,
     APIHandles::Canvas canvas,
     double width,
-    double height,
-    double timeInMSecs,
-    bool render)
+    double height)
 {
-	return Interface::getInstance()
-	    .update(chart, canvas, width, height, timeInMSecs, render);
+	return Interface::getInstance().render(chart,
+	    canvas,
+	    width,
+	    height);
 }
 
 const char *style_getList() { return Interface::getStyleList(); }

src/apps/weblib/cinterface.h

@@ -62,12 +62,11 @@ extern void vizzu_wheel(APIHandles::Chart chart,
     APIHandles::Canvas canvas,
     double delta);
 extern void vizzu_setLogging(bool enable);
-extern void vizzu_update(APIHandles::Chart chart,
+extern void vizzu_update(APIHandles::Chart chart, double timeInMSecs);
+extern void vizzu_render(APIHandles::Chart chart,
     APIHandles::Canvas canvas,
     double width,
-    double height,
-    double timeInMSecs,
-    bool render);
+    double height);
 extern const char *vizzu_errorMessage(
     APIHandles::Exception exceptionPtr,
     const std::type_info *typeinfo);

src/apps/weblib/interface.cpp

@@ -329,7 +329,7 @@ ObjectRegistry::Handle Interface::createChart()
 {
 	auto &&widget = std::make_shared<UI::ChartWidget>();
 
-	auto handle = objects.reg(std::move(widget));
+	auto handle = objects.reg(widget);
 
 	widget->openUrl = [handle](const std::string &url)
 	{
@@ -356,11 +356,7 @@ void Interface::setLogging(bool enable)
 }
 
 void Interface::update(ObjectRegistry::Handle chart,
-    ObjectRegistry::Handle canvas,
-    double width,
-    double height,
-    double timeInMSecs,
-    bool render)
+    double timeInMSecs)
 {
 	auto &&widget = objects.get<UI::ChartWidget>(chart);
 
@@ -373,15 +369,23 @@ void Interface::update(ObjectRegistry::Handle chart,
 	::Anim::TimePoint time(nanoSecs);
 
 	widget->getChart().getAnimControl().update(time);
+}
 
-	if (render) {
-		const Geom::Size size{width, height};
-		auto ptr = objects.get<Vizzu::Main::JScriptCanvas>(canvas);
-		ptr->frameBegin();
-		widget->onUpdateSize(size);
-		widget->onDraw(ptr);
-		ptr->frameEnd();
-	}
+void Interface::render(ObjectRegistry::Handle chart,
+    ObjectRegistry::Handle canvas,
+    double width,
+    double height)
+{
+	auto &&widget = objects.get<UI::ChartWidget>(chart);
+	auto &&ptr = objects.get<Vizzu::Main::JScriptCanvas>(canvas);
+
+	ptr->frameBegin();
+
+	widget->onUpdateSize({width, height});
+
+	widget->onDraw(ptr);
+
+	ptr->frameEnd();
 }
 
 void Interface::pointerDown(ObjectRegistry::Handle chart,

src/apps/weblib/interface.h

@@ -41,12 +41,11 @@ class Interface
 	void wheel(ObjectRegistry::Handle chart,
 	    ObjectRegistry::Handle canvas,
 	    double delta);
-	void update(ObjectRegistry::Handle chart,
+	void update(ObjectRegistry::Handle chart, double timeInMSecs);
+	void render(ObjectRegistry::Handle chart,
 	    ObjectRegistry::Handle canvas,
 	    double width,
-	    double height,
-	    double timeInMSecs,
-	    bool render);
+	    double height);
 
 	ObjectRegistry::Handle storeAnim(ObjectRegistry::Handle chart);
 	void restoreAnim(ObjectRegistry::Handle chart,

src/apps/weblib/ts-api/chart.ts

@@ -12,7 +12,13 @@ import { Events, EventType, EventHandler, EventMap } from './events.js'
 import { Mirrored } from './tsutils.js'
 import { VizzuOptions } from './vizzu.js'
 import { AnimControl } from './animcontrol.js'
-import { PluginRegistry, Hooks, RenderContext } from './plugins.js'
+import {
+	PluginRegistry,
+	Hooks,
+	RenderContext,
+	UpdateContext,
+	RenderControlMode
+} from './plugins.js'
 import { Logging } from './plugins/logging.js'
 import { Shorthands } from './plugins/shorthands.js'
 import { PivotData } from './plugins/pivotdata.js'
@@ -36,7 +42,7 @@ export class Chart implements ChartInterface {
 	private _data: Data
 	private _events: Events
 	private _plugins: PluginRegistry
-	private _needsUpdate = true
+	private _changed = true
 
 	constructor(module: Module, options: VizzuOptions, plugins: PluginRegistry) {
 		this._options = options
@@ -75,35 +81,56 @@ export class Chart implements ChartInterface {
 
 	start(): void {
 		const ctx = {
-			update: (force: boolean): void => this.updateFrame(force)
+			update: (force: boolean): void => this.updateAndRender(force)
 		}
 		this._plugins.hook(Hooks.start, ctx).default(() => {
-			this.updateFrame()
+			this.updateAndRender()
 		})
 	}
 
-	updateFrame(force: boolean = false): void {
+	private updateAndRender(force: boolean = false): void {
+		this._update()
+		this._render(force)
+	}
+
+	private _update(): void {
+		const ctx: UpdateContext = {
+			timeInMSecs: null
+		}
+		this._plugins.hook(Hooks.update, ctx).default((ctx) => {
+			if (ctx.timeInMSecs) {
+				this._cChart.update(ctx.timeInMSecs)
+			}
+		})
+	}
+
+	private _render(force: boolean): void {
+		const control = force ? RenderControlMode.forced : RenderControlMode.disabled
 		const ctx: RenderContext = {
 			renderer: null,
-			timeInMSecs: null,
-			enable: true,
-			force,
+			control: control,
+			changed: this._changed,
 			size: { x: 0, y: 0 }
 		}
 		this._plugins.hook(Hooks.render, ctx).default((ctx) => {
-			if (ctx.size.x >= 1 && ctx.size.y >= 1 && ctx.timeInMSecs !== null && ctx.renderer) {
-				const render = ctx.force || (ctx.enable && this._needsUpdate)
-				ctx.renderer.canvas = this._cCanvas
-				this._module.registerRenderer(this._cCanvas, ctx.renderer)
-				this._cChart.update(this._cCanvas, ctx.size.x, ctx.size.y, ctx.timeInMSecs, render)
-				this._module.unregisterRenderer(this._cCanvas)
-				this._needsUpdate = false
-			}
+			if (ctx.size.x < 1 || ctx.size.y < 1 || !ctx.renderer) return
+
+			const shouldRender =
+				ctx.control === RenderControlMode.forced ||
+				(ctx.control === RenderControlMode.allowed && ctx.changed)
+
+			if (!shouldRender) return
+
+			ctx.renderer.canvas = this._cCanvas
+			this._module.registerRenderer(this._cCanvas, ctx.renderer)
+			this._cChart.render(this._cCanvas, ctx.size.x, ctx.size.y)
+			this._module.unregisterRenderer(this._cCanvas)
+			this._changed = false
 		})
 	}
 
 	doChange(): void {
-		this._needsUpdate = true
+		this._changed = true
 	}
 
 	openUrl(url: number): void {

src/apps/weblib/ts-api/cvizzu.types.d.ts

@@ -91,14 +91,9 @@ export interface CVizzu {
 	_vizzu_pointerLeave(chart: CChartPtr, canvas: CCanvasPtr, pointerId: number): void
 	_vizzu_wheel(chart: CChartPtr, canvas: CCanvasPtr, delta: number): void
 	_vizzu_setLogging(enable: boolean): void
-	_vizzu_update(
-		chart: CChartPtr,
-		canvas: CCanvasPtr,
-		width: number,
-		height: number,
-		time: number,
-		render: boolean
-	): void
+	_vizzu_update(chart: CChartPtr, time: number): void
+	_vizzu_render(chart: CChartPtr, canvas: CCanvasPtr, width: number, height: number): void
+
 	_vizzu_errorMessage(exceptionPtr: CException, typeinfo: CTypeInfo): CString
 	_vizzu_version(): CString
 	_data_addDimension(

src/apps/weblib/ts-api/module/cchart.ts

@@ -42,9 +42,13 @@ export class CChart extends CObject {
 		this.animOptions = this._makeAnimOptions()
 	}
 
-	update(cCanvas: CCanvas, width: number, height: number, time: number, render: boolean): void {
+	update(time: number): void {
+		this._call(this._wasm._vizzu_update)(time)
+	}
+
+	render(cCanvas: CCanvas, width: number, height: number): void {
 		this._cCanvas = cCanvas
-		this._call(this._wasm._vizzu_update)(cCanvas.getId(), width, height, time, render)
+		this._call(this._wasm._vizzu_render)(cCanvas.getId(), width, height)
 	}
 
 	animate(callback: (ok: boolean) => void): void {

src/apps/weblib/ts-api/plugins.ts

@@ -10,6 +10,8 @@ import { Canvas } from './module/canvas.js'
 export enum Hooks {
 	/** Called once on startup for start the rendering loop. */
 	start = 'start',
+	/** Called when updating the chart due to time change. */
+	update = 'update',
 	/** Called on rendering. */
 	render = 'render',
 	/** Called when the animate() parameters gets set in the library to prepare 
@@ -38,11 +40,20 @@ export interface StartContext {
 	update: (force: boolean) => void
 }
 
+export interface UpdateContext {
+	timeInMSecs: number | null
+}
+
+export enum RenderControlMode {
+	forced = 'forced',
+	allowed = 'allowed',
+	disabled = 'disabled'
+}
+
 export interface RenderContext {
 	renderer: (CRenderer & Canvas) | null
-	timeInMSecs: number | null
-	enable: boolean
-	force: boolean
+	control: RenderControlMode
+	changed: boolean
 	size: Point
 }
 
@@ -63,6 +74,7 @@ export interface RunAnimationContext {
 
 export interface HookContexts {
 	[Hooks.start]: StartContext
+	[Hooks.update]: UpdateContext
 	[Hooks.render]: RenderContext
 	[Hooks.prepareAnimation]: PrepareAnimationContext
 	[Hooks.registerAnimation]: RegisterAnimationContext

src/apps/weblib/ts-api/plugins/clock.ts

@@ -1,4 +1,4 @@
-import { Plugin, PluginApi, PluginHooks, RenderContext } from '../plugins.js'
+import { Plugin, PluginApi, PluginHooks, UpdateContext } from '../plugins.js'
 
 export interface ClockApi extends PluginApi {
 	/** Returns the actual time in miliseconds. */
@@ -16,7 +16,7 @@ export class Clock implements Plugin {
 
 	get hooks(): PluginHooks {
 		const hooks = {
-			render: (ctx: RenderContext, next: () => void): void => {
+			update: (ctx: UpdateContext, next: () => void): void => {
 				if (ctx.timeInMSecs === null) ctx.timeInMSecs = this._now()
 				next()
 			}

src/apps/weblib/ts-api/plugins/rendercontrol.ts

@@ -1,4 +1,12 @@
-import { Plugin, PluginApi, PluginHooks, RenderContext, StartContext } from '../plugins.js'
+import {
+	Plugin,
+	PluginApi,
+	PluginHooks,
+	RenderContext,
+	UpdateContext,
+	StartContext,
+	RenderControlMode
+} from '../plugins.js'
 
 export interface RenderControlApi extends PluginApi {
 	/** Re-renders the chart. */
@@ -27,12 +35,17 @@ export class RenderControl implements Plugin {
 				this._update = ctx.update
 				next()
 			},
-			render: (ctx: RenderContext, next: () => void): void => {
+			update: (ctx: UpdateContext, next: () => void): void => {
 				if (this._timeInMSecs !== null) {
 					ctx.timeInMSecs = this._timeInMSecs
 					this._timeInMSecs = null
 				}
-				ctx.enable = this._enabled
+				next()
+			},
+			render: (ctx: RenderContext, next: () => void): void => {
+				if (ctx.control === RenderControlMode.disabled && this._enabled) {
+					ctx.control = RenderControlMode.allowed
+				}
 				next()
 			}
 		}