react-native-ensys-camera-x 1.0.7

package/android/src/main/java/com/customcamera/TextEntryController.kt

@@ -0,0 +1,553 @@
+package com.customcamera
+
+import android.graphics.Color
+import android.graphics.Rect
+import android.graphics.Typeface
+import android.graphics.drawable.GradientDrawable
+import android.text.Layout
+import android.util.TypedValue
+import android.view.Gravity
+import android.view.KeyEvent
+import android.view.View
+import android.view.ViewGroup
+import android.view.ViewTreeObserver
+import android.view.inputmethod.EditorInfo
+import android.view.inputmethod.InputMethodManager
+import android.widget.EditText
+import android.widget.FrameLayout
+import android.widget.HorizontalScrollView
+import android.widget.ImageView
+import android.widget.LinearLayout
+import android.widget.TextView
+
+/**
+ * Immutable description of one text overlay's styling. Stamped onto the overlay
+ * frame view (via R.id.tag_text_overlay_spec) when the text is applied, so the
+ * overlay can be re-opened for editing with its exact style restored, and so
+ * per-asset overlay state can be captured/restored across carousel navigation.
+ */
+data class TextOverlaySpec(
+  val text: String,
+  val color: Int,
+  val fontIndex: Int,
+  val backgroundMode: Int,
+  val alignment: Int,
+  val textSizeSp: Float = TextEntryController.DEFAULT_TEXT_SIZE_SP
+) {
+  companion object {
+    const val DEFAULT_TEXT_SIZE_SP = 30f
+    const val BG_NONE = 0
+    const val BG_SOLID = 1
+    const val BG_TRANSLUCENT = 2
+  }
+
+}
+
+class TextEntryController(
+  private val activity: CustomCameraActivity,
+  private val host: FrameLayout,
+  private val statusBarHeight: () -> Int,
+  private val navigationBarHeight: () -> Int,
+  private val leftInset: () -> Int,
+  private val rightInset: () -> Int,
+  private val onDone: (TextOverlaySpec) -> Unit,
+  private val onDeleteExisting: () -> Unit,
+  private val onDismissed: () -> Unit
+) {
+  companion object {
+    const val DEFAULT_TEXT_SIZE_SP = 30f
+
+    /**
+     * The live entry field and the confirmed overlay must wrap at the SAME width, or
+     * the background pill re-sizes when the user taps Done. Single source of truth so
+     * both the live [EditText] and the confirmed library TextView cap wrapping identically.
+     */
+    const val TEXT_MAX_WIDTH_FRACTION = 0.86f
+
+    /** Background-pill geometry shared by the live field and the confirmed overlay. */
+    const val PILL_PADDING_H_DP = 12
+    const val PILL_PADDING_V_DP = 6
+    const val PILL_CORNER_DP = 8
+
+    /**
+     * Pins every text-measurement parameter that diverges between an editable
+     * [EditText] (the live preview) and a static TextView (the confirmed overlay), so
+     * the confirmed pill wraps and measures byte-identically to what the user saw while
+     * editing. The key offender is [Layout.BREAK_STRATEGY_SIMPLE]: an EditText defaults
+     * to it while a TextView defaults to [Layout.BREAK_STRATEGY_HIGH_QUALITY], so the
+     * same text breaks into different lines and the background pill visibly shrinks on
+     * Done. Applied to BOTH views (an EditText is a TextView) so neither can drift from
+     * theme defaults. Safe on this module's minSdk 24 (break/hyphenation APIs are 23+).
+     */
+    fun pinTextMetrics(view: TextView, screenWidthPx: Int) {
+      view.maxWidth = (screenWidthPx * TEXT_MAX_WIDTH_FRACTION).toInt()
+      view.maxLines = 8
+      view.setHorizontallyScrolling(false)
+      view.includeFontPadding = true
+      view.letterSpacing = 0f
+      view.setLineSpacing(0f, 1f)
+      view.breakStrategy = Layout.BREAK_STRATEGY_SIMPLE
+      view.hyphenationFrequency = Layout.HYPHENATION_FREQUENCY_NONE
+      view.minWidth = 0
+      view.minHeight = 0
+      view.minimumWidth = 0
+      view.minimumHeight = 0
+    }
+
+    /**
+     * Two font weights toggled by the "Aa" control - system typefaces only,
+     * so no font files ship with the plugin.
+     *
+     * Index 0 = Bold, index 1 = Normal. A single tap flips between them.
+     * The chosen index is persisted in [TextOverlaySpec.fontIndex].
+     */
+    val FONTS: List<Typeface> = listOf(
+      Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD),
+      Typeface.create(Typeface.SANS_SERIF, Typeface.NORMAL)
+    )
+
+    /** Swatch palette - identical to the palette the old text dialog offered. */
+    fun palette(theme: CameraTheme): List<Int> = listOf(
+      theme.colors.primaryContrast,
+      theme.colors.background,
+      Color.RED,
+      Color.BLUE,
+      Color.GREEN,
+      Color.YELLOW,
+      Color.parseColor("#FFC0CB"),
+      Color.parseColor("#00FF00"),
+      Color.parseColor("#008080")
+    )
+  }
+
+  private val theme = activity.theme
+
+  var isShowing = false
+    private set
+
+  // Style state for the session — WhatsApp remembers the last-used style between
+  // text entries, so these persist across show()/hide() cycles.
+  private var color: Int = theme.colors.primaryContrast
+  private var fontIndex = 0
+  private var backgroundMode = TextOverlaySpec.BG_NONE
+  private var alignment = Gravity.CENTER_HORIZONTAL
+  private var textSizeSp = DEFAULT_TEXT_SIZE_SP
+
+  private var editingExisting = false
+
+  private var root: FrameLayout? = null
+  private var input: EditText? = null
+  private var swatchRow: View? = null
+  private var alignButton: ImageView? = null
+  private var keyboardListener: ViewTreeObserver.OnGlobalLayoutListener? = null
+
+  /** Opens the entry mode. [existing] pre-fills text + style for re-editing. */
+  fun show(existing: TextOverlaySpec? = null) {
+    if (isShowing) return
+    isShowing = true
+    editingExisting = existing != null
+    existing?.let {
+      color = it.color
+      fontIndex = it.fontIndex.coerceIn(FONTS.indices)
+      backgroundMode = it.backgroundMode
+      alignment = it.alignment
+      textSizeSp = it.textSizeSp
+    }
+    buildUi(existing?.text.orEmpty())
+  }
+
+  fun hide() {
+    if (!isShowing) return
+    isShowing = false
+    keyboardListener?.let {
+      host.viewTreeObserver.takeIf { vto -> vto.isAlive }?.removeOnGlobalLayoutListener(it)
+    }
+    keyboardListener = null
+    input?.let { hideKeyboard(it) }
+    root?.let { host.removeView(it) }
+    root = null
+    input = null
+    swatchRow = null
+    alignButton = null
+    onDismissed()
+  }
+
+  private fun currentSpec(): TextOverlaySpec = TextOverlaySpec(
+    text = input?.text?.toString()?.trim().orEmpty(),
+    color = color,
+    fontIndex = fontIndex,
+    backgroundMode = backgroundMode,
+    alignment = alignment,
+    textSizeSp = textSizeSp
+  )
+
+  private fun confirm() {
+    val spec = currentSpec()
+    if (spec.text.isEmpty()) {
+      // Empty on Done: adding nothing = cancel; emptying an existing overlay = delete.
+      if (editingExisting) onDeleteExisting()
+      hide()
+      return
+    }
+    // Apply BEFORE hide(): the host clears its "which overlay is being edited"
+    // state when onDismissed fires, so onDone must run while it is still set.
+    onDone(spec)
+    hide()
+  }
+
+  private fun buildUi(initialText: String) {
+    val screenWidth = activity.resources.displayMetrics.widthPixels
+
+    val container = FrameLayout(activity).apply {
+      setBackgroundColor(theme.componentColor("editor", "textEntryScrim", 0xB3000000.toInt()))
+      isClickable = true
+      isFocusable = true
+      elevation = dp(32).toFloat()
+      // Tapping the scrim (outside the text) confirms, like WhatsApp.
+      setOnClickListener { confirm() }
+    }
+    root = container
+
+    // ── Center: the live-styled text field ──────────────────────────────────
+    val field = EditText(activity).apply {
+      background = null
+      setText(initialText)
+      setSelection(initialText.length)
+      hint = Localization.getString("typeTextHint", "Type text")
+      setHintTextColor(theme.componentColor("editor", "hintText", 0x88FFFFFF.toInt()))
+      setTextSize(TypedValue.COMPLEX_UNIT_SP, textSizeSp)
+      imeOptions = EditorInfo.IME_ACTION_DONE
+      // Multiline while still surfacing a Done action on the IME.
+      setRawInputType(
+        EditorInfo.TYPE_CLASS_TEXT or
+          EditorInfo.TYPE_TEXT_FLAG_MULTI_LINE or
+          EditorInfo.TYPE_TEXT_FLAG_CAP_SENTENCES
+      )
+      setHorizontallyScrolling(false)
+      maxLines = 8
+      setOnEditorActionListener { _, actionId, _ ->
+        if (actionId == EditorInfo.IME_ACTION_DONE) {
+          confirm()
+          true
+        } else false
+      }
+      // Consume taps so the scrim's confirm click doesn't fire while typing.
+      setOnClickListener { }
+      // System Back (after the IME dismisses) closes the entry mode without
+      // applying — key events are delivered to the focused view, i.e. this field.
+      setOnKeyListener { _, keyCode, event ->
+        if (keyCode == KeyEvent.KEYCODE_BACK && event.action == KeyEvent.ACTION_UP) {
+          hide()
+          true
+        } else false
+      }
+    }
+    input = field
+    // Cap wrapping and pin every text-measurement metric so the live pill is the EXACT
+    // size the confirmed overlay will be. The confirmed overlay (PhotoEditor
+    // addText/editText) is a static TextView; MediaPreviewEditor runs the same
+    // pinTextMetrics on it, so both break lines identically and the background never
+    // shrinks when the user taps Done.
+    pinTextMetrics(field, screenWidth)
+    applyLiveStyle()
+    container.addView(
+      field,
+      FrameLayout.LayoutParams(
+        ViewGroup.LayoutParams.WRAP_CONTENT,
+        ViewGroup.LayoutParams.WRAP_CONTENT,
+        Gravity.CENTER
+      ).apply {
+        // Keep the field visually centered in the region above the keyboard.
+        bottomMargin = dp(64)
+      }
+    )
+
+    // ── Top action row: Cancel | spacer | Aa · align · bg · Done ────────────
+    val actionIconSize = if (screenWidth < dp(360)) dp(34) else dp(40)
+    val actionRow = LinearLayout(activity).apply {
+      orientation = LinearLayout.HORIZONTAL
+      gravity = Gravity.CENTER_VERTICAL
+      setPadding(dp(8), dp(6), dp(8), dp(6))
+    }
+
+    val cancelBtn = actionIcon(R.drawable.ic_close, actionIconSize) { hide() }
+    cancelBtn.bindDescription("textCancel", "Cancel text")
+    actionRow.addView(cancelBtn, actionParams(actionIconSize))
+    actionRow.addView(View(activity), LinearLayout.LayoutParams(0, 1, 1f))
+
+    val fontBtn = TextView(activity).apply {
+      text = Localization.getString("textFontSample", "Aa")
+      gravity = Gravity.CENTER
+      includeFontPadding = false
+      setTextColor(theme.colors.primaryContrast)
+      setTextSize(TypedValue.COMPLEX_UNIT_PX, actionIconSize * 0.48f)
+      typeface = FONTS[fontIndex]
+      bindDescription("textFont", "Change font")
+      setOnClickListener {
+        fontIndex = if (fontIndex == 0) 1 else 0
+        typeface = FONTS[fontIndex]
+        applyLiveStyle()
+      }
+    }
+    actionRow.addView(fontBtn, actionParams(actionIconSize))
+
+    val alignBtn = actionIcon(alignBuiltinIconRes(), actionIconSize) {
+      alignment = when (alignment) {
+        Gravity.START -> Gravity.CENTER_HORIZONTAL
+        Gravity.CENTER_HORIZONTAL -> Gravity.END
+        else -> Gravity.START
+      }
+      alignButton?.let { applyAlignIcon(it) }
+      applyLiveStyle()
+    }
+    alignBtn.bindDescription("textAlignment", "Change text alignment")
+    alignButton = alignBtn
+    actionRow.addView(alignBtn, actionParams(actionIconSize))
+
+    val bgBtn = actionIcon(R.drawable.ic_text_bg, actionIconSize) {
+      backgroundMode = (backgroundMode + 1) % 3
+      applyLiveStyle()
+    }
+    bgBtn.bindDescription("textBackground", "Change text background")
+    actionRow.addView(bgBtn, actionParams(actionIconSize))
+
+    val doneBtn = actionIcon(R.drawable.ic_done, actionIconSize) { confirm() }
+    doneBtn.bindDescription("textDone", "Apply text")
+    actionRow.addView(doneBtn, actionParams(actionIconSize))
+
+    container.addView(
+      actionRow,
+      FrameLayout.LayoutParams(
+        ViewGroup.LayoutParams.MATCH_PARENT,
+        ViewGroup.LayoutParams.WRAP_CONTENT,
+        Gravity.TOP
+      ).apply {
+        topMargin = statusBarHeight() + dp(8)
+        marginStart = leftInset() + dp(8)
+        marginEnd = rightInset() + dp(8)
+      }
+    )
+
+    // ── Bottom: color swatches, repositioned above the keyboard ─────────────
+    val swatchSize = if (screenWidth < dp(360)) dp(30) else dp(34)
+    val swatches = LinearLayout(activity).apply {
+      orientation = LinearLayout.HORIZONTAL
+      gravity = Gravity.CENTER
+      setPadding(dp(8), dp(6), dp(8), dp(6))
+    }
+    val colors = palette(theme)
+    val selectedColor = color
+    val swatchViews = colors.map { c ->
+      View(activity).apply {
+        background = GradientDrawable().apply {
+          shape = GradientDrawable.OVAL
+          setColor(c)
+          setStroke(
+            if (c == selectedColor) dp(3) else dp(1),
+            if (c == selectedColor) theme.colors.primaryContrast
+            else theme.componentColor("editor", "swatchBorder", 0x55FFFFFF)
+          )
+        }
+      }
+    }
+    swatchViews.forEachIndexed { index, swatch ->
+      swatches.addView(swatch, LinearLayout.LayoutParams(swatchSize, swatchSize).apply {
+        setMargins(dp(6), dp(6), dp(6), dp(6))
+      })
+      swatch.setOnClickListener {
+        color = colors[index]
+        swatchViews.forEachIndexed { i, v ->
+          (v.background as GradientDrawable).setStroke(
+            if (i == index) dp(3) else dp(1),
+            if (i == index) theme.colors.primaryContrast
+            else theme.componentColor("editor", "swatchBorder", 0x55FFFFFF)
+          )
+        }
+        applyLiveStyle()
+      }
+    }
+    val swatchScroll = HorizontalScrollView(activity).apply {
+      isHorizontalScrollBarEnabled = false
+      addView(swatches)
+    }
+    swatchRow = swatchScroll
+    container.addView(
+      swatchScroll,
+      FrameLayout.LayoutParams(
+        ViewGroup.LayoutParams.WRAP_CONTENT,
+        ViewGroup.LayoutParams.WRAP_CONTENT,
+        Gravity.BOTTOM or Gravity.CENTER_HORIZONTAL
+      ).apply {
+        bottomMargin = navigationBarHeight() + dp(12)
+      }
+    )
+
+    // System Back closes the entry mode without applying.
+    container.isFocusableInTouchMode = true
+    container.setOnKeyListener { _, keyCode, event ->
+      if (keyCode == KeyEvent.KEYCODE_BACK && event.action == KeyEvent.ACTION_UP) {
+        hide()
+        true
+      } else false
+    }
+
+    host.addView(
+      container,
+      FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
+    )
+
+    trackKeyboard(container)
+
+    field.requestFocus()
+    field.post {
+      (activity.getSystemService(android.content.Context.INPUT_METHOD_SERVICE) as? InputMethodManager)
+        ?.showSoftInput(field, InputMethodManager.SHOW_IMPLICIT)
+    }
+  }
+
+  /**
+   * Restyles the live EditText from the current style state so the preview always
+   * matches the final overlay exactly (same color/typeface/gravity/background the
+   * TextStyleBuilder applies at Done).
+   */
+  private fun applyLiveStyle() {
+    val field = input ?: return
+    field.typeface = FONTS[fontIndex]
+    field.gravity = alignment or Gravity.CENTER_VERTICAL
+    field.setTextSize(TypedValue.COMPLEX_UNIT_SP, textSizeSp)
+    when (backgroundMode) {
+      TextOverlaySpec.BG_SOLID -> {
+        field.setTextColor(contrastOn(color))
+        field.background = backgroundPill(color, translucent = false)
+        field.setPadding(dp(PILL_PADDING_H_DP), dp(PILL_PADDING_V_DP), dp(PILL_PADDING_H_DP), dp(PILL_PADDING_V_DP))
+      }
+      TextOverlaySpec.BG_TRANSLUCENT -> {
+        field.setTextColor(theme.colors.primaryContrast)
+        field.background = backgroundPill(color, translucent = true)
+        field.setPadding(dp(PILL_PADDING_H_DP), dp(PILL_PADDING_V_DP), dp(PILL_PADDING_H_DP), dp(PILL_PADDING_V_DP))
+      }
+      else -> {
+        field.setTextColor(color)
+        field.background = null
+        field.setPadding(0, 0, 0, 0)
+      }
+    }
+  }
+
+  /**
+   * Tracks the soft keyboard height via the visible display frame (the activity
+   * runs fullscreen without adjustResize, so IME window insets never reach the
+   * layout) and keeps the swatch row pinned just above the keyboard.
+   */
+  private fun trackKeyboard(container: View) {
+    val listener = ViewTreeObserver.OnGlobalLayoutListener {
+      val visible = Rect()
+      container.getWindowVisibleDisplayFrame(visible)
+      val keyboardHeight = (container.rootView.height - visible.bottom).coerceAtLeast(0)
+      val row = swatchRow ?: return@OnGlobalLayoutListener
+      val lp = row.layoutParams as? FrameLayout.LayoutParams ?: return@OnGlobalLayoutListener
+      val target = if (keyboardHeight > dp(80)) {
+        keyboardHeight + dp(8)
+      } else {
+        navigationBarHeight() + dp(12)
+      }
+      if (lp.bottomMargin != target) {
+        lp.bottomMargin = target
+        row.layoutParams = lp
+      }
+    }
+    container.viewTreeObserver.addOnGlobalLayoutListener(listener)
+    keyboardListener = listener
+  }
+
+  // ── Small helpers (local mirrors of MediaPreviewEditor's private utilities) ──
+
+  /**
+   * Built-in drawable id → white-label icon name, so this screen's icons honour
+   * the same per-icon `resourceName` / `tintColor` config as the rest of the
+   * editor. Mirrors `MediaPreviewEditor.iconNames` for the drawables used here.
+   */
+  private val iconNames: Map<Int, String> = mapOf(
+    R.drawable.ic_close to "close",
+    R.drawable.ic_text_bg to "text_bg",
+    R.drawable.ic_text_align_left to "text_align_left",
+    R.drawable.ic_text_align_center to "text_align_center",
+    R.drawable.ic_text_align_right to "text_align_right",
+    R.drawable.ic_done to "done"
+  )
+
+  /**
+   * Sets [builtinRes] through the white-label config (host SVG → host
+   * `resourceName` → built-in) and tints it: a configured per-icon / global
+   * tint wins; a host-provided SVG keeps its OWN colours (a solid filter would
+   * flatten it); a plain glyph falls back to the dark-editor contrast colour so
+   * it stays visible. Mirrors `MediaPreviewEditor`'s resolution for this screen.
+   */
+  private fun ImageView.setThemedIcon(builtinRes: Int) {
+    val name = iconNames[builtinRes]
+    val drawable = theme.config.iconDrawable(activity, name ?: "", builtinRes)
+    setImageDrawable(drawable)
+    val tint =
+      if (name != null) {
+        theme.config.iconTintFor(name, drawable, theme.colors.primaryContrast)
+      } else {
+        theme.colors.primaryContrast
+      }
+    tint?.let { setColorFilter(it) } ?: clearColorFilter()
+  }
+
+  private fun alignBuiltinIconRes(): Int = when (alignment) {
+    Gravity.START -> R.drawable.ic_text_align_left
+    Gravity.END -> R.drawable.ic_text_align_right
+    else -> R.drawable.ic_text_align_center
+  }
+
+  /**
+   * Repaint the alignment button for the current alignment. Each of the three
+   * alignments is its own configurable icon, so the tint is re-resolved along
+   * with the drawable rather than only on first build.
+   */
+  private fun applyAlignIcon(view: ImageView) {
+    view.setThemedIcon(alignBuiltinIconRes())
+  }
+
+  private fun actionIcon(drawableRes: Int, size: Int, onClick: () -> Unit): ImageView =
+    ImageView(activity).apply {
+      setThemedIcon(drawableRes)
+      scaleType = ImageView.ScaleType.CENTER
+      setPadding(dp(4), dp(4), dp(4), dp(4))
+      setOnClickListener { onClick() }
+    }
+
+  private fun actionParams(size: Int): LinearLayout.LayoutParams =
+    LinearLayout.LayoutParams(size + dp(8), size + dp(8)).apply {
+      setMargins(dp(4), 0, dp(4), 0)
+    }
+
+  private fun View.bindDescription(key: String, default: String) {
+    contentDescription = Localization.getString(key, default)
+  }
+
+  private fun backgroundPill(base: Int, translucent: Boolean): GradientDrawable =
+    GradientDrawable().apply {
+      cornerRadius = dp(PILL_CORNER_DP).toFloat()
+      setColor(if (translucent) (base and 0x00FFFFFF) or 0x66000000 else base)
+    }
+
+  /** Black or white, whichever contrasts against [background] (WhatsApp behaviour). */
+  private fun contrastOn(background: Int): Int {
+    val r = Color.red(background)
+    val g = Color.green(background)
+    val b = Color.blue(background)
+    val luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255.0
+    return if (luminance > 0.6) Color.BLACK else Color.WHITE
+  }
+
+  private fun hideKeyboard(view: View) {
+    (activity.getSystemService(android.content.Context.INPUT_METHOD_SERVICE) as? InputMethodManager)
+      ?.hideSoftInputFromWindow(view.windowToken, 0)
+  }
+
+  private fun dp(value: Int): Int =
+    (value * activity.resources.displayMetrics.density).toInt()
+}