Could you help me get started on dev in this?

[PAEz]

Hi, Id like to try a couple of things with your code but Im dumb and cant get started.
I downloaded your source code, went to the directory, typed "npm install", all seemed to go good, typed "npm start" and all I get is a page saying Updating....
In the windows console I get....

[Error: EISDIR: illegal operation on a directory, read] {
  errno: -4068,
  code: 'EISDIR',
  syscall: 'read'
}

...and in the browsers console is.....

C:\Code\photopeaload…derer\remote.js:250 Uncaught TypeError: Cannot read property 'type' of undefined
    at metaToValue (C:\Code\photopeaload…derer\remote.js:250)
    at Object.getBuiltin (C:\Code\photopeaload…derer\remote.js:360)
    at Object.get [as Menu] (C:\Code\photopeaload…derer\remote.js:398)
    at Object.get [as Menu] (C:\Code\photopeaload…renderer\index.js:4)
    at Object.<anonymous> (C:\Code\photopeaload…uild\titlebar.js:31)
    at Object.<anonymous> (C:\Code\photopeaload…ild\titlebar.js:454)
    at Module._compile (internal/modules/cjs/loader.js:1152)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1173)
    at Module.load (internal/modules/cjs/loader.js:992)
    at Module._load (internal/modules/cjs/loader.js:885)

Any help getting started would be much appreciated, thanks.
Oh and this is on Windows.

[PAEz]

If I copy the node_modules and window folder from the binary distribution to the source one then it seems to work.
I still see that error in the windows console, but no error in the browsers console.
Ill just go with this for now and try to see if I can figure out the problem in a bit.

[yikuansun]

Hi,

Thanks for bringing up this issue. I've looked into it a bit, and it seems that the error in the browser console is from the custom-electron-titlebar package. Since you fixed the issue by replacing the node_modules, I'd assume that the package's release on npm was changed or something, but I'll keep looking into it. I'll keep you updated, but for now, keep using the binary distribution's node_modules.
I don't think the error in the Windows console is an issue, at least for now - it's just because the app checks if a file is being "Opened With" it, and this feature does not work in dev (hence the error).

[yikuansun]

@PAEz I've managed to remove the error, but it isn't as good as it used to be. I've opened an issue with the creator of custom-electron-titlebar. For now, though, you should be able to pull the latest code, reinstall node_modules, and have a working version 😃

[PAEz]

Thanks mate, that worked.
I just wanted to add a server to serve my plugin I want to make and I got that now. Ill add save and load while Im at it. Dont know electron or node, but that shouldnt be a problem. ;P

[yikuansun]

Glad to hear it!
I'm excited to see what your plugin will be like! Here's a short script that I wrote for simplifying more complicated scripting and loading: https://github.com/yikuansun/PhotopeaAPI

[yikuansun]

I'm closing this issue for now, feel free to comment back if you need any more help.

[PAEz]

Hello again.
I went to play with it and thought Id use a more updated electron and got a lesson in deprecation. Looks like remote and contextIsolation===false are gone, so updated the code to not use them.
Keep in mind I have an AWFUL memory, promises do my head in, dont know electron (and try learning it now that all the examples use deprecated stuff) or node....I know some JS tho! ;P
Dont really know git so I just put it in a gist.....
https://gist.github.com/PAEz/767421bfb0435777fb7c31e09ae84d59

EDIT: Updated coz I noticed that the options in the preload where changed, so now the preload saves the options to main so that renderer can then ask the pre to get the options from main....hahahaha, I love jumping through hoops for securities sake. Also had to make the renderer wait for the page load to stop a race condition with updating the options.....Im not even sure thats a full fix, but seems to be consistent

[PAEz]

Getting close to just dumping this whole idea.
I thought there was a problem with the version above, so installed the latest dev version of customtittlebar (wish it had of been in the npm already), changed the code to the new way and same prob. So tried commenting out the titlebar stuff and same problem. Then I tried the packaged version you released of the old one and same problem. Ive wasted sooooo much time on this.
THE PROBLEM
After you do anything in photopea (move a layer, use the brush, etc) then you cant close the app, even alt-f4 or close window on the taskbar. You have to use the taskmanager for the released app and you can close the console or ctrl-x in console for the dev version.
Theres no error messages, just nothing, no idea how to debug this.
Did you ever encounter such a thing?

