retejs / area-plugin

https://retejs.org
MIT License
8 stars 19 forks source link

Question about custom background #1

Closed jc-anguiano closed 5 years ago

jc-anguiano commented 5 years ago

HI, first things first great job with all retesjs project is awesome.

I can't figure out how to put a custom back ground, I set to true background at the areaPlugin installation, but I didn't see anything, I read the background.js source code and it append a rete-bacjground class to the editor element and the css assigns the styles for the new class... Anyway I wanna set a custom seamless background how can I do it?

Thanks a lot

Ni55aN commented 5 years ago

background param is an HTMLElement that will be added to editor.view.area or boolean, that will add <div class="rete-background default"> to Area. In any case it will has default styles https://github.com/retejs/area-plugin/blob/master/src/style.sass#L5 (stretched over a large area)

Example:

const background = document.createElement('div');
background.classList = 'background';

editor.use(AreaPlugin, { background });
background-color: #333

Live example: https://rete.js.org/#/examples/customization Styles: https://github.com/retejs/rete.js.org/blob/77484b64e4534be8756eafab6b6ba34f5a783497/src/components/Examples/list/customization/style.sass#L15

jc-anguiano commented 5 years ago

Hi again, I think that I just figure out what is the problem with my code, I'm trying to add the background div

document.createElement('div');
background.classList = 'background

Inside the mount hook of my vue component, after that I just append the background as my component Root's child in order to get rendered but this way the background remains static... I think that I'm missing something but still I can't figure out

jc-anguiano commented 5 years ago

Last news, I'm taking another approach, I guess that my first implementation was wrong, now I am following your code at retesjs.org repo but I am getting and error at

export default { async mounted()...

I am getting this message

Vue warn error in mounted hook (promise/async) 
TypeError object(...) Is not a function

I just noticed that rete.org repo is using vue 2.5... The way that you organize these files look so nice and looks self explanatory, I really want use that on my project

Ni55aN commented 5 years ago

@jc-anguiano https://www.reddit.com/r/vuejs/comments/b6homp/question_about_eaport_deault_async_issue_with_vue/

jc-anguiano commented 5 years ago

thanks a lot, that was my fault, the plugin works like a charm, i import rete library to define set init function instead @/rete file... thanks again for the fast support