fix #11
This commit is contained in:
isUnknown
parent
95f690bf84
commit
8fe39c7378
11 changed files with 79 additions and 169 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 220 KiB |
|
|
@ -1 +0,0 @@
|
|||
Uuid: WmjnmmaT7LeUkWUA
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
Title: Brief client
|
||||
|
||||
----
|
||||
|
||||
Stepname: clientBrief
|
||||
|
||||
----
|
||||
|
||||
Pdf:
|
||||
|
||||
----
|
||||
|
||||
Description:
|
||||
|
||||
Nouvelle réflexion pour le lancement d'un nouveau flacon sur le thématique suivante :
|
||||
Minimalisme oriental : Nous visons la simplicité sophistiquée, s'alignant sur une esthétique minimaliste. Des artistes comme Donald Judd ou Agnès Martin, connus pour leur approche minimaliste, pourraient guider notre vision du design de l'emballage.
|
||||
Nous envisageons d'animer cette ligne avec différents flankers et édition limitées.
|
||||
|
||||
----
|
||||
|
||||
Moodboard: - file://WmjnmmaT7LeUkWUA
|
||||
|
||||
----
|
||||
|
||||
Stepindex: 1
|
||||
|
||||
----
|
||||
|
||||
Uuid: TewjNkF57vAlfdGB
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
Title: Offre commerciale
|
||||
|
||||
----
|
||||
|
||||
Stepname: proposal
|
||||
|
||||
----
|
||||
|
||||
Stepindex: 2
|
||||
|
||||
----
|
||||
|
||||
Uuid: 6fd7hJ1fZz77Rfq2
|
||||
|
||||
----
|
||||
|
||||
Pdf:
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
Title: Brief enrichi
|
||||
|
||||
----
|
||||
|
||||
Stepname: extendedBrief
|
||||
|
||||
----
|
||||
|
||||
Stepindex: 3
|
||||
|
||||
----
|
||||
|
||||
Uuid: iSXLsd7fMHRahzr5
|
||||
|
||||
----
|
||||
|
||||
Pdf:
|
||||
|
||||
----
|
||||
|
||||
Description:
|
||||
|
||||
----
|
||||
|
||||
Moodboard:
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
Title: Échantillon virtuel
|
||||
|
||||
----
|
||||
|
||||
Stepname: virtualSample
|
||||
|
||||
----
|
||||
|
||||
Stepindex: 5
|
||||
|
||||
----
|
||||
|
||||
Uuid: nzvCj5IzV3ZiPoMj
|
||||
|
||||
----
|
||||
|
||||
Rawglass:
|
||||
|
||||
----
|
||||
|
||||
Finishedglass:
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
Title: Idéation industrielle
|
||||
|
||||
----
|
||||
|
||||
Stepname: industrialIdeation
|
||||
|
||||
----
|
||||
|
||||
Stepindex: 4
|
||||
|
||||
----
|
||||
|
||||
Uuid: BO77ya5AXE2phDu3
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
Title: Échantillon physique
|
||||
|
||||
----
|
||||
|
||||
Stepname: physicalSample
|
||||
|
||||
----
|
||||
|
||||
Stepindex: 6
|
||||
|
||||
----
|
||||
|
||||
Uuid: qfneb7LJcFU83BEN
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
Title: Flacon Design To Pack
|
||||
|
||||
----
|
||||
|
||||
Currentstep: clientBrief
|
||||
|
||||
----
|
||||
|
||||
Client: - page://G418qZ4ABsoWFx4i
|
||||
|
||||
----
|
||||
|
||||
Uuid: nglvDbbcfFT88yi0
|
||||
|
|
@ -24,48 +24,14 @@
|
|||
|
||||
<div class="track">
|
||||
<figure>
|
||||
<div @mousedown="enableDragToRotate" class="drag-zone"></div>
|
||||
<img :src="currentFile.url" alt="" width="500" height="500" />
|
||||
</figure>
|
||||
<fieldset>
|
||||
<button
|
||||
class="y-up | btn btn--icon"
|
||||
@click="currentY++"
|
||||
:disabled="currentY === yMax"
|
||||
data-icon="chevron-single-left"
|
||||
title="Pivoter vers le haut"
|
||||
>
|
||||
<span class="sr-only">Top</span>
|
||||
</button>
|
||||
<button
|
||||
class="x-down | btn btn--icon"
|
||||
@click="rotateX('left')"
|
||||
data-icon="chevron-single-left"
|
||||
title="Pivoter vers la gauche"
|
||||
>
|
||||
<span class="sr-only">Left</span>
|
||||
</button>
|
||||
<button
|
||||
class="x-up | btn btn--icon"
|
||||
@click="rotateX('right')"
|
||||
data-icon="chevron-single-left"
|
||||
title="Pivoter vers la droite"
|
||||
>
|
||||
<span class="sr-only">Right</span>
|
||||
</button>
|
||||
<button
|
||||
class="y-down | btn btn--icon"
|
||||
@click="currentY--"
|
||||
:disabled="currentY === 0"
|
||||
data-icon="chevron-single-left"
|
||||
title="Pivoter vers le bas"
|
||||
>
|
||||
<span class="sr-only">Bottom</span>
|
||||
</button>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import throttle from "lodash/throttle";
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { usePageStore } from "../../../stores/page";
|
||||
|
|
@ -113,4 +79,80 @@ function rotateX(direction) {
|
|||
currentX.value = currentX.value === xMax.value ? 0 : currentX.value + 1;
|
||||
}
|
||||
}
|
||||
|
||||
const isDragToRotateEnabled = ref(false);
|
||||
window.addEventListener("mouseup", disableDragToRotate);
|
||||
function enableDragToRotate() {
|
||||
isDragToRotateEnabled.value = true;
|
||||
}
|
||||
function disableDragToRotate() {
|
||||
isDragToRotateEnabled.value = false;
|
||||
}
|
||||
|
||||
let previousMouseXPos;
|
||||
let previousMouseYPos;
|
||||
const DRAG_STEP = 20;
|
||||
|
||||
function dragToRotate(event) {
|
||||
handleHorizontalRotation(event);
|
||||
handleVerticalRotation(event);
|
||||
}
|
||||
|
||||
function handleHorizontalRotation(event) {
|
||||
if (previousMouseXPos === undefined) {
|
||||
previousMouseXPos = event.clientX;
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.clientX > previousMouseXPos + DRAG_STEP) {
|
||||
rotateX("left");
|
||||
previousMouseXPos = event.clientX;
|
||||
} else if (event.clientX < previousMouseXPos - DRAG_STEP) {
|
||||
rotateX("right");
|
||||
previousMouseXPos = event.clientX;
|
||||
}
|
||||
}
|
||||
|
||||
function handleVerticalRotation(event) {
|
||||
if (previousMouseYPos === undefined) {
|
||||
previousMouseYPos = event.clientY;
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.clientY > previousMouseYPos + DRAG_STEP) {
|
||||
if (currentY.value < yMax.value) {
|
||||
currentY.value++;
|
||||
previousMouseYPos = event.clientY;
|
||||
}
|
||||
} else if (event.clientY < previousMouseYPos - DRAG_STEP) {
|
||||
if (currentY.value > 0) {
|
||||
currentY.value--;
|
||||
previousMouseYPos = event.clientY;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const throttledDragToRotate = throttle(dragToRotate, 50);
|
||||
|
||||
watch(isDragToRotateEnabled, (newValue) => {
|
||||
if (newValue) {
|
||||
window.addEventListener("mousemove", throttledDragToRotate);
|
||||
} else {
|
||||
window.removeEventListener("mousemove", throttledDragToRotate);
|
||||
previousMouseXPos = undefined;
|
||||
previousMouseYPos = undefined;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.track figure {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.track .drag-zone {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
aria-controls="dynamic"
|
||||
@click="activeTab = 'dynamic'"
|
||||
>
|
||||
<span>Vue Dynamique</span>
|
||||
<span>Présentation dynamique</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="step.files.static"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue