+
-
![]()
-
-
+ ![]()
+ ![]()
+
+
@@ -82,12 +102,15 @@
-
+
+
@@ -106,20 +129,31 @@ import { defineComponent,computed,ref,onMounted,nextTick,watch,toRefs, reactive,
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { useStore } from "vuex";
import { getMousePosition } from "@/tool/mdEvent";
+import { sketchToMask } from "@/tool/util";
+import pingpu from '@/component/Canvas/OverallCanvas/index.vue'
+import RepeatSetting from "./overallSetting/RepeatSetting.vue";
+import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
+ pingpu,RepeatSetting
},
props: {
type: {
type: String,
default: 'print',
- }
+ },
+ sketchSize:{
+ type:Object,
+ default:()=>{}
+ },
},
setup(props,{emit}) {
+ const { t } = useI18n()
const store = useStore();
const editPrintElementDom = reactive({
imgDom:null as any,
sketchImg:null as any,
+ pingpuRef:null as any,
})
const editPrintElementData = reactive({
selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
@@ -135,9 +169,9 @@ export default defineComponent({
single:[],
}
} as any,
- stateOverallSingle:'single',
+ stateOverallSingle:'single' as any,
type:props.type,
- imgDomIndex:0,
+ imgDomIndex:-1,
direction:'',//判断点的那条边
printZIndex:2,//印花优先级
sketchWH:{
@@ -149,6 +183,13 @@ export default defineComponent({
printElementList:null as any,
isSketchLoad:false,
})
+ const ACTIONS = {
+ ADD: "add",
+ UPDATE: "update",
+ DELETE: "delete",
+ SELECT: "select",
+ SORT: "sort",
+ };
const collItemSize = reactive({
collValue:18,
num:1,
@@ -168,13 +209,14 @@ export default defineComponent({
})
const setOveralSingle = ()=>{
+
setItemPosition()
}
const formatter = (value:any)=>{
return `${value}%`;
}
const deletePrint = ()=>{
- editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].splice(editPrintElementData.imgDomIndex,1)
+ if(editPrintElementData.imgDomIndex>-1)editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].splice(editPrintElementData.imgDomIndex,1)
}
const setScaleLocation:any = (item:any)=>{
return new Promise((resolve, reject) => {
@@ -215,6 +257,7 @@ export default defineComponent({
path:data.url,
priority:editPrintElementData.printZIndex,
scale,
+ globalCompositeOperation:'',
}
getItemPosition(item)
setItemPosition()
@@ -249,7 +292,9 @@ export default defineComponent({
path:item.path,
minIOPath:item.minIOPath,
ifSingle:!!item.ifSingle,
+ globalCompositeOperation:'',
}
+ if(item.object)value.object = item.object
return value
}
if(editPrintElementData.printStyleList[props.type].single.length>0){
@@ -282,7 +327,6 @@ export default defineComponent({
}
const getItemPosition = (item:any)=>{
let left,top
-
if(item.ifSingle){
//single
left = item.location[0] / editPrintElementData.sketchWH.scale[0]
@@ -312,13 +356,40 @@ export default defineComponent({
}
editPrintElementData.printZIndex++
item.pattern = pattern
+
+ if(item.object){
+
+ }else{
+ item.object = {
+ top: 0,
+ left: 0,
+ scaleX: 1,
+ scaleY: 1,
+ opacity: 1,
+ angle: 0,
+ flipX: false,
+ flipY: false,
+ blendMode: "multiply",
+ gapX: 0,
+ gapY: 0,
+ }
+ }
if(item.ifSingle){
editPrintElementData.printStyleList[props.type].single.push(item)
}else{
- editPrintElementData.printStyleList[props.type].overall = []
+ item.token = Date.now().toString() + (editPrintElementData.printStyleList[props.type].overall.length + '')
+ // editPrintElementData.printStyleList[props.type].overall = []
editPrintElementData.printStyleList[props.type].overall.push(item)
+ setTimeout(()=>{
+ editPrintElementDom.pingpuRef.updataList([
+ {
+ action: ACTIONS.ADD,
+ data: item,
+ },
+ ]);
+ })
+
}
-
}
const setPosition = ()=>{
nextTick(()=>{
@@ -337,16 +408,16 @@ export default defineComponent({
if(!editPrintElementData.selectDetail.printObject.prints)return
let state = true
// editPrintElementData.stateOverallSingle = 'single'
- let arr:any = editPrintElementData.selectDetail.printObject.prints
+ let arr:any = editPrintElementData.selectDetail.newDetail?.print || editPrintElementData.selectDetail.printObject.prints
if(props.type == 'element'){
- arr = editPrintElementData.selectDetail.trims.prints
+ arr = editPrintElementData.selectDetail.newDetail?.element || editPrintElementData.selectDetail.trims.prints
}
if(editPrintElementData.selectDetail.newDetail?.[editPrintElementData.currentDetailType]){
arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType]
}
if(arr && arr.length > 0){
arr.forEach((item:any)=>{
- if(!item.ifSingle && arr.length == 1){
+ if(!item.ifSingle){
editPrintElementData.stateOverallSingle = 'overall',
state = false
}
@@ -377,15 +448,42 @@ export default defineComponent({
addPrintELement(newVal)
}
})
- watch(()=>((editPrintElementData.selectDetail?.undividedLayer || editPrintElementData.selectDetail?.id)),(newVal)=>{
+ watch(()=>((editPrintElementData.selectDetail?.id)),(newVal)=>{
if(!newVal)return
editPrintElementData.isSketchLoad = false,
editPrintElementData.printStyleList[props.type] = {
single:[],
overall:[],
}
+ if(!editPrintElementData.selectDetail.sketchMask){
+ sketchToMask(editPrintElementData.selectDetail?.layersObject[0].maskUrl).then((res:any)=>{
+ editPrintElementData.selectDetail.sketchMask = res
+ })
+ }
setPosition()
},{immediate: true,})
+ watch(()=>editPrintElementData.stateOverallSingle,(newVal)=>{
+ let arr = editPrintElementData.printStyleList[props.type][newVal]
+ if(arr.length > 0){
+ editPrintElementData.imgDomIndex = 0
+ if(newVal == 'overall'){
+ arr.forEach((item:any,index:number) => {
+ item.id_ = index
+ });
+ }
+ }else{
+ editPrintElementData.imgDomIndex = -1
+ }
+ })
+ watch(()=>editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].length,(newVal)=>{
+ if(newVal > 0){
+ if(editPrintElementData.imgDomIndex < 0)editPrintElementData.imgDomIndex = 0
+ }
+ })
+ const addOverallToCanvas = ()=>{
+
+ editPrintElementDom.pingpuRef
+ }
//设置移动
const itemMoveMousedown = (index:number,event:any)=>{
if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
@@ -649,7 +747,17 @@ export default defineComponent({
}
//排序 从大到小
const sortDesignCollection = ()=> {
-
+ if(editPrintElementData.stateOverallSingle == 'overall'){
+ let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
+ let tokenList = arr.map((item)=>({token:item.token,srot:item.pattern.style.zIndex}))
+ let tokens = tokenList.sort((a:any,b:any)=>a.srot - b.srot).map((item:any)=>item.token)
+ editPrintElementDom.pingpuRef.updataList([
+ {
+ action: ACTIONS.SORT,
+ tokens: tokens,
+ },
+ ]);
+ }
}
const reRange = (item:any, x:number, y:number,str?:string)=>{
let elList:any = collItemSize.elList
@@ -692,6 +800,14 @@ export default defineComponent({
const navDelete = (item:any)=>{
let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
let index = arr.findIndex((arrItem:any)=>arrItem.uniqueId == item.uniqueId)
+ if(editPrintElementData.stateOverallSingle == 'overall'){
+ editPrintElementDom.pingpuRef.updataList([
+ {
+ action: ACTIONS.DELETE,
+ token: arr[index].token,
+ },
+ ]);
+ }
arr.splice(index,1)
setItemPosition()
}
@@ -738,6 +854,106 @@ export default defineComponent({
collItemSize.prentWidth = (collItemSize.padding + remValue) * elArr.length + 'px'
moveItem()
}
+ const updateCanvas = (arr)=>{//画布操作更新对应的参数
+ let list = editPrintElementData.printStyleList[props.type].overall
+ arr.forEach((item)=>{
+ const obj = list.find((v) => v.token === item.token);
+ if (item.action === ACTIONS.UPDATE) {
+ if (item.action === ACTIONS.UPDATE) {
+ try {
+ const key = item.key;
+ const str = /^\[/.test(item.key)
+ ? "obj" + key
+ : "obj." + key;
+ eval(`${str} = item.value`);
+ } catch (error) {
+ console.error(error);
+ }
+ }
+ } else if (item.action === ACTIONS.SELECT) {
+ overallSetIndex(obj)
+ }
+ })
+ }
+ const inputFillAngle = (angle:any)=>{
+ let arr = editPrintElementData.printStyleList[props.type].overall
+ arr[editPrintElementData.imgDomIndex].angle = angle
+ editPrintElementDom.pingpuRef.updataList([
+ {
+ action: ACTIONS.UPDATE,
+ token: arr[editPrintElementData.imgDomIndex].token,
+ key: 'angle',
+ value: angle,
+ },
+ ]);
+ }
+ const inputFillOffset = (offset:any)=>{
+ let arr = editPrintElementData.printStyleList[props.type].overall
+ arr[editPrintElementData.imgDomIndex].location = [offset.left * offset.size[0] / 100,offset.top * offset.size[1] / 100]
+ editPrintElementDom.pingpuRef.updataList([
+ {
+ action: ACTIONS.UPDATE,
+ token: arr[editPrintElementData.imgDomIndex].token,
+ key: 'location[0]',
+ value: offset.left,
+ },
+ ]);
+ editPrintElementDom.pingpuRef.updataList([
+ {
+ action: ACTIONS.UPDATE,
+ token: arr[editPrintElementData.imgDomIndex].token,
+ key: 'location[1]',
+ value: offset.top,
+ },
+ ]);
+ // editPrintElementData.overallDetail.offsetX = offset.left
+ // editPrintElementData.overallDetail.offsetY = offset.top
+ }
+ const inputFillScale = (scale:any)=>{
+ let arr = editPrintElementData.printStyleList[props.type].overall
+ arr[editPrintElementData.imgDomIndex].scale = [scale,scale]
+ editPrintElementDom.pingpuRef.updataList([
+ {
+ action: ACTIONS.UPDATE,
+ token: arr[editPrintElementData.imgDomIndex].token,
+ key: 'scale[0]',
+ value: scale,
+ },
+ ]);
+ }
+ const inputFill_Gap = (x:any,y:any)=>{
+ let arr = editPrintElementData.printStyleList[props.type].overall
+ arr[editPrintElementData.imgDomIndex].object.gapX = x
+ arr[editPrintElementData.imgDomIndex].object.gapY = y
+ editPrintElementDom.pingpuRef.updataList([
+ {
+ action: ACTIONS.UPDATE,
+ token: arr[editPrintElementData.imgDomIndex].token,
+ key: "object.gapX",
+ value: x,
+ },
+ ]);
+ editPrintElementDom.pingpuRef.updataList([
+ {
+ action: ACTIONS.UPDATE,
+ token: arr[editPrintElementData.imgDomIndex].token,
+ key: "object.gapY",
+ value: y,
+ },
+ ]);
+ }
+ const overallSetIndex = (item)=>{
+ if(editPrintElementData.stateOverallSingle !== 'overall')return
+ let arr = editPrintElementData.printStyleList[props.type].overall
+ let index = arr.findIndex((arrItem:any)=>arrItem.token == item.token)
+ editPrintElementData.imgDomIndex = index
+ editPrintElementDom.pingpuRef.updataList([
+ {
+ action: ACTIONS.SELECT,
+ token: arr[index].token,
+ },
+ ]);
+ }
onMounted(()=>{
if(props.type == 'element'){
editPrintElementData.stateOverallSingle = 'single'
@@ -747,6 +963,7 @@ export default defineComponent({
previewDetailPrintData()
})
return{
+ t,
getMousePosition,
...toRefs(editPrintElementDom),
...toRefs(editPrintElementData),
@@ -760,6 +977,12 @@ export default defineComponent({
clearOverall,
designMousedown,
navDelete,
+ updateCanvas,
+ inputFillAngle,
+ inputFillOffset,
+ inputFillScale,
+ inputFill_Gap,
+ overallSetIndex,
}
},
directives:{
@@ -876,7 +1099,10 @@ export default defineComponent({
.habit_System_Designer {
align-items: center;
display: flex;
- justify-content: center;
+ justify-content: flex-end;
+ margin-top: 1.8rem;
+ margin-right: .8rem;
+
.ant-slider-track,
.ant-slider-rail {
background-color: #e1e1e1;
@@ -924,6 +1150,9 @@ export default defineComponent({
cursor: pointer;
border-radius: 1rem;
overflow: hidden;
+ &.active{
+ border: 2px solid #B4B4B4;
+ }
> img{
width: 100%;
height: 100%;
@@ -977,13 +1206,23 @@ export default defineComponent({
overflow-x: hidden;
// max-height: 80%;
position: relative;
+ &::-webkit-scrollbar {
+ display: none;
+ }
>img{
z-index: 2;
position: relative;
// height: 100%;
max-width: 100%;
// width: 100%;
-
+ &.designOpenrtion_sketchMask{
+ position: absolute;
+ z-index: 3;
+ top: 0;
+ left: 0;
+ pointer-events: none;
+ height: 100%;
+ }
}
.designOpenrtion_sketch_mask{
z-index: 2;
@@ -1013,8 +1252,13 @@ export default defineComponent({
}
}
}
+ .designOpenrtion_pingpu{
+ width: 100%;
+ height: 100%;
+ z-index: 2;
+ }
.designOpenrtion_btn{
- z-index: 3;
+ z-index: 99;
>div{
width: 100%;
height: 100%;
diff --git a/src/component/Detail/detailRight/index.vue b/src/component/Detail/detailRight/index.vue
index 8ce41684..d835f5d8 100644
--- a/src/component/Detail/detailRight/index.vue
+++ b/src/component/Detail/detailRight/index.vue
@@ -6,8 +6,8 @@
+ Left Click: Add
+ 
+ Right Click: Remove
+ 
+
+