Membuat Text Input

Bismillahirrahmanirrahim.

<- Membuat Multiverse| Membuat Game Balon Matematika ->

Fitur text input sebenarnya sudah tersedia di Builtin Library (Beta) jika kita menggunakan Wick Editor secara online (lewat website). Catatan ya, kalau mau simpel ya pakai saja Wick Editor lewat website karena asset-nya memang tersedia online. Kalau mau buat sendiri, lanjutkan baca tulisan ini (agak ribet sih hehe)

Namun saat Wick Editor digunakan tanpa internet (maksudnya menggunakan versi desktop), fitur dari asset bawaan tersebut tidak tersedia.

Di tulisan ini, saya akan menunjukkan cara membuat kotak isian teks (text input) secara manual di Wick Editor versi desktop, dengan mencontoh dari aset bawaan yang sudah disediakan di Wick Editor versi website.

1. Buat persegi panjang dengan menggunakan tool Rectangle (shortcut: R) lalu ubah fiil-nya menjadi putih (atau sesuaikan saja dengan selera kalian ya)

 2. Buat teks dengan menggunakan tool Text (shortcut: T)

 3. Pada bagian inspector, silahkan beri nama masing-masing

        klik rectangle tadi, lalu di bagian inspector pilih make clip

        text tadi langsung saja beri nama textStyle

4. Ingat save dulu ya agar tersimpan proyeknya. Berikutnya grup kedua komponen tadi dengan cara seleksi kotak dan teks lalu di bagian inspector pilih make clip 

5. Beri nama clip yang paling luar dengan inputText kemudian klik ganda pada kotak, akan masuk ke clip kotak-teks. Kemudian buat layer baru (tekan tombol + di bawah layer 1) lalu klik kotaknya kemudian pindahkan kotak tadi ke layer 2 dengan cara copy paste. Setelah itu masuk ke bagian inspector lalu tambahkan 3 script selain Default, yaitu Load, Update, dan Unload 

kemudian masukkan kode berikut:

 

Default

this.value = "";

// Attach this to the absolute position of the PARENT.
this.parentClip.getAbsPos = () => {
    return this.paper.view.projectToView(new this.paper.Point(
        this.parentClip.view.group.bounds.left,
        this.parentClip.view.group.bounds.top
    ));
}

this.getAbsSize = () => {
    return {
        width: this.view.group.bounds.width * this.paper.view.zoom,
        height: this.view.group.bounds.height * this.paper.view.zoom,
    }
}

this.updateDivPosition = () => {
    var pos = this.parentClip.getAbsPos(); // Connect to parentClip's position.
    var size = this.getAbsSize();
    this.div.style.position = 'absolute';
    this.div.style.left = pos.x + 'px';
    this.div.style.top = pos.y + 'px';
    this.div.style.width = size.width + 'px';
    this.div.style.height = size.height + 'px';
    this.div.style.backgroundColor = 'white';
}

this.paper = this.view.paper;
this.div = document.createElement('div');
this.canvasContainer = this.project.view._canvasContainer;
this.canvasContainer.appendChild(this.div);

Load

/* TextInput code */
this._inputFunction = (val) => {
    
}

// Adds an on change event to the text input. This function will be sent the text string
// within the input.
this.setOnChange = (fn) => {
    this._inputFunction = fn;
}

this.parentClip.setOnChange = this.setOnChange;

this.onInputChange = (value) => {
    this.value = value;
    this._inputFunction && this._inputFunction(value);
}

// Update styling of the div.
this.inputElem = document.createElement('input');
this.inputElem.style.width = '100%';
this.inputElem.style.height = '100%';
this.inputElem.oninput = (e) => {
    this.onInputChange(e.target.value)
}
this.div.appendChild(this.inputElem);

Update

this.updateDivPosition();

if (this.textStyle && !this._styleUpdated) {
    let style = this.textStyle._json[1];
    if (style) {
        this.inputElem.style.fontWeight = style.fontWeight + "";
        this.inputElem.style.fontSize = style.fontSize + "";
        this.inputElem.style.fontFamily = style.fontFamily;
        this._styleUpdated = true;
    }
    
}

// Update the value of the parent, to distribute values to the rest of the project.
this.parentClip.value = this.value;

Unload

 if(this.div.parentElement) {
    this.canvasContainer.removeChild(this.div);
}
this._styleUpdated = false;
this.parentClip.value = this.value;

Setelah semua sudah selesai, silahkan export ke html, berikut hasilnya:

Sekali lagi, kalau mau simpel ya pakai saja Wick Editor lewat website karena asset-nya (text input) memang tersedia online.

Semoga Allah memberikan taufik-Nya kepada kita semua.

 

<- Membuat Multiverse| Membuat Game Balon Matematika ->