EDIT: Tried everything here.....
electron/electron#25012
....didnt work. The only way I could get it to close was by putting an app.exit() in the window close event. Which isnt the best option, but with this app could be liveable.......but why?
https://www.electronjs.org/docs/latest/api/app#appexitexitcode

[yikuansun]

Hi @PAEz ,
Thanks for bringing this up. By the way, your gist works great. Only issue is that you use photopea.js instead of photopea.min.js, not sure if that's intentional?

THE PROBLEM After you do anything in photopea (move a layer, use the brush, etc) then you cant close the app, even alt-f4 or close window on the taskbar.

I believe this is an issue with how the web version of Photopea asks about unsaved work before you can close the tab. Whenever I use photopealoader, I save or close all unsaved opened documents before exiting (this works well). I'm not sure how to properly integrate this into Electron, but I'll look into it. As you said, app.exit() is a temporary solution, but I'll look into making some kind of save prompting.

[PAEz]

That works fine, good stuff. And thanks for putting my name in, I like getting my name on things. ;P
Today I tried making photopea to load in the main window with no frame (loadURL) and it worked (including your ppapi with a small mod), but didnt solve any problems. One thing I would of liked to work is This Device, but no.
Wish I knew Rust Id prolly use Tauri and tomorrow Im going to have a play with it anyway. Looks like for what I want I could get away with knowing bugger all, except maybe adding the server.....although some of the code I saw to add a server to rust looked pretty simple. Tauri would be cool because things work.
https://www.dropbox.com/s/ame1tgoqv7yf00i/app.7z?dl=0
If your on windows theres a link to the create app example compiled pointed to photopea. The Device works, but dropbox didnt, didnt try the rest. The only slight prob I saw so far is when you close the app it closes whilst the Do you want to leave the page dialog so you cant cancel, but Im sure that could be dealt with. Inserting JS into a page is no problem and its got JS APIs that allow saving and loading files, plus dialogs. Only other real prob I see with tauri is you really need to include WebView 2 in your install as a lot of people dont have it, I got it from a tauri app I tried a while ago so you can put it in an installer.
Other than that Ill prolly try and add save and load to yours tomorrow.

EDIT: Promises, Microtasks and Macrotasks SUCK!!!!!

[yikuansun]

@PAEz Seems pretty cool. I utilize some of the features of having Photopea in an iframe, such as making an Open With Photopea system, and the Resources folder. One plausibility, using Electron, is getting the resources in preload.

[yikuansun]

Oh wait. Webview.
🤯

Edit: webview tag is deprecated and doesn't work all that well. Not sure how to go about this.

[PAEz]

Sorry, think we have some communication crossed wires.
When I was talking about webview I was talking about Tauri. Tauri uses the OS webview. On windows there is the old webview (IE, yucky) and the new webview 2 (Edge, lovely). This is why the exe can be only 6meg, because unlike Electron its not packaging in the whole chromium.
IFRAME. You dont need to put Photopea in an iframe to communicate with it if your using Tauri or Electron because we can insert code after/before the page loads and window.parent=window. I made a no iframe version in electron using your code (with a small mod) to see if that would help with using the This Device feature of photopea but it didnt help. In my app Id actually prefer the non frame version so the ads work to encourage people to give some money to the author of pp.....but I can go either way.
Tauri. Had another quick look at it yesterday and it seems to have everything I want except a directory copy command (easy to make in js i guess), no zip stuff (js can handle that), limited access to the filesystem in that your only allowed to access safe paths (fine for me). Im more interested in the Electron version because having node handy is awesome, but I still want to explore Tauri and later I might look at Neutralino as well.
You asked why photopea.js and not min, because I planned on making some small changes. Wanted the message handling to be a bit different so it was easier for me to debug. Its got a message thing now. Que items get called once then removed unless there are data to collect and "all" functions get called for every message.
The gist is updated to show where Im at. Also used the dev version of customtbar, just because.
https://gist.github.com/PAEz/767421bfb0435777fb7c31e09ae84d59

EDIT: Just changed photopea.js some more, hope I havent gone to far ;P Also added a zindex to the loading element so it covers the screen and dont remove it till everything is done.

[yikuansun]

@PAEz New gist looks good, I updated master to match.
I don't know Rust or Tauri, and I have more confidence in Electron, at least for now. I'll look into it more, maybe we can come back to it later.
Anyhow, the latest version is all good other than the fact that my plugins don't show up for some reason. Probably something to do with asynchronous requests and timing. I'll debug some.
Could you please make a gist or something to show the no iframe version? It sounds very interesting!

