feat: Add auto-arrange button and functionality in ObjectFlowDesigner
This commit is contained in:
Chop
242
styles.css
242
styles.css
@@ -396,6 +396,248 @@ body {
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* Alignment Icons */
|
||||
.icon-align-left {
|
||||
width: 20px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-align-left::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #4a5568;
|
||||
border-radius: 1px;
|
||||
box-shadow: 0 4px 0 #4a5568, 0 8px 0 #4a5568, 0 12px 0 #4a5568;
|
||||
}
|
||||
|
||||
.icon-btn.active .icon-align-left::before {
|
||||
background: white;
|
||||
box-shadow: 0 4px 0 white, 0 8px 0 white, 0 12px 0 white;
|
||||
}
|
||||
|
||||
.icon-align-center {
|
||||
width: 20px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-align-center::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 2px;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background: #4a5568;
|
||||
border-radius: 1px;
|
||||
box-shadow: 0 4px 0 #4a5568, 0 8px 0 #4a5568, 0 12px 0 #4a5568;
|
||||
}
|
||||
|
||||
.icon-btn.active .icon-align-center::before {
|
||||
background: white;
|
||||
box-shadow: 0 4px 0 white, 0 8px 0 white, 0 12px 0 white;
|
||||
}
|
||||
|
||||
.icon-align-right {
|
||||
width: 20px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-align-right::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #4a5568;
|
||||
border-radius: 1px;
|
||||
box-shadow: 0 4px 0 #4a5568, 0 8px 0 #4a5568, 0 12px 0 #4a5568;
|
||||
}
|
||||
|
||||
.icon-btn.active .icon-align-right::before {
|
||||
background: white;
|
||||
box-shadow: 0 4px 0 white, 0 8px 0 white, 0 12px 0 white;
|
||||
}
|
||||
|
||||
.icon-align-top {
|
||||
width: 16px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-align-top::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: #4a5568;
|
||||
border-radius: 1px;
|
||||
box-shadow: 4px 0 0 #4a5568, 8px 0 0 #4a5568, 12px 0 0 #4a5568;
|
||||
}
|
||||
|
||||
.icon-btn.active .icon-align-top::before {
|
||||
background: white;
|
||||
box-shadow: 4px 0 0 white, 8px 0 0 white, 12px 0 0 white;
|
||||
}
|
||||
|
||||
.icon-align-middle {
|
||||
width: 16px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-align-middle::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
background: #4a5568;
|
||||
border-radius: 1px;
|
||||
box-shadow: 4px 0 0 #4a5568, 8px 0 0 #4a5568, 12px 0 0 #4a5568;
|
||||
}
|
||||
|
||||
.icon-btn.active .icon-align-middle::before {
|
||||
background: white;
|
||||
box-shadow: 4px 0 0 white, 8px 0 0 white, 12px 0 0 white;
|
||||
}
|
||||
|
||||
.icon-align-bottom {
|
||||
width: 16px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-align-bottom::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: #4a5568;
|
||||
border-radius: 1px;
|
||||
box-shadow: 4px 0 0 #4a5568, 8px 0 0 #4a5568, 12px 0 0 #4a5568;
|
||||
}
|
||||
|
||||
.icon-btn.active .icon-align-bottom::before {
|
||||
background: white;
|
||||
box-shadow: 4px 0 0 white, 8px 0 0 white, 12px 0 0 white;
|
||||
}
|
||||
|
||||
.icon-distribute-h {
|
||||
width: 20px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-distribute-h::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 2px;
|
||||
background: #4a5568;
|
||||
border-radius: 1px;
|
||||
box-shadow: 8px 0 0 #4a5568, 16px 0 0 #4a5568;
|
||||
}
|
||||
|
||||
.icon-distribute-h::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 1px;
|
||||
height: 12px;
|
||||
background: #4a5568;
|
||||
border-radius: 0.5px;
|
||||
box-shadow: 8px 0 0 #4a5568, 16px 0 0 #4a5568;
|
||||
}
|
||||
|
||||
.icon-btn.active .icon-distribute-h::before {
|
||||
background: white;
|
||||
box-shadow: 8px 0 0 white, 16px 0 0 white;
|
||||
}
|
||||
|
||||
.icon-btn.active .icon-distribute-h::after {
|
||||
background: white;
|
||||
box-shadow: 8px 0 0 white, 16px 0 0 white;
|
||||
}
|
||||
|
||||
.icon-distribute-v {
|
||||
width: 16px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-distribute-v::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 7px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
background: #4a5568;
|
||||
border-radius: 1px;
|
||||
box-shadow: 0 8px 0 #4a5568, 0 16px 0 #4a5568;
|
||||
}
|
||||
|
||||
.icon-distribute-v::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 12px;
|
||||
height: 1px;
|
||||
background: #4a5568;
|
||||
border-radius: 0.5px;
|
||||
box-shadow: 0 8px 0 #4a5568, 0 16px 0 #4a5568;
|
||||
}
|
||||
|
||||
.icon-btn.active .icon-distribute-v::before {
|
||||
background: white;
|
||||
box-shadow: 0 8px 0 white, 0 16px 0 white;
|
||||
}
|
||||
|
||||
.icon-btn.active .icon-distribute-v::after {
|
||||
background: white;
|
||||
box-shadow: 0 8px 0 white, 0 16px 0 white;
|
||||
}
|
||||
|
||||
.icon-auto-arrange {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-auto-arrange::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: 2px solid #4a5568;
|
||||
border-radius: 1px;
|
||||
box-shadow: 10px 0 0 #4a5568, 0 10px 0 #4a5568, 10px 10px 0 #4a5568;
|
||||
}
|
||||
|
||||
.icon-btn.active .icon-auto-arrange::before {
|
||||
border-color: white;
|
||||
box-shadow: 10px 0 0 white, 0 10px 0 white, 10px 10px 0 white;
|
||||
}
|
||||
|
||||
.canvas-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user