Add Cut, Copy and Paste to context Menu

[Benny4u]

Greetings All,

I building a project using svg-edit. How do I add cut, copy and Paste in Place button to the top (context menu/tools) when an object is clicked.

I need to target both the icon, and the function. It really does not need to be a new extension as the functions exist in SVG-Edit.

Any help would be appreciated

[jfhenon]

Hi @Benny4u, good to see you are considering using svgedit. We are in the process to refresh the project so we need questions like yours to let us know where to put our efforts. The build process for 6.0.0 is about to be refreshed (likely this week. Back to your question. You have several steps to follow: 1.add the SVG content of your icons in the file svg_edit_icons.svg in the image folder. make sure you give them a unique id. For example for the cut button:

<g id="cut">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
... <<<your icon >>> 
</svg>
</g>

2.Add the new button where you need them in your index.html for example:

  <div class="push_button" id="tool_cut" title="Cut"></div>

3. edit the svgedit.js file look for the following code:

function setIcons () {
    $.svgIcons(curConfig.imgPath + 'svg_edit_icons.svg', {
      w: 24, h: 24,
      id_match: false,
      no_img: !isWebkit(), // Opera & Firefox 4 gives odd behavior w/images
      fallback_path: curConfig.imgPath,
      // Todo: Set `alts: {}` with keys as the IDs in fallback set to
      //   `uiStrings` (localized) values
      fallback: {
        logo: 'logo.png',

        select: 'select.png',
        select_node: 'select_node.png',
````

insert at the right place in the fallback object, the reference of your buttons. For example, for a cut button, you would insert the following string:  **'#tool_cut,#tool_cut': 'cut'**
 
````
        '#tool_clone,#tool_clone_multi': 'clone',
        '#tool_cut,#tool_cut': 'cut',
        '#tool_node_clone': 'node_clone',
````

I hope this helps

[Benny4u]

Thank you so much for the reply,

I have actually done all you suggested above and that was what gave the 3 blank non-functional buttons in the image attached.

Please is there a method or function i need to call etc. for them to work?

These activities "cut, copy ,paste in place " work already in SVGEdit but only from the right click option or when using shortcut keys.

It would be nicer if this buttons are put in a drop-down method.

Any other suggestion would be appreciated.

Thank You.

[jfhenon]

The blank icon is likely due to an error in the step 1. It worked for me. Maybe you can try to copy and paste another icon inside svg_edit_icons.svg s and just change the id to test.

[Benny4u]

I have not been able to work around it but while that is on, how does one contribute to making SVGEdit better. Would love to participate.

Our team has chosen it along side gsap in our developments

[jfhenon]

I did my test on the "new-build" branch which I plan to merge soon. I can do a branch to show what I did if you can wait a little more. Nice to see your team has chosen svgEdit for it's project! It would be good to get your contributions. I suggest you open an issue on what you want to improve and we can discuss it before you create the PR. If you intend to have a regular contribution, we can add you to the maintenance team.

[Benny4u]

Thanks, I can wait. It's not just about what I/we need for our project. We love to see SVGEdit survive and be better in every way. It would be an honour to be part of maintenance/contributions

[Benny4u]

We are looking at the following:

1. Adding an "Edit" menu with dropdown/list for (Cut, Copy, Paste_in_Place, etc) to sit by the main menu.
2. New/Untitled documents need to trigger the document property modal, enabling the user title the document before saving or downloading.
3. We created our custom_shapes library extension but noticed it can only draw using svg path. Is there a way to make it locate and insert grouped svg elements to canvas?
4. It would be nice to add a title bar too. Users get to see the name of the file currently opened or saved as the case may be