title: $:/core/macros/sidebar-resizer

\function is.pixel.value(value) [<value>removesuffix[px]]
\function is.percentage.value(value) [<value>removesuffix[%]]
\function is.cm.value(value) [<value>removesuffix[cm]]
\function is.mm.value(value) [<value>removesuffix[mm]]
\function is.Q.value(value) [<value>removesuffix[Q]]
\function is.in.value(value) [<value>removesuffix[in]]
\function is.pc.value(value) [<value>removesuffix[pc]]
\function is.pt.value(value) [<value>removesuffix[pt]]
\function is.em.value(value) [<value>removesuffix[em]]

\function convert.to.percentage(value) [<value>divide<widgetNodeWidth>multiply[100]]
\function convert.to.cm(value) [<value>divide[37.8]]
\function convert.to.mm(value) [convert.to.cm<value>multiply[10]]
\function convert.to.Q(value) [convert.to.cm<value>multiply[40]]
\function convert.to.in(value) [<value>divide[96]]
\function convert.to.pc(value) [convert.to.in<value>multiply[6]]
\function convert.to.pt(value) [convert.to.in<value>multiply[72]]
\function convert.to.em(value) [<value>divide{$:/themes/tiddlywiki/vanilla/metrics/fontsize}]

\function convert.to.percentage.value() [convert.to.percentage<value>]
\function convert.to.cm.value() [convert.to.cm<value>]
\function convert.to.mm.value() [convert.to.mm<value>]
\function convert.to.Q.value() [convert.to.Q<value>]
\function convert.to.in.value() [convert.to.in<value>]
\function convert.to.pc.value() [convert.to.pc<value>]
\function convert.to.pt.value() [convert.to.pt<value>]
\function convert.to.em.value() [convert.to.em<value>]

\function convert.to.pixels(value) [is.pixel.value<value>] [is.percentage.value<value>multiply<widgetNodeWidth>divide[100]] [is.cm.value<value>multiply[37.8]] [is.mm.value<value>multiply[37.8]divide[10]] [is.Q.value<value>multiply[37.8]divide[40]] [is.in.value<value>multiply[96]] [is.pc.value<value>multiply[96]divide[6]] [is.pt.value<value>multiply[96]divide[72]] [is.em.value<value>multiply{$:/themes/tiddlywiki/vanilla/metrics/fontsize}]

\function convert.to.result(value,suffix) [<suffix>match[px]then<value>] [<suffix>match[%]then<convert.to.percentage.value>] [<suffix>match[cm]then<convert.to.cm.value>] [<suffix>match[mm]then<convert.to.mm.value>] [<suffix>match[Q]then<convert.to.Q.value>] [<suffix>match[in]then<convert.to.in.value>] [<suffix>match[pc]then<convert.to.pc.value>] [<suffix>match[pt]then<convert.to.pt.value>] [<suffix>match[em]then<convert.to.em.value>]

\function get.value.metric(value) [<value>suffix[px]then[px]] ~[<value>suffix[%]then[%]] ~[<value>suffix[cm]then[cm]] ~[<value>suffix[mm]then[mm]] ~[<value>suffix[Q]then[Q]] ~[<value>suffix[in]then[in]] ~[<value>suffix[pc]then[pc]] ~[<value>suffix[pt]then[pt]] ~[<value>suffix[em]then[em]]

\procedure sidebar-resizer-pointerdown-actions()
<%if [[$:/state/sidebar/resizing]is[missing]then<event-mousebutton>match[left]] %>
	<$action-setfield $tiddler="$:/state/sidebar/resizing"
		text="yes"
		widget-node-width=<<tv-widgetnode-width>>
		start-posx=<<event-fromcatcher-posx>>
		start-story-left={{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}
		story-left-metric={{{ [get.value.metric{$:/themes/tiddlywiki/vanilla/metrics/storyleft}] }}}
		start-story-right={{$:/themes/tiddlywiki/vanilla/metrics/storyright}}
		story-right-metric={{{ [get.value.metric{$:/themes/tiddlywiki/vanilla/metrics/storyright}] }}}
		start-sidebar-width={{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}
		sidebar-width-metric={{{ [get.value.metric{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}] }}}
	/>
<% endif %>
\end

\procedure sidebar-resizer-pointercancel-actions()
<$action-deletetiddler $tiddler="$:/state/sidebar/resizing"/>
\end

\function convert.storydiff.to.result() [function[convert.to.result],<storyDiff>,<storyRightMetric>]

\procedure set-storyright-actions()
<$let storyLeftStart={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-left}] }}} storyRightStart={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-right}] }}} storyWidth={{{ [convert.to.pixels{$:/themes/tiddlywiki/vanilla/metrics/storywidth}] }}} sidebarMinWidthConverted={{{ [convert.to.pixels{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}] }}} storyRiverLimit={{{ [<widgetNodeWidth>subtract<sidebarMinWidthConverted>] }}} storyDiff={{{ [<storyWidth>add<storyLeftStart>subtract<storyRightStart>multiply[-1]] }}}>
	<$let storyRightMetric={{$:/state/sidebar/resizing!!story-right-metric}} storyRiverWidthConverted={{{ [function[convert.to.result],<storyRiverWidth>,<storyRightMetric>] }}} storyRiverLimitConverted={{{ [function[convert.to.result],<storyRiverLimit>,<storyRightMetric>] }}} storyDiffConverted={{{ [<modifier>!match[ctrl]then{$:/state/sidebar/resizing!!modifier}!match[ctrl]then<convert.storydiff.to.result>] ~0 }}} storyWidthConverted={{{ [function[convert.to.result],<storyWidth>,<storyRightMetric>] }}}>
		<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyright" text={{{ [<storyRiverWidthConverted>subtract<storyDiffConverted>compare:number:lt<storyWidthConverted>then<storyWidthConverted>add<storyDiffConverted>addsuffix<storyRightMetric>] ~[<storyRiverWidthConverted>compare:number:gteq<storyRiverLimitConverted>then<storyRiverLimitConverted>addsuffix<storyRightMetric>] ~[<storyRiverWidthConverted>addsuffix<storyRightMetric>] }}}/>
	</$let>
