{"_id":"@a-it/scheme-designer","name":"@a-it/scheme-designer","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@a-it/scheme-designer","version":"1.0.0","publishConfig":{"access":"public"},"description":"Canvas scheme designer, scheme constructor on javascript (typescript)","main":"dist/scheme-designer.js","type":"module","module":"dist/scheme-designer.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/scheme-designer.js","require":"./dist/scheme-designer.umd.cjs"}},"scripts":{"dev":"vite","build":"vite build","test":"vitest"},"author":{"name":"A-IT","email":"a-it@a-it.org","url":"https://a-it.org/"},"devDependencies":{"@types/node":"^22.14.1","typescript":"^5.8.3","vite":"^6.2.6","vite-plugin-dts":"^4.5.3","vitest":"^3.1.1"},"packageManager":"pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0","_id":"@a-it/scheme-designer@1.0.0","gitHead":"540d78d4ca8754cb747d695b4888bab12202168b","_nodeVersion":"22.13.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-uLIxeRnAdXYgFLHvtlTzjBrWg0t1MQY+YbllVP7SDkgtym/Xnfb/1oidVWnmoc/mhznvqimXGU/l88EW5J+mdg==","shasum":"ebf1f25c07988a66d532adb663220de813dd6b63","tarball":"https://registry.npmjs.org/@a-it/scheme-designer/-/scheme-designer-1.0.0.tgz","fileCount":34,"unpackedSize":166107,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIC4WOehzRRfNLCtBYhPKrDT6HPvuHGqn5v0kSzl6hVIeAiEA4jRoVYX4gT8AcHyl2dUE5d+IXs7W+7X8pJy1pbwnq5c="}]},"_npmUser":{"name":"g.pogos","email":"g.pogos@ya.ru"},"directories":{},"maintainers":[{"name":"g.pogos","email":"g.pogos@ya.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/scheme-designer_1.0.0_1744635970241_0.4761669022150361"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-14T13:06:10.176Z","1.0.0":"2025-04-14T13:06:10.438Z","modified":"2025-04-14T13:06:10.717Z"},"maintainers":[{"name":"g.pogos","email":"g.pogos@ya.ru"}],"description":"Canvas scheme designer, scheme constructor on javascript (typescript)","author":{"name":"A-IT","email":"a-it@a-it.org","url":"https://a-it.org/"},"readme":"# Scheme Designer\n\nA powerful Vue.js-based canvas library for creating interactive diagrams, layouts, and scheme visualizations with support for layers, zooming, panning, and object manipulation.\n\n## Features\n\n- **Interactive Canvas**: Smooth panning, zooming, and object manipulation\n- **Layer Management**: Organize objects across multiple layers with visibility control\n- **Spatial Partitioning**: Efficient quad-tree implementation for handling large numbers of objects\n- **Event System**: Rich event handling for mouse interactions (click, hover, drag)\n- **Custom Objects**: Create custom objects with your own rendering and interaction logic\n- **Rotation Support**: Handle rotated objects with proper hit detection\n- **Vue 3 Integration**: Reactive state management with Vue 3 composition API\n\n## Installation\n\n```bash\nnpm install scheme-designer\n```\n\n## Basic Usage\n\n```vue\n<template>\n  <div>\n    <canvas ref=\"canvas\" width=\"800\" height=\"600\"></canvas>\n    <div class=\"controls\">\n      <button @click=\"zoomIn\">Zoom In</button>\n      <button @click=\"zoomOut\">Zoom Out</button>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, onMounted } from 'vue';\nimport { useScheme, useLayer, useSchemeObject } from 'scheme-designer';\n\nconst canvas = ref(null);\nlet schemeDesigner = null;\n\nonMounted(() => {\n  // Initialize the scheme designer\n  schemeDesigner = useScheme(canvas.value, {\n    options: {\n      background: '#F7F7F7',\n      cacheSchemeRatio: 2\n    },\n    zoom: {\n      maxScale: 4,\n      minScale: 0.5\n    }\n  });\n\n  // Create a layer\n  const defaultLayer = useLayer('default', {\n    zIndex: 1,\n    visible: true,\n    active: true\n  });\n\n  // Add the layer to the scheme\n  schemeDesigner.addLayer(defaultLayer);\n\n  // Create a rectangle object\n  const rectangleObject = useSchemeObject({\n    x: 100,\n    y: 100,\n    width: 80,\n    height: 50,\n    renderFunction: (obj, scheme, view) => {\n      const ctx = view.getContext();\n      ctx.save();\n      \n      // Change appearance on hover\n      if (obj.state.isHovered) {\n        ctx.fillStyle = '#FF6B6B';\n        ctx.strokeStyle = '#C44D4D';\n      } else {\n        ctx.fillStyle = '#4ECDC4';\n        ctx.strokeStyle = '#1A535C';\n      }\n      \n      ctx.lineWidth = 2;\n      ctx.beginPath();\n      ctx.rect(obj.getX(), obj.getY(), obj.getWidth(), obj.getHeight());\n      ctx.fill();\n      ctx.stroke();\n      \n      ctx.restore();\n    },\n    mouseOverFunction: () => true, // Return true to trigger a re-render\n    mouseLeaveFunction: () => true // Return true to trigger a re-render\n  });\n\n  // Add the object to the layer\n  defaultLayer.addObject(rectangleObject);\n\n  // Register event listeners\n  canvas.value.addEventListener('schemeDesigner.clickOnObject', (e) => {\n    console.log('Object clicked:', e.detail);\n  });\n\n  // Render the scheme\n  schemeDesigner.render();\n});\n\n// Control functions\nfunction zoomIn() {\n  schemeDesigner?.getZoomManager().zoomToCenter(10);\n}\n\nfunction zoomOut() {\n  schemeDesigner?.getZoomManager().zoomToCenter(-10);\n}\n</script>\n```\n\n## Core Components\n\n### Scheme\n\nThe main controller that coordinates all the managers and handles the rendering pipeline.\n\n```javascript\nconst scheme = useScheme(canvasElement, options);\n```\n\n### Layer\n\nManages a collection of objects with the same visibility and z-index.\n\n```javascript\nconst layer = useLayer('layerId', {\n  zIndex: 2,\n  visible: true,\n  active: true\n});\n```\n\n### SchemeObject\n\nRepresents a visual element in the scheme.\n\n```javascript\nconst object = useSchemeObject({\n  x: 100,\n  y: 100,\n  width: 80,\n  height: 50,\n  // Custom render function\n  renderFunction: (obj, scheme, view) => {\n    // Your drawing logic here\n  }\n});\n```\n\n## Managers\n\n- **StorageManager**: Manages layers and objects with spatial partitioning\n- **EventManager**: Handles user interactions and event dispatching\n- **ZoomManager**: Controls zooming functionality\n- **ScrollManager**: Manages panning and scrolling\n- **MapManager**: Provides a navigation overview (optional)\n\n## Advanced Examples\n\n### Creating a Connection Between Objects\n\n```javascript\n// Create a connection line between two objects\nconst connectionObject = useSchemeObject({\n  renderFunction: (obj, scheme, view) => {\n    const sourceObj = obj.getParams().source;\n    const targetObj = obj.getParams().target;\n    \n    const ctx = view.getContext();\n    ctx.save();\n    \n    ctx.strokeStyle = obj.state.isHovered ? '#FF6B6B' : '#1A535C';\n    ctx.lineWidth = 2;\n    \n    // Draw a line from source to target\n    ctx.beginPath();\n    ctx.moveTo(sourceObj.getX() + sourceObj.getWidth()/2, \n               sourceObj.getY() + sourceObj.getHeight()/2);\n    ctx.lineTo(targetObj.getX() + targetObj.getWidth()/2, \n               targetObj.getY() + targetObj.getHeight()/2);\n    ctx.stroke();\n    \n    ctx.restore();\n  },\n  params: {\n    source: object1,\n    target: object2\n  }\n});\n\n// Add connection to the layer\ndefaultLayer.addObject(connectionObject);\n```\n\n### Implementing Draggable Objects\n\n```javascript\n// Event handlers in your scheme setup\ncanvas.addEventListener('schemeDesigner.mouseDown', function(e) {\n  const obj = e.detail;\n  if (obj) {\n    obj.getParams().isDragging = true;\n    obj.getParams().lastX = e.detail.originalEvent.clientX;\n    obj.getParams().lastY = e.detail.originalEvent.clientY;\n  }\n});\n\ncanvas.addEventListener('schemeDesigner.mouseMove', function(e) {\n  const objects = schemeDesigner.getStorageManager().getVisibleObjects();\n  \n  for (const obj of objects) {\n    if (obj.getParams().isDragging) {\n      const dx = e.detail.clientX - obj.getParams().lastX;\n      const dy = e.detail.clientY - obj.getParams().lastY;\n      \n      obj.setX(obj.getX() + dx / schemeDesigner.getZoomManager().getScale());\n      obj.setY(obj.getY() + dy / schemeDesigner.getZoomManager().getScale());\n      \n      obj.getParams().lastX = e.detail.clientX;\n      obj.getParams().lastY = e.detail.clientY;\n      \n      schemeDesigner.requestRenderAll();\n    }\n  }\n});\n\ncanvas.addEventListener('schemeDesigner.mouseUp', function() {\n  const objects = schemeDesigner.getStorageManager().getVisibleObjects();\n  \n  for (const obj of objects) {\n    if (obj.getParams().isDragging) {\n      obj.getParams().isDragging = false;\n    }\n  }\n});\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-792a0eaf451301105538b9f04a6955ce"}