aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2023-11-27-dist

Browse Source
This commit is contained in:
X1627315083
2023-11-27 11:11:07 +08:00
parent e05b159c5a
commit 1f52565aad
9 changed files with 1087 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/989.0439aec9.css → dist/css/141.76294373.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

@@ -1 +1 @@
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>AiDA</title><link rel="stylesheet" href="./css/googleapis.css"><link rel="stylesheet" href="./css/roboto.css"><script defer="defer" src="/js/chunk-vendors.9c1ca004.js"></script><script defer="defer" src="/js/app.18a503c3.js"></script><link href="/css/chunk-vendors.5e9dbdc9.css" rel="stylesheet"><link href="/css/app.f33c2fe2.css" rel="stylesheet"></head><body><script src="./js/color-thief.js"></script><noscript><strong>We're sorry but aida doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>AiDA</title><link rel="stylesheet" href="./css/googleapis.css"><link rel="stylesheet" href="./css/roboto.css"><script defer="defer" src="/js/chunk-vendors.9c1ca004.js"></script><script defer="defer" src="/js/app.3ca1d16f.js"></script><link href="/css/chunk-vendors.5e9dbdc9.css" rel="stylesheet"><link href="/css/app.f33c2fe2.css" rel="stylesheet"></head><body><script src="./js/color-thief.js"></script><noscript><strong>We're sorry but aida doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>

59
dist/js/141.c6e1b9e3.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

59
dist/js/989.0f354989.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/app.18a503c3.js → dist/js/app.3ca1d16f.js vendored
View File

File diff suppressed because one or more lines are too long

8
src/component/HomePage/MoodboardUpload.vue
View File