</$let>
\end

\procedure set-storyleft-actions()
<$let storyLeftStart={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-left}] }}} storyRightStart={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-right}] }}} storyLeft={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-left}add<dragDiff>] }}} storyWidthPixelConverted={{{ [convert.to.pixels{$:/themes/tiddlywiki/vanilla/metrics/storywidth}] }}} sidebarMinWidthPixelConverted={{{ [convert.to.pixels{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}] }}} storyDiff={{{ [<storyWidthPixelConverted>add<storyLeftStart>subtract<storyRightStart>multiply[-1]] }}} storyLeftMax={{{ [<widgetNodeWidth>subtract<sidebarMinWidthPixelConverted>subtract<storyWidthPixelConverted>subtract<storyDiff>] }}}>
	<$let storyLeftMetric={{$:/state/sidebar/resizing!!story-left-metric}} storyLeftStart={{{ [function[convert.to.result],<storyLeftStart>,<storyLeftMetric>] }}} storyLeftConverted={{{ [function[convert.to.result],<storyLeft>,<storyLeftMetric>] }}} storyLeftMaxConverted={{{ [function[convert.to.result],<storyLeftMax>,<storyLeftMetric>] }}}>
		<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyleft" text={{{ [<storyLeftConverted>compare:number:lt[0]then[0]addsuffix<storyLeftMetric>] ~[<storyLeftConverted>compare:number:gteq<storyLeftMaxConverted>then<storyLeftMaxConverted>addsuffix<storyLeftMetric>] ~[<storyLeftConverted>addsuffix<storyLeftMetric>] }}}/>
	</$let>
</$let>
\end

\procedure set-sidebarwidth-actions()
<$let sidebarWidthMetric={{$:/state/sidebar/resizing!!sidebar-width-metric}} sidebarMinWidth={{{ [convert.to.pixels{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}] }}} storyLeftConverted={{{ [convert.to.pixels{$:/themes/tiddlywiki/vanilla/metrics/storyleft}] }}} storyMinWidthConverted={{{ [convert.to.pixels{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}] }}} sidebarMaxWidth={{{ [<widgetNodeWidth>subtract<storyLeftConverted>subtract<storyMinWidthConverted>] }}}>
	<$vars sidebarWidthConverted={{{ [function[convert.to.result],<sidebarWidth>,<sidebarWidthMetric>] }}} sidebarMaxWidthConverted={{{ [function[convert.to.result],<sidebarMaxWidth>,<sidebarWidthMetric>] }}} sidebarMinWidthConverted={{{ [function[convert.to.result],<sidebarMinWidth>,<sidebarWidthMetric>] }}}>
		<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth" text={{{ [<sidebarWidthConverted>compare:number:gteq<sidebarMaxWidthConverted>then<sidebarMaxWidthConverted>addsuffix<sidebarWidthMetric>] ~[<sidebarWidthConverted>compare:number:lt<sidebarMinWidthConverted>then<sidebarMinWidthConverted>addsuffix<sidebarWidthMetric>] ~[<sidebarWidthConverted>addsuffix<sidebarWidthMetric>] }}}/>
	</$vars>
</$let>
\end

\procedure sidebar-resizer-pointermove-actions()
<%if [[$:/state/sidebar/resizing]!is[missing]] %>
	<$let widgetNodeWidth={{$:/state/sidebar/resizing!!widget-node-width}} dragDiff={{{ [<event-fromcatcher-posx>subtract{$:/state/sidebar/resizing!!start-posx}] }}} startStoryRight={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-story-right}] }}} storyRiverWidth={{{ [<startStoryRight>add<dragDiff>] }}} startSidebarWidth={{{ [convert.to.pixels{$:/state/sidebar/resizing!!start-sidebar-width}] }}} sidebarWidth={{{ [<startSidebarWidth>subtract<dragDiff>] }}}>
		<%if [<modifier>match[ctrl]then{$:/state/sidebar/resizing!!modifier}!match[ctrl]] %>
			<$action-setfield $tiddler="$:/state/sidebar/resizing" modifier="ctrl"/>
		<%elseif [<modifier>match[shift]then{$:/state/sidebar/resizing!!modifier}match[ctrl]] %>
			<$action-setfield $tiddler="$:/state/sidebar/resizing" modifier="shift"/>
		<% endif %>
		<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
			<<set-storyleft-actions>>
			<<set-storyright-actions>>
		<% else %>
			<<set-sidebarwidth-actions>>
		<% endif %>
	</$let>
<% endif %>
\end
