@logicflow/core 2.2.1 → 2.2.3-alpha.0

package/README.md

@@ -102,6 +102,38 @@ const lf = new LogicFlow({
 lf.render(data);
 ```
 
+## AI 编程支持
+
+LogicFlow 为 AI 编程工具提供了随 npm 包发布的本地文档。`@logicflow/core@2.2.2` 及以上版本会包含这些文档。安装或升级后，可以把下面这段提示词复制给你的 AI Agent，让它在实现 LogicFlow 功能前先查官方文档。
+
+更多说明请查看 [AI 编程支持](https://site.logic-flow.cn/tutorial/ai)。
+
+升级 `@logicflow/core` 后，请将最新版提示词再次提供给 Agent。
+
+```md
+<!-- BEGIN:logicflow-agent-rules -->
+# LogicFlow Agent Rules
+
+LogicFlow documentation is available at:
+
+- `node_modules/@logicflow/core/dist/docs/`
+
+Package roles:
+
+- `@logicflow/core`: core graph editor runtime, including canvas, nodes, edges, models, events, rendering, themes, and basic interactions.
+- `@logicflow/extension`: official plugins for common product features.
+- `@logicflow/layout`: official layout plugins for automatic graph layout.
+
+The docs for `@logicflow/extension` and `@logicflow/layout` are included under:
+
+- `node_modules/@logicflow/core/dist/docs/tutorial/extension/`
+
+Before implementing any LogicFlow feature, check the local docs first to see whether LogicFlow already provides a built-in, extension, or layout capability. If it does, prefer the documented official capability instead of reimplementing it from scratch.
+
+If an official package is needed but not installed, ask the user before installing it.
+<!-- END:logicflow-agent-rules -->
+```
+
 ## 文档
 
 [官方文档](https://docs.logic-flow.cn)

package/es/model/GraphModel.js

@@ -111,7 +111,9 @@ var GraphModel = /** @class */ (function () {
         }
         this.customStyles = (options.style || {});
         this.theme = setupTheme(options.style, options.themeMode);
-        this.grid = Grid.getGridOptions(assign({}, initialGrid, grid));
+        this.grid = Grid.getGridOptions(typeof grid === 'object' && grid !== null
+            ? assign({}, initialGrid, grid)
+            : (grid !== null && grid !== void 0 ? grid : false));
         this.theme.grid = cloneDeep(this.grid);
         if (background) {
             this.background = cloneDeep(assign({}, initialBackground, background));

package/lib/model/GraphModel.js

@@ -117,7 +117,9 @@ var GraphModel = /** @class */ (function () {
         }
         this.customStyles = (options.style || {});
         this.theme = (0, util_1.setupTheme)(options.style, options.themeMode);
-        this.grid = overlay_1.Grid.getGridOptions((0, lodash_es_1.assign)({}, initialGrid, grid));
+        this.grid = overlay_1.Grid.getGridOptions(typeof grid === 'object' && grid !== null
+            ? (0, lodash_es_1.assign)({}, initialGrid, grid)
+            : (grid !== null && grid !== void 0 ? grid : false));
         this.theme.grid = (0, lodash_es_1.cloneDeep)(this.grid);
         if (background) {
             this.background = (0, lodash_es_1.cloneDeep)((0, lodash_es_1.assign)({}, initialBackground, background));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/core",
-  "version": "2.2.1",
+  "version": "2.2.3-alpha.0",
   "description": "LogicFlow, help you quickly create flowcharts",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -40,7 +40,8 @@
   "files": [
     "dist",
     "es",
-    "lib"
+    "lib",
+    "scripts"
   ],
   "scripts": {
     "clean:turbo": "rss",
@@ -49,13 +50,14 @@
     "build:less": "rss",
     "build:esm": "tsc --module esnext --target es5 --outDir ./es",
     "build:cjs": "tsc --module commonjs --target es5 --outDir ./lib",
-    "build:umd": "rss",
-    "build:dev": "rss",
-    "build:watch": "rss",
-    "build:watch:esm": "rss",
-    "build:watch:cjs": "rss",
+    "build:umd": "rollup -c ./rollup.config.js --bundleConfigAsCjs",
+    "dev": "rss",
+    "dev:esm": "rss",
+    "dev:cjs": "rss",
     "build": "rss",
+    "build:all": "rss",
     "prebuild": "rss",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "postinstall": "node scripts/postinstall-ai-prompt.js"
   }
 }

package/scripts/postinstall-ai-prompt.js

@@ -0,0 +1,67 @@
+#!/usr/bin/env node
+
+const RESET = '\x1b[0m'
+const REMINDER_STYLE = '\x1b[1m\x1b[43m\x1b[30m' // bold, yellow bg, black fg
+
+const AGENT_RULES = `<!-- BEGIN:logicflow-agent-rules -->
+# LogicFlow Agent Rules
+
+LogicFlow documentation is available at:
+
+- \`node_modules/@logicflow/core/dist/docs/\`
+
+Package roles:
+
+- \`@logicflow/core\`: core graph editor runtime, including canvas, nodes, edges, models, events, rendering, themes, and basic interactions.
+- \`@logicflow/extension\`: official plugins for common product features.
+- \`@logicflow/layout\`: official layout plugins for automatic graph layout.
+
+The docs for \`@logicflow/extension\` and \`@logicflow/layout\` are included under:
+
+- \`node_modules/@logicflow/core/dist/docs/tutorial/extension/\`
+
+Before implementing any LogicFlow feature, check the local docs first to see whether LogicFlow already provides a built-in, extension, or layout capability. If it does, prefer the documented official capability instead of reimplementing it from scratch.
+
+If an official package is needed but not installed, ask the user before installing it.
+<!-- END:logicflow-agent-rules -->`
+
+const REMINDER_LINES = [
+  '请将下方的规则复制给你的 AI Agent，让 AI Agent 可以更了解 LogicFlow。',
+  '您还可以在 README 和官网的 AI 编程章节找到此规则',
+]
+
+function shouldUseAnsi() {
+  if (!process.stdout.isTTY) return false
+  if (process.env.NO_COLOR !== undefined && process.env.NO_COLOR !== '')
+    return false
+  if (process.env.TERM === 'dumb') return false
+  if (process.env.CI === 'true' && !process.env.FORCE_COLOR) return false
+  return true
+}
+
+function dividerWidth() {
+  const c = process.stdout.columns
+  if (typeof c === 'number' && Number.isFinite(c) && c > 0) {
+    return Math.min(c, 120)
+  }
+  return 80
+}
+
+function dividerLine() {
+  return '─'.repeat(dividerWidth())
+}
+
+function printReminder() {
+  const useAnsi = shouldUseAnsi()
+  for (const line of REMINDER_LINES) {
+    if (useAnsi) {
+      process.stdout.write(`${REMINDER_STYLE}${line}${RESET}\n`)
+    } else {
+      process.stdout.write(`${line}\n`)
+    }
+  }
+}
+
+printReminder()
+console.log(dividerLine())
+console.log(AGENT_RULES)

package/dist/index.css

@@ -1,214 +0,0 @@
-.lf-graph {
-  position: relative;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-  background: #fff;
-  user-select: none;
-}
-.lf-element-text {
-  cursor: text;
-}
-.lf-text-disabled {
-  pointer-events: none;
-}
-.lf-text-draggable {
-  cursor: move;
-}
-*:focus {
-  outline: none;
-}
-.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: move;
-}
-.lf-dragging .lf-element-text {
-  cursor: move;
-}
-.lf-draggable {
-  cursor: default;
-}
-.lf-bezier-adjust-anchor {
-  cursor: pointer;
-}
-/* background */
-.lf-background,
-.lf-grid {
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-}
-.lf-background-area {
-  width: 100%;
-  height: 100%;
-}
-/* html-overlay */
-.lf-html-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  overflow: hidden;
-  user-select: none;
-  pointer-events: none;
-}
-.lf-html-overlay__transform > * {
-  pointer-events: all;
-}
-.lf-text-editable {
-  pointer-events: all;
-}
-.lf-text-input {
-  position: absolute;
-  box-sizing: border-box;
-  min-width: 100px;
-  min-height: 20px;
-  padding: 5px;
-  line-height: 1.2;
-  white-space: pre;
-  text-align: center;
-  background: #fff;
-  border: 1px solid #edefed;
-  border-radius: 3px;
-  outline: none;
-  transform: translate(-50%, -50%);
-  resize: none;
-}
-.lf-get-text-height {
-  display: inline-block;
-  box-sizing: border-box;
-  word-break: break-all;
-  /* 为了跟输入效果保持一致，设置透明边框占位 */
-  border: 1px solid transparent;
-}
-.lf-node-text-auto-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  /* border: 1px solid transparent; */
-}
-.lf-node-text-auto-wrap-content {
-  width: 100%;
-  line-height: 1.2;
-  text-align: center;
-  word-break: break-all;
-  background: transparent;
-}
-.lf-node-text-ellipsis-content {
-  width: 100%;
-  line-height: 1.2;
-  white-space: nowrap;
-  text-align: center;
-  background: transparent;
-  /* overflow: hidden;
-  text-overflow: ellipsis; */
-}
-.lf-node-text-ellipsis-content > div {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-/* tool-overlay */
-.lf-tool-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-  overflow: hidden;
-  pointer-events: none;
-}
-.lf-tool-overlay > * {
-  pointer-events: all;
-}
-/* modification-overlay */
-.modification-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  overflow: hidden;
-  pointer-events: none;
-}
-.modification-overlay > * {
-  pointer-events: all;
-}
-.lf-outline,
-.lf-snapline {
-  pointer-events: none;
-}
-.lf-keyboard-tips {
-  float: right;
-}
-.lf-node-select-decorate {
-  position: absolute;
-  border: 1px dashed #343435;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-}
-.lf-multiple-select {
-  position: absolute;
-  border: 2px dashed #4271dfcc;
-  border-radius: 12px;
-  box-shadow: 0 0 3px 0 #4271df80;
-  cursor: move;
-}
-.lf-edge-adjust-point {
-  cursor: move;
-}
-.lf-rotate-control {
-  cursor: grabbing;
-}
-.lf-resize-control-nw {
-  cursor: nw-resize;
-}
-.lf-resize-control-n {
-  cursor: n-resize;
-}
-.lf-resize-control-ne {
-  cursor: ne-resize;
-}
-.lf-resize-control-e {
-  cursor: e-resize;
-}
-.lf-resize-control-se {
-  cursor: se-resize;
-}
-.lf-resize-control-s {
-  cursor: s-resize;
-}
-.lf-resize-control-sw {
-  cursor: sw-resize;
-}
-.lf-resize-control-w {
-  cursor: w-resize;
-}