Edit: just figured out the plugins, I think it's an easy fix, I'll update soon.

[PAEz]

Today was a good day, finally got rudimentary (still got to do the options dialog, grrrrrrr) save and load working!!....so happy ;P
I do have a problem where as if I change the name of the document it adds .psd to the end of it? Ive asked the author about it here.....
https://www.reddit.com/r/photopea/comments/ssxdcx/from_scripting_can_i_bring_up_the_export_as_any/
....hopefully there will be a solution. Also check that thread for what I wish it would be like.

Sorry about the plugins breaking. This is why I try to explain that I have problems and make dumb mistakes....never take it that my code just works, always good to go over it. I moved your fix to main.js, "separation of concerns" and all that. I dont really have any coding conventions, but the things I always keep in mind are size, speed, modularity - separation of concerns - reuse (those three usually go together to me).

The IO thing is an option that must be enabled by setting the property enableIO on the options object to true. This way if their only using your api for in the browser that stuff wont be there. Im a little worried about security here aswell. Ive enabled load and save file to the renderer which could possibly be abused by a plugin. Ill prolly look into that later.

If you ever have any questions as to why I did something, just ask and if you have any criticisms just say... I do NOT get offended by them in the slightest, I welcome them. Talking of doing things. Ive marked a few areas that Id like to take out and make part of the Photopea API. I see these files being in a folder with Photopea.js named main.js and preload.js that must be required in. This will take out a bunch of code that really shouldnt be there. All the code in main and preload should be to do with the app and not Photopea.js.

I think I deleted the no frames version, Ill make another one soon. Theres not much to it. Move renderer to preload, make Photopea.js handle not setting up an iframe. Make main.js open the site in the browser. Pretty sure thats all it was.

[yikuansun]

@PAEz Very impressed with the new code! It's quite seamless as far as I can tell.
For the unwanted psd extension, maybe we could just check if the export is supposed to be PSD, then slice it out if needed. Dunno how robust that'd be. I'll experiment with it.

I think I deleted the no frames version, Ill make another one soon. Theres not much to it. Move renderer to preload, make Photopea.js handle not setting up an iframe. Make main.js open the site in the browser. Pretty sure thats all it was.

I understand how it works now. I was just curious; no need to remake it for me unless you want to. Thanks for the explanation!

[yikuansun]

@PAEz Oh yeah... thanks for commenting on my YouTube video, by the way 😆

[PAEz]

I did a lot of testing with a no frames version yesterday, that and trying to get it to flash less when it first appears.
The no frame is a no go. Didnt notice from my quick test the first time, but there are problems. The messaging doesnt work. You can send stuff to it, but there is no Done response (prolly coz it knows its not in a frame) and you receive the messages you send as well (makes sense). Then theres the problem that the custom title bar appears over the top of PP and I couldnt fix it with css (I SUCK at css). The only way I could fix it was by using a BrowserView, which worked great, but the other problem kills the idea anyway. But there may be a way (more on that later), but is it worth the hassle?
The problem I ended up having with frames and why I did yesterdays work was because due to damn web security I couldnt inject js or more importantly at the time css. But at the end of the night I wondered if because its chromium could I use extensions? Yes to a limited degree but the cool thing was I noticed Electron has everything I need! I should of flicked through the docs, that was the first time. It has the web request api and the ability to insert css and js into frames! Havent tried it all yet, thats today or tomorrow, but with them I can pull off everything I need. Ive made a few extensions before. If you look on Stackoverflow all my answers are to do with chrome extensions, they where how I cemented my knowledge in JS, whilst learning extensions, the DOM and how to make things do what I want.
To deal with the .psd I can insert some js to monitor the tabs with a mutation observer and change the titles to anything I want. The name is only a problem on tab names, I dont care what PP sees them as internally, we have source to know whos who. I could even make the names the same as source and then change them, this would allow me to add tooltips showing the whole file path when they hover over a tab.
Getting even trickier I might be able to trick a no frame PP into thinking its in a frame and then hijacking/proxying postMessage. In global scope window is protected, but its not a reserved word so in a function you can create a window variable, soooooo.... You can block the loading of pp.js with the webrequest api, fetch pp.js, wrap it an a IIFE in which you proxy window, find out how it tells its a frame, lie and make it think its in a frame and then hijack postmessage so it uses exposed api to message back to the preload. Ill prolly try it at some point for fun.