@@ -148,6 +148,7 @@
</div>
<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
<layoutMobile ref="layoutMobile" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layoutMobile>
</div>
</template>
@@ -155,7 +156,7 @@
import { defineComponent, h, ref ,computed,nextTick,inject} from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util";
import { getUploadUrl,isMoible } from "@/tool/util";
import { useStore } from "vuex";
import { message, Upload } from "ant-design-vue";
import { Https } from "@/tool/https";
@@ -163,6 +164,7 @@ import Material from "@/component/HomePage/Material.vue";
import Generate from "@/component/HomePage/Generate.vue";
import MoodTemplate from "@/component/HomePage/MoodTemplate.vue";
import layout from "@/component/HomePage/layout.vue";
import layoutMobile from "@/component/HomePage/layoutMobile.vue";
import domTurnImg from '@/tool/domTurnImg'
import GO from "@/tool/GO";
import moodb from "@/tool/moodb";
@@ -170,7 +172,7 @@ import { useI18n } from "vue-i18n";
import { openGuide,driverObj__ } from "@/tool/guide";
import { driver } from "driver.js";
export default defineComponent({
components: { Material, MoodTemplate, Generate,layout },
components: { Material, MoodTemplate, Generate,layout,layoutMobile },
setup() {
const store = useStore()
let lessenList: any = ref([]);
@@ -421,7 +423,7 @@ export default defineComponent({
changeTemplateModal() {
if(this.modalImg[0]?.id){
let layout:any = this.$refs.layout
let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
// layout.init('moodboard')
layout.init()
}else{

35
src/component/HomePage/collectionModal.vue
View File

@@ -194,23 +194,24 @@ export default defineComponent({
if(this.driver__.driver){
driverObj__.moveNext()
}
// let elList = document.querySelectorAll('.img_block_item_sketch img')
// Https.axiosPost(Https.httpUrls.sketchBoardsBoundingBox, data)
// .then((rv: any) => {
// elList.forEach((item:any)=>{
// item.src = item.src
// })
// this.store.commit('clearAllId')
// GO.id = 0
// this.showCollectionModal =false
// this.collectionStep = 1
// this.$emit('finishCollection')
// if(this.driver__.driver){
// driverObj__.moveNext()
// }
// })
// .catch((res) => {
// });
let elList = document.querySelectorAll('.img_block_item_sketch img')
Https.axiosPost(Https.httpUrls.sketchBoardsBoundingBox, data)
.then((rv: any) => {
elList.forEach((item:any)=>{
item.src = item.src
})
this.isShowMark = false
this.store.commit('clearAllId')
GO.id = 0
this.showCollectionModal =false
this.collectionStep = 1
this.$emit('finishCollection')
if(this.driver__.driver){
driverObj__.moveNext()
}
})
.catch((res) => {
});
}

134
src/component/HomePage/layout.vue
View File

@@ -376,79 +376,83 @@ export default defineComponent({
let eX:any
let eY:any
let elParentSide = Math.sqrt(elParent.offsetWidth/2*elParent.offsetWidth/2+elParent.offsetHeight/2*elParent.offsetHeight/2)
el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
if (mouse) {
if(angle.value == 'right'){
eX = elParent.offsetWidth - e.offsetX
eY = elParent.offsetHeight - e.offsetY
}else if(angle.value == 'top'){
eX = elParent.offsetWidth - e.offsetX- elParent.offsetWidth
eY = elParent.offsetHeight - e.offsetY
}else if(angle.value == 'left'){
eX = elParent.offsetWidth - e.offsetX
eY = elParent.offsetHeight - e.offsetY- elParent.offsetHeight
}else if(angle.value == 'bottom'){
eX = elParent.offsetWidth - e.offsetX - elParent.offsetWidth
eY = elParent.offsetHeight - e.offsetY - elParent.offsetHeight
}
let mouseSide = Math.sqrt(eX*eX + eY *+eY)/2
// el.style.left = e.offsetX /2 +'px'
// el.style.top = e.offsetY /2+'px'
if(100 - 100 * mouseSide/elParentSide <= 50){
let mouseMove = (e:MouseEvent)=>{
// console.log(e.x,el.getBoundingClientRect().left);
// if(){
// }
if (mouse) {
if(angle.value == 'right'){
el.parentNode.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
eX = elParent.offsetWidth - e.offsetX
eY = elParent.offsetHeight - e.offsetY
}else if(angle.value == 'top'){
el.parentNode.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.left = 'auto'
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
}else if(angle.value == 'bottom'){
el.parentNode.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = 'auto'
el.style.left = 'auto'
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
eX = elParent.offsetWidth - e.offsetX- elParent.offsetWidth
eY = elParent.offsetHeight - e.offsetY
}else if(angle.value == 'left'){
el.parentNode.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = 'auto'
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
eX = elParent.offsetWidth - e.offsetX
eY = elParent.offsetHeight - e.offsetY- elParent.offsetHeight
}else if(angle.value == 'bottom'){
eX = elParent.offsetWidth - e.offsetX - elParent.offsetWidth
eY = elParent.offsetHeight - e.offsetY - elParent.offsetHeight
}
}else{
if(angle.value == 'right'){
el.parentNode.style.borderTopLeftRadius = 50+'%'
elParent.style.borderTopLeftRadius = 50+'%'
}else if(angle.value == 'top'){
el.parentNode.style.borderTopRightRadius = 50+'%'
elParent.style.borderTopRightRadius = 50+'%'
}else if(angle.value == 'bottom'){
el.parentNode.style.borderBottomRightRadius = 50+'%'
elParent.style.borderBottomRightRadius = 50+'%'
}else if(angle.value == 'left'){
el.parentNode.style.borderBottomLeftRadius = 50+'%'
elParent.style.borderBottomLeftRadius = 50+'%'
let mouseSide = Math.sqrt(eX*eX + eY *+eY)/2
// el.style.left = e.offsetX /2 +'px'
// el.style.top = e.offsetY /2+'px'
if(100 - 100 * mouseSide/elParentSide <= 50){
if(angle.value == 'right'){
el.parentNode.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
}else if(angle.value == 'top'){
el.parentNode.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.left = 'auto'
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
}else if(angle.value == 'bottom'){
el.parentNode.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = 'auto'
el.style.left = 'auto'
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
}else if(angle.value == 'left'){
el.parentNode.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = 'auto'
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
}
}else{
if(angle.value == 'right'){
el.parentNode.style.borderTopLeftRadius = 50+'%'
elParent.style.borderTopLeftRadius = 50+'%'
}else if(angle.value == 'top'){
el.parentNode.style.borderTopRightRadius = 50+'%'
elParent.style.borderTopRightRadius = 50+'%'
}else if(angle.value == 'bottom'){
el.parentNode.style.borderBottomRightRadius = 50+'%'
elParent.style.borderBottomRightRadius = 50+'%'
}else if(angle.value == 'left'){
el.parentNode.style.borderBottomLeftRadius = 50+'%'
elParent.style.borderBottomLeftRadius = 50+'%'
}
}
}
// 添加鼠标松开事件监听器
document.addEventListener('mouseup', () => {
mouse = false;
document.removeEventListener('mousemove',mouseMove)
el.parentNode.children.forEach((v:any) =>{
v.classList.remove('eventNode')
})
});
}
});
// 添加鼠标松开事件监听器
document.addEventListener('mouseup', () => {
mouse = false;
el.parentNode.children.forEach((v:any) =>{
v.classList.remove('eventNode')
})
});
el.parentNode.addEventListener('mousemove', mouseMove);
});
})
}
},
//移动图片

933
src/component/HomePage/layoutMobile.vue Normal file
View File

@@ -0,0 +1,933 @@
<template>
<div>
<a-modal
class="layout_modal"
v-model:visible="layout"
:footer="null"
width="65%"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="false"
:destroyOnClose="true"
>
<div class="layout_content">
<div class="collection_title">
<div class="collection_title_text">
<div class="layout_title">{{ $t('layout.MoodBoardDesign') }}</div>
</div>
</div>
<div class="collection_closeIcon" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
</div>
<div class="layout_nav">
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @click="setpitch(item,index)">
<img :src="item.imgUrl">
</div>
</div>
<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false" v-modelImg>
<ul v-show="item.setPitch" class="layout_btn" >
<li class="layout_btn_top" v-compile.stop="'top'"></li>
<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
<li class="layout_btn_left" v-compile.stop="'left'"></li>
<li class="layout_btn_right" v-compile.stop="'right'"></li>
<li class="layout_rotote" v-rotote.stop></li>
<li class="layout_translate" v-translate.stop></li>
<!-- <li class="layout_translate" v-translate.stop></li> -->
<li class="layout_angle_tr" v-angle.stop = "'top'"></li>
<li class="layout_angle_tl" v-angle.stop = "'right'"></li>
<li class="layout_angle_br" v-angle.stop = "'bottom'"></li>
<li class="layout_angle_bl" v-angle.stop = "'left'"></li>
</ul>
</div>
<!-- <img v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" :src="item.imgUrl"> -->
<!-- <draggable
v-model="layoutList"
group="people"
@start="drag=true"
@end="drag=false"
animation= "150"
item-key="id">
<template #item="{element,index}">
<div :data-id="element.id_" :class="moodbClassName[index]" class="modal_imgItem">
<img :src="element.imgUrl">
</div>
</template>
</draggable> -->
</div>
<div class="layout_left">
<div class="layout_left_text">
{{ $t('layout.LayerOptions') }}
</div>
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
</div>
</div>
</div>
<!-- <div class="layout_right">
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
</div>
</div>
</div> -->
<div
class="button_second submit_button"
@click="submitTemplate()"
>
{{ $t('layout.Submit') }}
</div>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
<a-upload
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload,
}"
:headers="{ Authorization: token }"
:before-upload="beforeUpload"
multiple
accept=".jpg,.png,.jpeg,.bmp"
>
</a-upload>
</a-modal>
</div>
</template>
<script lang="ts">
import { defineComponent, h, ref ,computed,reactive, nextTick} from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import GO from "@/tool/GO";
import moodb from "@/tool/moodb";
import draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import { getCookie } from "@/tool/cookie";
import domTurnImg from '@/tool/domTurnImg'
import { getUploadUrl } from "@/tool/util";
export default defineComponent({
props:["moodb_className",'flex_direction'],
components: {
draggable
},
setup(prop) {
let layout: any = ref(false);
let templateFileList: any = ref([]);
let openClick: any = ref(1);
let drag = false;
let layoutList:any = ref([])
const content = ref<HTMLElement | null>(null);
let loadingShow = ref(false)
return {
layout,
templateFileList,
openClick,
drag,
layoutList,
content,
loadingShow
};
},
data() {
return {
// moodTemplateId: "", //模板id
store: useStore(),
// layoutList:computed(()=>{
// return [...(useStore().state.UploadFilesModule.moodboardFiles),
// ...(useStore().state.UploadFilesModule.generateFiles),
// ...(useStore().state.UploadFilesModule.MaterialFiles)]
// }),
moodb : moodb.moodb_,
moodbList:{},
moodbClassName:[],
setabsolute:false,
token: "",
uploadUrl: "",
upload: {
isPin: 0,
level1Type: "Moodboard",
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
};
},
mounted() {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
},
directives:{
//操作移动
layout:{
mounted (el,layout:any,binding) {
el.addEventListener('touchstart',(e:any)=>{
e.stopPropagation()
el.parentElement.children.forEach((v:any) => {
v.style.left = v.offsetLeft+'px'
v.style.top = v.offsetTop+'px'
});
el.parentElement.children.forEach((v:any) => {
v.classList.add('active')
});
el.style.zIndex = GO.zIndex++
let left = el.style.left? el.style.left.replace(/px/g,'') : 0
let top = el.style.top? el.style.top.replace(/px/g,'') : 0
let mouseX = e.changedTouches[0].pageX - el.getBoundingClientRect().left; //鼠标点击位置到domleft距离
let mouseY = e.changedTouches[0].pageY - el.getBoundingClientRect().top
let domX = e.targetTouches[0].clientX - mouseX - Number(left)//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
let domY = e.targetTouches[0].clientY - mouseY - Number(top)
let mouse = true
// document.addEventListener('touchmove',(e: MouseEvent)=>{
// })
document.ontouchmove = function(e){
if(mouse){
el.style.left = e.targetTouches[0].pageX-mouseX - domX+'px'
el.style.top = e.targetTouches[0].pageY-mouseY - domY+'px'
if(el.offsetLeft <=0){
el.style.left = 0+'px'
}
if(el.offsetTop <=0){
el.style.top = 0+'px'
}
if(el.offsetLeft+el.offsetWidth >= el.parentNode.offsetWidth){
el.style.left = el.parentNode.offsetWidth - el.offsetWidth+'px'
}
if(el.offsetTop+el.offsetHeight >= el.parentNode.offsetHeight){
el.style.top = el.parentNode.offsetHeight - el.offsetHeight+'px'
}
}
}
document.ontouchend = function(){
mouse = false
// document.onmousemove = false;
}
})
},
updated (el,layout) {
}
},
//操作大小
compile:{
mounted (el,compile) {
el.addEventListener('touchstart',(e:any)=>{
e.stopPropagation()
let elParent = el.parentNode.parentNode
el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
v.style.left = v.offsetLeft+'px'
v.style.top = v.offsetTop+'px'
});
el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
v.classList.add('active')
});
if(compile.value == 'right'){
}else if(compile.value == 'left'){
elParent.style.right = elParent.parentNode.offsetWidth - elParent.offsetWidth - elParent.offsetLeft + 'px'
elParent.style.left = 'auto'
}else if(compile.value == 'top'){
elParent.style.bottom = elParent.parentNode.offsetHeight - elParent.offsetHeight - elParent.offsetTop + 'px'
elParent.style.top = 'auto'
}else if(compile.value == 'bottom'){
}
let gpsXY:any
let parent:any
if(compile.value == 'left' || compile.value == 'right'){
gpsXY = e.targetTouches[0].clientX
parent = elParent.offsetWidth
}else{
parent = elParent.offsetHeight
gpsXY = e.targetTouches[0].clientY
}
let mouse = true
document.ontouchmove = function(e){
if(mouse){
if(compile.value == 'left'){
elParent.style.width = parent + gpsXY - e.targetTouches[0].clientX + 'px'
}else if(compile.value == 'right'){
elParent.style.width = parent + e.targetTouches[0].clientX - gpsXY + 'px'
}else if(compile.value == 'top'){
elParent.style.height = parent + gpsXY - e.targetTouches[0].clientY + 'px'
}else if(compile.value == 'bottom'){
elParent.style.height = parent + e.targetTouches[0].clientY - gpsXY + 'px'
}
if(elParent.parentNode.offsetWidth <= elParent.offsetWidth+Number(elParent.style.right.replace(/px/g,''))){
elParent.style.width = elParent.parentNode.offsetWidth - Number(elParent.style.right.replace(/px/g,''))+'px'
}
if(elParent.offsetLeft + elParent.offsetWidth>=elParent.parentNode.offsetWidth){
elParent.style.width = elParent.parentNode.offsetWidth - elParent.offsetLeft+'px'
}
if(elParent.parentNode.offsetHeight <= elParent.offsetHeight+Number(elParent.style.bottom.replace(/px/g,''))){
elParent.style.height = elParent.parentNode.offsetHeight - Number(elParent.style.bottom.replace(/px/g,''))+'px'
}
if(elParent.offsetTop + elParent.offsetHeight>=elParent.parentNode.offsetHeight){
elParent.style.height = elParent.parentNode.offsetHeight - elParent.offsetTop+'px'
}
}
}
document.ontouchend = function(){
mouse = false
}
})
}
},
//操作旋转
rotote:{
mounted(el){
let mouse = true;
let angle :any = 0
let num:any
let x = 0
let y = 0
let elParent = el.parentNode.parentNode
if(document.defaultView){
let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
num = Number(transform[3])
}
// 添加鼠标按下事件监听器
el.addEventListener('touchstart', (e:any) => {
e.stopPropagation()
mouse = true;
// let eX = (e.pageX - el.offsetLeft) + el.offsetLeft
// let eY = elParent.offsetTop + el.offsetTop
var info = el.getBoundingClientRect();
let eX = info.x + info.width / 2;
let eY = info.y + info.height / 2;
document.addEventListener('touchmove', (e:any) => {
if (mouse) {
let X = eX
let Y = eY
let x:any = e.targetTouches[0].clientX - X
let y:any = Y - e.targetTouches[0].clientY
angle = Math.atan2(x,y)*(180 / Math.PI)
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
}
});
// 添加鼠标松开事件监听器
document.addEventListener('touchend', () => {
mouse = false;
// x = e.pageX
// y = e.pageY
});
});
//缩放
let timeSwitch = true
el.parentNode.addEventListener('mousemove', (e:any) => {
el.parentNode.addEventListener('mousewheel',(e:any) => {
if(timeSwitch){
timeSwitch = false
if((e as WheelEvent).deltaY > 0){
if(num <= 1){
num -= 0.05
}else{
num -= 0.1
}
}else{
//放大
if(num <= 1){
num += 0.05
}else{
num += 0.1
}
}
if(num >= 3){
num = 3
}else if (num < .2){
num = .2
}
setTimeout(() => {
timeSwitch = true
}, 100);
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
}
});
});
}
},
angle:{
mounted(el,angle){
let mouse = false;
el.addEventListener('touchstart', (e:any) => {
e.stopPropagation()
el.parentNode.children.forEach((v:any) =>{
v.classList.add('eventNode')
})
mouse = true;
let elParent = el.parentNode.parentNode
let eX:any
let eY:any
let elParentSide = Math.sqrt(elParent.offsetWidth/2*elParent.offsetWidth/2+elParent.offsetHeight/2*elParent.offsetHeight/2)
el.parentNode.addEventListener('touchmove', (e:any) => {
// if(){
// }
if (mouse) {
let offsetX = e.changedTouches[0].pageX - el.getBoundingClientRect().left;
let offsetY = e.changedTouches[0].pageY - el.getBoundingClientRect().top;
if(angle.value == 'right'){
eX = elParent.offsetWidth - offsetX
eY = elParent.offsetHeight - offsetY
}else if(angle.value == 'top'){
eX = elParent.offsetWidth - offsetX- elParent.offsetWidth
eY = elParent.offsetHeight - offsetY
}else if(angle.value == 'left'){
eX = elParent.offsetWidth - offsetX
eY = elParent.offsetHeight - offsetY- elParent.offsetHeight
}else if(angle.value == 'bottom'){
eX = elParent.offsetWidth - offsetX - elParent.offsetWidth
eY = elParent.offsetHeight - offsetY - elParent.offsetHeight
}
let mouseSide = Math.sqrt(eX*eX + eY *+eY)/2
// el.style.left = e.offsetX /2 +'px'
// el.style.top = e.offsetY /2+'px'
if(100 - 100 * mouseSide/elParentSide <= 50){
if(angle.value == 'right'){
el.parentNode.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
}else if(angle.value == 'top'){
el.parentNode.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.left = 'auto'
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
}else if(angle.value == 'bottom'){
el.parentNode.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = 'auto'
el.style.left = 'auto'
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
}else if(angle.value == 'left'){
el.parentNode.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = 'auto'
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
}
}else{
if(angle.value == 'right'){
el.parentNode.style.borderTopLeftRadius = 50+'%'
elParent.style.borderTopLeftRadius = 50+'%'
}else if(angle.value == 'top'){
el.parentNode.style.borderTopRightRadius = 50+'%'
elParent.style.borderTopRightRadius = 50+'%'
}else if(angle.value == 'bottom'){
el.parentNode.style.borderBottomRightRadius = 50+'%'
elParent.style.borderBottomRightRadius = 50+'%'
}else if(angle.value == 'left'){
el.parentNode.style.borderBottomLeftRadius = 50+'%'
elParent.style.borderBottomLeftRadius = 50+'%'
}
}
}
});
// 添加鼠标松开事件监听器
document.addEventListener('touchend', () => {
mouse = false;
el.parentNode.children.forEach((v:any) =>{
v.classList.remove('eventNode')
})
});
});
}
},
//移动图片
translate:{
mounted (el,layout:any,binding) {
el.addEventListener('mousedown',(e: MouseEvent)=>{
e.stopPropagation()
let elParent = el.parentNode.parentNode
el.style.left = (el.offsetLeft+2)/(elParent.offsetWidth)*100+'%'
el.style.top = (el.offsetTop+2)/(elParent.offsetHeight)*100+'%'
let left = el.style.left? el.style.left.replace(/%/g,'') : 0
let top = el.style.top? el.style.top.replace(/%/g,'') : 0
let mouseX = e.offsetX //鼠标点击位置到domleft距离
let mouseY = e.offsetY
let domX = e.clientX - e.offsetX - el.offsetLeft//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
let domY = e.clientY - e.offsetY - el.offsetTop
let mouse = true
document.onmousemove = function(e:any){
if(mouse){
let left = ( e.x-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
let top = (e.y-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
el.style.left = left
el.style.top = top;
el.previousSibling.style.top = top
el.previousSibling.style.left = left
elParent.firstChild.style.top = top
elParent.firstChild.style.left = left
if(el.offsetLeft <=0){
el.style.left = 0+'%'
el.previousSibling.style.left = 0+'%'
elParent.firstChild.style.left = 0+'%'
}
if(el.offsetTop <=0){
el.style.top = 0+'%'
el.previousSibling.style.top = 0+'%'
elParent.firstChild.style.top = 0+'%'
}
// if(el.offsetLeft+el.offsetWidth >= el.parentNode.offsetWidth){
// // el.style.left = el.parentNode.offsetWidth - el.offsetWidth+'%'
// console.log(2);
// }
if(el.style.left.replace(/%/g,'')>=100){
el.style.left = 100+'%'
el.previousSibling.style.left = 100+'%'
elParent.firstChild.style.left = 100+'%'
}
// if(el.offsetTop+el.offsetHeight >= el.parentNode.offsetHeight){
// el.style.top = el.parentNode.offsetHeight - el.offsetHeight+'%'
// }
if(el.style.top.replace(/%/g,'')>=100){
el.style.top = 100+'%'
el.previousSibling.style.top = 100+'%'
elParent.firstChild.style.top = 100+'%'
}
}
}
document.onmouseup = function(){
mouse = false
}
})
},
},
modelImg:{
mounted(el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
},
updated (el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
}
}
},
methods: {
init(){
let parentList:any = this.$parent
parentList = parentList.layoutList
this.layout = true
// let layoutList = this.store.state.UploadFilesModule.moodboard
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
this.layoutList = parentList
this.moodbList = this.moodb[parentList.length-1]
this.moodbClassName = this.moodb_className
},
cancelDsign(){
this.layout = false
},
setpitch(item:any,index:any){
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
item.setPitch = true
if(this.content){
(this.content as any)[index].style.zIndex = GO.zIndex++
}
},
setmoodb(item:any){
this.moodbClassName = item
this.$emit('setmoodbClass',this.moodbClassName)
if(this.content){
for (item of (this.content as any)) {
item.classList.remove('active')
item.style.top = ''
item.style.left = ''
item.style.right = ''
item.style.bottom = ''
item.style.width = ''
item.style.height = ''
}
}
},
changeTemplateModal(){
this.layout = !this.layout
},
//提交模板
submitTemplate() {
this.loadingShow = true
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
nextTick().then(async ()=>{
let layoutCentent = document.getElementById('layoutCentent')
let file = await domTurnImg(layoutCentent)
let param = new FormData();
param.append('inPin','0')
param.append('level1Type','Moodboard')
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',file);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
.then((rv: any) => {
// console.log(rv);
rv.imgUrl = rv.url
this.layout = false
this.loadingShow = false
this.store.commit("setDisposeMoodboard", rv);
}
).catch(rv=>{
this.loadingShow = false
})
})
},
beforeUpload(){
}
},
});
</script>
<style lang="less">
.layout_modal {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
// max-width: 1150px;
.ant-modal-body {
padding: 0;
// height: calc(65vh - 6.4rem);
height: 65rem;
}
.ant-modal-content{
border-radius: 1rem;
}
.layout_content {
// background: #f2f3fb;
// padding-bottom: 2.9rem;
height: 100%;
.collection_title{
position: absolute;
top: 4rem;
display: flex;
font-size: 1.8rem;
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center;
.collection_title_text{
margin-right: 4rem;
}
.collection_title_text_intro{
font-size: 1.2rem;
font-weight: 400;
color: rgba(0,0,0,.45);
}
}
.collection_closeIcon{
position: absolute;
top: 2rem;
right: 2rem;
cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
.fi-rr-cross-small::before{
padding: .2rem;
border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all;
color: rgba(0, 0, 0, 0.55);
}
&.collection_closeIcon:hover .fi-rr-cross-small::before{
border: solid 2px rgba(0, 0, 0, 0.55);
color: rgba(0, 0, 0, 1);
}
}
.layout_nav{
display: flex;
margin-top: 2rem;
justify-content: center;
max-height: 13%;
overflow: hidden;
.active{
img{
border: 2px solid;
border-radius: 2px;
box-sizing: border-box;
}
}
>div{
max-height: 13%;
overflow: hidden;
img{
object-fit: cover;
width:5rem;
cursor: pointer;
margin: 0 2rem;
max-height: 100%;
}
}
}
.layout_centent{
display: flex;
// height: 55%;
height: 35rem;
width: 57rem;
// height: 60%;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
width: 50%;
margin: 3rem auto;
overflow: hidden;
// padding: 3rem 0;
justify-content: space-between;
position: relative;
user-select:none
&.active{
flex-direction: row;
}
.layout_btn{
list-style: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border: 2px solid rgb(20, 188, 255);
padding: 0;
-webkit-user-drag: none;
user-select:none;
li{
cursor: pointer;
// border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: rgb(20, 188, 255);
position: absolute;
z-index: 1049;
}
.layout_btn_top,.layout_btn_bottom{
left: 50%;
transform: translate(-50%,-50%) ;
cursor: n-resize;
}
.layout_btn_top{
top: 0;
}
.layout_btn_bottom{
top: 100%;
}
.layout_btn_left,.layout_btn_right{
top: 50%;
transform: translate(-50%,-50%) ;
cursor: e-resize;
}
.layout_btn_left{
left: 0;
}
.layout_btn_right{
left: 100%;
}
.layout_rotote{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 0;
height: 0;
}
.layout_rotote::after{
position: absolute;
content: "";
background-color: #14bcff;
width: 2px;
height: 30px;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.layout_rotote::before{
position: absolute;
content: "";
background-color: #14bcff;
top: calc(50% - 30px);
left: 50%;
transform: translate(-50%,-50%) ;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
}
.layout_translate{
top: 50%;
left: 50%;
transform: translate(-50%,-50%) ;
cursor: crosshair;
cursor: move;
}
.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
// opacity: 0;
width: .8rem;
height: .8rem;
}
.layout_angle_tr{
right: 0%;
top: 0;
}
.layout_angle_tl{
left: 0%;
top: 0;
}
.layout_angle_br{
right: 0%;
bottom: 0%;
}
.layout_angle_bl{
left: 0%;
bottom: 0%;
}
.eventNode{
pointer-events: none;
}
}
.layout_centent_bor{
}
.modal_imgItem{
position: relative;
// >div{
// position: absolute;
// width: 100%;
// height: 100%;
// }
overflow: hidden;
&.active{
position: absolute;
}
img{
// object-fit: cover;
// width: 100%;
// height: 100%;
pointer-events: none;
float: left;
user-select:none;
-webkit-user-drag: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) scale(1);
}
::selection {
// background: rgba(0,0,0,0);
// background: yellow;
}
}
}
.wh1{
width: 23%;
height: 48%;
}
.wh4{
width: 48.5%;
height: 100%;
}
.wh8{
width: 100%;
height: 48.5%;
}
.w1h2{
width: 23%;
height: 100%;
}
.w2h1{
width: 48.5%;
height: 48%;
}
.layout_left{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 5rem;
overflow-x: hidden;
// background-color: #000;
width: 8%;
height: 50%;
&.layout_left::-webkit-scrollbar {
display: none;
}
.layout_left_text{
font-size: 1.6rem;
margin-bottom: 1rem;
color: #000;
}
.layout_left_items{
width: 100%;
height: 6rem;
display: flex;
align-content: space-between;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: column;
margin-bottom: 2rem;
cursor: pointer;
.layout_left_item{
box-sizing: border-box;
border: 1px solid #000;
}
}
}
.submit_button {
margin: 2rem auto 0;
}
}
.mark_loading{
position: absolute;
}
}
</style>