Skip to content

Commit 218646a

Browse files
NorseriumNorserium
committed
Add the possibility to move and resize background
1 parent a578092 commit 218646a

28 files changed

+1342
-441
lines changed

‎example/docs/.vuepress/components/Home/Examples/CircleExample/CircleStencil.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,21 +41,21 @@ export default {
4141
},
4242
onHandlerMove(dragEvent) {
4343
const shift = dragEvent.shift();
44-
4544
const widthResize = shift.left/2;
4645
const heightResize = -shift.top/2;
4746
const { height, width, left, top, } = this.resultCoordinates;
48-
const coefficient = width / this.stencilCoordinates.width;
49-
5047
this.$emit('resize', new ResizeEvent(
5148
dragEvent.nativeEvent,
5249
{
5350
left: widthResize,
5451
right: widthResize,
5552
top: heightResize,
5653
bottom: heightResize,
54+
},
55+
{
56+
compensate: true,
5757
}
58-
));
58+
))
5959
},
6060
aspectRatios() {
6161
return {

‎example/docs/.vuepress/components/algorithm-tester.vue‎

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
<script>
2+
import { BoundingBox, ResizeEvent } from 'vue-advanced-cropper';
3+
import {resize} from 'vue-advanced-cropper/src/core/algorithms'
4+
5+
export default {
6+
name: 'AlgorithmTester',
7+
components: {
8+
BoundingBox,
9+
},
10+
data() {
11+
return {
12+
coordinates: {
13+
cropper: {
14+
width: 100,
15+
height: 100,
16+
left: 150,
17+
top: 150,
18+
},
19+
stencil: {
20+
width: 100,
21+
height: 100,
22+
left: 150,
23+
top: 150,
24+
},
25+
current: {
26+
width: 100,
27+
height: 100,
28+
left: 150,
29+
top: 150,
30+
},
31+
area: {
32+
width: 400,
33+
height: 400,
34+
left: 0,
35+
top: 0,
36+
},
37+
},
38+
stencilProps: `{\n\t"aspectRatio": 10/16\n}`,
39+
};
40+
},
41+
computed: {
42+
cropperStyle() {
43+
return {
44+
width: `${this.coordinates.cropper.width}px`,
45+
height: `${this.coordinates.cropper.height}px`,
46+
top: `${this.coordinates.cropper.top}px`,
47+
left: `${this.coordinates.cropper.left}px`,
48+
}
49+
},
50+
currentStyle() {
51+
return {
52+
width: `${this.coordinates.current.width}px`,
53+
height: `${this.coordinates.current.height}px`,
54+
top: `${this.coordinates.current.top}px`,
55+
left: `${this.coordinates.current.left}px`,
56+
}
57+
},
58+
stencilStyle() {
59+
return {
60+
width: `${this.coordinates.stencil.width}px`,
61+
height: `${this.coordinates.stencil.height}px`,
62+
top: `${this.coordinates.stencil.top}px`,
63+
left: `${this.coordinates.stencil.left}px`,
64+
}
65+
},
66+
areaStyle() {
67+
return {
68+
width: `${this.coordinates.area.width}px`,
69+
height: `${this.coordinates.area.height}px`,
70+
top: `${this.coordinates.area.top}px`,
71+
left: `${this.coordinates.area.left}px`,
72+
}
73+
}
74+
},
75+
methods: {
76+
onResizeStencil({directions}) {
77+
this.coordinates.stencil.left -= directions.left
78+
this.coordinates.stencil.top -= directions.top
79+
this.coordinates.stencil.width += directions.right + directions.left
80+
this.coordinates.stencil.height += directions.top + directions.bottom
81+
},
82+
onResizeArea({directions}) {
83+
this.coordinates.area.left -= directions.left
84+
this.coordinates.area.top -= directions.top
85+
this.coordinates.area.width += directions.right + directions.left
86+
this.coordinates.area.height += directions.top + directions.bottom
87+
},
88+
onResizeCurrent({directions}) {
89+
this.coordinates.current.left -= directions.left
90+
this.coordinates.current.top -= directions.top
91+
this.coordinates.current.width += directions.right + directions.left
92+
this.coordinates.current.height += directions.top + directions.bottom
93+
},
94+
onResize(complete) {
95+
const coordinates = resize({
96+
coordinates: {...this.coordinates.current},
97+
restrictions: {
98+
minWidth: 100,
99+
minHeight: 100,
100+
maxWidth: 400,
101+
maxHeight: 400,
102+
},
103+
aspectRatio: {
104+
minimum: 10/20,
105+
},
106+
allowedArea: {
107+
left: this.coordinates.area.left,
108+
top: this.coordinates.area.top,
109+
bottom: this.coordinates.area.top + this.coordinates.area.height,
110+
right: this.coordinates.area.left + this.coordinates.area.width,
111+
},
112+
coefficient: 1,
113+
resizeEvent: new ResizeEvent({}, {
114+
left: -(this.coordinates.stencil.left - this.coordinates.current.left),
115+
top: -(this.coordinates.stencil.top - this.coordinates.current.top),
116+
bottom: this.coordinates.stencil.top + this.coordinates.stencil.height - (this.coordinates.current.top + this.coordinates.current.height),
117+
right: this.coordinates.stencil.left + this.coordinates.stencil.width - (this.coordinates.current.left + this.coordinates.current.width),
118+
}, {
119+
compensate: true
120+
}),
121+
complete
122+
})
123+
this.coordinates.current = {...coordinates}
124+
125+
}
126+
}
127+
};
128+
</script>
129+
130+
<template>
131+
<div class="bounding-box-example">
132+
<div class="playground">
133+
<div class="area-wrapper">
134+
<div class="area">
135+
<BoundingBox
136+
class="area-box"
137+
handler-component="simple-handler"
138+
line-component="simple-line"
139+
:style="areaStyle"
140+
:lines-classnames="{default: 'line line--area'}"
141+
:handlers-classnames="{default: 'handler handler--area'}"
142+
@resize="onResizeArea"
143+
/>
144+
<BoundingBox
145+
class="stencil-box"
146+
handler-component="simple-handler"
147+
line-component="simple-line"
148+
:style="stencilStyle"
149+
:lines-classnames="{default: 'line line--stencil'}"
150+
:handlers-classnames="{default: 'handler handler--stencil'}"
151+
@resize="onResizeStencil"
152+
/>
153+
<div
154+
class="current-box"
155+
:style="currentStyle"
156+
/>
157+
</div>
158+
<div class="buttons">
159+
<div class="button" @click="onResize(false)">
160+
<img :src="require('../assets/icons/resize.svg')"/>
161+
</div>
162+
<div class="button button--complete" @click="onResize(true)">
163+
<img :src="require('../assets/icons/resize.svg')"/>
164+
</div>
165+
</div>
166+
167+
</div>
168+
</div>
169+
<div class="options">
170+
<div class="option">
171+
Stencil props:
172+
<textarea class="option__textarea" v-model="stencilProps"/>
173+
</div>
174+
</div>
175+
</div>
176+
</template>
177+
178+
<style lang="scss">
179+
.bounding-box-example {
180+
position: relative;
181+
padding-top: 20px;
182+
.playground {
183+
position: relative;
184+
}
185+
.buttons {
186+
position: absolute;
187+
right: 20px;
188+
bottom: 20px;
189+
}
190+
.button {
191+
background: rgb(61, 82, 206);
192+
border-radius: 50%;
193+
height: 50px;
194+
width: 50px;
195+
margin-top: 10px;
196+
display: flex;
197+
align-items: center;
198+
justify-content: center;
199+
cursor: pointer;
200+
&--complete {
201+
background: #3fb37f;
202+
}
203+
}
204+
.options {
205+
border-top: solid 1px #EEE;
206+
padding-top: 20px;
207+
}
208+
.option {
209+
&__textarea {
210+
display: block;
211+
height: 150px;
212+
width: 100%;
213+
}
214+
}
215+
.area-wrapper {
216+
display: flex;
217+
align-items: center;
218+
justify-content: center;
219+
padding-top: 50px;
220+
padding-bottom: 50px;
221+
overflow: hidden;
222+
}
223+
.area {
224+
width: 400px;
225+
height: 400px;
226+
position: relative;
227+
outline: dashed 1px #EEE;
228+
}
229+
.current-box {
230+
border: solid 1px rgba(255,150,150, 0.8);
231+
}
232+
.stencil-box, .area-box, .current-box {
233+
pointer-events: none;
234+
position: absolute;
235+
}
236+
.line {
237+
pointer-events: all;
238+
&--stencil {
239+
border-color: rgba(#3fb37f, 0.5);
240+
}
241+
&--area {
242+
border-color: rgba(#555, 0.5);
243+
border-style: dotted;
244+
}
245+
}
246+
.handler {
247+
pointer-events: all;
248+
&--stencil {
249+
background: #3fb37f;
250+
}
251+
&--area {
252+
background: #555;
253+
opacity: 0.5;
254+
}
255+
}
256+
}
257+
</style>

‎example/docs/.vuepress/components/home-page.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
<h1 class="presentation__title">
5151
Advanced Cropper
5252
<div class="presentation__version">
53-
0.13
53+
0.14
5454
</div>
5555
</h1>
5656
</div>

‎example/docs/.vuepress/components/mobile-fixed-example.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script>
2+
import { Cropper } from 'vue-advanced-cropper';
3+
4+
export default {
5+
components: {
6+
Cropper,
7+
},
8+
data() {
9+
return {
10+
img: 'https://images.unsplash.com/photo-1527137342181-19aab11a8ee8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80',
11+
};
12+
},
13+
};
14+
</script>
15+
16+
<template>
17+
<div class='mobile-fixed-example'>
18+
<Cropper
19+
:src="img"
20+
:stencil-props="{
21+
handlers: {},
22+
movable: false,
23+
scalable: false,
24+
aspectRatio: 1,
25+
}"
26+
/>
27+
</div>
28+
</template>
29+
30+
<style lang="scss">
31+
.mobile-fixed-example {
32+
33+
}
34+
</style>

‎example/docs/.vuepress/components/set-coordinates-example.vue‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -59,12 +59,12 @@ export default {
5959
<div class="set-coordinates-example">
6060
<Cropper
6161
ref="cropper"
62-
classname="coodinates-cropper"
63-
:stencil-props="{
64-
minAspectRatio: 10/20,
65-
}"
66-
:src="image"
67-
@change="updateSize"
62+
classname="coodinates-cropper"
63+
:src="image"
64+
:stencil-props="{
65+
minAspectRatio: 10/20,
66+
}"
67+
@change="updateSize"
6868
/>
6969
<div class="buttons">
7070
<div class="button" title="Resize (x2)" @click="resize(2, 2)">
@@ -99,12 +99,10 @@ export default {
9999
margin-bottom: 20px;
100100
position: relative;
101101
user-select: none;
102-
103102
.coodinates-cropper {
104103
min-height: 400px;
105104
background: black;
106105
}
107-
108106
.size-info {
109107
color: white;
110108
position: absolute;
@@ -113,7 +111,6 @@ export default {
113111
bottom: 10px;
114112
opacity: 0.5;
115113
}
116-
117114
.button {
118115
background: rgba(black, 0.4);
119116
display: flex;
@@ -128,14 +125,11 @@ export default {
128125
background: black;
129126
}
130127
}
131-
132-
133128
.buttons {
134129
position: absolute;
135130
left: 10px;
136131
top: 50%;
137132
transform: translateY(-50%);
138133
}
139-
140134
}
141135
</style>

‎example/docs/.vuepress/styles/index.styl‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
.sidebar
2+
.repo-link
3+
display: none !important;
4+
15
.navbar
26
background-color: #3fb37f;
37
background-image: url('/vue-advanced-cropper/background.png');

‎example/docs/introduction/algorithm.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Algorithm
2+
3+
## Tester
4+
<algorithm-tester/>

0 commit comments

Comments
 (0)