I noticed your youtube coz I was looking for plugins for dev reasons and the only ones I found where yours. Cool stuff! I learnt to code because I was interested in how it all worked, making the computer do what I want and then the BIG thing for me was the Demo Scene. People making amazing graphical things on old slow computers. Due to my messed up brain I wasnt up to compete, but they directed my learning and I owe them a lot. Those conventions I mentioned above where instilled into me by my first teacher who was a demo coder. Particularly liked Zeus, but unfortunately it was broken. Didnt work at all in FF and chrome showed one lightning but then bugged out in the console. I wish I had my old code for lightning, but I have nothing from my past. Oh and if you dont know what the demo scene is and you like making graphical stuff, got pouet.net and have your mind blown. That and shadertoy.

[yikuansun]

For some reason, the custom close handler doesn't work anymore, as mentioned here: AlexTorresDev/custom-electron-titlebar#183

I added a splash screen, which isn't perfect, but does look much nicer than the not completely truthful updating... message or, God forbid, Photopea's built-in loading sequence (nothing).

I did take a look at the Demoscene, it was very cool. I'm trying to kickstart a thing surrounding graphics software, so I should probably get better at this type of tech 😅 A lot of my graphics stuff uses SVG, which sometimes works great, but is limited in some areas and many browsers haven't quite caught up to it. You probably noticed this with Zeus, which started out as an experiment. I had come up with a new method for making lightning effects with Photopea, and after learning about turbulent displacement in SVG, I just had to try it out. I have some other apps which are clunky like that, I'm trying to solve this by marketing the web versions as more of a demo and encouraging people to install the desktop versions, which run on Electron and therefore use a fixed browser with little room for incompatibility.
Really cool to hear that you also did lightning. Do you remember what kinds of algorithms you used? I did some research a while back on lightning rendering algorithms but couldn't find anything that I was capable of translating into code (in other words, it was too hard for an amateur like me).

[yikuansun]

@PAEz Bit of an issue with the file extension restrictions, it doesn't allow for many file types supported by Photopea including videos, brushes, patterns, fonts, actions, etc. Do you know if there's a way to fix this, other than manually writing in all of the file types?

I may comment out the file type restrictions just for now, until we find a solution.

[PAEz]

Sorry, didnt even think of that.
Update photopea.js so that theres an All Files option in the open dialog now. Theres also one for save when there shouldnt be but this is just a quick fix Ill look at again at some point.
Sorry bout no updates but Ive been down, I have problems. When Im up again Ill get some more done. I got a no frames version that thinks its in a frame working, once new page support is added it should enable all the options pp has. Its a complete mess right now which is why I havent posted it, plus I have to add a couple of things. Might have to branch away from photopea.js tho. It has more working parts now, like the webrequest stuff and had to add a server for that aswell but thats cool coz I need it to host plugins anyways.

I gotta admit Im not so into this now that Ive gotten to know PP more. I was really interested in the scripting but its rather lacking and the dev never seems interested in making his app better so dont see that changing. Its little things like not being able to change the resize type ( https://www.reddit.com/r/photopea/comments/tdjehp/need_help_with_a_simple_script/ ). And now I find out hes made scripting garbage by making it now synchronous ( https://www.reddit.com/r/photopea/comments/t4wx7p/scripting_and_json_configuration_file_instant/ ) which is going to cause me grief. But Ill still try and get all the main stuff done anyway.

[yikuansun]

@PAEz Thanks for the update to photopea.js, works great! I like the All Files option for save, no need to change that.
By the way, thanks a lot for helping me with this project. I understand if you can't be working on it everyday or even every week - to be honest, I probably can't either. Take care of yourself, and please don't stress over this stuff.
Regarding the scripting, I also find it a bit limited, but for what it is I think it's quite nice for what it is - could be a lot worse, definitely. Sometimes when I have issues with the scripting or the app in general, I ask through GitHub Issues and the dev helps at least a little. Except for the synchronous scripts thing, I asked about a similar app.open issue a while back (it returns done at an inappropriate time) and the dev didn't really understand. Some other user posted a hack on the thread which involved repeatedly counting the number of layers to see if the image was added, and the issue was closed. Making the done return after the image is loaded would be a much better solution than making the whole scripting interface synchronous. Overall, though, I do really love Photopea. It's given me opportunities to express myself and my ideas. If Ivan Kutskir decided that Photopea needs to charge as much as a dollar, I wouldn't be the artist that I am. So in doing things like this, I'm trying to make Photopea a better place for myself and others in a similar position. That's just me, though... I respect your opinion.