style: add styles (lf/core lf/extension)

README.md

@@ -40,3 +40,10 @@ All commands are run from the root of the project, from a terminal:
 ## 👀 Want to learn more?
 
 Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+
+## 采坑
+
+本地样式正常，打包后发现有的样式没打进来
+
+1. https://docs.astro.build/zh-cn/guides/styling/#%E9%AB%98%E7%BA%A7
+2. https://docs.astro.build/zh-cn/guides/styling/#%E4%BB%8E-npm-%E5%8C%85%E4%B8%AD%E5%AF%BC%E5%85%A5%E6%A0%B7%E5%BC%8F%E8%A1%A8

astro.config.mjs

@@ -7,4 +7,9 @@ export default defineConfig({
   integrations: [preact({ compat: true })],
   site: 'https://eyea.github.io',
   base: '/LogicFlowDemos',
+  vite: {
+    ssr: {
+      noExternal: ['@logicflow/core', '@logicflow/extension'],
+    }
+  }
 });

src/common/logicflow.core.css

@@ -0,0 +1,198 @@
+.lf-graph {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  background: #ffffff;
+  user-select: none;
+}
+.lf-element-text {
+  cursor: text;
+}
+.lf-text-disabled {
+  pointer-events: none;
+}
+.lf-text-draggable {
+  cursor: move;
+}
+.lf-node-anchor {
+  cursor: crosshair;
+}
+.lf-node-anchor-hover {
+  visibility: hidden;
+}
+.lf-anchor:hover .lf-node-anchor-hover {
+  visibility: visible;
+}
+.lf-edge.pointer-none {
+  pointer-events: none;
+}
+.lf-edge-append {
+  cursor: pointer;
+}
+.lf-edge-animation {
+  stroke-dashoffset: 100%;
+  animation: lf_animate_dash 5s linear infinite;
+}
+@keyframes lf_animate_dash {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+/* node */
+.lf-node-not-allow {
+  cursor: not-allowed;
+}
+
+.lf-polyline-append-ns-resize {
+  cursor: ns-resize;
+}
+.lf-polyline-append-ew-resize {
+  cursor: ew-resize;
+}
+.lf-dragging {
+  cursor: grabbing;
+}
+.lf-drag-able {
+  cursor: default;
+}
+.lf-bezier-adjust-anchor {
+  cursor: pointer;
+}
+/* background */
+.lf-background,
+.lf-grid {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+}
+.lf-background-area {
+  width: 100%;
+  height: 100%;
+}
+/* html-overlay */
+.lf-html-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  pointer-events: none;
+  overflow: hidden;
+  user-select: none;
+}
+.lf-html-overlay__transform > * {
+  pointer-events: all;
+}
+
+.lf-text-editable {
+  pointer-events: all;
+}
+.lf-text-input {
+  text-align: center;
+  outline: none;
+  position: absolute;
+  border: 1px solid #edefed;
+  box-sizing: border-box;
+  line-height: 1.2;
+  border-radius: 3px;
+  resize: none;
+  padding: 5px;
+  min-height: 20px;
+  min-width: 100px;
+  white-space: pre;
+  background: #fff;
+  transform: translate(-50%, -50%);
+}
+.lf-get-text-height {
+  display: inline-block;
+  word-break: break-all;
+  /* 为了跟输入效果保持一致，设置透明边框占位 */
+  border: 1px solid transparent;
+  box-sizing: border-box;
+}
+.lf-node-text-auto-wrap {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* border: 1px solid transparent; */
+}
+.lf-node-text-auto-wrap-content {
+  line-height: 1.2;
+  background: transparent;
+  text-align: center;
+  word-break: break-all;
+  width: 100%;
+}
+.lf-node-text-ellipsis-content {
+  line-height: 1.2;
+  background: transparent;
+  text-align: center;
+  white-space: nowrap;
+  /* overflow: hidden;
+  text-overflow: ellipsis; */
+  width: 100%;
+}
+.lf-node-text-ellipsis-content>div{
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+/* tool-overlay */
+.lf-tool-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  pointer-events: none;
+  overflow: hidden;
+}
+.lf-tool-overlay > * {
+  pointer-events: all;
+}
+/* modification-overlay */
+
+.modification-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  pointer-events: none;
+  overflow: hidden;
+}
+.modification-overlay > * {
+  pointer-events: all;
+}
+.lf-outline,.lf-snapline {
+  pointer-events: none;
+}
+
+.lf-keyboard-tips {
+  float: right;
+}
+.lf-node-select-decorate {
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  border: 1px dashed #343435;
+  position: absolute;
+}
+.lf-multiple-select {
+  position: absolute;
+  border: 2px dashed rgba(24, 125, 255, 0.8);
+  box-shadow: 0px 0px 3px 0px rgba(24, 125, 255, 0.5);
+  cursor: move;
+}
+.lf-edge-adjust-point {
+  cursor: move;
+}
+.lf-rotate{
+  cursor: grabbing;
+}