Update document

cocopon · Feb 18, 2023 · 11383e2 · 11383e2
1 parent 4d723c5
commit 11383e2
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 11 deletions.
diff --git a/packages/tweakpane/src/doc/template/catalog.html b/packages/tweakpane/src/doc/template/catalog.html
@@ -39,7 +39,7 @@ <h2 id="inputs">Bindings</h2>
 </div>
 
 
-<h2 id="monitors">Readonly bindings</h2>
+<h2 id="monitors">Monitor bindings</h2>
 <div class="main_media">
 	<div class="paneCatalog">
 		<div class="paneCatalog_item">

diff --git a/packages/tweakpane/src/doc/template/input-bindings/index.html b/packages/tweakpane/src/doc/template/input-bindings/index.html
@@ -21,7 +21,7 @@ <h1 class="pageHeader_title">{{ title }}</h1>
 
 {% block content %}
 <h2 id="number">Number</h2>
-<p>Tweakpane provides a text input for number parameters by default.</p>
+<p>For number parameters, Tweakpane provides a text input by default.</p>
 
 <div class="main_media">
 	<div class="demo">
@@ -378,7 +378,7 @@ <h3 id="point2d">Point 2D</h3>
 	</div>
 </div>
 
-<p><code>inverted: true</code> inverts Y-axis.</p>
+<p><code>{inverted: true}</code> inverts Y-axis.</p>
 
 <div class="main_media">
 	<div class="demo">

diff --git a/packages/tweakpane/src/doc/template/monitor-bindings/index.html b/packages/tweakpane/src/doc/template/monitor-bindings/index.html
@@ -1,6 +1,6 @@
 {% set pageId = 'monitor' %}
 {% set root = '../' %}
-{% set title = 'Readonly bindings' %}
+{% set title = 'Monitor bindings' %}
 {% extends "_template.html" %}
 
 
@@ -9,7 +9,7 @@
 	<div class="pageHeader_inner">
 		<div class="pageHeader_text">
 			<h1 class="pageHeader_title">{{ title }}</h1>
-			<p>Tweakpane also has a feature for monitoring value changes. Use <code>addBinding()</code> with the option <code>readonly: true</code>.</p>
+			<p>Tweakpane also has a feature for monitoring value changes.</p>
 		</div>
 		<div class="pageHeader_pane">
 			<div class="paneContainer" data-pane-monitor></div>
@@ -20,8 +20,25 @@ <h1 class="pageHeader_title">{{ title }}</h1>
 
 
 {% block content %}
+<p>To monitor primitive value changes, use <code>addBinding()</code> with the option <code>{readonly: true}</code>.</p>
+
+<div class="main_media">
+	<div class="demo">
+		<div class="demo_code">
+			<div class="codeBlock"><pre><code class="js">const pane = new Pane();
+pane.addBinding(PARAMS, 'wave', {
+  <strong>readonly</strong>: true,
+});</code></pre></div>
+		</div>
+		<div class="demo_result">
+			<div class="paneContainer" data-pane-primitive></div>
+		</div>
+	</div>
+</div>
+
+
 <h2 id="multiline">Multiline</h2>
-<p><code>multiline</code> option provides a multiline log component. <code>rows</code> can change the number of display lines.</p>
+<p><code>multiline</code> option provides a multiline log component. <code>rows</code> can change the display height.</p>
 
 <div class="main_media">
 	<div class="demo">

diff --git a/packages/tweakpane/src/doc/template/partial/_global-nav.html b/packages/tweakpane/src/doc/template/partial/_global-nav.html
@@ -36,7 +36,7 @@
 			</ul>
 		</li>
 		<li class="menuItem">
-			<a class="menuItem_anchor" href="{{ root }}monitor-bindings/">Readonly bindings</a>
+			<a class="menuItem_anchor" href="{{ root }}monitor-bindings/">Monitor bindings</a>
 		</li>
 		<li class="menuItem">
 			<ul class="submenu">

diff --git a/packages/tweakpane/src/doc/template/quick-tour/index.html b/packages/tweakpane/src/doc/template/quick-tour/index.html
@@ -186,8 +186,8 @@ <h2 id="presets">Presets</h2>
 
 <p>See <a href="{{ root }}misc/#imex">Import/Export</a> section for details. </p>
 
-<h2 id="monitors">Readonly bindings</h2>
-<p>Use <code>addBinding()</code> with the option <code>readonly: true</code> to monitor value changes.</p>
+<h2 id="monitors">Monitor bindings</h2>
+<p>Use <code>addBinding()</code> with the option <code>{readonly: true}</code> to monitor value changes.</p>
 
 <div class="main_media">
 	<div class="demo">
@@ -208,7 +208,7 @@ <h2 id="monitors">Readonly bindings</h2>
 	</div>
 </div>
 
-<p>See <a href="{{ root }}monitor-bindings/">Readonly bindings</a> section for full features.</p>
+<p>See <a href="{{ root }}monitor-bindings/">Monitor bindings</a> section for full features.</p>
 
 <h2>What's next</h2>
 <div class="rel">
@@ -231,7 +231,7 @@ <h2>What's next</h2>
 		<a class="relItem_anchor" href="{{ root }}monitor-bindings/">
 			<div class="relItem_text">
 				<div class="relItem_title">
-					Readonly bindings
+					Monitor bindings
 				</div>
 				<div class="relItem_detail">
 					monitoring value changes

diff --git a/packages/tweakpane/src/doc/ts/route/monitor-bindings.ts b/packages/tweakpane/src/doc/ts/route/monitor-bindings.ts
@@ -57,6 +57,14 @@ export function initMonitorBindings() {
 				readonly: true,
 			});
 		},
+		primitive: (container) => {
+			const pane = new Pane({
+				container: container,
+			});
+			pane.addBinding(SHARED_PARAMS, 'wave', {
+				readonly: true,
+			});
+		},
 		multiline: (container) => {
 			const PARAMS = {params: ''};
 			const pane = new Pane({