{"id":13640392,"url":"https://github.com/nikku/bpmn-js-copy-paste-example","last_synced_at":"2025-06-16T21:38:32.709Z","repository":{"id":56778267,"uuid":"106731423","full_name":"nikku/bpmn-js-copy-paste-example","owner":"nikku","description":"An example how to copy and paste between multiple instances of bpmn-js","archived":false,"fork":false,"pushed_at":"2022-08-22T15:23:03.000Z","size":285,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-12T18:54:48.360Z","etag":null,"topics":["bpmn-js","modeler"],"latest_commit_sha":null,"homepage":"","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/nikku.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}},"created_at":"2017-10-12T18:37:31.000Z","updated_at":"2022-10-05T21:35:20.000Z","dependencies_parsed_at":"2022-08-16T02:40:31.365Z","dependency_job_id":null,"html_url":"https://github.com/nikku/bpmn-js-copy-paste-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nikku/bpmn-js-copy-paste-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikku%2Fbpmn-js-copy-paste-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikku%2Fbpmn-js-copy-paste-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikku%2Fbpmn-js-copy-paste-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikku%2Fbpmn-js-copy-paste-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nikku","download_url":"https://codeload.github.com/nikku/bpmn-js-copy-paste-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikku%2Fbpmn-js-copy-paste-example/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260246227,"owners_count":22980359,"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","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":["bpmn-js","modeler"],"created_at":"2024-08-02T01:01:10.742Z","updated_at":"2025-06-16T21:38:32.689Z","avatar_url":"https://github.com/nikku.png","language":"JavaScript","funding_links":[],"categories":["Extensions"],"sub_categories":[],"readme":"# bpmn-js-copy-paste-example\n\n[![CI](https://github.com/nikku/bpmn-js-copy-paste-example/actions/workflows/CI.yml/badge.svg)](https://github.com/nikku/bpmn-js-copy-paste-example/actions/workflows/CI.yml)\n\nThis example shows how to copy and paste elements programatically using [bpmn-js](https://github.com/bpmn-io/bpmn-js).\n\n![pasted screenshot](./resources/screenshot.png)\n\n\n## Features\n\n* copy and paste between different BPMN modeler instances\n* works across browser windows (synchronized via [local storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage))\n* fully scriptable\n* may be operated by humans, too :wink:\n\n\n## How it works\n\nYou need the [BPMN Modeler](https://github.com/bpmn-io/bpmn-js/blob/master/lib/Modeler.js) to use copy and paste.\n\n#### Copy\n\nTo copy an element, specify it via its `elementId`. From that point on,\nwe'll use only APIs the BPMN modeler provides:\n\n```javascript\n// element to be copied\nvar elementId = ...;\n\nvar clipboard = modeler.get('clipboard'),\n    copyPaste = modeler.get('copyPaste'),\n    elementRegistry = modeler.get('elementRegistry');\n\n// get element to be copied\nvar element = elementRegistry.get(elementId);\n\n// copy!\ncopyPaste.copy(element);\n\n// retrieve clipboard contents\nvar copied = clipboard.get();\n\n// persist in local storage, encoded as json\nlocalStorage.setItem('bpmnClipboard', JSON.stringify(copied));\n```\n\n\n#### Paste\n\nTo paste an element we need to specify the target, as well as the location\nwhere the element needs to be pasted:\n\n```javascript\n// to be pasted onto...\nvar targetId = ...;\nvar position = ...;\n\nvar clipboard = modeler.get('clipboard'),\n    copyPaste = modeler.get('copyPaste'),\n    elementRegistry = modeler.get('elementRegistry'),\n    moddle = modeler.get('moddle');\n\n// retrieve from local storage\nvar serializedCopy = localStorage.getItem('bpmnClipboard');\n\n// parse tree, reinstantiating contained objects\nvar parsedCopy = JSON.parse(serializedCopy, createReviver(moddle));\n\n// put into clipboard\nclipboard.set(parsedCopy);\n\n// paste tree directly\ncopyPaste.paste({\n  element: elementRegistry.get(targetId),\n  point: position\n});\n\n// alternatively paste using two-step pasting\ncopyPaste.paste();\n```\n\n\n#### The Paste Catch\n\nDuring JSON parsing of the serialized copy tree, we use a [`reviver` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Using_the_reviver_parameter)\nto re-construct model types:\n\n```javascript\nfunction createReviver(moddle) {\n\n  var elCache = {};\n\n  /**\n   * The actual reviewer that creates model instances\n   * for elements with a $type attribute.\n   *\n   * Elements with ids will be re-used, if already\n   * created.\n   *\n   * @param  {String} key\n   * @param  {Object} object\n   *\n   * @return {Object} actual element\n   */\n  return function(key, object) {\n\n    if (typeof object === 'object' \u0026\u0026 typeof object.$type === 'string') {\n\n      var objectId = object.id;\n\n      if (objectId \u0026\u0026 elCache[objectId]) {\n        return elCache[objectId];\n      }\n\n      var type = object.$type;\n      var attrs = Object.assign({}, object);\n\n      delete attrs.$type;\n\n      var newEl = moddle.create(type, attrs);\n\n      if (objectId) {\n        elCache[objectId] = newEl;\n      }\n\n      return newEl;\n    }\n\n    return object;\n  };\n}\n```\n\nCheckout the full example [here](./test/copy-paste.js).\n\n\n## Run the Example\n\n```\n# install dependencies\nnpm install\n\n# run in browser\nnpm run dev\n```\n\nOpen multiple instances of the [test site](http://localhost:9876/debug.html) and copy/paste across.\n\n\n## License\n\nMIT\n\n:heart:\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikku%2Fbpmn-js-copy-paste-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnikku%2Fbpmn-js-copy-paste-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikku%2Fbpmn-js-copy-paste-example/lists"}