iop-bpmn-react 0.0.3 → 0.0.5

package/dist/index.css

@@ -253,356 +253,356 @@
   font-style: normal;
   font-display: swap;
 }
-.iop-bpmn-modeler-wrapper {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  min-height: 500px;
-  position: relative;
-}
-
-.iop-bpmn-modeler-canvas {
-  flex: 1;
-  position: relative;
-}
-
-.iop-bpmn-modeler-panel {
-  width: 300px;
-  min-width: 300px;
-  border-left: 1px solid #e0e0e0;
-  overflow-y: auto;
-  background: #fff;
-}
-
-/* 确保属性面板正确显示 */
-.iop-bpmn-modeler-panel .bio-properties-panel {
-  height: 100%;
-}
-
-/* 隐藏 token simulation 自带的开关（由工具栏按钮替代） */
-.iop-bpmn-modeler-canvas .bts-toggle-mode {
-  display: none;
-}
-
-/* ===== Sketchy 手绘风格增强 ===== */
-
-/* 手绘字体 */
-.iop-bpmn-sketchy .djs-label,
-.iop-bpmn-sketchy text {
-  font-family: 'Long Cang', 'Caveat', 'Architects Daughter', cursive !important;
-}
-
-/* 加粗连接线描边，增强手绘感 */
-.iop-bpmn-sketchy .djs-connection .djs-visual path {
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-/* 元素形状描边增强 */
-.iop-bpmn-sketchy .djs-shape .djs-visual path,
-.iop-bpmn-sketchy .djs-shape .djs-visual rect,
-.iop-bpmn-sketchy .djs-shape .djs-visual circle,
-.iop-bpmn-sketchy .djs-shape .djs-visual ellipse,
-.iop-bpmn-sketchy .djs-shape .djs-visual polygon {
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-/* 背景色微调，模拟纸张质感 */
-.iop-bpmn-sketchy .djs-container {
-  background:
-    linear-gradient(90deg, transparent 79px, rgba(0,0,0,0.03) 79px, rgba(0,0,0,0.03) 80px, transparent 80px),
-    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
-    #fefefe;
-  background-size: 80px 20px;
-}
-
-/* ===== 颜色选择器弹窗 ===== */
-
-.iop-color-picker-popup {
-  display: none;
-  position: fixed;
-  z-index: 10000;
-  padding: 12px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  min-width: 220px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  font-size: 12px;
-}
-
-.iop-color-picker-content {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-/* 预设颜色网格 */
-.iop-color-picker-presets {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 4px;
-}
-
-.iop-color-picker-preset-btn {
-  width: 28px;
-  height: 28px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  background: #fff;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  transition: transform 0.1s;
-}
-.iop-color-picker-preset-btn:hover {
-  transform: scale(1.15);
-  border-color: #999;
-}
-
-.iop-color-picker-preset-swatch {
-  display: block;
-  width: 20px;
-  height: 20px;
-  border-radius: 3px;
-  border: 2px solid;
-}
-
-.iop-color-picker-preset-default {
-  color: #999;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-/* 填充/边框 Tab */
-.iop-color-picker-tabs {
-  display: flex;
-  gap: 0;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  overflow: hidden;
-}
-.iop-color-picker-tab {
-  flex: 1;
-  padding: 4px 0;
-  border: none;
-  background: #f5f5f5;
-  cursor: pointer;
-  font-size: 12px;
-  color: #666;
-  transition: background 0.15s, color 0.15s;
-}
-.iop-color-picker-tab.active {
-  background: #4A90D9;
-  color: #fff;
-}
-.iop-color-picker-tab:hover:not(.active) {
-  background: #eaeaea;
-}
-
-/* Hex 输入 */
-.iop-color-picker-hex {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  padding: 4px 8px;
-  background: #fafafa;
-}
-.iop-color-picker-hex-hash {
-  color: #999;
-  font-size: 13px;
-}
-.iop-color-picker-hex input {
-  border: none;
-  outline: none;
-  background: transparent;
-  font-size: 13px;
-  font-family: 'SF Mono', Monaco, monospace;
-  width: 80px;
-  color: #333;
-}
-
-/* ===== BPMN Linting 样式 ===== */
-
-.bjsl-button {
-  position: absolute;
-  bottom: 20px;
-  left: 20px;
-  padding: 6px 12px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 13px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  z-index: 10;
-  transition: background 0.15s;
-}
-
-.bjsl-button .icon {
-  width: 16px;
-  height: 16px;
-  display: inline-flex;
-  align-items: center;
-}
-
-.bjsl-button .icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-.bjsl-button-success {
-  background: #d4edda;
-  color: #155724;
-}
-
-.bjsl-button-warning {
-  background: #fff3cd;
-  color: #856404;
-}
-
-.bjsl-button-error {
-  background: #f8d7da;
-  color: #721c24;
-}
-
-.bjsl-button-inactive {
-  display: none;
-}
-
-.bjsl-button:hover {
-  opacity: 0.85;
-}
-
-/* Linting 问题覆盖层 */
-.bjsl-overlay {
-  background: #fff;
-  border-radius: 4px;
-  padding: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  max-width: 300px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  font-size: 12px;
-}
-
-.bjsl-overlay ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.bjsl-overlay li {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  padding: 4px 0;
-}
-
-.bjsl-overlay li:not(:last-child) {
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.bjsl-overlay li .icon {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-  margin-top: 1px;
-}
-
-.bjsl-overlay li .icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-.bjsl-overlay li.error .icon {
-  color: #dc3545;
-}
-
-.bjsl-overlay li.warning .icon {
-  color: #ffc107;
-}
-
-.bjsl-overlay li.info .icon {
-  color: #17a2b8;
-}
-
-.bjsl-overlay li .message {
-  flex: 1;
-}
-
-.bjsl-overlay li .rule {
-  color: #6c757d;
-  font-size: 11px;
-}
-
-.bjsl-overlay li .rule a {
-  color: #6c757d;
-  text-decoration: none;
-}
-
-.bjsl-overlay li .rule a:hover {
-  text-decoration: underline;
-}
-
-.bjsl-child-issues {
-  margin-top: 4px;
-  padding-top: 4px;
-}
-
-.bjsl-child-issues hr {
-  border: none;
-  border-top: 1px solid #e0e0e0;
-  margin: 4px 0;
-}
-
-.bjsl-issue-heading {
-  font-weight: 600;
-  color: #495057;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.bjsl-id-hint {
-  font-size: 10px;
-  color: #adb5bd;
-  margin-left: 4px;
-}
-
-/* ===== ListGroup 添加按钮始终显示悬浮状态样式 ===== */
-
-/* 隐藏原有的 label（如果存在），使用伪元素替代 */
-.bio-properties-panel-add-entry .bio-properties-panel-add-entry-label {
-  display: none !important;
-}
-
-/* 始终显示悬浮状态的背景色和图标颜色 */
-.bio-properties-panel-add-entry {
-  background-color: var(--add-entry-hover-background-color) !important;
-  fill: var(--add-entry-hover-fill-color) !important;
-}
-
-/* 使用伪元素添加"创建"文字，始终显示 */
-.bio-properties-panel-add-entry::after {
-  content: var(--create-button-text, '创建');
-  color: var(--add-entry-label-color);
-  font-size: 12px;
-  padding: 0 6px 0 2px;
-}
-
-/* 列表为空时，调整 margin 让按钮靠左显示 */
-.bio-properties-panel-group-header.empty .bio-properties-panel-add-entry {
-  margin-right: 19px !important;
-}
-
-/* ===== Flowable 监听器样式（由 ListGroup 组件渲染，仅保留基础样式） ===== */
+.iop-bpmn-modeler-wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 500px;
+  position: relative;
+}
+
+.iop-bpmn-modeler-canvas {
+  flex: 1;
+  position: relative;
+}
+
+.iop-bpmn-modeler-panel {
+  width: 300px;
+  min-width: 300px;
+  border-left: 1px solid #e0e0e0;
+  overflow-y: auto;
+  background: #fff;
+}
+
+/* 确保属性面板正确显示 */
+.iop-bpmn-modeler-panel .bio-properties-panel {
+  height: 100%;
+}
+
+/* 隐藏 token simulation 自带的开关（由工具栏按钮替代） */
+.iop-bpmn-modeler-canvas .bts-toggle-mode {
+  display: none;
+}
+
+/* ===== Sketchy 手绘风格增强 ===== */
+
+/* 手绘字体 */
+.iop-bpmn-sketchy .djs-label,
+.iop-bpmn-sketchy text {
+  font-family: 'Long Cang', 'Caveat', 'Architects Daughter', cursive !important;
+}
+
+/* 加粗连接线描边，增强手绘感 */
+.iop-bpmn-sketchy .djs-connection .djs-visual path {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* 元素形状描边增强 */
+.iop-bpmn-sketchy .djs-shape .djs-visual path,
+.iop-bpmn-sketchy .djs-shape .djs-visual rect,
+.iop-bpmn-sketchy .djs-shape .djs-visual circle,
+.iop-bpmn-sketchy .djs-shape .djs-visual ellipse,
+.iop-bpmn-sketchy .djs-shape .djs-visual polygon {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* 背景色微调，模拟纸张质感 */
+.iop-bpmn-sketchy .djs-container {
+  background:
+    linear-gradient(90deg, transparent 79px, rgba(0,0,0,0.03) 79px, rgba(0,0,0,0.03) 80px, transparent 80px),
+    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
+    #fefefe;
+  background-size: 80px 20px;
+}
+
+/* ===== 颜色选择器弹窗 ===== */
+
+.iop-color-picker-popup {
+  display: none;
+  position: fixed;
+  z-index: 10000;
+  padding: 12px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  min-width: 220px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 12px;
+}
+
+.iop-color-picker-content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* 预设颜色网格 */
+.iop-color-picker-presets {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 4px;
+}
+
+.iop-color-picker-preset-btn {
+  width: 28px;
+  height: 28px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: transform 0.1s;
+}
+.iop-color-picker-preset-btn:hover {
+  transform: scale(1.15);
+  border-color: #999;
+}
+
+.iop-color-picker-preset-swatch {
+  display: block;
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+  border: 2px solid;
+}
+
+.iop-color-picker-preset-default {
+  color: #999;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+/* 填充/边框 Tab */
+.iop-color-picker-tabs {
+  display: flex;
+  gap: 0;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.iop-color-picker-tab {
+  flex: 1;
+  padding: 4px 0;
+  border: none;
+  background: #f5f5f5;
+  cursor: pointer;
+  font-size: 12px;
+  color: #666;
+  transition: background 0.15s, color 0.15s;
+}
+.iop-color-picker-tab.active {
+  background: #4A90D9;
+  color: #fff;
+}
+.iop-color-picker-tab:hover:not(.active) {
+  background: #eaeaea;
+}
+
+/* Hex 输入 */
+.iop-color-picker-hex {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  padding: 4px 8px;
+  background: #fafafa;
+}
+.iop-color-picker-hex-hash {
+  color: #999;
+  font-size: 13px;
+}
+.iop-color-picker-hex input {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 13px;
+  font-family: 'SF Mono', Monaco, monospace;
+  width: 80px;
+  color: #333;
+}
+
+/* ===== BPMN Linting 样式 ===== */
+
+.bjsl-button {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  z-index: 10;
+  transition: background 0.15s;
+}
+
+.bjsl-button .icon {
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.bjsl-button .icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.bjsl-button-success {
+  background: #d4edda;
+  color: #155724;
+}
+
+.bjsl-button-warning {
+  background: #fff3cd;
+  color: #856404;
+}
+
+.bjsl-button-error {
+  background: #f8d7da;
+  color: #721c24;
+}
+
+.bjsl-button-inactive {
+  display: none;
+}
+
+.bjsl-button:hover {
+  opacity: 0.85;
+}
+
+/* Linting 问题覆盖层 */
+.bjsl-overlay {
+  background: #fff;
+  border-radius: 4px;
+  padding: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  max-width: 300px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 12px;
+}
+
+.bjsl-overlay ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.bjsl-overlay li {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 4px 0;
+}
+
+.bjsl-overlay li:not(:last-child) {
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.bjsl-overlay li .icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.bjsl-overlay li .icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.bjsl-overlay li.error .icon {
+  color: #dc3545;
+}
+
+.bjsl-overlay li.warning .icon {
+  color: #ffc107;
+}
+
+.bjsl-overlay li.info .icon {
+  color: #17a2b8;
+}
+
+.bjsl-overlay li .message {
+  flex: 1;
+}
+
+.bjsl-overlay li .rule {
+  color: #6c757d;
+  font-size: 11px;
+}
+
+.bjsl-overlay li .rule a {
+  color: #6c757d;
+  text-decoration: none;
+}
+
+.bjsl-overlay li .rule a:hover {
+  text-decoration: underline;
+}
+
+.bjsl-child-issues {
+  margin-top: 4px;
+  padding-top: 4px;
+}
+
+.bjsl-child-issues hr {
+  border: none;
+  border-top: 1px solid #e0e0e0;
+  margin: 4px 0;
+}
+
+.bjsl-issue-heading {
+  font-weight: 600;
+  color: #495057;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.bjsl-id-hint {
+  font-size: 10px;
+  color: #adb5bd;
+  margin-left: 4px;
+}
+
+/* ===== ListGroup 添加按钮始终显示悬浮状态样式 ===== */
+
+/* 隐藏原有的 label（如果存在），使用伪元素替代 */
+.bio-properties-panel-add-entry .bio-properties-panel-add-entry-label {
+  display: none !important;
+}
+
+/* 始终显示悬浮状态的背景色和图标颜色 */
+.bio-properties-panel-add-entry {
+  background-color: var(--add-entry-hover-background-color) !important;
+  fill: var(--add-entry-hover-fill-color) !important;
+}
+
+/* 使用伪元素添加"创建"文字，始终显示 */
+.bio-properties-panel-add-entry::after {
+  content: var(--create-button-text, '创建');
+  color: var(--add-entry-label-color);
+  font-size: 12px;
+  padding: 0 6px 0 2px;
+}
+
+/* 列表为空时，调整 margin 让按钮靠左显示 */
+.bio-properties-panel-group-header.empty .bio-properties-panel-add-entry {
+  margin-right: 19px !important;
+}
+
+/* ===== Flowable 监听器样式（由 ListGroup 组件渲染，仅保留基础样式） ===== */
 /**
  * color definitions
  */