Powerful-517/yys-editor
3
0
Fork 0
mirror of https://github.com/Powerful-517/yys-editor.git synced 2025-07-08 13:21:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

支持组件缩放

Browse Source
This commit is contained in:
rookie4show
2025-05-27 18:22:32 +08:00
parent a465450bf1
commit 45565de5ef
3 changed files with 72 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/flow/nodes/common/ImageNode.vue
View File

@ -21,11 +21,12 @@ watch(() => props.data, (newData) => {
</script> </script>
<template> <template>
<div class="image-node" :style="{ width: `${nodeWidth}px`, height: `${nodeHeight}px` }">
<NodeResizer v-if="selected" :min-width="60" :min-height="60" :max-width="400" :max-height="400"/> <NodeResizer v-if="selected" :min-width="60" :min-height="60" :max-width="400" :max-height="400"/>
<div class="image-node">
<Handle type="target" position="left" :id="`${id}-target`"/> <Handle type="target" position="left" :id="`${id}-target`"/>
<div class="image-content"> <div class="image-content">
<img v-if="props.data && props.data.url" :src="props.data.url" alt="图片节点" style="width:100%;height:100%;object-fit:contain;" /> <img v-if="props.data && props.data.url" :src="props.data.url" alt="图片节点"
style="width:100%;height:100%;object-fit:contain;"/>
<div v-else class="image-placeholder">未上传图片</div> <div v-else class="image-placeholder">未上传图片</div>
</div> </div>
<Handle type="source" position="right" :id="`${id}-source`"/> <Handle type="source" position="right" :id="`${id}-source`"/>
@ -41,14 +42,22 @@ watch(() => props.data, (newData) => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
position: relative;
width: 100%;
height: 100%;
min-width: 180px;
min-height: 180px;
} }
.image-content { .image-content {
position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.image-placeholder { .image-placeholder {
color: #bbb; color: #bbb;
font-size: 14px; font-size: 14px;

19
src/components/flow/nodes/yys/PropertySelectNode.vue
View File

@ -205,7 +205,6 @@ defineExpose({
</script> </script>
<template> <template>
<div class="property-node" :class="[currentProperty.priority ? `priority-${currentProperty.priority}` : '']" :style="{ width: `${nodeWidth}px`, height: `${nodeHeight}px` }">
<NodeResizer <NodeResizer
v-if="selected" v-if="selected"
:min-width="150" :min-width="150"
@ -213,7 +212,7 @@ defineExpose({
:max-width="300" :max-width="300"
:max-height="300" :max-height="300"
/> />
<div class="property-node" :class="[currentProperty.priority ? `priority-${currentProperty.priority}` : '']" >
<!-- 输入连接点 --> <!-- 输入连接点 -->
<Handle type="target" position="left" :id="`${id}-target`" /> <Handle type="target" position="left" :id="`${id}-target`" />
@ -252,12 +251,28 @@ defineExpose({
</template> </template>
<style scoped> <style scoped>
.property-node {
position: relative;
width: 100%;
height: 100%;
min-width: 180px;
min-height: 180px;
}
.node-content { .node-content {
position: relative;
background-color: white; background-color: white;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
border-radius: 4px; border-radius: 4px;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 100%;
height: 100%;
min-width: 180px;
min-height: 180px;
} }
:deep(.vue-flow__node-resizer) { :deep(.vue-flow__node-resizer) {

19
src/components/flow/nodes/yys/YuhunSelectNode.vue
View File

@ -84,7 +84,6 @@ defineExpose({
</script> </script>
<template> <template>
<div class="yuhun-node" :style="{ width: `${nodeWidth}px`, height: `${nodeHeight}px` }">
<NodeResizer <NodeResizer
v-if="selected" v-if="selected"
:min-width="150" :min-width="150"
@ -92,7 +91,7 @@ defineExpose({
:max-width="300" :max-width="300"
:max-height="300" :max-height="300"
/> />
<div class="yuhun-node" >
<!-- 输入连接点 --> <!-- 输入连接点 -->
<Handle type="target" position="left" :id="`${id}-target`"/> <Handle type="target" position="left" :id="`${id}-target`"/>
@ -119,12 +118,28 @@ defineExpose({
</template> </template>
<style scoped> <style scoped>
.yuhun-node {
position: relative;
width: 100%;
height: 100%;
min-width: 180px;
min-height: 180px;
}
.node-content { .node-content {
position: relative;
background-color: white; background-color: white;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
border-radius: 4px; border-radius: 4px;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 100%;
height: 100%;
min-width: 180px;
min-height: 180px;
} }
:deep(.vue-flow__node-resizer) { :deep(.vue-flow__node-resizer) {