Improved grab handle placement and rendering (ab421df6) · Commits · GREYC-DDA / IVOIRe

index.html

+2 −2

Changes for index.html: 2 added lines, 2 removed lines.
Original line number	Diff line number	Diff line
		@@ -105,9 +105,9 @@
		<span>Height: </span>
		<span>{{ Math.round(exportParams.area.h) }}</span>
		<span>Inner: </span>
		<span>{{ `${exportParams.innerGrab}` }}</span>
		<span>{{ `${exportParams.innerGrab.round()}` }}</span>
		<span>Outer: </span>
		<span>{{ `${exportParams.outerGrab}` }}</span>
		<span>{{ `${exportParams.outerGrab.round()}` }}</span>
		<span>Keys:</span>
		<span>{{ modKeys }}</span>
		<span>Reset</span>

src/app.ts

+6 −6

Changes for src/app.ts: 6 added lines, 6 removed lines.
Original line number	Diff line number	Diff line
		@@ -452,13 +452,13 @@ export class App {

		if (this.source && (this.rx.phase === 'render' \|\| this.rx.phase === 'export')) {
		if (this.rx.phase === 'export') {
		const margin = Math.floor(App.EXPORT_WINDOW_GRAB_MARGIN / Math.min(this.state.viewport.zoom, 1)),
		const margin = (App.EXPORT_WINDOW_GRAB_MARGIN / Math.min(this.state.viewport.zoom, 1)),
		area = this.rx.raw().exportParams.area,
		xMargin = Math.min(margin, Math.floor(area.w - margin * 1.5)),
		yMargin = Math.min(margin, Math.floor(area.h - margin * 1.5));
		const inner = area.grow(-xMargin, -yMargin);
		innerW = Math.max(margin / 4, area.w - margin),
		innerH = Math.max(margin / 4, area.h - margin);
		const inner = area.grow((innerW - area.w) / 2, (innerH - area.h) / 2);
		this.rx.exportParams.innerGrab = inner;
		this.rx.exportParams.outerGrab = inner.grow(margin * 1.5);
		this.rx.exportParams.outerGrab = inner.grow(margin);
		}
		const exportedState = exportValues(this.state);
		let data: RenderData = {
		@@ -950,7 +950,7 @@ export class App {

		const highlight = DEBUG
		? () => {
		if (!ev.shiftKey \|\| !(ev.buttons & 1) \|\| !this.source) return false;
		if (!ev.shiftKey \|\| !(ev.buttons & 1) \|\| !this.source \|\| this.rx.phase !== "render") return false;
		const texCoord = viewport.screenToTexture(evpos);
		let changed = false;
		const highlighted = [];

src/gl-program.ts

+7 −26

Changes for src/gl-program.ts: 7 added lines, 26 removed lines.
Original line number	Diff line number	Diff line
		@@ -476,7 +476,6 @@ export class ExportRectProgram extends GLProgramBase<
		[keyof typeof ExportRectProgram.attributes],
		[keyof typeof ExportRectProgram.uniformNames]
		> {
		private static readonly NONE_GRAB_RECT: readonly [number, number, number, number] = [0, 0, -1, -1];
		public static readonly PARAMS = {
		cornerRadius: 25,
		lineSize: 1,
		@@ -488,7 +487,8 @@ export class ExportRectProgram extends GLProgramBase<
		static uniformNames = {
		color: 'uColor',
		exportRect: 'uExportRect',
		grabRect: 'uGrabRect',
		innerGrabRect: 'uInnerGrabRect',
		outerGrabRect: 'uOuterGrabRect',
		lineWidth: 'uLineWidth',
		grabStatus: 'uGrabStatus',
		projectionMatrix: 'uProjectionMatrix',
		@@ -525,34 +525,15 @@ export class ExportRectProgram extends GLProgramBase<

		gl.uniformMatrix4fv(this.uniformLocations.projectionMatrix, false, data.viewport.projectionMat);

		let grabRect = ExportRectProgram.NONE_GRAB_RECT,
		grabStatus = 0;
		let grabStatus = [0, 0, 0];
		if (data.pointerState.exportWindowHover) {
		const quad = data.pointerState.exportWindowHover,
		xBnds = [
		data.exportParams.outerGrab.xmin,
		data.exportParams.innerGrab.xmin,
		data.exportParams.innerGrab.xmax,
		data.exportParams.outerGrab.xmax,
		],
		yBnds = [
		data.exportParams.outerGrab.ymin,
		data.exportParams.innerGrab.ymin,
		data.exportParams.innerGrab.ymax,
		data.exportParams.outerGrab.ymax,
		];
		grabRect = [
		xBnds[quad[0]],
		yBnds[quad[1]],
		xBnds[quad[0] + 1] - xBnds[quad[0]],
		yBnds[quad[1] + 1] - yBnds[quad[1]],
		];
		grabStatus = data.pointerState.dragging ? 2 : 1;
		grabStatus = [data.pointerState.dragging ? 2 : 1, ...data.pointerState.exportWindowHover];
		}

		gl.uniform4fv(this.uniformLocations.exportRect, data.exportParams.area.xywh);
		gl.uniform4fv(this.uniformLocations.grabRect, grabRect);
		gl.uniform1i(this.uniformLocations.grabStatus, grabStatus);
		gl.uniform4fv(this.uniformLocations.innerGrabRect, data.exportParams.innerGrab.xywh);
		gl.uniform4fv(this.uniformLocations.outerGrabRect, data.exportParams.outerGrab.xywh);
		gl.uniform3iv(this.uniformLocations.grabStatus, grabStatus);
		gl.uniform4f(this.uniformLocations.renderRect, 0, 0, ...data.renderArea);
		gl.uniform1f(this.uniformLocations.lineWidth, lineSize);
		gl.uniform4fv(this.uniformLocations.color, color);

src/shaders/exportRect.frag

+37 −10

Changes for src/shaders/exportRect.frag: 37 added lines, 10 removed lines.
Original line number	Diff line number	Diff line
		@@ -3,35 +3,62 @@ precision mediump float;
		uniform mediump vec4 uColor;
		uniform mediump vec4 uRenderRect;
		uniform mediump vec4 uExportRect;
		uniform mediump vec4 uGrabRect;
		uniform mediump int uGrabStatus;
		uniform mediump vec4 uInnerGrabRect;
		uniform mediump vec4 uOuterGrabRect;
		uniform mediump ivec3 uGrabStatus;
		uniform mediump float uLineWidth;

		varying mediump vec2 vVertexCoord;

		float rectSideDist(vec2 pos, vec4 rect) {
		return min(
		abs(max(rect.x - pos.x, pos.x - rect.x - rect.z)),
		abs(max(rect.y - pos.y, pos.y - rect.y - rect.w)));
		}

		float rectDist(vec2 pos, vec4 rect) {
		return max(
		max(rect.x - pos.x, rect.y - pos.y),
		max(pos.x - rect.x - rect.z, pos.y - rect.y - rect.w));
		}

		float grabSideDist(vec2 pos, vec4 inRect, vec4 outRect) {
		float outDist = rectDist(pos, outRect);
		if (outDist > 0.) return outDist;
		return max(
		outDist,
		-abs(rectSideDist(pos, inRect) * 2.)
		);
		}

		bool sameQuad() {
		if (uGrabStatus[0] == 0)
		return false;
		int qx = vVertexCoord.x < uInnerGrabRect.x ? 0 : vVertexCoord.x < uInnerGrabRect.x + uInnerGrabRect.z ? 1 : 2;
		if (uGrabStatus[1] != qx)
		return false;
		int qy = vVertexCoord.y < uInnerGrabRect.y ? 0 : vVertexCoord.y < uInnerGrabRect.y + uInnerGrabRect.w ? 1 : 2;
		return uGrabStatus[2] == qy;
		}

		void main(void) {
		float dist = rectDist(vVertexCoord, uExportRect);
		float grabDist = uGrabStatus > 0 ? rectDist(vVertexCoord, uGrabRect) : 1000000.;
		float grabDist = grabSideDist(vVertexCoord, uInnerGrabRect, uOuterGrabRect);
		bool inRender = bool(rectDist(vVertexCoord, uRenderRect) <= 0.);
		bool onGrabBorder = bool(grabDist <= 0. && grabDist > -uLineWidth * 2.);
		if (dist >= 0. && dist <= uLineWidth * 4. && !onGrabBorder) {
		bool onGrabBorder = bool(grabDist < 0. && grabDist > -uLineWidth * 3.);
		if (dist >= 0. && dist <= uLineWidth * 4.) {
		gl_FragColor = uColor;
		if (!inRender) // Full opacity outside of render area
		gl_FragColor.a = 1.;
		} else if (grabDist <= 0.) {
		} else if (grabDist <= 0. && onGrabBorder) {
		// Export window quadrant hover
		gl_FragColor = vec4(0., 0., 0.,
		float(uGrabStatus) * (onGrabBorder ? .4 : .2));
		gl_FragColor = vec4(0., 0., 0., dist < 0. ? .2 : .4);
		} else if (grabDist <= 0. && sameQuad()) {
		gl_FragColor = vec4(0., 0., 0., float(uGrabStatus[0]) * (dist > 0. ? .25 :.1));
		} else if (dist > 0. && inRender) {
		// In render area, outside of export window
		float light = mod((vVertexCoord.x + vVertexCoord.y) / (uLineWidth * 16.), 2.) > 1. ? 1. : 0.;
		gl_FragColor = vec4(light, light, light, .1);
		float light = mod((vVertexCoord.x + vVertexCoord.y) / (uLineWidth * 16.), 2.) > 1. ? .6 : .4;
		gl_FragColor = vec4(light, light, light, .5);
		} else {
		// Outside of render area or inside export window
		discard;

src/tiling.ts

+7 −0

Changes for src/tiling.ts: 7 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		@@ -184,6 +184,13 @@ export class Rect {
		);
		}

		round(): Rect {
		return Rect.fromCorners(
		[Math.round(this.x), Math.round(this.y)],
		[Math.round(this.x2), Math.round(this.y2)]
		)
		}

		clone(): Rect {
		return new Rect(this.x, this.y, this.w, this.h);
		}