polotno-project / polotno-studio Goto Github PK

You guys are using graphics from flaticon, iconfinder and iconscout right? How about the license? i mean, for example if we use flaticon's graphics with free account we must write the attribution, but i think the majority of polotno's user don't understand that the graphics are from those platform and they also don't know the license

const index = DEFAULT_SECTIONS.findIndex(object =>{
  return object.name === "templates"
})
DEFAULT_SECTIONS[index].name = "Laila"

I'm trying to change the default name of side panel tab from templates to sample templates. It is changed but not rendering as changed don't know what the issue is ?

is there any way to change the name of DEFAULT_SECTIONS

I'm receiving json data in response to an api. This contains the image url and the template json. Images are flawlessly mapping on getPreview. However, the problem is that I want the image to act as a template on onSelect so that the user may group and ungroup the pieces inside. Is it possible to add a json to the Onselect so i can utilize it?

Here is my code:

        <ImagesGrid
              images={images}
              getPreview={(image) => window.location.origin + '/' + image.image}
              onSelect={async (image) => {
                  const altered = JSON.parse(image.template_json)
                  console.log("🚀 ~ file: TemplateLibrary.jsx ~ line 45 ~ onSelect={ ~ altered", altered)

                  const { width, height } = await getImageSize(window.location.origin + '/' + altered.template_json);
                  await store.activePage?.addElement({
                      type: "image",
                      src: window.location.origin + '/' + altered.template_json.pages[0].children, width, height,
                      x: pos ? pos.x : store.width / 2 - width / 2,
                      y: pos ? pos.y : store.height / 2 - height / 2,
                  });
                  store.loadJSON(altered)
              }}
              rowsNumber={2}
              loadMore={true}
              isLoading={isLoading}

          />

api response:

Perhaps this could be an option to select before saving, but like many people I have a lot of Polotno (#).png files in my downloads folder that I have to rename. Would it be prudent to automagically create filenames on download?

For instance, if the text is "ACT NOW BEFORE THEY'RE GONE! $40 FOR 3 TICKETS!" then the file can be saved as act-now-before-theyre-gone-40-for-3-tickets.json and act-now-before-theyre-gone-40-for-3-tickets.png.

I am having trouble controlling the template state for different sizes in the Polotno editor.

I'm initially adjusting the style or placements of items in the design and choosing the size of the Instagram post (1080x1080 pixels). I then switched to a different size IG story (1080x1920 pixels) and made any necessary style or positioning adjustments. In this instance, the changes I made are no longer available if I return to the size of an Instagram post (1080x1080 pixels). It has been replaced by the latest adjustments made to various sizes.

So, is there a way to have distinct states for templates depending on the available sizes? Therefore, if we last saved changes for a certain change, we don't need to make changes repeatedly with different sizes.

https://www.screencast.com/t/9dXCu2lqc2oq

https://codesandbox.io/s/github/polotno-project/polotno-site/tree/source/examples/polotno-grid?file=/src/index.js:112-180
This is the demo.
The exported image will contain grid elements. Is there any way to remove these auxiliary lines?

The Image is being loaded from S3 bucket [allowed for all domains], it's being shown on the custom sidepanel but not on the Canvas.
canvas error : "Can't load image"

Is it a way to add this function now?
This is needed as sometimes image generated from background remover(return rgba png) will have some unwanted pixels.

Ability to upload fonts. Not sure if I should write more, I'm not used to using GitHub. But it would be really nice to upload my own fonts, and I would definitely be using this if it could do that. Thank you

This editor I would say really could be the best available - paid or otherwise, if it had one missing feature, the ability to put text on paths and curved text. Text features are really what separates the pro apps on a desktop and web editors. Text control such as being able to flow text around objects, adjust kerning, and text on a path etc are key elements to a professional design.

Great work! I look forward to watching this project grow.

When I apply one or more effects on an image, followed by the Corner radius effect, the radius is not automatically applied to the image. For the image to actually have the radius applied, it takes toggling the first effect applied off and on again.

Example order of functions to replicate the issue:

1. Grayscale
2. Corner radius
3. Border

This produces a grayscale image with sharp edges and rounded border inside the image itself:

When done in reverse order (Border, Corner radius, Grayscale), it works just fine, so it's an effect order related issue.

Hi,

Not able to save JSON by using the application via URL https://studio.polotno.dev/ on Edge browser on Windows 10.

Issue may have occurred within last 4-5 hours as I was able to save JSON before the time.

As there is no issue template, please let me know what are details are required for debuggingg the issue.

Thank you

Hi Anton, there is a project called Win11React that emulates a Windows 11 desktop shell. It also emulates the Windows App Store using iframes to wrap various open source projects.

I would like to submit Polotno Studio as an app to the Win11React App Store if it is OK with you.

After I modified the template default name as sample templates, the icon in the search bar was moved from its original location. Is there a way to make it better?

How about export to svg ?

Hi Guys,

Got a problem to download the finished design.

I have 18 design to download but only 9 are saved into my computer!!!
design number 1-2-5-7-8-12-14.....

Do you have any idea where is that coming from?

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Blueprint4.ResizeSensor which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

I am facing trouble while working with images inside the bigger size template.

I am trying to create a template of size 7200 x 10800 (~ 24 x 36 Inches considering 300 DPI). When I am trying to load an image with the same dimensions inside it, it is not getting loaded correctly and gets flickered while changing its dimensions. In some cases: it just never gets loaded inside the editor.

Demo video of the issue: https://www.loom.com/share/e68f73daf69643f4ab4290dae138dd9f?sid=c2e61ccb-111c-4753-b893-55fc02ee9775

Let us know if we have any workaround for this.

Thanks!

index.js:32 Uncaught (in promise) DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'polotno-state' exceeded the quota

I see you have no LICENSE file for this project. The default is copyright.

I would suggest releasing the code under the AGPL-3.0-or-later license so that others are encouraged to contribute changes back to your project.

I would love to be able to create an image that has a transparent background so that when I download it, it doesn't have to be a photo or color as the background.

Hi Anton,

Trying to extend your editor with custom UX logic, and I find it quite challenging to add logic due to missing information about user actions. Would it be feasible to extend the event API in the following directions?:

• store.on('change') to include { pageId(s), elementId(s) } that were changed? also including creation and deletion as a change.
• store.on('load')
• page.on('change'), page.on('focus'), page.on('blur')
• element.on('select'), element.on('unselect'),
• element.on('hover'), element.on('dbl-click')
• element.on('change'), element.on('delete')

1. To include bullet or pointers for slide preparations.
2. Tabling, rows and column options.

Add a context menu to the canvas, accessible via right-click, that offers copy functionality, layer ordering controls, and other relevant features.

When I group elements I can easily drag and resize them in the UI, but calling set() on the group with x, y, width, or height has no effect.

Can the UI functionality be exposed to the API?

I'm trying to create text effects, such as bevel or emboss.

With svg this is possible by constructing filter primitives. Those effects can then be used in html by referring to their IDs.

Any way to do this in Polotno?

This is caused by the CSS rule of 'overflow:auto;' on the 'css-bisco' class.

Resolving this requires overflow-y to be set to scroll on the child element (the one with the images) and overflow-y on the parent container to be set to hidden. The scrollbar is also under the color panel content and you can fix that by setting a CSS calc style on the child to be the full height minus the section with the colors.

Example:

Result after fixes: