{"id":31741679,"url":"https://github.com/ortegacmanuel/sliceify","last_synced_at":"2025-10-09T10:55:39.366Z","repository":{"id":313384897,"uuid":"1043749672","full_name":"ortegacmanuel/sliceify","owner":"ortegacmanuel","description":"Event Modeling Designer / diagramming tool","archived":false,"fork":false,"pushed_at":"2025-09-05T16:50:37.000Z","size":131,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-05T18:41:59.639Z","etag":null,"topics":["eventmodeling"],"latest_commit_sha":null,"homepage":"https://sliceify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ortegacmanuel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-24T14:41:17.000Z","updated_at":"2025-09-05T16:50:40.000Z","dependencies_parsed_at":"2025-09-05T18:42:02.275Z","dependency_job_id":"eeea1e8a-007b-4e72-8032-502198f145f7","html_url":"https://github.com/ortegacmanuel/sliceify","commit_stats":null,"previous_names":["ortegacmanuel/sliceify"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/ortegacmanuel/sliceify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ortegacmanuel%2Fsliceify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ortegacmanuel%2Fsliceify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ortegacmanuel%2Fsliceify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ortegacmanuel%2Fsliceify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ortegacmanuel","download_url":"https://codeload.github.com/ortegacmanuel/sliceify/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ortegacmanuel%2Fsliceify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279001254,"owners_count":26083040,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["eventmodeling"],"created_at":"2025-10-09T10:55:38.140Z","updated_at":"2025-10-09T10:55:39.357Z","avatar_url":"https://github.com/ortegacmanuel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Sliceify\n\nA web-based diagramming tool for Event Modeling built on top of `diagram-js`.\n\n### How to run locally\n\n- Prerequisites\n  - Node.js 18+ (recommended: 20 LTS)\n  - npm 9+\n\n- Install\n  - `npm install`\n\n- Start dev server\n  - `npm run dev`\n  - Open the URL shown in your terminal (default: `http://localhost:5173/`)\n\n- Build for production\n  - `npm run build`\n  - Output in `dist/`\n\n- Optional tooling\n  - Format: `npm run format`\n  - Lint: `npm run lint`\n\n- Directory layout\n  - `src/Editor.js`: Editor bootstrap and module composition\n  - `src/main.js`: App entry (creates the editor)\n  - `src/modeling/*`: Domain element factory, modeling commands\n  - `src/providers/*`: Palette provider(s)\n  - `src/render/*`: Custom renderer, text rendering, path map\n  - `src/spec/*`: Domain specs (business objects)\n  - `src/utils/*`: Utility helpers\n  - `public/`: Static assets\n  - `index.html`: App shell\n\nReferences:\n- diagram-js: https://github.com/bpmn-io/diagram-js\n\n---\n\n## Internals\n\n### Overview\n\n- Sliceify composes custom modules (providers, modeling, renderer) with diagram-js’ core features (palette, selection, move, connect, etc.).\n- It separates domain data (businessObject) from presentation (geometry, color, label styles) on the diagram element.\n- Modules are wired through diagram-js’ dependency injection (DI) container.\n\n### Diagram initialization\n\n- `src/Editor.js` extends `Diagram` (from diagram-js) and composes:\n  - Custom modules: `providers`, `render`, `modeling`\n  - Built-in modules: palette, selection, move, connect, snapping, grid, etc.\n- `src/main.js` instantiates `Editor`, passing the canvas container and optional `additionalModules` (to inject config or overrides).\n\n### Dependency injection (DI)\n\n- Each module exports a plain object with:\n  - `__depends__`: other modules it requires\n  - `__init__`: services to instantiate eagerly\n  - service providers: `name: ['type'|'value'|'factory', Provider]`\n- Services declare dependencies via `Service.$inject = [...]`.\n- You can pass config via “value services” in `additionalModules`, e.g.:\n  - `{ 'config.Renderer': ['value', { defaultFillColor: 'white' }] }`\n\n### Modules\n\n- Modeling (`src/modeling/index.js`)\n  - Registers:\n    - `elementFactory`: custom factory for diagram elements\n    - `modeling`: extends diagram-js modeling to add commands\n    - `EMFactory`: creates domain business objects (Specs) + defaults\n  - Depends on core diagram-js modeling, rules, selection, command stack.\n\n- Providers (`src/providers/index.js`)\n  - Registers the palette provider (`paletteProvider`) which populates the left-hand palette.\n\n- Rendering (`src/render/index.js`)\n  - Registers:\n    - `renderer`: custom `BaseRenderer` override for shapes\n    - `textRenderer`: wraps diagram-js `Text` util with defaults\n    - `pathMap`: optional vector path utilities for icons/markers\n\n### Domain specs (business objects)\n\n- Located in `src/spec/*`.\n- Examples: `Event`, `Element`, `Field`.\n- Each spec uses normalized, lower-cased domain fields like: `type`, `name`, `description`, `metadata`.\n- Defaults useful to the UI are attached to the prototype for palette/renderer usage:\n  - `Event.prototype.THUMBNAIL_CLASS`\n  - `Event.prototype.DEFAULT_SIZE`\n  - `Event.prototype.DEFAULT_COLOR`\n  - `Event.prototype.type = 'Event'`\n\n### EMFactory (business object factory)\n\n- `src/modeling/EMFactory.js`\n- Maps a `type` to a Spec class and instantiates it: `create(type) =\u003e new Spec()`.\n- Provides default accessors:\n  - `getDefaultSize(semantic)` and `getDefaultColor(semantic)`\n\n### ElementFactory (diagram element factory)\n\n- `src/modeling/ElementFactory.js`\n- Overrides `create(elementType, attrs)` to:\n  - Ensure `attrs.businessObject` (creates via `EMFactory` if missing)\n  - Apply defaults:\n    - width/height from `EMFactory.getDefaultSize()`\n    - color on the element (presentation), not on the business object\n  - Delegate to base factory to produce the actual shape\n\nExample (from the palette):\n\n```js\nconst shape = elementFactory.createShape({ type: 'Event' });\n```\n\n### Modeling (commands)\n\n- `src/modeling/Modeling.js` extends diagram-js `BaseModeling`.\n- Adds custom command `element.updateProperties` that mutates the business object via a handler (undo/redo through the command stack).\n- Provides a `connect` helper that consults `rules` when connecting elements.\n\n### Rendering\n\n- `src/render/Renderer.js` extends diagram-js `BaseRenderer`:\n  - Declares handlers per element type (e.g., `Event`) to draw shapes.\n  - Uses `renderEmbeddedLabel` to create styled SVG text via `textRenderer`.\n  - Reads color from the element first (`element.color || bo.color`).\n  - Label styling can be customized per call via an options object (`align`, `fontSize`, `fontWeight`, `style`).\n\n- `src/render/TextRenderer.js` wraps diagram-js `Text` util with default font settings (configurable via `config.textRenderer`).\n\n- `src/render/PathMap.js` provides optional vector path utilities (for icons/markers). It is not required for simple rectangles/labels; use it if you add richer pictograms.\n\n### Palette provider\n\n- `src/providers/PaletteProvider.js`\n  - Registers palette entries (tools + create actions).\n  - On click/drag, calls `elementFactory.createShape({ type })` and starts the `create` interaction.\n  - Uses each Spec’s prototype constants for the entry (e.g., `THUMBNAIL_CLASS`).\n\n### Separation of concerns\n\n- Domain (businessObject): holds domain fields only (`type`, `name`, `source`, etc.).\n- Presentation (element): holds visual attributes (`x`, `y`, `width`, `height`, `color`, label styles).\n- Renderer reads presentation attributes from the element.\n\n### Adding a new node type (recipe)\n\n1) Create a Spec in `src/spec/`:\n\n```js\nexport default class Command extends Element {}\nCommand.prototype.type = 'Command';\nCommand.prototype.DEFAULT_SIZE = { width: 120, height: 60 };\nCommand.prototype.DEFAULT_COLOR = '#4f46e5';\nCommand.prototype.THUMBNAIL_CLASS = 'palette-icon-create-command';\n```\n\n2) Register in `EMFactory`:\n\n```js\ntypeToSpec.set('Command', Command);\n```\n\n3) Add a palette entry:\n\n```js\nentries['create-Command'] = createAction(\n  'Command',\n  'state',\n  Command.prototype.THUMBNAIL_CLASS,\n  'Create Command'\n);\n```\n\n4) Render it in `Renderer`:\n\n```js\nhandlers.Command = (parentGfx, element) =\u003e {\n  const rect = drawRect(parentGfx, element.width, element.height, 0, {\n    fill: getFillColor(element, defaultFillColor),\n    stroke: getStrokeColor(element, defaultStrokeColor)\n  });\n  renderEmbeddedLabel(parentGfx, element, { align: 'left-top', fontWeight: 'bold' });\n  return rect;\n};\n```\n\n5) (Optional) Define rules if creation or connections must be restricted.\n\n### Rules (recommended)\n\n- Create a custom `RuleProvider` module to control creation, connection, and move behavior. This keeps the editor predictable as types and features grow.\n\n### Serialization (roadmap)\n\n- Export/import a JSON schema with:\n  - Elements: `id`, `type`, `x`, `y`, `width`, `height`, and presentation attrs\n  - Business objects: domain fields needed for your model\n- Keep domain and presentation separated in your schema.\n\n### Configuration via DI (theming)\n\n- Provide defaults at startup using `additionalModules`:\n\n```js\nnew Editor({\n  container: document.querySelector('#canvas'),\n  additionalModules: [\n    { 'config.Renderer': ['value', { defaultFillColor: 'white', defaultStrokeColor: '#111' }] },\n    { 'config.textRenderer': ['value', { defaultStyle: { fontSize: 14 } }] }\n  ]\n});\n```\n\n### References\n\n- diagram-js: https://github.com/bpmn-io/diagram-js\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fortegacmanuel%2Fsliceify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fortegacmanuel%2Fsliceify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fortegacmanuel%2Fsliceify/lists"}