物管理前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

221 lines
3.9 KiB

  1. .lf-graph {
  2. position: relative;
  3. width: 100%;
  4. height: 100%;
  5. z-index: 0;
  6. background: #ffffff;
  7. user-select: none;
  8. }
  9. .lf-element-text {
  10. cursor: text;
  11. }
  12. .lf-text-disabled {
  13. pointer-events: none;
  14. }
  15. .lf-text-draggable {
  16. cursor: move;
  17. }
  18. .lf-node-anchor {
  19. cursor: crosshair;
  20. }
  21. .lf-node-anchor-hover {
  22. visibility: hidden;
  23. }
  24. .lf-anchor:hover .lf-node-anchor-hover {
  25. visibility: visible;
  26. }
  27. .lf-edge.pointer-none {
  28. pointer-events: none;
  29. }
  30. .lf-edge-append {
  31. cursor: pointer;
  32. }
  33. .lf-edge-animation {
  34. stroke-dashoffset: 100%;
  35. animation: lf_animate_dash 5s linear infinite;
  36. }
  37. @keyframes lf_animate_dash {
  38. 100% {
  39. stroke-dashoffset: 0;
  40. }
  41. }
  42. @keyframes lf_animate_dash_reverse {
  43. 0% {
  44. stroke-dashoffset: 0;
  45. }
  46. }
  47. /* node */
  48. .lf-node-not-allow {
  49. cursor: not-allowed;
  50. }
  51. .lf-polyline-append-ns-resize {
  52. cursor: ns-resize;
  53. }
  54. .lf-polyline-append-ew-resize {
  55. cursor: ew-resize;
  56. }
  57. .lf-dragging {
  58. cursor: grabbing;
  59. }
  60. .lf-drag-able {
  61. cursor: default;
  62. transform: translateZ(0);
  63. }
  64. .customHelperLine {
  65. transform: translateZ(0);
  66. }
  67. .lf-bezier-adjust-anchor {
  68. cursor: pointer;
  69. }
  70. /* background */
  71. .lf-background,
  72. .lf-grid {
  73. position: absolute;
  74. left: 0px;
  75. top: 0px;
  76. right: 0;
  77. bottom: 0;
  78. z-index: -1;
  79. }
  80. .lf-background-area {
  81. width: 100%;
  82. height: 100%;
  83. }
  84. /* html-overlay */
  85. .lf-html-overlay {
  86. position: absolute;
  87. top: 0;
  88. left: 0;
  89. right: 0;
  90. bottom: 0;
  91. z-index: 1;
  92. pointer-events: none;
  93. overflow: hidden;
  94. user-select: none;
  95. }
  96. .lf-html-overlay__transform > * {
  97. pointer-events: all;
  98. }
  99. .lf-text-editable {
  100. pointer-events: all;
  101. }
  102. .lf-text-input-wrapper {
  103. position: absolute;
  104. transform: translate(-50%, -50%);
  105. }
  106. .lf-text-input {
  107. text-align: center;
  108. outline: none;
  109. border: 1px solid #00ffff;
  110. box-sizing: border-box;
  111. line-height: 1.2;
  112. border-top-left-radius: 2px;
  113. border-bottom-left-radius: 2px;
  114. resize: none;
  115. padding: 5px;
  116. min-height: 20px;
  117. min-width: max-content;
  118. white-space: pre;
  119. background: transparent;
  120. }
  121. .lf-text-confirm {
  122. position: absolute;
  123. color: #ffffff;
  124. background-color: #40a9ff;
  125. border: 1px solid rgb(64,169,255);
  126. border-top-right-radius: 2px;
  127. border-bottom-right-radius: 2px;
  128. width: max-content;
  129. min-height: 22px;
  130. padding: 5px;
  131. box-sizing: border-box;
  132. line-height: 1.2;
  133. cursor: pointer;
  134. }
  135. .lf-get-text-height {
  136. display: inline-block;
  137. word-break: break-all;
  138. /* 为了跟输入效果保持一致,设置透明边框占位 */
  139. border: 1px solid transparent;
  140. box-sizing: border-box;
  141. }
  142. .lf-node-text-auto-wrap {
  143. box-sizing: border-box;
  144. display: flex;
  145. justify-content: center;
  146. align-items: center;
  147. /* border: 1px solid transparent; */
  148. }
  149. .lf-node-text-auto-wrap-content {
  150. line-height: 1.2;
  151. background: transparent;
  152. text-align: center;
  153. word-break: break-all;
  154. width: 100%;
  155. }
  156. .lf-node-text-ellipsis-content {
  157. line-height: 1.2;
  158. background: transparent;
  159. text-align: center;
  160. white-space: nowrap;
  161. /* overflow: hidden;
  162. text-overflow: ellipsis; */
  163. width: 100%;
  164. }
  165. .lf-node-text-ellipsis-content>div{
  166. text-overflow: ellipsis;
  167. overflow: hidden;
  168. }
  169. /* tool-overlay */
  170. .lf-tool-overlay {
  171. position: absolute;
  172. top: 0;
  173. left: 0;
  174. right: 0;
  175. bottom: 0;
  176. z-index: 150;
  177. pointer-events: none;
  178. overflow: hidden;
  179. }
  180. .lf-tool-overlay > * {
  181. pointer-events: all;
  182. }
  183. /* modification-overlay */
  184. .modification-overlay {
  185. position: absolute;
  186. top: 0;
  187. left: 0;
  188. right: 0;
  189. bottom: 0;
  190. z-index: 1;
  191. pointer-events: none;
  192. overflow: hidden;
  193. }
  194. .modification-overlay > * {
  195. pointer-events: all;
  196. }
  197. .lf-outline,.lf-snapline {
  198. pointer-events: none;
  199. }
  200. .lf-keyboard-tips {
  201. float: right;
  202. }
  203. .lf-node-select-decorate {
  204. transform: translate(-50%, -50%);
  205. pointer-events: none;
  206. border: 1px dashed #343435;
  207. position: absolute;
  208. }
  209. .lf-multiple-select {
  210. position: absolute;
  211. border: 2px dashed rgba(24, 125, 255, 0.8);
  212. box-shadow: 0px 0px 3px 0px rgba(24, 125, 255, 0.5);
  213. cursor: move;
  214. }
  215. .lf-edge-adjust-point {
  216. cursor: move;
  217. }