@semantic-canvas/sticky-notes

Showcase: https://samsongross.github.io/semantic-canvas-demo/

Usage no npm install needed!

<script type="module">
  import semanticCanvasStickyNotes from 'https://cdn.skypack.dev/@semantic-canvas/sticky-notes';
</script>

README

StickyNotes for the Semantic Canvas

Showcase: https://samsongross.github.io/semantic-canvas-demo/

Installation

1. Install SemanticCanvasCore

see: https://www.npmjs.com/package/@semantic-canvas/semantic-canvas-core

2. Install StickyNotes with npm:

npm install @semantic-canvas/sticky-notes

3. Add library assets to your project

Navigate to angular.json

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/@semantic-canvas/sticky-notes/assets",
    "output": "./assets/"
  }
]

4. Import module

Navigate to app.module.ts

import { StickyNotesModule } from '@semantic-canvas/sticky-notes';

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    SemanticCanvasCoreModule,
    StickyNotesModule
],

How to use

1. Define StickyNote shapes

// app.component.ts
import { ICanvasElementShape } from '@semantic-canvas/semantic-canvas-core/lib/canvas/domain/ICanvasElementShape';

myCustomShapes: ICanvasElementShape[] = [
    {
      name: 'StickyNoteYellow',
      width: 170,
      height: 70,
      containerShadow: false,
      iconUrl: 'assets/stickynotes/StickyNoteYellow.svg'
    }, {
      name: 'StickyNoteBlue',
      width: 170,
      height: 70,
      containerShadow: false,
      iconUrl: 'assets/stickynotes/StickyNoteBlue.svg'
    }, {
      name: 'StickyNoteGreen',
      width: 170,
      height: 70,
      containerShadow: false,
      iconUrl: 'assets/stickynotes/StickyNoteGreen.svg'
    }, {
      name: 'StickyNoteRed',
      width: 170,
      height: 70,
      containerShadow: false,
      iconUrl: 'assets/stickynotes/StickyNoteRed.svg'
    }
  ];

2. Define StickyNote model package

// app.component.ts
import { IModelPackage } from '@semantic-canvas/semantic-canvas-core/lib/library/domain/IModelPackage';

 myCustomModelPackage: IModelPackage[] = [
    {
      title: 'Sticky Notes',
      description: 'StickyNotes to use on the canvas',
      inToolbar: true,
      model: {
        elements: [
          {
            type: 'StickyNoteYellow',
            name: 'Yellow Sticky Note'
          },
          {
            type: 'StickyNoteRed',
            name: 'Red Sticky Note'
          },
          {
            type: 'StickyNoteBlue',
            name: 'Blue Sticky Note'
          },
          {
            type: 'StickyNoteGreen',
            name: 'Green Sticky Note'
          }
        ],
        relations: [
          // none yet
        ]
      }
    }
  ];

3. Define StickyNote ShapeFactories

// app.component.ts
import { GenericCanvasFactory } from '@semantic-canvas/semantic-canvas-core';
import { StickyNoteYellowComponent, StickyNoteRedComponent, StickyNoteGreenComponent, StickyNoteBlueComponent } from '@semantic-canvas/sticky-notes';

myCustomFactories: ICanvasShapeFactory[] = [
     {
      type: 'StickyNoteYellow',
      factory: new GenericCanvasFactory<StickyNoteYellowComponent>(StickyNoteYellowComponent)
    },
    {
      type: 'StickyNoteRed',
      factory: new GenericCanvasFactory<StickyNoteRedComponent>(StickyNoteRedComponent)
    },
    {
      type: 'StickyNoteGreen',
      factory: new GenericCanvasFactory<StickyNoteGreenComponent>(StickyNoteGreenComponent)
    },
    {
      type: 'StickyNoteBlue',
      factory: new GenericCanvasFactory<StickyNoteBlueComponent>(StickyNoteBlueComponent)
    }
  ];

4. Add canvas parameter

<!-- app.component.html-->

<sem-semantic-canvas
  [elementShapes]="myCustomShapes"
  [modelPackages]="myCustomModelPackage"
  [shapeFactories]="myCustomFactories"
>
</sem-semantic-canvas>