Manual edit of lighting angles. Fixes #8 (610e8bd7) · Commits · GREYC-DDA / IVOIRe

index.html

+28 −14

Changes for index.html: 28 added lines, 14 removed lines.
Original line number	Diff line number	Diff line
		@@ -21,10 +21,10 @@
		<select name="dataset" id="select-dataset" class="btn-dark" :disabled="datasetsDisabled"
		:value="dataset" @change="app.onDatasetSelect($event)">
		<optgroup label="" :label="t('controls.hosted')" class="builtins">
		<option v-for="ds in datasets.server" :value="ds.id">{{loc(ds.name, locale)}}</option>
		<option v-for="ds in datasets.server" :value="ds.id" v-text="loc(ds.name, locale)"></option>
		</optgroup>
		<optgroup label="" :label="t('controls.inmemory')" class="inmemory">
		<option v-for="ds in datasets.memory" :value="ds.id">{{loc(ds.name, locale)}}</option>
		<option v-for="ds in datasets.memory" :value="ds.id" v-text="loc(ds.name, locale)"></option>
		<option class="action" value="create" v-t="controls.createinmemory"></option>
		</optgroup>
		</select>
		@@ -129,30 +129,44 @@
		<div><label><input type="radio" name="lock-end" value="end" v-model="exportParams.lockedDim">🔒</label>
		</div>
		</div>
		<span>Reset</span>
		<button v-icon="zoom-fit" @click="fn.setExportParams()"></button>
		<span>To view</span>
		<button v-icon="zoom-fit" @click="fn.setExportParams('view')"></button>
		<span>To full</span>
		<button v-icon="zoom-fit" @click="fn.setExportParams('full')"></button>
		<span><button v-icon="zoom-fit" @click="fn.setExportParams('view')"></button> To view</span>
		<span><button v-icon="zoom-fit" @click="fn.setExportParams('full')"></button> To full</span>
		</div>
		<span v-show="phase === 'render' \|\| phase === 'export'">
		<button id="button-export" class="btn-dark btn-icon" @click="fn.exportImage" v-icon="export"></button>
		<label for="button-export" v-t="export.button"></label>
		</span>
		<hr>
		<div class="description-container">
		<div v-if="description">
		<h3 v-t="controls.description"></h3>
		<div class="content">{{ description && loc(description, locale) }}</div>
		<div class="content" v-text="description && loc(description, locale)"></div>
		</div>
		<pre v-if="output"><code>{{ output }}</code></pre>
		<pre v-if="output"><code v-text="output"></code></pre>
		</div>
		<div class="lightball-container">
		<canvas id="ivoire-lightball"></canvas>
		<div class="reset-button-container">
		<canvas id="ivoire-lightball" :class="{lightballEdit}"></canvas>
		<div class="lightball-buttons-container" v-if="phase==='render' \|\| phase==='export'">
		<button class="btn-dark btn-icon" @click="app.resetLightball()"
		:title="t('controls.resetlightball')" v-icon="reset"
		v-if="phase==='render' \|\| phase==='export'"></button>
		:title="t('controls.resetlightball')" v-icon="reset"></button>
		<button class="btn-dark btn-icon" v-icon="edit" aria-label="Edit angle values"
		title="Edit angle values" @click="lightballEdit = !lightballEdit"
		:class="{toggled: lightballEdit}"></button>
		</div>
		<div class="lightball-controls" v-if="lightballEdit"
		v-effect="fn.requestRender(state.lightphi, state.lighttheta)">
		<div>
		<label for="light-phi">Phi</label>
		<input v-model="state.lightphi" type="number" name="light-phi" id="light-phi"
		min="0" max="360" step="1">
		<input v-model="state.lightphi" type="range" name="light-phi" aria-label="Phi"
		min="0" max="360" step="1">
		<label for="light-theta">Theta</label>
		<input v-model="state.lighttheta" type="number" name="light-theta" id="light-theta"
		min="0" max="90" step="1">
		<input v-model="state.lighttheta" type="range" name="light-theta" aria-label="Theta"
		min="0" max="90" step="1">
		</div>
		</div>
		</div>
		</div>

src/app.ts

+7 −4

Changes for src/app.ts: 7 added lines, 4 removed lines.
Original line number	Diff line number	Diff line
		@@ -212,6 +212,7 @@ export class App {
		this.downloadExportImage,
		this.setExportParams,
		this.onExportParamInput,
		this.requestRender,
		] as Array<(..._: any[]) => any>
		)
		.map((m) => [m.name, m.bind(this)] as const)
		@@ -225,6 +226,7 @@ export class App {
		server: new Array<{ id: string; name: LocString }>(),
		memory: new Array<{ id: string; name: LocString }>(),
		},
		state: this.state,
		cursor: null as string \| null,
		datasetsDisabled: false,
		dataset: '',
		@@ -238,6 +240,7 @@ export class App {
		exportParams: App.DEFAULT_EXPORT_PARAMS,
		totalSize: [0, 0] as [number, number],
		pointerState: this.state.pointerState,
		lightballEdit: false,
		raw: () => rx, // Function to un-proxify the rx object
		};
		return rx as Omit<typeof rx, 'raw'> & { raw: () => typeof rx };
		@@ -605,8 +608,8 @@ export class App {
		}

		public resetLightball() {
		this.state.lightphi = LIGHT_ANGLE_DEFAULTS.lightphi;
		this.state.lighttheta = LIGHT_ANGLE_DEFAULTS.lighttheta;
		this.rx.state.lightphi = LIGHT_ANGLE_DEFAULTS.lightphi;
		this.rx.state.lighttheta = LIGHT_ANGLE_DEFAULTS.lighttheta;
		this.requestRender();
		}

		@@ -750,8 +753,8 @@ export class App {
		start[ax] = clamp(start[ax], 0, end[ax] - 1);
		}
		}
		const newArea = Rect.fromCorners(start, end);
		this.rx.exportParams.area = newArea;

		this.rx.exportParams.area = Rect.fromCorners(start, end);
		this.requestRender();
		}

src/style.sass

+31 −4

Changes for src/style.sass: 31 added lines, 4 removed lines.
Original line number	Diff line number	Diff line
		@@ -122,26 +122,53 @@ body
		word-break: break-all

		.description-container
		margin-top: 1rem
		overflow-y: auto

		option.action
		font-style: italic

		.lightball-container
		width: 250px
		position: relative
		align-self: center
		margin-top: auto

		#ivoire-lightball
		#ivoire-lightball, .lightball-controls
		width: 200px
		height: 200px

		.reset-button-container
		#ivoire-lightball.lightballEdit
		opacity: .75
		pointer-events: none

		.lightball-buttons-container
		display: flex
		flex-direction: column
		position: absolute
		top: 0
		right: 0

		.lightball-controls
		position: absolute
		top: 0
		left: 0
		display: flex
		justify-content: center
		align-items: center

		& > div
		display: grid
		grid-template-columns: 1fr 1fr

		input[type=range]
		grid-column: 1 / 3

		.export-panel
		display: flex
		flex-direction: column
		align-items: start

		.export-area-matrix
		width: 100%
		text-align: center
		@@ -261,7 +288,7 @@ dialog
		transform: translate(.05rem, .05rem)
		box-shadow: .1rem .1rem 4px 0 rgba(0, 0, 0, 0.5)

		&:active
		&:active, &.toggled
		position: relative
		transform: translate(.15rem, .15rem)
		box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5)
		@@ -273,7 +300,7 @@ dialog
		&:hover
		background-color: #3b4967

		&:active
		&:active, &.toggled
		background-color: #374460

		.btn-close